React进阶

首先来配置一下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','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>

效果展示：

React进阶

相关文章