iT邦幫忙

0

照著React官方網站學習JSX

挑戰 React 第五篇

實作範例

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

  1. 成功印出Hello 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>

成功範例

  1. 失敗什麼也沒印出 (<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')
);
  1. 在 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>

打開瀏覽器實際畫面

  1. 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程式碼的可讀性會高很多。

下面這兩個例子完全相同,BabelJSX 編譯為呼叫 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,程式碼簡潔許多,推推!!!


尚未有邦友留言

立即登入留言