React學習筆記---項目構建

簡介

　　ReactJs因爲有FB的支持，獲得了社區的極大關注，同時因爲ReactJs只但願專注的作好View層次上的工做，因此自己並無涉及不少周邊工具。

　　今天要介紹一款工具，同時包含一個構建項目模板的工具，對於初學者來講，就有了一個能夠學習、開發、測試的平臺。

Yeoman

　　官方的介紹是這樣形容的：「Web App的腳手架工具」 --- Yeoman的目的是幫助用戶更好的啓動項目，提供最好的實踐和工具使用戶保持高生產率。

　　Yeoman提供了一個生成器的生態系統，並提供了一個「Yeoman的工做流」，這個工做流集成了三大部分：

　　- 腳手架工具Yo 

　　職責：管理包依賴、記錄構建配置信息等

　　項目地址：https://github.com/yeoman/yo

　　

　　- 構建工具Grunt

　　職責：構建工具，比較流行的有Grunt和Gulp

　　項目地址：http://gruntjs.com/

                    http://gulpjs.com/

　　

　　- 包管理器Bower

　　職責：包依賴管理工具，避免手動安裝，比較流行的有Bower和npm

　　項目地址：http://bower.io/

　　　　　　　https://www.npmjs.com/

　　

項目構建

　　以Mac下爲例：

　　1. 啓動terminal，而後進入到指定目錄下：

　　npm install -g yo

　　2. 安裝生成器（generator）：

　　npm install -g generator-react-fullstack

　　3. 構建React-fullstack項目模板：

　　yo react-fullstack

 　 4. 啓動項目頁面：

　　npm start

　  5. 打開瀏覽器：

 

 

模板結構

　　模板結構最好的就是參照官方給出的內容，這裏就不一一舉例了。

　　Ract-starter-kit 官方地址：https://github.com/kriasoft/react-starter-kit

.　　　　　　　　　　　　　　　　　　 # 根目錄
├── /build/                     # 編譯輸出目錄
├── /docs/                      # 項目相關文檔目錄
├── /node_modules/              # 3D部分和工具目錄
├── /src/                       # 代碼源目錄
│   ├── /actions/               # Actions目錄
│   ├── /api/                   # REST API目錄
│   ├── /components/            # React組件目錄
│   ├── /constants/             # Constants (action types etc.)
│   ├── /content/               # Static content 靜態內容目錄(plain HTML or Markdown, Jade, you name it)
│   ├── /core/                  # Core components 核心組件(Flux dispatcher, base classes, utilities)
│   ├── /decorators/            # Higher-order React components高級別的React組件庫
│   ├── /public/                # Static files which are copied into the /build/public folder靜態文件庫
│   ├── /stores/                # Stores contain the application state and logic程序運行時狀態和邏輯倉庫
│   ├── /utils/                 # Utility classes and functions工具類和方法
│   ├── /app.js                 # Client-side startup script客戶端啓動腳本
│   ├── /config.js              # Global application settings全局設置
│   ├── /routes.js              # Universal (isomorphic) application routes通用的應用程序路由
│   └── /server.js              # Server-side startup script服務端啓動腳本
├── /tools/                     # Build automation scripts and utilities自動構建腳本及工具
│   ├── /lib/                   # Library for utility snippets工具提示庫
│   ├── /build.js               # Builds the project from source to output (build) folder從源碼編譯輸出
│   ├── /bundle.js              # Bundles the web resources into package(s) through Webpack經過Webpack將資源打包
│   ├── /clean.js               # Cleans up the output (build) folder清理輸出文件夾
│   ├── /webpack.config.js      # Configurations for client-side and server-side bundles配置客戶端和服務端打包工具
│   ├── /copy.js                # Copies static files to output (build) folder拷貝靜態文件
│   ├── /deploy.js              # Deploys your web application發佈Web程序
│   ├── /serve.js               # Launches the Node.js/Express web server啓動服務
│   └── /start.js               # Launches the development web server with "live reload"啓動開發模式，帶有時時更新
│── package.json                # The list of 3rd party libraries and utilities3D部分列表
└── preprocessor.js             # ES6 transpiler settings for Jest ES6的Jest設置

更多資料

@小狼的世界-Yeoman介紹：http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html 

Yeoman官方地址：http://yeoman.io/