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也挺符合。呵呵。（強撩）