■

Javascript React

参考URLはこちら。

React公式はこちら。

dev/my_project/react-express

大まかに分けてやることは

  1. 全体の環境構築
    1. backendのExpressサーバの構築
      1. APIのエンドポイントの作成
    1. frontendのReactの設定
      1. React初期画面
  4. ReactからExpressサーバへのアクセス

になる。

■1. 全体の環境構築

mkdirとcdで作業ディレクトリを作り、

npm init -y

で、初期設定。

※ここでは以下「sample」とする。

■2-1. backendのExpressサーバの構築

sampleディレクトリに「backend」ディレクトリを作成。

backendディレクトリへ移動。

npm install express

でexpressをインストール。

index.js内を書き換え。

const express = require('express')
const app = express()
const port = process.env.PORT || 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`listening on *:${port}`);
})

backendディレクトリでテスト。

node backend/index.js

listening on *:3000

と出たらOK。localhost:3000でアクセス可能。

■2-2. APIのエンドポイントの作成

backendのindex.jsに

app.get("/api", (req, res) => {
  res.json({ message: "Hello World!" });
});

を追加。整理すると以下。

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get("/api", (req, res) => {
  res.json({ message: "Hello World!" });
});

app.listen(port, () => {
  console.log(`listening on *:${port}`);
})

localhost:3000/apiにアクセスで、JSONデータが戻されるのを確認。

■3-1. frontendのReactの設定

sampleディクトリに戻り、「frontend」ディレクトリを作成。

reactをインストール。

npx create-react-app frontend

npm start　を実行すると、port3000が使用済みであるというメッセージが表示される。

他のポートで起動するか聞かれるが、”n”を選択。

backendのindex.jsを修正。

const port = process.env.PORT || 3001

とボートを修正。

再度、frontendに戻り、npm start でlocalhost:3000で表示できるか確認。

■3-2.React初期画面

frontend/src/App.jsを修正。

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>フロントエンド</h1>
    </div>
  );
}

export default App;

■4.ReactからExpressサーバへのアクセス

fontend/src/App.jsを修正。

ReactのuseState,useEffectを利用する。

App()に

  const [message, setMessage] = useState('');
  useEffect(() =>{
    fetch('http://localhost:3001/api')
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  },[])

を追加。整理すると

import './App.css';
import { useState,useEffect } from 'react'

function App() {
  const [message, setMessage] = useState('');
  useEffect(() =>{
    fetch('http://localhost:3001/api')
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  },[])
  return (
    <div className="App">
      <h1>フロントエンド</h1>
      <p>{ message }</p>
    </div>
  );
}

export default App;

ここでnpm startでlocalhost:3000で確認しても、CORSポリシーのエラーになる。

なので、fontend/package.jsonファイルにproxyを設定。

"proxy": "http://localhost:3001",

整理すると

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": { 略

合わせて、fontend/src/App.jsも修正。

    fetch('/api')

と修正。整理すると

import './App.css';
import { useState, useEffect } from 'react'
function App() {
  const [message, setMessage] = useState('');
  useEffect(()=> {
    fetch('/api')
    .then((res) => res.json())
    .then((data) => setMessage(data.message));
  }, [])
  return (
    <div className="App">
      <h1>フロントエンド</h1>
      <p>{ message }</p>
    </div>
  );
}
export default App;

/frontend、/backend、共にnpm start　でlocalhost:3000/Apiで確認できる。

http://localhost:3000/apiにアクセスしているように見えるが、React側のproxyの設定によってhttp://localhost:3001/apiにアクセスされている仕組み。