はじめに

React,Node.js,MySQLを使ってデータベースをフロントエンドを接続し、データを画面に表示する手順を説明します。⚠︎初心者なので不備があれば指摘してください！！

必要なツールのインストール

以下のツールをインストールします。

Node.js
MySQL
Vite

ViteでReactプロジェクト作成

プロジェクトフォルダを作成し、clientとserverフォルダを作ります。
clientフォルダ内で以下のコマンドを実行し、ViteでReactプロジェクトを作成します。

npm create vite@latest .
npm install
npm run dev

MySQLでデータベースとテーブル作成

次に、MySQLでデータベースとテーブルを作成し、サンプルデータを挿入します。
MySQLにログインし、以下のコマンドを実行してデータベースとテーブルを作成します。

sql

CREATE DATABASE my_project_db;
USE my_project_db;

CREATTE TABLE items (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL
);

INSERT INTO items (name) VALUES ('Item 1'),('Item 2'), ('Item 3');

Node.js(Express)でMySQLからデータを取得

Node.jsプロジェクトのセットアップ

次にNode.jsを使って、MySQLからデータを取得するAPIを作成します。
serverフォルダ内でNode.jsプロジェクトを初期化し、必要なパッケージをインストールします。

npm init -y
npm install express mysql2 cors nodemon

server/server.jsに以下のコードを追加してMySQLからデータを取得するAPIを作成します。パスワードとデータベースは各自変更してください。

server.js

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');

const app = express();
const port = 3000;

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'your_password',
  database: 'my_project_db'
});

app.use(cors());

app.get('/items', (req, res) => {
  connection.query('SELECT * FROM items', (err, results) => {
    if (err) {
      return res.status(500).send('Database query error');
    }
    res.json(results);
  });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

サーバーを起動し、確認します。

nodemon server.js

ブラウザでhttp://localhost:3000/itemsにアクセスすると、挿入したデータが表示されます。

Reactでデータを表示

次に、Reactを使ってAPIからデータを取得し、画面にリスト表示します。
client/src/App.jsxに以下のコードを追加します。

App.jsx

import { useState, useEffect } from 'react';

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/items')
      .then(response => response.json())
      .then(data => setItems(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Items List</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

React開発サーバーを起動し、ブラウザでリストが表示されればOKです。

npm run dev

まとめ

この記事では、React,Node.js,MySQLを使ってデータベースとフロントエンドを接続し、データを表示する手順を説明しました。わかりづらいところや間違っているところがあるかもしれませんが、アウトプット練習ということで多めに見てください🙏