react项目创建流程
react 项目搭建
系统: windows1.安装 node
node 下载地址.一路 next
如果遇到 windows 没有权限安装 msi 文件.打开 cmd,运行msiexec /package 文件路径
.查看是否安装成功,打开终端
node -v npm -v
2.安装 vscode 编辑器
vscode 下载地址.一路 next
3.安装 react 项目脚手架
打开终端
npm install -g create-react-app
4.创建 react 项目
create-react-app myApp cd myApp npm install npm start code .
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 Router
7.配置 http 请求插件
新建src\utils\axios.js
import 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.post const all = axiosIns.all export { 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 = null let $rootState = null class 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 Test
8.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.js
import 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.js
import 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') @observer class 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 Home
11.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 Test
12.打包
npm run build
安装本地服务器启动工具
npm install -g serve
启动打包的项目
serve -s ./build
相关推荐
82530995 2020-05-10
不知道该写啥QAQ 2020-08-02
不知道该写啥QAQ 2020-06-10
游走的豚鼠君 2020-11-10
81417707 2020-10-30
ctg 2020-10-14
小飞侠V 2020-09-25
PncLogon 2020-09-24
jipengx 2020-09-10
颤抖吧腿子 2020-09-04
wwzaqw 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
pengruiyu 2020-08-01
wmd看海 2020-07-27
孝平 2020-07-18