seance12 2 tp

Index.css body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

Index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const element = document.getElementById("root"); const root = ReactDOM.createRoot(element); root.render(<App />);

App.js import React, { useState } from "react"; import Form from "./components/Form"; import '../src/index.css' export default function App(){ return ( <div className="App"> <Form/> </div>

Form.js à compléter import React, { useState } from "react"; export default function Form(){ const [nom,setNom]=useState('') const [prenom,setPrenom]=useState('') function handlerOnChangeNom(event){

return( <div className="container"> <form onSubmit={handlerSubmit}> <div className="list"> <h2 className="title">Formulaire Inscription</h2> <div> <label>Nom:</label><input type="text" onChange={handlerOnChangeNom} value={nom}/> </div> <div> <label>Prenom:</label><input type="text" onChange={handlerOnChangePrenom} value={prenom}/> </div> <div>

Le composant ListArticle permet d’ajouter un article dans une liste, l’interface affiche en bas les données de la liste. Structure de projet

Index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const element = document.getElementById("root"); const root = ReactDOM.createRoot(element); root.render(<App />);

App.js import React, { useState } from "react"; import '../src/index.css' import ListArticle from "./components/ListArticle"; export default function App(){ return ( <div className="App"> <ListArticle/> </div>