react 创建sass router mobx项目

Posted 2021-07-18 老张在线敲代码

创建项目第一步 基本搭建

git

在创建之前，需要有一个git 仓库，我们之后要把项目搭建到git 中

node版本

查看node 版本 node -v
v14.15.3 为了保证同步，选择node 版本14
或 使用nvm 进行node 版本安装与切换
nvm use v14

创建项目

npx create-react-app my-app官方标准命令，my-app 为项目名称

git仓库提交

这块你要进行git 提交
git add --all 提交所有文件

git commit -m up
主要是在企业做项目就应该放到仓库中，如果企业没有，那自己也要弄个仓库，哪天在家改个东西，或像今年的疫情在家办公所以，只要远程仓库有代码，不管在哪儿都可以轻松的取到自己写的项目。

终端操作

cd 项目名称 进入项目目录 先进入到这个项目目录

yarn eject 开启基本的配置文件
这时候先不着急启项目，先把配置文件开启就是webpack 这些基础配置开启

最后替换掉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  --use-polling --polling-interval 1000",
        "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"
},

创建项目第二步-安装sass依赖包

yarn add node-sass-chokidar 以及 yarn add npm-run-all

安装完成sass之后

1.在src下新建文件夹styles
2.styles里新建index.scss
3.在index.js 里将import "./index.css"改成import "./styles/index.css"
4.启动项目 index.css自动生成

yarn start启动项目
然后就可以启动项目啦，这时候的项目就已经基本搭建完成了

.

创建项目第三步-安装react-router.

安装路由

yarn add react router-dom

新增加Router.js文件 内容如下

import React from 'react';
import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';
import App from './App.js';
const Router = () => (
    <BrowserRouter>
        <App/>
    </BrowserRouter>
)
export default Router;

修改index.js

import Router from './Router';
<Router />

App.js

import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';

import Home from './view/home';引入页面
class App extends Component {
    render(){
        return (
            <Switch>
            	给页面配置路由
                <Route exact path="/" component={Home} />
            </Switch>
        );
    }
}
export default App

.

创建项目第四步-设置代理

src/setupProxy.js 创建文件
并且安装依赖包yarn add http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
      '/home',createProxyMiddleware({
        target: 'https://#####.com/',
        changeOrigin: true,
      })
    );
    app.use(
      '/wp-json',createProxyMiddleware({
        target: 'https://#####.cn/',
        changeOrigin: true,
      })
    );
};

.
以下是具体在某个页面使用

obj = {
mediareports:{
                page_number:'2',
                page_size:'10'
            }
}
const cfg = this.state.mediareports;
this.getApi('/home/mediareports',cfg,{}).then((res)=>{
    console.log(res.data)
})
this.getApi('/wp-json/wp/v2/posts',{},{}).then((res)=>{
    console.log(res.data)
})

async getApi(url,cfg,headers){
    let data = await axios.get(url,{params:cfg},
                               {
        headers: headers
    })
    return data;
}

.

创建项目第五步-安装mobx

yarn add mobx 以及 yarn add mobx-react

新建/src/store/store.js

import {observable, computed, action, autorun,runInAction} from 'mobx';
// import {observable, computed, action} from 'mobx';
class Store {
    @observable tradeCfg = {
        'sadf':'sadf'
    };
    @observable baseInfo = {};
    @observable callback = null;
    @observable token = [
        {
            "id":1,
            "name":"YD"
        },
        {
            "id":2,
            "name":"ETH"
        }
    ];
}

export default Store;

.

替换Router.js文件

import React from 'react';
import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';
import { Provider } from 'mobx-react';
import { observable, useStrict ,autorun} from 'mobx';

import App from './App.js';
import firstStore from './store/store';
// const cnstore = new cnStore();
const stores = {
  first: new firstStore(),
  // ...other stores
};

const Router = () => (
    <BrowserRouter>
        <Provider {...stores}>
            <App/>
        </Provider>
    </BrowserRouter>
)
export default Router;

.

相信很多人已经到这一步，此时会抛出一个错误，不过太过紧张，接下来告诉大家怎么解决这个报错
报错信息如下：

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):

如果报错是这个的话就可以进行下一步操作，不是的话就得看看自己是不是漏了哪个步骤

以上问题 需安装

yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties

.

需添加或替换代码 package.json

"presets": [
        ["react-app"],
        ["@babel/preset-react"]
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", {"legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }]
]

最后替换views文件夹中的index.jsx

import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';

import {observer,inject} from 'mobx-react';
// 导入需要的模块
@withRouter
@inject('first')
@observer
class View extends Component {
    render(){
        console.log(this.props.first)
        return (
            <React.Fragment>
                <div className="mian">这是event面</div>
                <NavLink to="/">首页</NavLink><br/>
                <NavLink to="/input">表单</NavLink><br/>
                <NavLink to="/event">事件</NavLink>
            </React.Fragment>
        )
    }
}
export default View;