react项目创建流程
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 ./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
react项目创建流程的更多相关文章
- ADF 项目创建流程
ADF 项目创建流程: 1.首先建好应用 2.创建model,UI 3.创建EO,VO,AO, VL 4.设置EO的属性 5.新建lov 6.设置VO的View Accessors,并设置Attrib ...
- react-create-app 构建react项目的流程以及需要注意的地方
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...
- cocos2dx3.0项目创建流程
cocos2dx3.0不是beta,新增了wp项目创建的支持 但不知道为啥非beta版本号的tools文件夹中取消了project-creator,可能有更改吧 没有这个工具还挺麻烦.就自己手动创建c ...
- SpringBoot项目创建流程--SpringMVC
SpringBoot项目创建步骤 1. 创建SpringBoot工程 (1) File → New → Project → Spring Initilizr (2) Name:MySpringBoot ...
- vue项目创建流程和使用
vue项目的创建 npm run dev 让项目执行起来 #下载vuex npm install vuex --save#下载axiosnpm install axios --save 当我们生成项目 ...
- ASP.NET三层架构项目创建流程
1.进入VS2010,新建项目—>Visual C#—>Web—>ASP.NET空Web应用程序,如图所示: 2.在解决方案处右击—>新建项目—>Windows—> ...
- DRF项目创建流程(1)
一 web应用模式 前后端不分离 前后端分离 二 RESTFUL API规范 REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态 ...
- react项目后台及上线步骤
应同学要求,本人将react项目创建后台及上线流程书写如下: 前端部分 略…… 后台部分 (注:这里的后台是用的nodejs搭建的,使用的是express框架+ejs模板) 首先通过express快速 ...
- 【react npm】解决用npmstart启动别人的react项目的问题1:sha1-xxx checksum failed wanted sha1-xxx but got sha512-xxx. (10700 bytes)
1.npm是nodejs的包管理器,相当于php的composer,python的pip,用于安装各种包. 2.一般来说,别人拷给你的react项目不会带依赖包的,因为太大了,需要用npm命令自己安装 ...
随机推荐
- Java 接口 抽象类 抽象方法
abstract class elehousekeeping { //抽象家用电器类 abstract void opermode(); //抽象方法} class TV extends elehou ...
- 力扣Leetcode 46. 全排列
全排列 给定一个 没有重复 数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], ...
- 数据结构与算法系列2 线性表 链表的分类+使用java实现链表+链表源码详解
数据结构与算法系列2.2 线性表 什么是链表? 链表是一种物理存储单元上非连续,非顺序的存储结构,数据元素的逻辑顺序是通过链表的链接次序实现的一系列节点组成,节点可以在运行时动态生成,每个节点包括两个 ...
- 万字长文,Python数据分析实战,使用Pandas进行数据分析
文章目录 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给大家 ...
- 【原】通过Jenkin传值进Android代码
1) Jenkin中用-Pxxxx = yyyy来传值进gradle 2) 在AndroidManifest.xml中定义占位符: <meta-data android:name="X ...
- Unity NGUI C#性能优化
建议读者先看这篇博文:http://blog.csdn.net/zzxiang1985/article/details/43339273,有些技术已经变了,比如第1招,unity5的打包机制已经变许多 ...
- MySQL 数据库 查 续
MySQL 增删查改 必知必会 4.1.13 使用 like 关键字进行模糊查询 -- 说明:模糊查询,使用查询关键字like,like意思是类似于,像...的意思 -- 模糊查询,支持两种字符匹配符 ...
- java基础(swing+jsp+mybatis配置)
JAVA SE GUI编程(swing) # 组件 描述 1 JFrame 一个普通的窗口(绝大多数 Swing 图形界面程序使用 JFrame 作为顶层容器) 2 JDialog 对话框 常用的中间 ...
- [Java数据结构]Queue
Queue扩展了Collection,它添加了支持根据先进先出FIFO原则对元素排序的方法. 当对Queue调用add和offer方法时,元素始终添加在Queue的末尾:要检索一个元素,就要使用一个元 ...
- leetcode刷题-66加一
题目 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 1: ...