react 项目搭建系统: windows1.安装 nodenode 下载地址.一路 next如果遇到 windows 没有权限安装 msi 文件.打开 cmd,运行msiexec /package 文件路径.查看是否安装成功,打开终端node -vnpm -v2.安装 vscode 编辑器vscode 下载地址.一路 next3.安装 react 项目脚手架打开终端npm install -g create-react-app4.创建 react 项目create-react-app myAppcd myAppnpm installnpm startcode .5.安装项目依赖npm i react-router-dom mobx mobx-react axios qs –save配置装饰器语法支持npm i –save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators解压 webpack 配置npm run eject修改webpack.config.dev.js和webpack.config.prod.js{ test: /.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, loader: require.resolve(‘babel-loader’), options: { customize: require.resolve(‘babel-preset-react-app/webpack-overrides’), plugins: [+ [’@babel/plugin-proposal-decorators’, { legacy: true }],+ [’@babel/plugin-proposal-class-properties’, { loose: true }], [ require.resolve(‘babel-plugin-named-asset-import’), { loaderMap: { svg: { ReactComponent: ‘@svgr/webpack?-prettier,-svgo![path]’ } } } ] ], // This is a feature of babel-loader for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true, // Don’t waste time on Gzipping the cache cacheCompression: false }}6.配置路由在项目中新建src\pages文件夹.新建页面文件src\pages\Home\index.js// Home\index.js/** * @name Home * @desc 首页 /import React, { Component } from ‘react’class Home extends Component { render() { return ( <div> <h1>Home</h1> </div> ) }}export default Home新建router.js/* * @name Router * @desc 页面路由配置 /import React, { Component } from ‘react’import { Switch, Route, Redirect } from ‘react-router-dom’import Home from ‘./pages/Home’class Router extends Component { render() { return ( <Switch> <Redirect path="/" to="/home" exact /> <Route path="/home" component={Home} /> </Switch> ) }}export default Router7.配置 http 请求插件新建src\utils\axios.jsimport axios from ‘axios’import qs from ‘qs’const axiosIns = axios.create({ baseURL: ‘/’, timeout: 10000, responseType: ‘json’, transformRequest: [data => qs.stringify(data)], headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded;charset=utf-8’ }})axiosIns.interceptors.request.use( config => { return config }, error => Promise.reject(error))axiosIns.interceptors.response.use(result => result.data, error => Promise.reject(error))const get = (url, params = null, config = {}) => axiosIns.get(url, { …config, params })const post = axiosIns.postconst all = axiosIns.allexport { get, post, all }8.配置状态管理插件8.1 新建src\utils\mobx-store.js/* * @name Store * @desc store 构造器 /import { action, configure } from ‘mobx’configure({ enforceActions: ‘observed’ })class Store { constructor(modules) { Object.keys(modules).forEach(moduleName => { this[moduleName] = new modules[moduleName]({ mapStore: this.mapStore.bind(this), rootState: this.rootState }) }) } rootState = {} mapStore(moduleName) { if (moduleName) { return this[moduleName] ? this[moduleName] : console.error(new Error(has no store named "${moduleName}")) } else { return this } }}let $mapStore = nulllet $rootState = nullclass StoreModule { constructor({ mapStore, rootState }) { $mapStore = mapStore $rootState = rootState } mapStore(name) { return $mapStore(name) } getRootState() { return $rootState } setState(options) { action(opt => { Object.keys(opt).forEach(key => { if (Object.prototype.hasOwnProperty.call(this, key)) { this[key] = opt[key] } else { console.error(new Error(mobx action "setState": has no attribute named "${key}")) } }) })(options) }}export { Store, StoreModule }8.2 创建一个状态模块,新建src\store\test-store.js/* * @name Test * @desc /import { observable, action, configure } from ‘mobx’import { StoreModule } from ‘../utils/mobx-store’configure({ enforceActions: ‘observed’ })class Test extends StoreModule { @observable msg = ’’ @action.bound handleChangeMsg(e) { this.setState({ msg: e.target.value }) }}export default Test8.3 配置 store新建src\store\index.js/* * @name Store * @desc 合并全部子模块的store /import { Store } from ‘../utils/mobx-store’import Test from ‘./test-store.js’export default new Store({ Test })9.注入 router 和 store修改index.jsimport React from ‘react’import ReactDOM from ‘react-dom’import { BrowserRouter } from ‘react-router-dom’import { Provider } from ‘mobx-react’import store from ‘./store’import App from ‘./App’ReactDOM.render( <Provider {…store}> <BrowserRouter> <App /> </BrowserRouter> </Provider>, document.getElementById(‘root’))修改App.jsimport React, { Component } from ‘react’import Routes from ‘./router’class App extends Component { render() { return ( <div classes=“container”> <Routes /> </div> ) }}export default App修改src\pages\Home\index.js/* * @name Home * @desc 首页 * @author * @version /import React, { Component } from ‘react’import { inject, observer } from ‘mobx-react’@inject(‘Test’)@observerclass Home extends Component { render() { return ( <div> <h1>Home</h1> <p>msg: {this.props.Test.msg}</p> <p> <input type=“text” value={this.props.Test.msg} onChange={this.props.Test.handleChangeMsg} /> </p> </div> ) }}export default Home11.http 请求例子// src\store\test-store.js/* * @name Test * @desc */import { observable, action, configure } from ‘mobx’import { StoreModule } from ‘../utils/mobx-store’import { post } from ‘../utils/axios’configure({ enforceActions: true })class Test extends StoreModule { @observable msg = ’’ @action.bound handleChangeMsg(e) { this.setState({ msg: e.target.value }) } @action.bound async getSomething() { try { const res = await post(’/some-data’, { type: ’news’ }) } catch (err) { console.error(err) } }}export default Test12.打包npm run build安装本地服务器启动工具npm install -g serve启动打包的项目serve -s ./build