React入门教程第一课--从零开始构建项目

工欲善其事必先利其器，如今的node环境下，有太多好用的工具可以帮助咱们更好的开发和维护管理项目。

我本人不建议什么功能都本身写，我比较喜欢代码复用。只要能找到npm包来实现的功能，坚定不本身敲代码。

本次编写程序的两个原则：一、尽可能使用声明式的编程风格（声明式和命令式，不是很清楚的本身查查资料）二、能复用的决不本身编写。

任何多余的繁琐的行为都是错误的

本次编写架构的目的：简单好用易开发易管理。（项目是变想变建立的，可能须要后续的不断优化。你们尽可能做为学习材料参考，也可直接用于项目，反正我本身是直接先用的，后续有问题再优化就是了，额）

长话短说:这是一个关于React的系列新手教程。在项目中有不少其余的工具和框架能够选择，我在这个教程里直接选择我本身喜欢的，

大家能够根据本身的使用习惯选择相近的可替代的框架。

1、首先咱们先建立一个文件夹，在你喜欢的任意位置新建一个文件夹--如：OniReact

在其目录下建立个子目录（建立顺序按照首字母排序）

·OniReact/build:用于存放编译后的js文件和项目启动的html

·OniReact/image:用于存放项目所使用到的图片资源

·OniReact/mock:用于存放本地构建的Json文件，用于本地数据调试

·OniReact/source:用于存放全部的JavaScript的源文件

·OniReact/style:用于存放项目中使用的全部css、less、sass（本项目使用sass）

2、接下来在OniReact/source目录下建立二级子目录

·OniReact/source/components:用于存放本身编写的React组件

·OniReact/source/custom:用于存放自定义的实际项目中所须要的Store、Action等文件（能够理解为逻辑控制器、这次用到的是Flux，集体后面会讲到）

·OniReact/source/utils:用于存放封装好通用的Store、Action、Http请求等文件（用于存放一些用具类，后面会讲解到为何将Store、Action分为两部分）

·OniReact/source/webpage:用于存放页面（页面可有上面编写的组件组合而成，也可全新编写）

这样子基本上全部的目录都建立完毕了。

以上文件夹只是初期的预想，根据其余框架的开发经验假想出来的，后续可能须要更改或者调整。

3、建立相关文件

建立项目启动入口，在OniReact/source目录下建立app.js

·OniReact/source/app.js:用于应用程序的入口

建立package.json

package.json是npm命令（不知道什么是npm的也本身查查资料，我这里不详细讲node的内容）执行须要的文件，能够用来管理和存储咱们所须要的npm包。

将依赖包存储在package.json里面，可使用npm install命令来自动安装依赖包。（拷贝项目或者分享项目的时候不须要负责依赖包，在拷贝完成以后执行自动安装便可）

4、初始化npm包（每个提交到npm上面的项目被称做一个包，虽然咱们不提交，可是也用包来形容）（全部的命令行相关都是win环境，ios的请自行查阅）

cd OniReact (必定要确认此时处在OniReact目录下，最简单的方式就是在OniReact下按住Shift键加鼠标右键选择“在此处打开命令窗口”)

$ npm init  ($表示在命令行中键入，如此处为输入npm init，后续教程中，再也不说明)

执行的时候须要输入一些数据，也能够不输入，有兴趣的能够每一步都看一下，通常让输入项目名、做者之类的，反正一直回车也能够，

全部的数据能够后续打开自动生成的package.json文件查看。（所有默认会生成以下内容）

{
  "name": "OniReact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"  },
  "author": "",
  "license": "ISC" }

使用编程工具打开项目，我使用的是WebStorm。

5、选择打包工具-Browserify（关于说明和详细用法可查看官网http://browserify.org）

简而言之就是使用它来打包，将全部使用到的模块打包成一个可让前段浏览器执行的js文件。

cd OniReact

$ npm install --save-dev browserify (--save-dev参数表示将该模块存储到package.json中，后续不作说明)

（警告忽略，错误须要处理，全部的命令行执行都是这样）

安装完成会在package.json中插入（添加--save-dev参数会被保存）

"devDependencies": {
  "browserify": "^13.1.0" }

在项目目录中会自动建立一个名叫node_modules的子目录，用于存放本地依赖的模块。（注意在使用git或者svn时，不要上传这个目录）

这里提一个细节，若是使用的开发工具是WebStorm，能够在界面的最下方打开Terminal。至关于在项目当前目录下执行的命令窗口。

使用它有几个明显优势一、不须要再开启一个黑窗口。二、可使用复制黏贴（cmd这个功能很差用，特别是安装出错复制log的时候）。三、直接就在当前目录下，不须要一直cd。

6、选择构建工具---gulp（http://gulpjs.com）

这个工具很强大，一两句话说不完，后续用到什么，什么详细说明。其余功能请参考官网。

cd OniReact

$ npm install --save-dev gulp （在Terminal中执行以下图，后续再也不作截图）

 gulp不只仅做为运行依赖，还做为开发依赖，因此须要将它安装到全局：

cd OniReact

$ npm install -g gulp 

执行如下命令检测安装时候完成。

cd OniReact

$  gulp 

这里有个警告：没有找到gulpfile.

若是说package.json是npm包的元数据文件，那么gulpfile.js能够理解为gulp项目的元数据文件。（这么理解吧，我也不知道对不对）

它主要用来定义gulp任务，告诉gulp他须要作些什么事情，怎么作。能够理解为一个配置文件也能够。

7、选择解析工具--babelify

因为React使用的是JSX的语法，浏览器是不能直接运行的。babelify能够帮助咱们解析jsx语法。

cd OniReact

$ npm install --save-dev babelify

8、建立gulpfile.js

前面提到的都是工具的安装，如今开始使用这些工具。

cd OniReact 在OniReact目录下建立gulpfile.js

键入如下内容：

var gulp = require('gulp');
gulp.task('default', function () {
    console.log("执行gulp默认任务");
});

而后执行

cd OniReact
$ gulp

这里task定义了一个gulp的任务，当在执行gulp时会默认执行default，若要执行其余的任务可使用$ gulp taskName 如此处使用gulp default将执行同样的内容

接下来编写真正的项目可用的gulp任务。

这里先安装vinyl-source-stream,它使得咱们可以同时使用browserify和gulp。（详细查看www.npmjs.com/package/vinyl-source-stream）

cd OniReact

$ npm install --save-dev vinyl-source-stream

在gulpfile.js中修改：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('default', function () {
    return browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .pipe(source('oni.js'))
        .pipe(gulp.dest('./build/'))
});

简单说明：使用browserify从app.js，同时会根据require的关联关系，加入其它的文件，再其它文件中也会加入关联文件。

                   使用babelify解析jsx

                   编译

                  输出文件名

                   输出路径

执行下面命令：

cd OniReact

$ gulp

会在build下生成一个oni.js文件。当前只有模块的内容，代码都是混淆过得，可是这里是没有执行混淆的。这里须要注意，等往app.js里面写点内容以后就能看出差异了。

9、建立React项目

一、建立html

在OniReact/build目录下建立indexhtml文件，引用生成后的js文件，添加一个div节点，用来绑定react项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OniReact</title>
</head>
<body>
<div id="oni_app_react"></div>
<script src="oni.js"></script>
</body>
</html>

二、安装React

cd OniReact

$ npm install --save-dev react react-dom

在OniReact/source/app.js中键入

var React = require('react');
var ReactDOM = require('react-dom');
var helloWord = React.createElement('h1',{className:'header'},'Hello Word');
ReactDOM.render(helloWord, document.getElementById('oni_app_react'));

执行命令

cd OniReact

$  gulp

运行html。（后续会写web服务）

在界面中查看

到此本节课的内容所有讲解完毕，关于以上内容有不了解的地方，能够经过评论的方式，留言，我会给出参考文献连接。

项目地址：https://git.oschina.net/xiaohuOni/OniReact-Demo

SVN地址：svn://git.oschina.net/xiaohuOni/OniReact-Demo

以前的demo都用百度云盘，后来所有过时了。

题外话：

上一个ionic的系列教材，我发过本身的我的联系方式。如今我尽可能不经过我的联系方式回答你们的疑问。

请你们关注公众号：ionic__

原本想新建一个公众号的。但是以前的公众号里有很多的用户了，我经过群发征求了他们的意见。也愿意接收React的相关教程。

因此暂时仍是使用ionic__这个公众号。反正只是一个技术分享的号，我本身又叫作oni，我本姓陈。以为这个i ‘Oni’ c也挺符合。呵呵。（强撩）