欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react项目创建流程

程序员文章站 2022-06-12 17:30:17
...

react 项目搭建

系统: windows

1.安装 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.jswebpack.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

来源:https://segmentfault.com/a/1190000017109354