最近也在学习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.htmlReact实战入门:
http://study.163.com/course/courseMain.htm?courseId=1565012
