react 项目搭建
系统: Windows
1. 安装 node
node 下载地址 https://nodejs.org/zh-cn/ . 一路 next
如果遇到 Windows 没有权限安装 msi 文件. 打开 cmd, 运行
msiexec /package 文件路径
.
查看是否安装成功, 打开终端
node -v NPM -v
2. 安装 vscode 编辑器
vscode 下载地址 https://code.visualstudio.com/ . 一路 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
来源: http://www.bubuko.com/infodetail-2891631.html