挑战 React 第五篇

实作範例

在了解什么是jsx前，我们先来看实作範例，以下有两个index.html档案的程式码，差异在于有没有编译成浏览器看得懂得javascript。

成功印出Ｈ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>

成功範例

失败什么也没印出 (<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?

在下面这个範例中，宣告一个 name 的变数，并在 JSX 中透过将其名称包在大括号中使用：

const name = 'Tom Chen';const element = <h1>Hello, {name}</h1>;ReactDOM.render(  element,  document.getElementById('root'));

在 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>打开浏览器实际画面

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，程式码简洁许多，推推！！！