挑戰 React 第五篇

實作範例

在了解什麼是jsx前，我們先來看實作範例，以下有兩個index.html檔案的程式碼，差異在於有沒有編譯成瀏覽器看得懂得javascript。

1. 成功印出Ｈello World! (<script type="text/babel">)

Babel可以處理ES6的所有新語法，並且內置了React JSX擴展，因此透過BABEL編譯 JSX最終會轉換成瀏覽器可以讀取的 JavaScript

<!--要插入內容的DOM-->
<div id="root"></div>

<!--react-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--Babel-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>

<!--若有設定type="text/babel"-->
<script type="text/babel">
// 建立一個DOM物件
let element = <h1>Hello, world!</h1>

// 使用ReactDOM.render把剛建立的物件element插入目標DOM中
ReactDOM.render(
  element,
  document.getElementById('root')
);
</script>

成功範例

2. 失敗什麼也沒印出 (<script type="text/javascript">)

javascript 看不懂 jsx

<!--要插入內容的DOM-->
<div id="root"></div>

<!--react-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--Babel-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>

<!--若設定type=js-->
<script type=text/javascript>
// 建立一個DOM物件
let element = <h1>Hello, world!</h1>

// 使用ReactDOM.render把剛建立的物件element插入目標DOM中
ReactDOM.render(
  element,
  document.getElementById('root')
);
</script>

失敗範例

什麼是 JSX?

const element = <h1>你好，世界！</h1>;

React 官方說明

不是一個字串也不是 HTML，上面那個語法叫做 JSX，是一個 JavaScript 的語法擴充。React 官方推薦我們在寫 React 的時候透過這個語法來寫 View 的部分。

而自己覺得它可以在使用React的時候讓程式碼更加簡潔。

如何使用 Jsx?

1. 在下面這個範例中，宣告一個 name 的變數，並在 JSX 中透過將其名稱包在大括號中使用：

const name = 'Tom Chen';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

2. 在 JSX 的大括號中寫入任何合法的 JavaScript expression

舉例

<script type=text/babel>
function formatName(user) {
  return user.firstName+ ' ' + user.lastName;
}

const user = {
  firstName: 'Tom',
  lastName: 'Chen'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

// 使用ReactDOM.render把剛建立的物件element插入目標DOM中
ReactDOM.render(
  element,
  document.getElementById('root')
);
</script>

打開瀏覽器實際畫面

3. JSX 本身也是 Expression

新增一個 getGreeting function作為範例，在編譯之後，JSX expressions 就變成了一般的 JavaScript function 呼叫並回傳 JavaScript 物件。

<script type=text/babel>
function formatName(user) {
  return user.firstName+ ' ' + user.lastName;
}

function getGreeting(user) {
  //若有使用者顯示全名，否則顯示Stranger
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

const user = {
  firstName: 'Tom',
  lastName: 'Chen'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

// 使用ReactDOM.render把剛建立的物件element插入目標DOM中
ReactDOM.render(
  element,
  document.getElementById('root')
);
</script>

React 不使用 Jsx 可以嗎？

可以，但有jsx程式碼的可讀性會高很多。

下面這兩個例子完全相同，Babel 將 JSX 編譯為呼叫 React.createElement() 的程式：

const element = (
  <h1 id='title'>
    Hello, Tom!
  </h1>
);

// React.createElement(元件/HTML標籤, 元件屬性，以物件表示, 子元件)
const element = React.createElement(
  'h1',
  {id: 'title'},
  'Hello, Tom!'
);

學習心得

照著官網實際範例做一次，了解了 Jsx 怎麼轉換成 javascript 跟為什麼要使用 jsx。之前看同事的code review，有點半了解的感覺，但真正實際操作過後，終於了解為什麼React官方要推薦使用jsx，程式碼簡潔許多，推推！！！