React进阶

强烈推荐一个大神的人工智能的教程：http://www.captainbed.net/zhanghan首先来配置一下React的环境，在网上下载react.js和react-dom.js和browser.min.js，其中react.js是react的核心库，react-dom.js是提供与Dom相关的功能，browser.min.js是负责将JSX转换为javascrip...

环游记

20445人浏览 · 2017-05-28 19:56:12

环游记 · 2017-05-28 19:56:12 发布

强烈推荐一个大神的人工智能的教程：http://www.captainai.net/zhanghan

首先来配置一下React的环境，在网上下载react.js和react-dom.js和browser.min.js，其中react.js是react的核心库，react-dom.js是提供与Dom相关的功能，browser.min.js是负责将JSX转换为javascript。

JSX:javascript XML，看起来就像是在javascript中直接写了XML，直接使用javascript可以吗？是可以的，那为什么要用JSX语法呢？举个例子，对比一下你就会发现了：

//使用JSX
React.render(
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
);
 
//不使用JSX
React.render(
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
);

1.Hello World（入门必备啊）

<!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">
      ReactDOM.render(
        <h1>Hello World!!!</h1>,
        document.getElementById('example')
      );
    </script>
</body>
</html>

效果展示：