React + ES6环境搭建与第一个应用

最近也在学习React、Angular、Vue等这类的MV*应用,感觉React+ES6写的时候很爽,所以就分享给大家。

首先,我们先从React的官网上把React和所依赖的包都下载过来。http://facebook.github.io/react/

下载完之后,应该是有这么多js文件的:

第一个React+ES6的页面

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <title>Hello React</title>
  </head>
  <body>
    <h1>Hello React</h1>
    <div id="container">
    </div>
<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.24/browser.min.js"></script>

<script type="text/babel" src="app.js"></script>

 </body>
</html>

我们可以看到,里面应用了browser.min.js,这个是干什么的呢?很简单,这是使浏览器支持ES6写法,下面的script直接应用了text/babel,但这种方法是不推荐的,这只是为了演示方便,所以我们采用这种方法,后续我们会讲React服务端渲染的文章。

接着,我们需要有一个本地的服务器才能访问,这里推荐使用browser-sync，无需手动刷新浏览器,保存的时候,它直接会帮你刷新http://www.browsersync.cn/

在根目录下创建package.json文件(利用npm init 或者直接创建),把下面的内容复制进去,然后执行npm i 或者npm install 把包都下载进来,然后npm run build 即可创建一个本地服务器和监听你的文件变化以自动刷新浏览器。

{
  "name": "reactdemos","version": "1.0.0","description": "reactdemos","main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","build": "browser-sync start --server --files *.* "

  },"author": "sunyuan","license": "ISC","devDependencies": {
    "browser-sync": "^2.12.3"
  }
}

所以,现在我们的目录结构是这样的:

最后,我们来创建一下app.js

class WorldMessage extends React.Component{
    render(){
        return (
            <div>
                Hello!{this.props.name}
            </div>
        )
    }
}
   var container = document.getElementById('container');
  ReactDOM.render(<WorldMessage name="world"/>,container);

弄完之后,保存,直接观察浏览器即可看到:

构造方法,必须调用super()

class WorldMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            name:"sunyuan"
        }
    }

    render(){
        return (
            <div>
                Hello!{this.state.name}
            </div>
        )
    }
}

   var container = document.getElementById('container');
  ReactDOM.render(<WorldMessage name="world"/>,container);

保存之后,就会变成Hello!sunyuan

组件的嵌套

class HelloMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            name:"hello"
        }
    }

render(){
        return (
            <div>
                {this.state.name}
            </div>  
        )
    }
}

class WorldMessage extends React.Component{
    constructor(){
        super();
        this.state = {
            name:"sunyuan"
        }
    }

render(){
    return (
        <div>
            {this.state.name}
        </div>
    )
}
}

class Message extends React.Component{
    render(){
        return (
            <div>
                <HelloMessage />
                <WorldMessage />
            </div>
        )
    }
}

  var container = document.getElementById('container');
  ReactDOM.render(<Message />,container);

组件之间的嵌套很简单,在render方法里return的时候,外面是一个大容器包括里面的所有组件就行了,所以效果是这样的:

给大家推荐一些学习的资源

Facebook官方React网站: http://facebook.github.io/react
React中文社区: http://react-china.org/
React：引领未来的用户界面开发框架：
http://product.dangdang.com/23698383.html
React实战入门:
http://study.163.com/course/courseMain.htm?courseId=1565012