React 入门示例—从Hello world开始

 2016年01月19日    834     声明


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


  1. Hello world开始
  2. 离线转换


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.jsreact-dom.jsbrowser.min.js。其中,react.jsReact的核心库;react-dom.jsReactDOM相关功能类(如:上面示中的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

下一篇:React JSX语法

上一篇:React简介