[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 安装一下就行了 要打不开，