作为任何一款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项目。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。