作为任何一款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项目。