はじめに
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を使ってデータベースとフロントエンドを接続し、データを表示する手順を説明しました。わかりづらいところや間違っているところがあるかもしれませんが、アウトプット練習ということで多めに見てください🙏