JSX(網路資料收集)

2018-02-10

150
0
react
2018-08-27

JSX

JSX是一種語法糖，它讓我們可以比較直覺的撰寫React Component，而我們需要透過Babel把JSX轉譯成真正的Javascript，透過Babel也可以讓我們直接使用ES6+的語法
JSX allow us to write what looks like HTML inside of our javascript

//JSX基本寫法
const ele = <h1>Today is day</h1>;

//透過Bebel轉譯
var ele = React.createElement(
	"h1",  //HTML元素 或是 React Component，這裏是h1
	null,  // 屬性值，用物件表示，這裏沒有傳屬性
	"Today is day" // 元素子元素，這裏只有文字
);

允許使用{ }包住JavaScript Expression

function getName(){
	return "flowers";
}
const ele = <h1>Hello, {getName()}!</h1>;


function getDrink(){
	return <span>Coffe</span>;  
}
const ele = <h1>Hello, {getDrink()} </h1>

設定JSX屬性 (Attribute): attribute代入的內容可以是string，也可以是一個object。

//傳入字串
const ele1 = <div name="Hoo"/>;

//傳入物件
const ele2 = <div user={name:"Hoo", age:36} />

JSX雖然某部分跟HTML的tag element很像，但它是Javascript的延伸語法，為了和HTML屬性有所區別，React DOM在屬性的命名上採用camelCase方式。
JSX元件style設定值為一個Object

第一個{ }是表示JSX傳入Javascript Expression，

第二個{ }表示是Object。例如：

// font-size => fontSize

const ele = <div name="Hoo" style={{color: "#999", fontSize: "24"}} />

根據 React 官方定義，React 是一個構建使用者介面的 JavaScritp Library。以 MVC 模式來說，ReactJS 主要是負責 View 的部份

HTML 掌管內容結構、CSS 負責外觀樣式，JavaScript 主管邏輯互動

在 React 世界裡，所有事物都是以 Component 為基礎，將同一個 Compoent 相關的程式和資源都放在一起

1. 提供更加語意化且易懂的標籤

使用 JSX，就像 XML 語法結構一樣可以自行定義標籤且有開始和關閉，容易理解：

<MessageBox />

以 Facebook 上面按讚功能來說，若是命令式 Imperative 寫法大約會是長這樣：

if(userLikes()) {
  if(!hasBlueLike()) {
    removeGrayLike();
    addBlueLike();
  }
} else {
  if(hasBlueLike()) {
    removeBlueLike();
    addGrayLike();
  }
}

若是聲明式 Declarative 則是會長這樣：

if(this.state.liked) {
  return (<BlueLike />);
} else {
  return (<GrayLike />);
}

2. 更加簡潔

不使用 JSX 的情況（記得我們說過 JSX 是選用的）：

// React.createElement(元件/HTML標籤, 元件屬性，以物件表示, 子元件)
React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')

使用JSX

<a href="https://facebook.github.io/react/">Hello!</a>

3. 結合原生 JavaScript 語法

// const 為常數
const lists = ['JavaScript', 'Java', 'Node', 'Python'];
class HelloMessage extends React.Compoent {
  render() {
    return (
    <ul>
      {lists.map((result) => {
        return (<li>{result}</li>);
      })}
    </ul>);
  }
}

4. 標籤用法

JSX 標籤非常類似 XML ，可以直接書寫。一般 Component 命名首字大寫，HTML Tags 小寫。以下是一個建立 Component 的 class：

//自定標簽
class CoffeShop extend React.Component{
	render(){
		rutnrn(
			<div>
				<p>Morning coffe</p>
				<ReadingMorningBook />
			</div>
		);
	}
}

5. 轉換成 JavaScript

JSX 最終會轉換成瀏覽器可以讀取的 JavaScript

React.createElement(
  string/ReactClass, // 表示 HTML 元素或是 React Component
  [object props], // 屬性值，用物件表示
  [children] // 接下來參數皆為元素子元素
)

解析前（特別注意在 JSX 中使用 JavaScript 表達式時使用 { } 括起，如下方範例的 text，裡面對應的是變數。若需希望放置一般文字，請加上 ''）：

var text = 'Hello React';
<h1>{text}</h1>
<h1>{'text'}</h1>

解析完後：

var text = 'Hello React';
React.createElement("h1", null, "Hello React!");

另外要特別要注意的是由於 JSX 最終會轉成 JavaScript 且每一個 JSX 節點都對應到一個 JavaScript 函數，所以在 Component 的 render 方法中只能回傳一個根節點（Root Nodes）。例如：若有多個 <div> 要 render 請在外面包一個 Component 或 <div>、<span> 元素。

6. Boolean 屬性

在 JSX 中預設只有屬性名稱但沒設值為 true

<input type="button" disabled />;
<input type="button" disabled={true} />;

反之，若是沒有屬性，則預設為 false：

<input type="button" />;
<input type="button" disabled={false} />;

7. 擴展屬性

在 ES6 中使用 ... 是迭代物件的意思，可以把所有物件對應的值迭代出來設定屬性，但要注意後面設定的屬性會蓋掉前面相同屬性

8. 自定義屬性

若是希望使用自定義屬性，可以使用 data-：

<HelloMessage data-attr="xd" />

9. 事件處理

事件處理為前端開發的重頭戲

(Recap)

在 React 世界裡，所有事物都是以 Component 為基礎，通常會將同一個 Compoent 相關的程式和資源都放在一起，而在撰寫 React Component 時我們常會使用 JSX 的方式來提升程式撰寫效率。JSX 是一種語法類似 XML 的 ECMAScript 語法擴充，可以善用 JavaScript 的強大能力，放棄蹩腳的模版語言。當然 JSX 並非強制使用，你也可以選擇不用，因為最終 JSX 的內容會轉化成 JavaScript。

camelCase：駝峰式大小寫

引用：

https://ithelp.ithome.com.tw/articles/10184583

https://blog.techbridge.cc/2016/04/21/react-jsx-introduction/

react

回首頁

點點筆記

練功去