最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

react项目创建流程

XAMPP下载 admin 1112浏览 0评论
 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.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 .de_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 .ild

转载请注明:XAMPP中文组官网 » react项目创建流程

您必须 登录 才能发表评论!