《React極簡教程》第二章ReactJSX

程式設計師詩人發表於2017-03-19
ReactJS

React JSX

Why JSX?
You don`t have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.

JSX語法，像是在Javascript程式碼裡直接寫XML的語法，實質上這只是一個語法糖，每一個XML標籤都會被JSX轉換工具轉換成純Javascript程式碼，React 官方推薦使用JSX， 當然你想直接使用純Javascript程式碼寫也是可以的，只是使用JSX，元件的結構和元件之間的關係看上去更加清晰。

我們寫一個XML標籤，實質上就是在呼叫React.createElement這個方法，並返回一個ReactElement物件。

例項

<!DOCTYPE html>
<html>
<head>
    <meta charset=`utf-8`>
    <meta charset=`utf-8`>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="東海陳光劍 光劍部落格 Free Ebook 免費電子書 免費epub電子書 電子書大全 電子書下載 光劍免費圖書館 全球免費開放的電子圖書館 東海陳光劍的部落格">

    <!--<link href=`https://fonts.googleapis.com/css?family=Architects+Daughter` rel=`stylesheet` type=`text/css`>-->
    <link href=`../public/css/font.css` rel=`stylesheet` type=`text/css`>


    <link rel="stylesheet" href="../public/css/style.css" media="screen" type="text/css">
    <link rel="stylesheet" href="../public/css/print.css" media="print" type="text/css">

    <link rel="shortcut icon" href="../favicon.ico">


    <title>陳光劍的個人網站 - Jason Chen`s Personal Website</title>

    <!-- jQuery 2.2.3 -->
    <script src="../public/plugins/jQuery/jquery-2.2.3.min.js"></script>

    <!-- Bootstrap 3.3.6 -->
    <script src="../public/bootstrap/js/bootstrap.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../public/bootstrap/css/bootstrap.min.css">

    <!-- BootstrapDialog -->
    <link href="../public/components/bootstrap3-dialog/bootstrap-dialog.min.css" rel="stylesheet" type="text/css"/>
    <script src="../public/components/bootstrap3-dialog/bootstrap-dialog.min.js"></script>


    <!-- React -->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

    <script type="text/babel" src="../public/js/sidebar.js"></script>
    <script type="text/babel" src="../public/js/header.js"></script>
    <script src="../public/js/jason.js"></script>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?bb529e2f4fa35aeb3b07ca2e09b4ef7c";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


</head>

<body>

<div id="header"></div>

<div id="content-wrapper">
    <div class="inner clearfix">
        <section id="main-content">

            <div id="helloWorld2"></div>

            <div style="padding: 2em; text-align: center;font-size: 2em"><a
                    href="http://www.jianshu.com/p/3a9f916d930d" target="_blank">React極簡教程:Hello,World</a></div>

            <div id="helloWorld"></div>
            <div id="notUseJSX"></div>

        </section>
        <div id="sidebar"></div>
    </div>
</div>


<script type="text/javascript">
    function sayHelloWorld() {
        BootstrapDialog.show({
            title: `React Demo`,
            message: `使用 JSX ! 現在時間是:` + new Date(),
            type: BootstrapDialog.TYPE_DEFAULT,
            closable: false,
            cssClass: `dialog_mar`,
            buttons: [{
                label: `確認`,
                cssClass: `con_btn`,
                action: function (dialogRef) {
                    dialogRef.close();
                    location.reload();
                }
            }, {
                label: `取消`,
                action: function (dialogRef) {
                    dialogRef.close();
                }
            }]
        });

    }
</script>

<!--使用 JSX 例子-->
<script type="text/babel">
    var HelloWorld = React.createClass({
        getInitialState: function () {
            return {};
        },
        sayHello: function () {
            sayHelloWorld();
        },
        render: function () {

            var helloWorldStyle = {
                textAlign: `center`,
                padding: `4em`
            };

            var btnStyle = {
                padding: `1.5em`,
                fontSize: `1.5em`
            };

            return (
                    <div style={helloWorldStyle}>
                        <button onClick={this.sayHello} style={btnStyle}>使用 JSX !</button>
                    </div>
            );
        }
    });

    ReactDOM.render(<HelloWorld/>, document.getElementById(`helloWorld`));

    //    var helloWorld2=ReactDOM.render(<h1>Hello,World!</h1>, document.getElementById("helloWorld2"));

    var HelloWorld2 = React.createClass({
        render: function () {
            var helloWorld2Style = {
                textAlign: `center`
            };

            return (<h1 style={helloWorld2Style}>React JSX</h1>);
        }
    });

    ReactDOM.render(<HelloWorld2/>, document.getElementById("helloWorld2"));

    ReactDOM.render(
        React.createElement(`h1`, null ,`沒使用 JSX !`),
        document.getElementById(`notUseJSX`)
    );

</script>



</body>
</html>

React.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

建立並返回一個新的指定型別的 ReactElement。type 引數可以是一個 html 標籤名字字串（例如，“div”，“span”，等等），或者是 ReactClass （通過 React.createClass 建立的）。

React JSX將類似XML的語法轉化到原生的JavaScript，元素的標籤、屬性和子元素都會被當作引數傳給React.createElement方法.

程式碼例項

#JSX
var Nav;
var app = <Nav color="blue" />;
 
#native JS
var Nav;
var app = React.createElement(Nav, {color:"blue"});


//使用JSX
React.render(
    <label className="xxx" htmlFor="input">content</label>,
    document.getElementById(`example`)
);
 
//不使用JSX
React.render(
    React.createElement(`label`, {className: `xxx`, htmlFor: `input`}, `content`),
    document.getElementById(`example`)
);

有對應的 JSX –JS 轉化器。

一切皆是對映。（光劍）

React 使用 JSX 來替代常規的 JavaScript。

JSX 是一個看起來很像 XML 的 JavaScript 語法擴充套件。

我們不需要一定使用 JSX，但它有以下優點：

JSX 執行更快，因為它在編譯為 JavaScript 程式碼後進行了優化。
它是型別安全的，在編譯過程中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。

使用 JSX
JSX 看起來類似 HTML ，我們可以看下例項:

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(`example`));

我們可以在以上程式碼中巢狀多個 HTML 標籤，需要使用一個 div 元素包裹它，例項中的 p 元素新增了自定義屬性 data-myattribute，新增自定義屬性需要使用 data- 字首。
React 例項

ReactDOM.render( 
<div> 
<h1>菜鳥教程</h1> 
<h2>歡迎學習 React</h2> 
<p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p> 
</div> , document.getElementById(`example`));

嘗試一下 »

獨立檔案

你的 React JSX 程式碼可以放在一個獨立檔案上，例如我們建立一個 helloworld_react.js
檔案，程式碼如下：

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(`example`));

然後在 HTML 檔案中引入該 JS 檔案：
React 例項

<body> <div id="example"></div><script type="text/babel" src="helloworld_react.js"></script></body>

嘗試一下 »

JavaScript 表示式

我們可以在 JSX 中使用 JavaScript 表示式。表示式寫在花括號 {} 中。例項如下：
React 例項

ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById(`example`));

嘗試一下 »
在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表示式來替代。以下例項中如果變數 i 等於 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.
React 例項

ReactDOM.render( <div> <h1>{i == 1 ? `True!` : `False`}</h1> </div> , document.getElementById(`example`));

嘗試一下 »

樣式

React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設定內聯樣式. React 會在指定元素數字後自動新增 px 。以下例項演示了為 h1 元素新增 myStyle 內聯樣式：
React 例項

var myStyle = { fontSize: 100, color: `#FF0000`};ReactDOM.render( <h1 style = {myStyle}>菜鳥教程</h1>, document.getElementById(`example`));

嘗試一下 »
註釋
註釋需要寫在花括號中，例項如下：
React 例項

ReactDOM.render( <div> <h1>菜鳥教程</h1> {/*註釋...*/} </div>, document.getElementById(`example`));

嘗試一下 »

陣列

JSX 允許在模板中插入陣列，陣列會自動展開所有成員：
React 例項

var arr = [ <h1>菜鳥教程</h1>, <h2>學的不僅是技術，更是夢想！</h2>,];

ReactDOM.render( <div>{arr}</div>, document.getElementById(`example`));

嘗試一下 »

HTML 標籤 vs. React 元件

React 可以渲染 HTML 標籤 (strings) 或 React 元件 (classes)。
要渲染 HTML 標籤，只需在 JSX 裡使用小寫字母的標籤名。

var myDivElement = <div className="foo"/>;

ReactDOM.render(myDivElement, document.getElementById(`example`));

要渲染 React 元件，只需建立一個大寫字母開頭的本地變數。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;

ReactDOM.render(myElement, document.getElementById(`example`));

React 的 JSX 使用大、小寫的約定來區分本地元件的類和 HTML 標籤。

注意:

由於 JSX 就是 JavaScript，一些識別符號像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className和 htmlFor
來做對應的屬性。

html屬性 jsx關鍵字
class className
for htmlFor


相關文章