工欲善其事必先利其器，現在的node環境下，有太多好用的工具能夠幫助我們更好的開發和維護管理項目。

我本人不建議什么功能都自己寫，我比較喜歡代碼復用。只要能找到npm包來實現的功能，堅決不自己敲代碼。

本次編寫程序的兩個原則：1、盡量使用聲明式的編程風格（聲明式和命令式，不是很清楚的自己查查資料）2、能復用的決不自己編寫。

任何多余的繁瑣的行為都是錯誤的

本次編寫架構的目的：簡單好用易開發易管理。（項目是變想變創建的，可能需要后續的不斷優化。大家盡量作為學習材料參考，也可直接用于項目，反正我自己是直接先用的，后續有問題再優化就是了，額）

長話短說:這是一個關于React的系列新手教程。在項目中有很多其他的工具和框架可以選擇，我在這個教程里直接選擇我自己喜歡的，

你們可以根據自己的使用習慣選擇相近的可替代的框架。

?

一、首先我們先創建一個文件夾，在你喜歡的任意位置新建一個文件夾--如：OniReact

在其目錄下創建個子目錄（創建順序按照首字母排序）

·OniReact/build:用于存放編譯后的js文件和項目啟動的html

·OniReact/image:用于存放項目所使用到的圖片資源

·OniReact/mock:用于存放本地構建的Json文件，用于本地數據調試

·OniReact/source:用于存放所有的JavaScript的源文件

·OniReact/style:用于存放項目中使用的所有css、less、sass（本項目使用sass）

二、接下來在OniReact/source目錄下創建二級子目錄

·OniReact/source/components:用于存放自己編寫的React組件

·OniReact/source/custom:用于存放自定義的實際項目中所需要的Store、Action等文件（可以理解為邏輯控制器、此次用到的是Flux，集體后面會講到）

·OniReact/source/utils:用于存放封裝好通用的Store、Action、Http請求等文件（用于存放一些用具類，后面會講解到為什么將Store、Action分為兩部分）

·OniReact/source/webpage:用于存放頁面（頁面可有上面編寫的組件組合而成，也可全新編寫）

這樣子基本上所有的目錄都創建完畢了。

以上文件夾只是初期的預想，根據其他框架的開發經驗假想出來的，后續可能需要更改或者調整。

三、創建相關文件

創建項目啟動入口，在OniReact/source目錄下創建app.js

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

創建package.json

package.json是npm命令（不知道什么是npm的也自己查查資料，我這里不詳細講node的內容）執行需要的文件，可以用來管理和存儲我們所需要的npm包。

將依賴包存儲在package.json里面，可以使用npm install命令來自動安裝依賴包。（拷貝項目或者分享項目的時候不需要負責依賴包，在拷貝完成之后執行自動安裝即可）

四、初始化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。

五、選擇打包工具-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。相當于在項目當前目錄下執行的命令窗口。

使用它有幾個明顯優點1、不需要再開啟一個黑窗口。2、可以使用復制黏貼（cmd這個功能不好用，特別是安裝出錯復制log的時候）。3、直接就在當前目錄下，不需要一直cd。

六、選擇構建工具---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他需要做些什么事情，怎么做?？梢岳斫鉃橐粋€配置文件也可以。

七、選擇解析工具--babelify

由于React使用的是JSX的語法，瀏覽器是不能直接運行的。babelify可以幫助我們解析jsx語法。

?

cd?OniReact

$ npm install --save-dev babelify

八、創建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里面寫點內容之后就能看出差別了。

九、創建React項目

1、創建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>

2、安裝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

轉載于:https://www.cnblogs.com/zrbfree/p/5955561.html

總結

以上是生活随笔為你收集整理的160921、React入门教程第一课--从零开始构建项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。