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

react项目创建流程的更多相关文章

  1. ADF 项目创建流程

    ADF 项目创建流程: 1.首先建好应用 2.创建model,UI 3.创建EO,VO,AO, VL 4.设置EO的属性 5.新建lov 6.设置VO的View Accessors,并设置Attrib ...

  2. react-create-app 构建react项目的流程以及需要注意的地方

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...

  3. cocos2dx3.0项目创建流程

    cocos2dx3.0不是beta,新增了wp项目创建的支持 但不知道为啥非beta版本号的tools文件夹中取消了project-creator,可能有更改吧 没有这个工具还挺麻烦.就自己手动创建c ...

  4. SpringBoot项目创建流程--SpringMVC

    SpringBoot项目创建步骤 1. 创建SpringBoot工程 (1) File → New → Project → Spring Initilizr (2) Name:MySpringBoot ...

  5. vue项目创建流程和使用

    vue项目的创建 npm run dev 让项目执行起来 #下载vuex npm install vuex --save#下载axiosnpm install axios --save 当我们生成项目 ...

  6. ASP.NET三层架构项目创建流程

    1.进入VS2010,新建项目—>Visual C#—>Web—>ASP.NET空Web应用程序,如图所示: 2.在解决方案处右击—>新建项目—>Windows—> ...

  7. DRF项目创建流程(1)

    一 web应用模式 前后端不分离 前后端分离 二 RESTFUL API规范 REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态 ...

  8. react项目后台及上线步骤

    应同学要求,本人将react项目创建后台及上线流程书写如下: 前端部分 略…… 后台部分 (注:这里的后台是用的nodejs搭建的,使用的是express框架+ejs模板) 首先通过express快速 ...

  9. 【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命令自己安装 ...

随机推荐

  1. SpringCloud微服务项目实战 - API网关Gateway详解实现

    前面讲过zuul的网关实现,那为什么今天又要讲Spring Cloud Gateway呢?原因很简单.就是Spring Cloud已经放弃Netflix Zuul了.现在Spring Cloud中引用 ...

  2. HTTP/3 来了,你了解它么?

    作为我们网上冲浪最为常见,也经常被人忽视的 HTTP 已经更新换代到了 HTTP/3.本文简单明了的带你认识 HTTP/3 的作用. 最近二狗子看到自己存储女神婷婷照片所用的云服务商--又拍云推出了 ...

  3. C++字符串与指针

    字符串初始化 在C++中基本数据类型并不包括string,string类型其实是一种类类型,通过STL函数库中的模板类basic_string 实例化得到. int main () { // stri ...

  4. C++ strcmp与strncmp的比较

    C++ strcmp与strncmp的比较(转载)  原文链接:https://www.cnblogs.com/ybqjymy/p/12565444.html strcmp与strncmp都是用来比较 ...

  5. Java自学-图形界面 Swing中的线程

    Swing中的线程 步骤 1 : 三种线程 在Swing程序的开发中,需要建立3种线程的概念 初始化线程 初始化线程用于创建各种容器,组件并显示他们,一旦创建并显示,初始化线程的任务就结束了. 事件调 ...

  6. 30年技术积累,技术流RTC如何成为视频直播领域的黑马?

    摘要:视频业务链的背后,本质是一张视频处理和分发网络.5G+云+AI时代下,实时音视频必然会步入到一个全新的发展期. 2020年这场肆虐全球的新冠疫情让很多企业重新审视自己对数字化的认识,正如 “大潮 ...

  7. 图解Janusgraph系列-分布式id生成策略分析

    JanusGraph - 分布式id的生成策略 大家好,我是洋仔,JanusGraph图解系列文章,实时更新~ 本次更新时间:2020-9-1 文章为作者跟踪源码和查看官方文档整理,如有任何问题,请联 ...

  8. light Map

    Unity5中lightmap的坑 http://blog.csdn.net/langresser_king/article/details/48914901 Unity中光照贴图一二坑及解决办法 h ...

  9. Codeforces 1337C Linova and Kingdom

    题意 给你一颗有根树,你要选择\(k\)个点,最大化\(\sum_{i \in S} val_i\),其中\(S\)是被选点的集合,\(val_i\)等于节点\(i\)到根的路径上未被选择点的个数. ...

  10. webstorm编写vue、react 将大驼峰组件命名转换成短横杠命名

    大家好!我是木瓜太香,精通 webstorm 与常见前端技术的工程师,偶尔也在b站搞一些 webstorm 技巧教学,今天给大家带来的是大驼峰小驼峰快速转换短横杠命名或者下划线命名的方式. 开发中我们 ...