React入门--------JSX

React学习网站

React官方英文网站:http://reactjs.cn/react/docs/top-level-api.html

React官方中文网站:http://www.css88.com/react/docs/getting-started.html

阮一峰关于React的网站:http://www.ruanyifeng.com/blog/2015/03/react.html

极客学院:http://wiki.jikexueyuan.com/project/react/animation.html

简单的入门文章:http://www.tuicool.com/articles/eQ3yQzi

一、html模板

使用React的网页源码,结构大致如下:

    <!DOCTYPE html>
    <html>
      <head>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          // ** Our code goes here! **
        </script>
      </body>
    </html>

1、上面代码一共用了三个库:react.js、react-dom.js和browser.min.js。它们必须首先加载。其中,react.js是React的核心库,react-dom.js是提供与DOM相关的功能,browser.min.js的作用是将JSX语法转化为JS语法。

2、如果使用了jsx语法,那么script标签的type属性必须为text/babel。

二、JSX语法

html语言直接写在js语言中,不加任何引号,就是jsx的语法。

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

上面代码体现了jsx的基本语法规则:遇到html标签,就用html规则解析;遇到代码块(以{开头),就用js规则解析。

jsx允许直接在模板插入js变量。如果这个变量是一个数组,则会展开这个数组的所有成员。

    var arr = [
      <h1>Hello world!</h1>,
      <h2>React is awesome</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
      document.getElementById('example')
    );
原文地址:https://www.cnblogs.com/yddlvo/p/6211031.html