資訊專欄INFORMATION COLUMN
摘要：項(xiàng)目地址基于和的前端腳手架。目錄前言特性環(huán)境開始工程結(jié)構(gòu)開發(fā)調(diào)試單元測(cè)試靜態(tài)部署相關(guān)文檔致謝前言如果你是一個(gè)初學(xué)者，這個(gè)項(xiàng)目可以是很好的教程。單元測(cè)試新增一個(gè)單元測(cè)試，你只需在中創(chuàng)建文件。在腳手架中用于擴(kuò)展服務(wù)和代理。
項(xiàng)目地址: https://github.com/YutHelloWo...
基于React、Redux、React-Router@3.x、webpack和reactstrap的前端腳手架。
目錄前言
特性
環(huán)境
開始
工程結(jié)構(gòu)
開發(fā)調(diào)試
單元測(cè)試
靜態(tài)部署
相關(guān)文檔
致謝
前言如果你是一個(gè)Reat初學(xué)者，這個(gè)項(xiàng)目可以是很好的教程。如果你在計(jì)劃使用React技術(shù)棧創(chuàng)建一個(gè)大型SPA，那么這個(gè)項(xiàng)目正好適合你。如果這個(gè)項(xiàng)目對(duì)你有幫助，請(qǐng)不吝嗇的給于star或者watch支持。
特性ES2015
Webpack
Redux
React-router
reactstrap
Eslint
Express
Babel
Karma
數(shù)據(jù)流 環(huán)境node ^5.0.0
yarn ^0.23.0 or npm ^3.0.0
開始在確認(rèn)你的開發(fā)環(huán)境是以上環(huán)境配置，就開始可以基于這個(gè)腳手架創(chuàng)建你的應(yīng)用了:
首先，克隆這個(gè)工程。
$ git clone https://github.com/yuthelloworld/vortex-react.git$ cd
然后，安裝工程依賴。推薦使用cnpm或Yarn，這樣可以節(jié)約你安裝依賴的所需的時(shí)間，避免出現(xiàn)一些莫名奇妙的錯(cuò)誤。
$ yarn # Install project dependencies (or `npm install` or `cnpm install`)
最后，使用命令yarn start或者npm start來啟動(dòng)該應(yīng)用。
$ yarn start # Start the development server (or `npm start`)
這里還有一些其他的處理命令:
yarn
. ├── build ? ? ? ? ? ? ? ? ? # 打包配置 ├── public ? ? ? ? ? ? ? ? ? # 公共靜態(tài)資源 ├── server ? ? ? ? ? ? ? ? ? # express服務(wù) │ ? └── main.js ? ? ? ? ? ? # 服務(wù)入口js ├── src ? ? ? ? ? ? ? ? ? ? # 應(yīng)用源文件 │ ? ├── index.html ? ? ? ? ? # html模板 │ ? ├── main.js ? ? ? ? ? ? # 程序啟動(dòng)和渲染 │ ? ├── normalize.js ? ? ? ? # 瀏覽器的兼容和墊片 │ ? ├── components ? ? ? ? ? # 全局可復(fù)用組件 │ ? ├── layouts ? ? ? ? ? ? # 主頁布局 │ ? │ ? └── PageLayout ? ? ? # 導(dǎo)航 │ ? ├── routes ? ? ? ? ? ? ? # 動(dòng)態(tài)路由 │ ? │ ? ├── index.js ? ? ? ? # 主路由 │ ? │ ? ├── Home ? ? ? ? ? ? # 子路由Home │ ? │ ? │ ? ├── index.js ? ? # 路由定義和異步加載 │ ? │ ? │ ? ├── assets ? ? ? # 組件的靜態(tài)文件 │ ? │ ? │ ? ├── components ? # 展示組件 │ ? │ ? │ ? └── routes ** ? # 子路由 │ ? │ ? └── Counter ? ? ? ? # 子路由Couner │ ? │ ? ? ? ├── index.js ? ? # 路由定義 │ ? │ ? ? ? ├── container ? # 容器組件 │ ? │ ? ? ? ├── modules ? ? # module(reducers/constants/actions) │ ? │ ? ? ? └── routes ** ? # 子路由 │ ? ├── store ? ? ? ? ? ? ? # Redux相關(guān)模塊 │ ? │ ? ├── createStore.js ? # 創(chuàng)建和使用redux store │ ? │ ? └── reducers.js ? ? # Reducer的注冊(cè)和注入 │ ? └── styles ? ? ? ? ? ? ? # 樣式表 └── tests ? ? ? ? ? ? ? ? ? # 單元測(cè)試開發(fā)調(diào)試 在開發(fā)環(huán)境，采用了web-dev-middleware和web-hot-middleware。代碼實(shí)時(shí)熱更新。 Redux DevTools強(qiáng)烈推薦安裝谷歌瀏覽器插件Redux DevTools Chrome Extension,來查看整個(gè)應(yīng)用的狀態(tài)時(shí)光穿梭。 我們使用React-router的plainRoute來定義應(yīng)用的邏輯單元。 單元測(cè)試新增一個(gè)單元測(cè)試，你只需在./tests中創(chuàng)建.spec.js文件。 靜態(tài)部署如果你通過nginx web 服務(wù)來啟動(dòng)應(yīng)用，請(qǐng)確保路由指向~/dist/index.html，然后讓react-router處理剩下的事，更多參考這個(gè)文檔。Express在腳手架中用于擴(kuò)展服務(wù)和代理API。 相關(guān)文檔知識(shí)地圖 致謝歡迎給這個(gè)項(xiàng)目提PR或者issues 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84532.html 相關(guān)文章
發(fā)表評(píng)論0條評(píng)論
wangbjun男|高級(jí)講師TA的文章閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
|
|---|
