目录：
1、快速创建工具
我们可以通过好多种方式来创造react项目，比如官方说的Create React App(要求是Node4或以上版本)，可以通过npm工具来安装
npm install -g create-react-app
然后创建一个项目
create-react-app my-app
cd my-app
最后可以通过
npm start || npm test || mpm run build
等命令来启动服务等，具体请看官方文档
note: 创建React项目不止这一个工具,有非常多的，比如jspm等这里不一一说明了。
2、不使用工具，一步步来写Hello World
先来看效果
在这里我们不使用任何的快速开发的框架或工具，我们按照官方一步步来做一个Hello World的React Demo
1、步骤
- 1、下载Download Starter Kit 15.3.2 包。地址http://reactjs.cn/react/downloads.html
- 2、把其中的build文件夹copy到自己要写的Hello world项目中
- 3、手动添加所需要的js
2、开始Hello World
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>hello world</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
注意图中的黄色框，就是我们在html中所添加的代码，我们双击index.html就可以看到最初上面的效果图了。
3、解析一下
- 1、导入需要的js
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
首先我们要写react，那么就要引入react.js,react-dom.js不多说这个，那么第三个bable是什么东东，它就是一个js的解释器，把es6的语法(新语法)转化成现在的浏览器中就可以用(而不用等浏览器去支持)
- 2、ReactDOM.render()方法
ReactDOM.render方法有两个参数 ，第一个是组件，第二个是组件要显示的位置，调用这个方法就可以把组件渲染到指定的dom节点上了
怎么样，简单吧，就是这么简单，那么下来我们玩点稍微高级一点的
3、单个组件
我们知道React是组件的世界，我们写的Hello World 还没有任没看组件的出现，那么我们把Hello world写成一个组件
在上面的Hello world代码中，我们只修改body中的script,代码如下：
<script type="text/babel">
//使用ES5的写法
/**
var HelloWord = React.createClass({
render:function(){
return(
<div>
<h1>hello world ES5</h1>
</div>
) ;
}
});
*/
//使用ES6的写法
class HelloWord extends React.Component{
render(){
return(
<div>
<h1>hello world ES6</h1>
</div>
);
}
}
ReactDOM.render(
<HelloWord />,
document.getElementById('example')
);
以上我们把HelloWord写成了一个插件，并且采用两种写法，这两种写法输出是一毛一样的，只不过一个是使用了ES5的写法，一个使用了ES6的写法(建议，先使用ES5，了解了ES5再使用ES6(目前来说好多项目或教程还是采用ES5的居多))
解释一下
- 1、我们以ES5为例来说，首先是创建一个React类，这样创建了一个组件
var HelloWord = React.createClass({
.....
});
- 2、组件显示什么内容，以及如何显示，组件的render()方法上场了
render(){
return(
<div>
...
</div>
) ;
}
Note:这里要注意一点就是return()方法只能且必须有一个根节点(比如上面的div)，在根结点中，你可以任意的嵌套。
本篇文单所对应的demo地址
https://github.com/TigerChain/react-lesson/tree/master/lesson01/03-helloworld
下一节
下一节，我们看看如何使用browserify管理React，如何打包，如何自动刷新浏览器等等
