[react]react创建app,路由，mobx 全教程
1、创建app,
npx create-react-app my-app
Cmd
Copy
2、进入项目目录
cd my-app
Cmd
Copy
3、启用配置文件（默认是不开启配置文件的）
yarn eject
Cmd
Copy
这时候会报错，意思大概是你要把之前的文件最好提交一下git
git add --all
git commit -m 'up'
Cmd
Copy
yarn eject
Cmd
Copy
4、提示 成功
success Saved lockfile.
Ejected successfully!
Cmd
Copy
5、启动项目（不启动配置文件也能启项目，但最好把配置打开，这样你可以更多的扩展）
这时候报错：Cannot find module XXXX 基本的意思就是什么什么包 没有。
以前是没有这个错的，现在估计新加的，大概意思是新找开了配置（eject）后再需要安装一下
npm install
Cmd
Copy
此命令是根据package.json重新安装一下包，此命令，如果是别人的项目没有node_modules 是无法启动项目，需要npm install 后 就可以正常打开别人的项目，这主要是因为node_modules太大，一般都不会git上传。
这个时间有点久，可以把npm 改成cpm 自行（搜索，百度、bing、谷歌啥都行）
yarn start
Cmd
Copy
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.50.143:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
Tip
Copy
ok.
接下来，是sass安装，现在没有直接写css的了，（ps:less,postcss都行，此文介绍的是sass）
1、sass 安装
yarn add node-sass-chokidar
Cmd
Copy
找到package.json中的scripts位置 替换成以下代码
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build-js": "node scripts/build.js",
"build": "npm-run-all build-css build-js",
"test": "node scripts/test.js --env=jsdom"
},
Node
Copy
进行src目录，mkdir styles vi index.scss(就是sass 有两个后缀，就是写法不同，我们常用scss后缀)
进行src/index.js
增加以下代码（在原样式文件下）
import './index.css';（原样式文件）
import './styles/index.css';
Es6
Copy
warn:/bin/sh: npm-run-all: command not found
yarn add npm-run-all
yarn start
Cmd
Copy
index.scss 增加以下代码
body {
background: red;
}
CSS
Copy
其实这时候你以已经发现了index.scss 一个并列文件index.css 而我们上面imPort时也是index.css 这就是编译后的文件，虽然写的是scss 但引入的还是css
没看出效果，你需要把原来的app.css 和index.css 的代码注释掉就可以看到
此时sass 已生效。
报错 App.js:5 Uncaught ReferenceError: React is not defined
在app.js 中添加如下代码
import React, {Component} from 'react';
JavaScript
Copy
路由：router
ctrl +c 终止任务
1、添加路由模块
yarn add react-router-dom
Cmd
Copy
2、添加路由Router.jsx（react 中基本都是jsx后缀文件）
代码内容：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, HashRouter} from 'react-router-dom';
import App from './App.js';
const Router = () => (
)
export default Router;
React
Copy
3、react-hot-loader 官网解释
React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React components.
按我们理解就是自动更新的
yarn add react-hot-loader
Cmd
Copy
4、App.js
import React, { Component } from 'react';
import { hot } from 'react-hot-loader';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import home from './views/home/';
import otc from './views/otc/';
class App extends Component {
constructor(props) {
super(props);
}
componentDidMount(){
}
render() {
// return this.props.children;
return (
)
}
}
export default hot(module)(App);
React
Copy
5、index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import Router from './Router';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
React
Copy
6、mkdir views/home views/otc
views/home/index.jsx
import React, { Component } from 'react';
import { withRouter,NavLink} from 'react-router-dom';
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return (
home
otc
)
}
}
export default Home;
React
Copy
views/otc/index.jsx
import React, { Component } from 'react';
import { withRouter,NavLink} from 'react-router-dom';
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return (
otc
home
)
}
}
export default Home;
home 就是路由切换的意思
React
Copy
8、yarn start
稍后贴github 代码地址（https://github.com/llqfront/react/tree/master/my-app1 为源码 。稍后上传my-app 为完整）希望你是把按步骤操作一次，没有的代码上github 上取，
mobx 简单、可扩展的状态管理(https://cn.mobx.js.org/)
1、需要安装
yarn add mobx
yarn add mobx-react
Cmd
Copy
2、需要处理错误，错误代码如下（意思就是不支持这个装饰符）
SyntaxError: /Users/hello/workspace/fe.youdeal.io/app/my-app/src/store/otc.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (3:5):
1 | import {observable, computed, action} from 'mobx';
2 | class Store {
> 3 | @observable tradeCfg = {
| ^
4 | 'sadf':'sadf'
5 | };
6 | @observable baseInfo = {};
Tip
Copy
还有挺爱报错的，可算解决了；
解决参考地址：
1、https://babeljs.io/docs/en/babel-plugin-proposal-decorators
2、https://github.com/babel/babel/issues/8562
3、https://github.com/facebook/react-native/issues/21320
4、https://github.com/mobxjs/mobx-react/issues/506
5、https://github.com/zeit/next.js/issues/5231
6、https://github.com/ant-design/ant-design-pro/issues/2043
7、https://segmentfault.com/q/1010000016473651
这个问题以前是很好解决，现在有点问题，当然不是最优，但也可以。
3、.babelrc 文件 与src 并列
{
"presets": [
["@babel/preset-react"]
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties
yarn add mobx
yarn add mobx-react
Node
Copy
文件都有改动，据体看源码(router.jsx app.js home otc 都有修改 就不贴出来了)
当然当然 使用mobx 做项目是非常方便的
yarn start
https://github.com/llqfront/react/tree/master/my-app
mobx 会有以下几个问题
第一是装饰符，那就使用.babelrc（对应模块安装）
当使用.babelrc 后 出提示mobx 找不到，再把mobx mobx-react 安装一下就行了 要打不开，
