全局安装react-cli

npm install -g create-react-app

创建项目

create-react-app news-system 

启动项目

yarn start

src中的index去掉web报告分析和暂时取消严格模式：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
// import reportWebVitals from './reportWebVitals';

ReactDOM.render(<App />, document.getElementById("root"));

// reportWebVitals();

App重写，使用函数无状态组件：

import React from "react";

function App(props) {
return <div>App</div>;
}

export default App;

安装sass

 yarn add sass

安装axios

yarn add axios

安装反向代理 http-proxy-middleware

yarn add http-proxy-middleware

在src文件下创建setupProxy.js文件

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/ajax",
    createProxyMiddleware({
      target: "https://m.maoyan.com",
      changeOrigin: true
    })
  );
};

在App.js里测试axios和反向代理,测试前需要重启项目

import React from "react";
import axios from "axios";
function App(props) {
  axios
    .get(
      "ajax/movieOnInfoList?token=&optimus_uuid=A0DA9810FC4711EB8EB57F2D71C8720EF63AA4FEDA4E49F587C017827E2EDCCD&optimus_risk_level=71&optimus_code=10"
    )
    .then(res => {
      console.log("debug log --> ", res);
    });
  return <div>App</div>;
}

export default App;

安装react-router-dom路由

yarn add react-router-dom

在src下创建router/indexRouter.js

import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Login from "../pages/login/Login";
import NewsSandBox from "../pages/sandBox/NewsSandBox";

function indexRouter(props) {
  return (
    <HashRouter>
      <Switch>
        <Route path="/login" component={Login}></Route>
        <Route
          path="/"
          render={() =>
            localStorage.getItem("token") ? (
              <NewsSandBox></NewsSandBox>
            ) : (
              <Redirect to="/login"></Redirect>
            )
          }
        ></Route>
      </Switch>
    </HashRouter>
  );
}

export default indexRouter;

在src下创建pages/sandBox/NewsSandBox.js

import React from "react";

function NewsSandBox(props) {
  return <div>NewsSandBox</div>;
}

export default NewsSandBox;

在src下创建pages/login/Login.js

import React from "react";

function Login(props) {
  return <div>NewsSandBox</div>;
}

export default Login;

安装ui组件ant-design ant.design

yarn add antd

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

---

更新于2021/09/08

未更新完，持续更新中...