[react]react创建app,路由，mobx 全教程 -凯发娱发k8

​

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 凯发娱发k8官网解释

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

​

[react]react创建app,路由，mobx 全教程的相关教程结束。