TP REACT ET NODE

mkdir my-app

cd my-app

mkdir backend

cd backend

2. Initialize + install

npm init -y
npm install express cors

3. Create files

`backend/server.mjs`

import express from "express";

import fs from "fs";

import cors from "cors";

const app = express();

app.use(cors());

app.use(express.json());

const FILE = "./users.json";

// 👉 Callback functions

function getUsers(req, res) {

const data = fs.readFileSync(FILE, "utf-8");

res.json(JSON.parse(data));

}

function addUser(req, res) {

const name = req.body.name;

const data = JSON.parse(fs.readFileSync(FILE, "utf-8"));

data.push(name);

fs.writeFileSync(FILE, JSON.stringify(data, null, 2));

res.json({ success: true, users: data });

}

// 👉 Routes using external callbacks

app.get("/api/users", getUsers);

app.post("/api/users", addUser);

app.listen(5000, () => console.log("Server running on 5000"));

`backend/users.json`

[]

4. RUN SERVER

Inside backend/:

node server.mjs

5. TEST

Open browser: http://localhost:5000/api/users

You should see: []

🧠 Final structure

my-app/

 ├── backend/

 │   ├── server.mjs

 │   └── users.json

FINAL

import { useState, useEffect } from "react";

import { MemoryRouter as Router, Routes, Route,Link } from 'react-router-dom'

import './App.css'

function WelcomeHome() {

const [users, setUsers] = useState([]);

const [name, setName] = useState("");

const loadUsers = () => {

fetch("http://localhost:5000/api/users")

.then((res) => res.json())

.then((data) => setUsers(data));

};

useEffect(() => {

loadUsers();

}, []);

const addUser = () => {

fetch("http://localhost:5000/api/users", {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({ name }),

})

.then((res) => res.json())

.then(() => {

setName("");

loadUsers(); // refresh list

});

};

return (

<div className="div">

{/* FORM */}

<input

type="text"

placeholder="Enter name"

value={name}

onChange={(e) => setName(e.target.value)}

<button onClick={addUser}>

Subscribe

</button>

{/* LIST */}

{users.map((name, index) => (

<div key={index}>

<Welcome name={name} />

<LikeButton />

</div>

))}