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: 語法錯誤，頁面顯示失敗，暫時不理它了，其他瀏覽器好用就行。

各個文件的存放位置圖