05、React系列之--永不过时的Hello world

目录：

• 1、快速创建工具
• 2、[不使用工具，一步步来写Hello World](#2、不使用工具，一步步来写Hello World)
• 3、单个组件

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-result.png

在这里我们不使用任何的快速开发的框架或工具，我们按照官方一步步来做一个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

代码如下:

hello-world.png

注意图中的黄色框，就是我们在html中所添加的代码，我们双击index.html就可以看到最初上面的效果图了。

3、解析一下

• 1、导入需要的js

首先我们要写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,代码如下：