ReactJS学习系列课程2(React环境搭建)

前端之家收集整理的这篇文章主要介绍了ReactJS学习系列课程2(React环境搭建)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的React相关文章