React: React is a JavaScript library for building user interfaces.
It allows you to
create reusable UI components and efficiently update the UI when the underlying
data changes.
Express.js: Express.js is a popular web framework for Node.js. It provides a simple
and flexible way to build web applications and APIs. Express.js handles routing,
middleware, and other server-side functionalities.
Sequelize ORM: Sequelize is an Object-Relational Mapping (ORM) library for Node.js.
It provides an abstraction layer for interacting with databases, allowing you to
work with databases using JavaScript objects and methods.
Create a new directory for your project and navigate to it.
Run the following command to initialize a new Node.js project:
npm init -y
Install Express.js and Sequelize:
npm install express sequelize sequelize-cli mysql2
Set up the Express.js server:
Create a new file called server.js and add the following code:
const express = require('express');
const app = express();
const PORT = 3000; // Choose any available port
app.use(express.json());
// Add your routes and middleware here
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Set up Sequelize and connect to the database:
Run the following command to initialize Sequelize:
npx sequelize-cli init
Run the migrations to create the table in the database:
npx sequelize-cli db:migrate
Generate a new React project:
Open a new terminal window.
Run the following command to generate a new React project:
npx create-react-app my-app
Create a new component:
Open the src/App.js file and replace the existing code with the following:
import React, { useEffect, useState } from 'react';
function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('/api/users')
.then((response) => response.json())
.then((data) => setUsers(data));
}, []);
return (
<div>
<h1>User List</h1>
<ul>
{users.map((user) => (
<li key={user.id}>
{user.name} - {user.email}
</li>
))}
</ul>
</div>
);
}
export default App;
Update the backend server:
Open the server.js file and add the following code to define a route for fetching
users:
const { User } = require('./models');
app.get('/api/users', async (req, res) => {
const users = await User.findAll();
res.json(users);
});
