actual combat 43 react项目实战

步骤

1. 起步（脚手架创建项目）

create-react-app 项目名

2. 配置跨域

• 打开Create React App脚手架中文文档：https://create-react-app.bootcss.com/
• 打开菜单“服务端集成-Proxying in Development”，这页文档记录了跨域如何配置
  步骤：
• 安装http-proxy-middleware，命令：npm install http-proxy-middleware --save
• 创建文件src/setupProxy.js

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

setupProxy.js文件举例：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',
    // target: 'https://movie.douban.com/',
      changeOrigin: true
    })
  );
};

• 随便找个不需要token的网络接口测试即可，如：豆瓣电影，
  https://movie.douban.com/j/search_tags?type=movie&source=index
• app.js文件测试：

import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    console.log('useEffect');
    axios.get('/api/test/test/longwang/1').then((res) => {
      // axios.get('/api/j/search_tags?type=movie&source=index').then((res) => {
      console.log(res.data);
    });
  }, []);
  return (
    <div className="App">
      {/* <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header> */}
      app
    </div>
  );
}

export default App;

2. 配置路由

• 安裝路由依赖，npm i --save react-router-dom
• 创建三个文件夹，router、components、views，其中router用于指定路由页面，components用于存放非路由页面，views用于存放路由页面。(rfc快捷提示键直接生成函数式组件。
  代码举例：
  分别是，App.js、router.js
• App.js

import logo from './logo.svg';
import './App.css';
import IndexRouter from './router/IndexRouter';

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

export default App;

• router.js

import React from 'react'
import { HashRouter, Route, Switch } from 'react-router-dom'
import Login from '../views/login/Login'
import NewsSandBox from '../views/sandbox/NewsSandBox'

export default function IndexRouter() {
    return (
        <HashRouter>
            <Switch>
                <Route path="/login" component={Login}></Route>
                {/* <Route path="/" component={NewsSandBox}></Route> */}
                <Route path="/" router={() =>
                    localStorage.getItem('token') ? <NewsSandBox></NewsSandBox> : <Login></Login>
                }></Route>
            </Switch>
        </HashRouter>
    )
}