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

《React极简教程》第二章 React JSX

React JSX

React.createElement

独立文件

JavaScript 表达式

样式

数组

HTML 标签 vs. React 组件

注意:

热门文章

最新文章

相关课程

相关电子书

相关实验场景