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

來源:互聯網
上載者:User

標籤:

簡介

  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/

 

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.