React 入门示例—从Hello world开始

React是一个构建用户界面的JavaScript库，其主要目的是用于构建随着时间推移而不断变化的大规模应用。React的简单性、强表达能力、级组件化等特性，使其可以非常高效的构建用户界面。

从Hello world开始
离线转换

1. 从`Hello world`开始

下载React后。创建helloworld.html文件，文件内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/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>

这种在JavaScript中插入XML语法的方式叫做JSX。这种语法格式与JavaScript语并不兼容，因此使用type="text/babel"来指定脚本属性。

在上面的示例中，共引入了三个JS库文件：react.js、react-dom.js、browser.min.js。其中，react.js是React的核心库；react-dom.js是ReactDOM相关功能类（如：上面示中的render()方法就是这个库提供的方法，这个方法用于将JXS模块渲然为HTML）;browser.min.js用于将JSX语法转换为JavaScript语法。JSX语法转换JavaScript语法时，会比较耗时，一般会在服务器端进行转换或离线转换。

2. 离线转换

2.1 保存为独立的JS文件

首先将上面示例中的JSX语法部分保存为一个独立的JS文件，保存为src/helloword.js：

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

2.2 使用Babel模块转换

Babel是一个npm模块，执行下面命令安装模块：

npm install -g babel-cli
npm install babel-preset-react

安装完上面两个模块后就可以进行转换了（如果需要在ES6中使用，还需要安装babel-preset-es2015模块），转换命令如下：

babel --presets react src --watch --out-dir build

在上面的命令中，我们指定了转换目录src和输出目录build（更多Babel模块的使用请执行bable --help命令查看）。转换完成后，会自动生成build/helloword.js文件，该文件内容如下：

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('example'));

可以看出JSX语法已经被转换为JavsScript语法。转换后，就不再需要browser.min.js为在浏览端进行转换了。现在，你可以在现下面这样进行对其进行引用（helloworld-sep.html）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloword.js"></script>
  </body>
</html>

本文示例代码：react-demos/demo1

1. 从Hello world开始

2. 离线转换

1. 从`Hello world`开始