React系列——快速开始Hello World

1、创建项目文件夹

npm  init // 初始化npm配置文件

2、依赖环境

在项目根目录下打开命令窗口下载react和react-dom依赖

npm install react react-dom --save

3、创建目录结构

4、Hello World

看官网英文官网首页的效果：http://facebook.github.io/react/index.html

Var React=require(‘react’);
Var ReactDOM=require(‘react-dom’);

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
 
ReactDOM.render(<HelloMessage name="John" />, mountNode);

5、代码编译方式（语法转换）

因为现在都是使用jsx和es6，所以我们需要对js代码进行编译。

       编译转换有分为浏览器中转换和离线转换，但是基本上公司不会用在浏览器中引入转换js转换，所以我们只介绍离线转换

5.1、 react-tools转换

这是react自己提供的，而且是老版本的，因为中文官网还是老版本的api，所以介绍的是这种方式。

npm install -g react-tools // 首先安装依赖

 

jsx  --watch  src/  build/  // 用命令进行转换，有兴趣的大家自己看一下jsx -h

参考地址：http://reactjs.cn/react/docs/getting-started.html

5.2、babel转换

英文官网的文档比较新，已经推荐使用babel来进行转换

1、下载依赖

npm install --global babel-cli   // 安装babel
npm install babel-preset-react  -dev--save// 安装babel转换jsx的包
npm install babel-preset-es2015 -dev--save// 安装babel转化ES6的包

npm install –dev  //从github上下载之后运行这句才能下载开发依赖

2、运行命令进行编译

babel --presets react src --watch --out-dir build  // 更多命令可运行babel –h查看或者官网

3、将编译之后的js文件在index.html文件中引入

5.3、 Gulp-react

https://github.com/sindresorhus/gulp-react

5.4、 Webpack（我们用这种）

请查看webpack的文章