Scribd
Upload
4 views

React React is a JavaScript library

Uploaded by

getachew zemene
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

React React is a JavaScript library

Uploaded by

getachew zemene
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

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);
});

You might also like