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