react+redux开发详细步骤

锄奸队成员 發表於 2019-7-10 09:14:00

<h2 id="articleHeader2">create-react-app基础脚手架</h2>
借助React官方的create-react-app工具，开发人员可以从配置工作中解脱出来，无需过早关注React技术栈，通过创建一个已经完成基本配置的应用，让开发者快速开始React应用的开发：
<pre class="hljs sql"><code>npm install -g create-react-app</code></pre>
安装结束后，就可以在终端用create-react-app命令创建工程：
<pre class="hljs sql"><code>create-react-app react-redux-app</code></pre>
react-redux-app工程集成了react应用框架，在此基础上进行React应用开发，就避免了繁琐的初始配置工作。
进入工程目录，启动工程：
<pre class="hljs properties"><code>cd react-redux-app
npm start</code></pre>
启动了一个开发模式的服务器，指向本机http://localhost:3000/
<h2 id="articleHeader3">弹出webpack配置</h2>
实际开发中，通常要定制webpack的配置，因此我们弹出应用的webpack配置：
<pre class="hljs nginx"><code>npm run eject</code></pre>
执行完以上命令，react-redux-app下多了config和scrips目录，分别对应webpack配置和npm脚本。
<h2 id="articleHeader4">安装redux相关库</h2>
安装redux核心库：
<pre class="hljs sql"><code>npm install redux  </code></pre>
直接使用redux的API会比较繁琐。react官方提供的react-redux库，可以更方便的使用redux：
<pre class="hljs sql"><code>npm install react-redux  </code></pre>
安装babel插件transform-decorators-legacy，可以使用@connect更方便的连接UI组件与容器组件：
<pre class="hljs sql"><code>npm install babel-plugin-transform-decorators-legacy  </code></pre>
安装transform-decorators-legacy插件后，需在package.json配置该插件：
<pre class="hljs objectivec"><code>"babel": {
"plugins": [
"transform-decorators-legacy"
]
}</code></pre>
安装下redux异步调用的库redux-thunk：
<pre class="hljs sql"><code>npm install redux-thunk</code></pre>
<h2 id="articleHeader5">其他配套库</h2>
<pre class="hljs sql"><code>路由库react-router4
npm install react-router-dom --save
ajax库
npm install axios --save
组件属性校验库
npm install prop-types --save </code></pre>
<h2 id="articleHeader6">配置下代理</h2>
开发中，前端工程与后端API不在一个域名，为避免跨域限制，方便接口调试，需在package.json中配下代理：
<pre class="hljs objectivec"><code># 比如，任何ajax请求，都代理到localhost:9093域
"proxy": "http://localhost:9093"</code></pre>
<h2 id="articleHeader7">来一款CSS预处理器</h2>
less、sass或stylus都行，这里我安装less。
<pre class="hljs sql"><code>npm install less-loader less  </code></pre>
分别修改/config/webpack.config.dev.js和/config/webpack.config.prod.js：
<pre class="hljs css"><code>{
test: /\.(css|less)$/, //这里加上less
use: [
...
{
 loader: require.resolve('less-loader') // 配置less-loader
}
]
}</code></pre>
<h2 id="articleHeader8">配合一款UI框架</h2>
React开发，国内首选蚂蚁金服的antd设计，移动端的话，安装antd-mobile：
<pre class="hljs sql"><code>npm install antd-mobile  </code></pre>
最好配置antd组件样式的按需加载，借助babel的import插件：
<pre class="hljs sql"><code>npm install babel-plugin-import  </code></pre>
package.json中，记得配置上该插件：
<pre class="hljs cs"><code>"babel": {
"plugins": [
"transform-decorators-legacy",
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
}</code></pre>
<h2 id="articleHeader9">初始目录文件</h2>
创建一些初始目录和文件，在入口处完成redux和router的一些基础工作：
创建目录/src/component
创建目录/src/container
创建目录/src/redux
创建/src/container/login/index.js，编辑如下：
<pre class="hljs scala"><code>import React from 'react'

class Login extends React.Component {
render() {
 return <h2>登录页</h2>
}
}

export default Login
</code></pre>
创建/src/container/register/index.js，编辑如下：
<pre class="hljs scala"><code>import React from 'react'

class Register extends React.Component {
render() {
 return <h2>注册页</h2>
}
}

export default Register</code></pre>
创建/src/config.js，编辑如下：
<pre class="hljs javascript"><code>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
})</code></pre>
创建/src/reducer.js，编辑如下：
<pre class="hljs javascript"><code>import { combineReducers } from 'redux'

function reducer(state = 0, action) {
return state
}

export default combineReducers({reducer})
</code></pre>
创建/src/app.js，编辑如下：
<pre class="hljs javascript"><code>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</code></pre>
修改/src/index.js，编辑如下：
<pre class="hljs javascript"><code>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'));</code></pre>
删除其他多余的文件，保持脚手架工程为如下结构： <img src="https://img2018.cnblogs.com/blog/1668287/201907/1668287-20190710091220903-1744963714.png" alt="">
 
再次启动工程：
<pre class="hljs sql"><code>npm start</code></pre>
访问登录页http://localhost:3000/login，显示：
<img src="https://img2018.cnblogs.com/blog/1668287/201907/1668287-20190710091245247-2087472218.png" alt="">
 
访问注册页http://localhost:3000/register，显示：
<img src="https://img2018.cnblogs.com/blog/1668287/201907/1668287-20190710091256054-306248149.png" alt="">
 
<h2 id="articleHeader10">安装Chrome扩展</h2>
访问Chrome的获取更多扩展程序 （可能要FQ）。搜索安装react-developer-tools和redux-devtools。
或者自己去网上下载扩展程序的crx文件，进入chrome扩展程序页面，勾选开发者模式，然后把crx文件拖进去。
也不必刻意学习要怎么使用，开发中自己调出来，多点几下就都明白了。
<h2 id="articleHeader11">按需安装其他库</h2>
其他库，视自身项目情况安装吧。比如，如果你的后端使用node服务端暴露接口API，而你又使用express框架进行node开发。那么，你需要安装express：
<pre class="hljs sql"><code>npm install express --save</code></pre>
假如你不想每次修改后端接口都重启node服务端，那么你可以安装nodemon库：
<pre class="hljs sql"><code>npm install -g nodemon</code></pre>
安装了nodemon库后，用nodemon命令代替node命令启动node服务端就可以了。
安装node.js的消息体解析中间件：
<pre class="hljs sql"><code>npm install body-parser --save</code></pre>
假如你用cookie存储用户会话，可以安装node操作cookie的库cookie-parse：
<pre class="hljs sql"><code>npm install cookie-parser --save</code></pre>
如果你要在node里用DM5进行密码加密的话，你可能需要utility库：
<pre class="hljs sql"><code>npm install utility --save</code></pre>
如果有实时聊天等功能的话，可能socket库你也需要：
<pre class="hljs sql"><code>npm install socket.io --save</code></pre>
再如果，你是使用mongodb数据库，那么你要在机器上安装mongodb：
<pre class="hljs sql"><code># mac电脑可以用brew工具在本机安装mongodb
brew install mongodb
# 完了后，你可以用以下命令启动和停止mongodb服务：
brew services start mongodb
brew services stop mongodb</code></pre>
安装mongoose库，封装了node对mongodb的api操纵：
<pre class="hljs sql"><code>npm install mongoose --save</code></pre>
npm里海量的库，自己按需安装去吧......
<h2 id="articleHeader12">源代码托管一下</h2>
去github上创建下远程仓库react-redux-app。 然后在工程目录下执行以下命令，关联上远程仓库：
<pre class="hljs properties"><code>git init
git remote add origin 你的地址
git push -u origin master</code></pre>

</div>
<div id="MySignature" role="contentinfo">
如有bug 请务必点出 
来源：https://www.cnblogs.com/tdtdttd/p/11161735.html

頁: [1]

琼殿技术论坛's Archiver

react+redux开发详细步骤