react+redux開發詳細步驟

create-react-app基礎腳手架

借助React官方的create-react-app工具，開發人員可以從配置工作中解脫出來，無需過早關注React技術棧，通過創建一個已經完成基本配置的應用，讓開發者快速開始React應用的開發：

npm install -g create-react-app

安裝結束后，就可以在終端用create-react-app命令創建工程：

create-react-app react-redux-app

react-redux-app工程集成了react應用框架，在此基礎上進行React應用開發，就避免了繁瑣的初始配置工作。

進入工程目錄，啟動工程：

cd react-redux-app npm start

啟動了一個開發模式的服務器，指向本機http://localhost:3000/

彈出webpack配置

實際開發中，通常要定制webpack的配置，因此我們彈出應用的webpack配置：

npm run eject

執行完以上命令，react-redux-app下多了config和scrips目錄，分別對應webpack配置和npm腳本。

安裝redux相關庫

安裝redux核心庫：

npm install redux 

直接使用redux的API會比較繁瑣。react官方提供的react-redux庫，可以更方便的使用redux：

npm install react-redux 

安裝babel插件transform-decorators-legacy，可以使用@connect更方便的連接UI組件與容器組件：

npm install babel-plugin-transform-decorators-legacy 

安裝transform-decorators-legacy插件后，需在package.json配置該插件：

"babel": { "plugins": [ "transform-decorators-legacy" ] }

安裝下redux異步調用的庫redux-thunk：

npm install redux-thunk

其他配套庫

路由庫react-router4 npm install react-router-dom --save ajax庫 npm install axios --save 組件屬性校驗庫 npm install prop-types --save

配置下代理

開發中，前端工程與后端API不在一個域名，為避免跨域限制，方便接口調試，需在package.json中配下代理：

# 比如，任何ajax請求，都代理到localhost:9093域 "proxy": "http://localhost:9093"

來一款CSS預處理器

less、sass或stylus都行，這里我安裝less。

npm install less-loader less 

分別修改/config/webpack.config.dev.js和/config/webpack.config.prod.js：

{
  test: /\.(css|less)$/, // 這里加上less use: [ ... { loader: require.resolve('less-loader') // 配置less-loader } ] }

配合一款UI框架

React開發，國內首選螞蟻金服的antd設計，移動端的話，安裝antd-mobile：

npm install antd-mobile 

最好配置antd組件樣式的按需加載，借助babel的import插件：

npm install babel-plugin-import 

package.json中，記得配置上該插件：

"babel": { "plugins": [ "transform-decorators-legacy", ["import", { "libraryName": "antd-mobile", "style": "css" }] ] }

初始目錄文件

創建一些初始目錄和文件，在入口處完成redux和router的一些基礎工作：

創建目錄/src/component

創建目錄/src/container

創建目錄/src/redux

創建/src/container/login/index.js，編輯如下：

import React from 'react' class Login extends React.Component { render() { return <h2>登錄頁</h2> } } export default Login 

創建/src/container/register/index.js，編輯如下：

import React from 'react' class Register extends React.Component { render() { return <h2>注冊頁</h2> } } export default Register

創建/src/config.js，編輯如下：

import axios from 'axios' import { Toast } from 'antd-mobile' axios.interceptors.request.use(function(config) { Toast.loading('加載中', 0) return config }) axios.interceptors.response.use(function(config) { Toast.hide() return config })

創建/src/reducer.js，編輯如下：

import { combineReducers } from 'redux' function reducer(state = 0, action) { return state } export default combineReducers({reducer}) 

創建/src/app.js，編輯如下：

import React from 'react' import { Route } from 'react-router-dom' import Login from './container/login' import Register from './container/register' class App extends React.Component { render () { return ( <div> <Route path="/Register" component={Register}></Route> <Route path="/login" component={Login}></Route> </div> ) } } export default App

修改/src/index.js，編輯如下：

import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware, compose } from 'redux' import thunk from 'redux-thunk' import { Provider } from 'react-redux' import { BrowserRouter } from 'react-router-dom' import registerServiceWorker from './registerServiceWorker'; import reducers from './reducer' import './config' import App from './app' registerServiceWorker() const store = createStore(reducers, compose( applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f )) ReactDOM.render(( <Provider store={store}> <BrowserRouter> <App></App> </BrowserRouter> </Provider> ), document.getElementById('root'));

刪除其他多余的文件，保持腳手架工程為如下結構：

 

再次啟動工程：

npm start

訪問登錄頁http://localhost:3000/login，顯示：

 

訪問注冊頁http://localhost:3000/register，顯示：

 

安裝Chrome擴展

訪問Chrome的獲取更多擴展程序 （可能要翻牆）。搜索安裝react-developer-tools和redux-devtools。

或者自己去網上下載擴展程序的crx文件，進入chrome擴展程序頁面，勾選開發者模式，然后把crx文件拖進去。

也不必刻意學習要怎么使用，開發中自己調出來，多點幾下就都明白了。

按需安裝其他庫

其他庫，視自身項目情況安裝吧。比如，如果你的后端使用node服務端暴露接口API，而你又使用express框架進行node開發。那么，你需要安裝express：

npm install express --save

假如你不想每次修改后端接口都重啟node服務端，那么你可以安裝nodemon庫：

npm install -g nodemon

安裝了nodemon庫后，用nodemon命令代替node命令啟動node服務端就可以了。

安裝node.js的消息體解析中間件：

npm install body-parser --save

假如你用cookie存儲用戶會話，可以安裝node操作cookie的庫cookie-parse：

npm install cookie-parser --save

如果你要在node里用DM5進行密碼加密的話，你可能需要utility庫：

npm install utility --save

如果有實時聊天等功能的話，可能socket庫你也需要：

npm install socket.io --save

再如果，你是使用mongodb數據庫，那么你要在機器上安裝mongodb：

# mac電腦可以用brew工具在本機安裝mongodb brew install mongodb # 完了后，你可以用以下命令啟動和停止mongodb服務： brew services start mongodb brew services stop mongodb

安裝mongoose庫，封裝了node對mongodb的api操縱：

npm install mongoose --save

npm里海量的庫，自己按需安裝去吧......

源代碼托管一下

去github上創建下遠程倉庫react-redux-app。
然后在工程目錄下執行以下命令，關聯上遠程倉庫：

git init git remote add origin 你的地址 git push -u origin master