React 学习记录-入门（1）-- 开始

参考文档：

https://reactjs.org/docs/optimizing-performance.html#create-react-app
https://github.com/facebook/create-react-app
https://create-react-app.dev/docs/getting-started/

React

网上的例子很多，刚开始不知道这些代码的位置在哪里。

先上我的目录结构：

路由 （Router）

src\index.js

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import ReactDOM from 'react-dom';
import App from './App';
import Home from './Home';
import Roster from './Roster';
import Schedule from './Schedule';
import './index.css';

ReactDOM.render(
  <BrowserRouter>
    <Route exact path='/' component={Home}/>
    {/* /roster 和 /roster/:number 都是以 /roster 开头 */}
    <Route path='/roster' component={Roster}/>
    <Route path='/schedule' component={Schedule}/>
  </BrowserRouter>,
  document.getElementById('root')
);

在index.js代码中以下三行是引入Component，

import Home from './Home';
import Roster from './Roster';
import Schedule from './Schedule';

组件（Component）

创建Component：Home、Roster、Schedule

src\Home.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom'

class Home extends Component {
  render() {
    return (
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/roster'>Roster</Link></li>
        <li><Link to='/schedule'>Schedule</Link></li>
      </ul>
    );
  }
}

export default Home;

src\Schedule.js

import React, { Component } from 'react';

class Schedule extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to Schedule</h2>
        </div>
      </div>
    );
  }
}

export default Schedule;

src\Roster.js

import React, { Component } from 'react';

class Roster extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to Roster</h2>
        </div>
      </div>
    );
  }
}

export default Roster;

好了，执行npm start

显示页面了，Home、Roster、Schedule三个Link都好用，画面部分已经解决了。
下一步解决请求后台，或者请求转发。

题外话题：修改React的默认端口
编辑package.json， 修改scripts的start的值，追加【set PORT=9000 && 】

"scripts": {
    "start": "set PORT=9000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

NodeJs

与Apache、Nginx一样，Node.js也是服务器，所以支持代理、请求转发等。
在这里我们需要知道NodeJs的反向代理
安装代理
npm i express http-proxy-middleware --save-dev
执行完后打开package.json，发现多了一下内容

"devDependencies": {
    "express": "^4.17.1",
    "http-proxy-middleware": "^1.0.3"
  }

编辑自己的代理服务器

server.js：我尝试的第一个代理服务器
注：后面报错后才知道express是一个大名鼎鼎的基于Nodejs的框架，express怎么安装进来的，后面有说明。

var express = require('express');
// https://github.com/chimurai/http-proxy-middleware
// const proxy = require('http-proxy-middleware'); // 0.x.x版本的引用方式
const { createProxyMiddleware } = require('http-proxy-middleware');// 1.0.0版本的引用方式

var app = express();

app.use('/alu', 
	createProxyMiddleware({
		target: 'http://localhost:9091', 
		changeOrigin: true,
		pathRewrite:{
			"/alu":"alu"
		}
	})
);
app.listen(3000);

server.js的存放位置 

 打开package.json，修改scripts的start的值

"scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

已经准备好了后台Spring Boot服务，我们先看下后台服务是否好用

没问题，好用。

再看看NodeJs的代理的效果

 

好，没问题了，请求转发解决了。

问题来了

React的src\index.js不起作用了

修改service.js

const express = require('express');
// https://github.com/chimurai/http-proxy-middleware
// const proxy = require('http-proxy-middleware'); // 0.x.x版本的引用方式
const { createProxyMiddleware } = require('http-proxy-middleware');// 1.0.0版本的引用方式

var app = express();
app.use('/', require('./src/index'));
app.use('/alu', 
    createProxyMiddleware(
    {
        target: 'http://localhost:9091', 
        changeOrigin: true,
        pathRewrite:{
            "/alu":"alu"
        }
    })
);

但是又报了以下问题 

又开始找关于import的问题，原来是express框架下不支持import关键字。

express框架是我在前面安装http-proxy-middleware的时候，一起安装的。

其实我们只执行下面的就可以了

npm i http-proxy-middleware --save-dev

在网上可以搜一下这个内容：【在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案...】

替代方案：

src\setupProxy.js
参考：https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

//setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');// 1.0.0版本的引用方式

module.exports = function(app) {
 app.use(createProxyMiddleware('/alu', 
   { 
     target: 'http://localhost:9091', 
     changeOrigin:true,
     pathRewrite: {
        "^/alu": "/alu"
     }
   }))
}

打开package.json，修改scripts的start的值，是改回最初的默认值

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 src\request.js

import Axios from 'axios';

export const $= Axios.create({
    withCredentials:true
})

修改Home.js的内容

import React, { Component } from 'react';
import {$} from './request';
class Home extends Component {
    constructor(props){
		$.get('/alu/hello/1112').then(result=>{
            console.log(result.data)
        });
        super(props);
    }
    render(){
        return(
            <div>
                <span>数据加载中</span>
            </div>
        )
    }
}

export default Home;

 好了，执行npm start

终于成功了。

注：关于setupProxy.js，只能叫setupProxy.js，换了文件名就不起作用。

最简单的React工程完成了，告一段落！！

还有一个小问题：IE 报 SCRIPT1002: 语法错误，页面显示失败，暂时不理它了，其他浏览器好用就行。

各个文件的存放位置图