亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React工程實(shí)踐：基于React、Redux、React-Router的前端腳手架

wangbjun / 2786人閱讀

摘要：項(xiàng)目地址基于和的前端腳手架。目錄前言特性環(huán)境開始工程結(jié)構(gòu)開發(fā)調(diào)試單元測試靜態(tài)部署相關(guān)文檔致謝前言如果你是一個(gè)初學(xué)者，這個(gè)項(xiàng)目可以是很好的教程。單元測試新增一個(gè)單元測試，你只需在中創(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)試

單元測試

靜態(tài)部署

相關(guān)文檔

致謝

前言

如果你是一個(gè)Reat初學(xué)者，這個(gè)項(xiàng)目可以是很好的教程。如果你在計(jì)劃使用React技術(shù)棧創(chuàng)建一個(gè)大型SPA，那么這個(gè)項(xiàng)目正好適合你。如果這個(gè)項(xià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的注冊和注入
│ ? └── styles ? ? ? ? ? ? ? # 樣式表
└── tests ? ? ? ? ? ? ? ? ?  # 單元測試

開發(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)用的邏輯單元。

單元測試

新增一個(gè)單元測試，你只需在./tests中創(chuàng)建.spec.js文件。

靜態(tài)部署

如果你通過nginx web 服務(wù)來啟動(dòng)應(yīng)用，請確保路由指向~/dist/index.html，然后讓react-router處理剩下的事，更多參考這個(gè)文檔。Express在腳手架中用于擴(kuò)展服務(wù)和代理API。

相關(guān)文檔

知識地圖

致謝

歡迎給這個(gè)項(xiàng)目提PR或者issues
           
               
                                           
                       
                 
            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84532.html

               

                      
               
              
              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    指尖前端重構(gòu)（React）技術(shù)調(diào)研分析
    
                                                     
    摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。

一、為什么選擇React
React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。

Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...
    
                                                   
                          
    
                                
    
                                    AlphaWallet
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇
    
                                                     
    摘要：前端每周清單半年盤點(diǎn)之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。

前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇
前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為...
    
                                                   
                          
    
                                
    
                                    Barry_Ng
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    react全家桶+koa2實(shí)現(xiàn)一個(gè)多人博客~
    
                                                     
    摘要：不斷更新筆記效果有待進(jìn)一步完善搭建一個(gè)基于的多人功能登錄注冊上傳頭像發(fā)表博文發(fā)表留言參考自前端部分以的腳手架搭起的全家桶后端采用開發(fā)環(huán)境開發(fā)環(huán)境要求以上目錄結(jié)構(gòu)如何運(yùn)行后端默認(rèn)配置在中請確保本地端口默認(rèn)可用發(fā)布到目錄中默

Full-stack-blog(不斷更新筆記)
效果Demo(有待進(jìn)一步完善)搭建一個(gè)基于Koa2的多人blog功能(登錄注冊上傳頭像,發(fā)表博文,發(fā)表留言)參考自ht...
    
                                                   
                          
    
                                
    
                                    mdluo
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    一個(gè)基于React整套技術(shù)棧+Node.js的前端頁面制作工具
    
                                                     
    摘要：是一個(gè)前端頁面制作工具，方便產(chǎn)品，運(yùn)營和視覺的同學(xué)迅速開發(fā)簡單的前端頁面，從而可以解放前端同學(xué)的工作量。支持恢復(fù)現(xiàn)場功能關(guān)閉頁面配置不丟失支持操作。提供了一個(gè)方法，用于的拆分。就是發(fā)出的通知，表示應(yīng)該要發(fā)生變化了。

pagemaker是一個(gè)前端頁面制作工具，方便產(chǎn)品，運(yùn)營和視覺的同學(xué)迅速開發(fā)簡單的前端頁面，從而可以解放前端同學(xué)的工作量。此項(xiàng)目創(chuàng)意來自網(wǎng)易樂得內(nèi)部項(xiàng)目nfop中的page...
    
                                                   
                          
    
                                
    
                                    ermaoL
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    React 328道最全面試題(持續(xù)更新)
    
                                                     
    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅(jiān)持每天花分鐘來學(xué)習(xí)與思考。

今天的React題沒有太多的故事……
半個(gè)月前出了248個(gè)Vue的知識點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個(gè)React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時(shí)發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時(shí)大...
    
                                                   
                          
    
                                
    
                                    kumfo
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           
           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              
              
            

             
        

    







  • <th id="qmw8q"></th>
  • 

<