《React極簡(jiǎn)教程》第二章 React JSX

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語(yǔ)法，像是在Javascript代碼里直接寫(xiě)XML的語(yǔ)法，實(shí)質(zhì)上這只是一個(gè)語(yǔ)法糖，每一個(gè)XML標(biāo)簽都會(huì)被JSX轉(zhuǎn)換工具轉(zhuǎn)換成純Javascript代碼，React 官方推薦使用JSX， 當(dāng)然你想直接使用純Javascript代碼寫(xiě)也是可以的，只是使用JSX，組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加清晰。

我們寫(xiě)一個(gè)XML標(biāo)簽，實(shí)質(zhì)上就是在調(diào)用React.createElement這個(gè)方法，并返回一個(gè)ReactElement對(duì)象。

實(shí)例

<!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 免費(fèi)電子書(shū) 免費(fèi)epub電子書(shū) 電子書(shū)大全 電子書(shū)下載 光劍免費(fèi)圖書(shū)館 全球免費(fèi)開(kāi)放的電子圖書(shū)館 東海陳光劍的博客">

    <!--<link  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>陳光劍的個(gè)人網(wǎng)站 - 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.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.itdecent.cn/p/3a9f916d930d" target="_blank">React極簡(jiǎn)教程: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 ! 現(xiàn)在時(shí)間是:' + new Date(),
            type: BootstrapDialog.TYPE_DEFAULT,
            closable: false,
            cssClass: 'dialog_mar',
            buttons: [{
                label: '確認(rèn)',
                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 ,'沒(méi)使用 JSX !'),
        document.getElementById('notUseJSX')
    );

</script>



</body>
</html>

React.createElement

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

創(chuàng)建并返回一個(gè)新的指定類(lèi)型的 ReactElement。type 參數(shù)可以是一個(gè) html 標(biāo)簽名字字符串（例如，“div”，“span”，等等），或者是 ReactClass （通過(guò) React.createClass 創(chuàng)建的）。

React JSX將類(lèi)似XML的語(yǔ)法轉(zhuǎn)化到原生的JavaScript，元素的標(biāo)簽、屬性和子元素都會(huì)被當(dāng)作參數(shù)傳給React.createElement方法.

代碼實(shí)例

#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')
);

有對(duì)應(yīng)的 JSX --JS 轉(zhuǎn)化器。

一切皆是映射。（光劍）

React 使用 JSX 來(lái)替代常規(guī)的 JavaScript。

JSX 是一個(gè)看起來(lái)很像 XML 的 JavaScript 語(yǔ)法擴(kuò)展。

我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：

JSX 執(zhí)行更快，因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化。
它是類(lèi)型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。
使用 JSX 編寫(xiě)模板更加簡(jiǎn)單快速。

使用 JSX
JSX 看起來(lái)類(lèi)似 HTML ，我們可以看下實(shí)例:

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

我們可以在以上代碼中嵌套多個(gè) HTML 標(biāo)簽，需要使用一個(gè) div 元素包裹它，實(shí)例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性需要使用 data- 前綴。
React 實(shí)例

ReactDOM.render( 
<div> 
<h1>菜鳥(niǎo)教程</h1> 
<h2>歡迎學(xué)習(xí) React</h2> 
<p data-myattribute = "somevalue">這是一個(gè)很不錯(cuò)的 JavaScript 庫(kù)!</p> 
</div> , document.getElementById('example'));

嘗試一下 ?

獨(dú)立文件

你的 React JSX 代碼可以放在一個(gè)獨(dú)立文件上，例如我們創(chuàng)建一個(gè) helloworld_react.js
文件，代碼如下：

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

然后在 HTML 文件中引入該 JS 文件：
React 實(shí)例

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

嘗試一下 ?

JavaScript 表達(dá)式

我們可以在 JSX 中使用 JavaScript 表達(dá)式。表達(dá)式寫(xiě)在花括號(hào) {} 中。實(shí)例如下：
React 實(shí)例

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

嘗試一下 ?
在 JSX 中不能使用 if else 語(yǔ)句，但可以使用 conditional (三元運(yùn)算) 表達(dá)式來(lái)替代。以下實(shí)例中如果變量 i 等于 1 瀏覽器將輸出 true, 如果修改 i 的值，則會(huì)輸出 false.
React 實(shí)例

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

嘗試一下 ?

樣式

React 推薦使用內(nèi)聯(lián)樣式。我們可以使用 camelCase 語(yǔ)法來(lái)設(shè)置內(nèi)聯(lián)樣式. React 會(huì)在指定元素?cái)?shù)字后自動(dòng)添加 px 。以下實(shí)例演示了為 h1 元素添加 myStyle 內(nèi)聯(lián)樣式：
React 實(shí)例

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

嘗試一下 ?
注釋
注釋需要寫(xiě)在花括號(hào)中，實(shí)例如下：
React 實(shí)例

ReactDOM.render( <div> <h1>菜鳥(niǎo)教程</h1> {/*注釋...*/} </div>, document.getElementById('example'));

嘗試一下 ?

數(shù)組

JSX 允許在模板中插入數(shù)組，數(shù)組會(huì)自動(dòng)展開(kāi)所有成員：
React 實(shí)例

var arr = [ <h1>菜鳥(niǎo)教程</h1>, <h2>學(xué)的不僅是技術(shù)，更是夢(mèng)想！</h2>,];

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

嘗試一下 ?

HTML 標(biāo)簽 vs. React 組件

React 可以渲染 HTML 標(biāo)簽 (strings) 或 React 組件 (classes)。
要渲染 HTML 標(biāo)簽，只需在 JSX 里使用小寫(xiě)字母的標(biāo)簽名。

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

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

要渲染 React 組件，只需創(chuàng)建一個(gè)大寫(xiě)字母開(kāi)頭的本地變量。

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

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

React 的 JSX 使用大、小寫(xiě)的約定來(lái)區(qū)分本地組件的類(lèi)和 HTML 標(biāo)簽。

注意:

由于 JSX 就是 JavaScript，一些標(biāo)識(shí)符像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className和 htmlFor
來(lái)做對(duì)應(yīng)的屬性。

html屬性 jsx關(guān)鍵字
class className
for htmlFor
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容