作为任何一款HTML5的框架，基础搭建都会相对简单，但是实际项目中我们都会基于业务进行相应架构，会做部分更改，但是为了入门，我们先从最开始的进行学习。

首先我们要下载React的核心资源库，我们可以从官方网站下载，其中包括很多Demo实例，还有React几个核心文件库。

官网： https://facebook.github.io/react/downloads.html

下面我们开始创建一个html模板文件，尝试一下这个框架的魅力吧！

<!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">
      // to do write some react code
    </script>
  </body>
</html>

看到上面的代码，我们会发现和以往不同的地方在于React使用JSX语法，这是一种XML格式的语法结构，这种语法结构是和Javascript不兼容，需要babel框架对JSX语法转换成javascript语法，让浏览器识别。

所以在项目中我们引入了browser.js, 这个babel官方提供的一个转化库。

其中React.js是最主要的核心库文件，React-dom提供了很多和dom操作相关的功能语法。加载顺序一定要注意，所有核心库文件要第一个加载。

下面我们创建一个简单的hello world 程序：

/**
 * Created by Richard on 5/28/16.
 */
var Hello = React.createClass({
    displayName:'Hello',
    render: function render(){
        return React.createElement(
            'span',
            null,
            'Hello world'
        );
    }
});

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

下面简单解释一下上面代码：

createClass方法是用来创建一个组件的通用方法，并通过内置render方法生成我们想要的view。并用createElement方法创建元素，比如P，Span, div等等。

当我们创建好一个组件之后，我们需要用ReactDom把所生成的组件渲染到index.html中，其中有两个参数，一个是Element,另一个大家比较熟悉，就是通过getElementByID获取一个dom元素。

通过如上代码，我们运行html在我们浏览器中，我会看到所产生的hello world字段。

以上的实例是使用ES5语法编写，之后我会讲解如何用ES6语法撰写React项目。

ReactJS学习系列课程2（React环境搭建）

相关文章