1 2 3

Routage(les classes) import { BrowserRouter } from "react- Employees.splice(index,1);

router-dom"; history('/');
App.js const root = }
import React, { Component } from 'react'; ReactDOM.createRoot(document.getEle return(
import './App.css'; mentById('root')); <Fragment>
import { Routes, Route, Link } from 'react- root.render( <div style={{margin:"10rem"}}>
router-dom'; <BrowserRouter> <Table striped bordered hover size="sm">
class App extends Component { render() { <App /> <thead>
return ( </BrowserRouter> <th>NAME</th>
<Link to="/">Home</Link> ); <th>AGE</th>
</li> ----------------------------------------------- <th>ACTIONS</th>
<li> </thead>
<Link to="/about">About</Link> Crud Application <tbody>
</li> {
<li> App.js Employees && Employees.length > 0 ?
<Link to="/blog">Blog</Link> Employees.map((item) => {
</li> return(
import "./App.css";
</ul> <tr>
import Home from
<div className="main-route-place"> <td>
"./components/Home";
<Routes> {item.Name}
import Add from "./components/Add";
<Route path="/" element={<Home />} /> </td>
import Edit from "./components/Edit";
<Route path="/about" element={<About <td>
import { BrowserRouter as Router,
/>} /> {item.Age}
Routes, Route } from "react-router-dom";
<Route path="/blog" element={<Blog />} </td>
function App() {
/> <td>
return (
</Routes> <Link to={'/edit'}>
<div className="App">
</div> <Button onClick={()=> handleEdit(item.id,
<Router>
</div> item.Name, item.Age)}>EDIT</Button>
<Routes>
); </Link>
<Route path="/" element={<Home
} &nbsp;
/>} />
} <Button onClick={()=>
<Route path="/create"
class Home extends React.Component { handleDelete(item.id)}>DELETE</Button>
element={<Add />} />
render() { </td>
<Route path="/edit" element={<Edit
return ( </tr>
/>} />
<div> )
</Routes>
<h2>Home</h2> })
</Router>
</div> :
</div>
);} "No Data Available"
);
} }
}
class About extends React.Component { </tbody>
export default App;
render() { </Table>
------------------------------------
return ( <br></br>
Home.js(comp) <Link className='d-grid gap-2'
<div> import React, { Fragment } from "react";
<h2>About</h2> to="/create">
import { Button, Table } from "react- <Button size="lg">CREATE</Button>
</div> bootstrap";
);}} </Link>
import </div>
class Blog extends React.Component { "bootstrap/dist/css/bootstrap.min.css";
render() { </Fragment>
import Employees from "./Employees"; )
return ( import { Link, useNavigate } from "react-
<div> }
router-dom"; export default Home;
<h2>Blog</h2> function Home(){
</div> --------------------------------------
let history = useNavigate();
);}} Add.js(comp)
const handleEdit = (id, name, age) => {
export default App; import React, {useState} from "react";
localStorage.setItem('Id', id);
------------------------------------ import { Button, Form } from "react-
localStorage.setItem('Name', name);
index.js bootstrap";
localStorage.setItem('Age', age);
import React from 'react'; import
}
import ReactDOM from 'react- "bootstrap/dist/css/bootstrap.min.css";
const handleDelete = (id) => {
dom/client'; import Employees from "./Employees";
var index = Employees.map(function(e){
import './index.css'; import {v4 as uuid} from "uuid";
return e.id
import App from './App'; }).indexOf(id);
 4 5 6
import { Link, useNavigate } from "react- }).indexOf(id);
router-dom"; const handleSubmit = (e) => { Api(Axois)
function Add(){ e.preventDefault();
const[name, setName] = useState(''); let a = Employees[index];
const[age, setAge] = useState(''); a.Name = name; import React, { Component } from
let history = useNavigate(); a.Age = age; "react";
const handleSubmit = (e) => { history("/"); import axios from "axios";
e.preventDefault(); } class Data extends Component {
const ids = uuid(); useEffect(() => { state = {
let uniqueId = ids.slice(0,8); setId(localStorage.getItem('Id')) persons: [],
let a = name, b = age; setName(localStorage.getItem('Name')) };
Employees.push({id:uniqueId, Name:a, setAge(localStorage.getItem('Age')) componentDidMount() {
Age:b}); },[])
history("/"); return( axios.get("https://jsonplaceholder.typicod
} <div> e.com/users").then((res) => {
return( <Form className="d-grid gap-2" const persons = res.data;
<div> style={{margin:"15rem"}}> this.setState({ persons });
<Form className="d-grid gap-2" <Form.Group className="mb-3" });
style={{margin:"15rem"}}> controlId="formName"> }
<Form.Group className="mb-3" <Form.Control type="text"
controlId="formName"> placeholder="Enter Name" value={name} render() {
<Form.Control type="text" required onChange={(e) => return (
placeholder="Enter Name" required setName(e.target.value)}> <div>
onChange={(e) => </Form.Control> {console.log(this.state.persons)}
setName(e.target.value)}> </Form.Group> <table>
</Form.Control> <Form.Group className="mb-3" <thead>
</Form.Group> controlId="formAge"> <td>id</td>
<Form.Group className="mb-3" <Form.Control type="text" <td>name</td>
controlId="formAge"> placeholder="Enter Age" value={age} <td>email</td>
<Form.Control type="text" required onChange={(e) => </thead>
placeholder="Enter Age" required setAge(e.target.value)}> {this.state.persons.map((val) => {
onChange={(e) => </Form.Control> return (
setAge(e.target.value)}> </Form.Group> <tbody>
</Form.Control> <Button type="submit" onClick={(e) => <td>{val.id}</td>
</Form.Group> handleSubmit(e)}>Update</Button> <td>{val.name}</td>
<Button type="submit" onClick={(e) => </Form> <td>{val.email}</td>
handleSubmit(e)}>Submit</Button> </div> </tbody>
</Form> ) )
</div> } })}
) export default Edit; </table>
} </div>
export default Add; );
------------------------- Json_file.js(comp) }
Edit.js(comp) }
import React, {useEffect, useState} from const Employees = [ export default Data;
"react"; { ---------------------------------
import { Button, Form } from "react- id:"1",
bootstrap"; Name:"ALAMI Badr",
import Age:"25"
"bootstrap/dist/css/bootstrap.min.css"; },{
import Employees from "./Employees"; id:"2",
import {v4 as uuid} from "uuid"; Name:"ZAHIR Zahra",
import { Link, useNavigate } from "react- Age:"26"
router-dom"; },{
function Edit(){ id:"3",
const[id, setId] = useState(''); Name:"MARRAKECHI Sawsane",
const[name, setName] = useState(''); Age:"24"
const[age, setAge] = useState(''); }
let history = useNavigate(); ]
var index = Employees.map(function(e){ export default Employees;
return e.id