seance5 travaux pratiques

10) quelle outil utilise React pour compiler JSX : a) babel b) JSX Compiler c) React Router d) ReactDOM 11) quelle la correcte syntaxe pour importer Component de React: a) import React.Component from ‘react’ b) import {Component} from ‘react’ c) import [Component] from ‘react’ d) import Component from ‘react’ 12) React sépare user interface dans les composants, comment les composants sont combinés pour créer une user interface complète :

a) On regroupe les composants dans un dossier b) Avec webpack c) Avec imprecation des composants d) En découpant le code JSX 13) Que retourne le code suivant: const element=document.getElementById("root"); const root=ReactDOM.createRoot(element) function Voiture(){ const marque='Honda' const chevaux=8 const voiture={marque,chevaux} return ( <> <h3>Marque:{voiture.marque}</h3> <h3>chevaux:{voiture.chevaux}</h3>

Le composant App On dispose des composants fonctionnels suivants : Header.js import React from "react"; export default function Header(){ const titre="Application mon premier fonctionnel composant" return ( <div> <h1>ici afficher le titre</h1>

Presentation.js import React from 'react' export default function Presentation(props){ const nom="Rami" const prenom="Ahmed" return ( <div > <h2>Salut -nom prenom </h2> </div>

App.js import React from "react" import Header from "./Header" import Presentation from "./Presentation" function App(){ return( <div> <Header/>

index.js // 1) importer React et ReactDOM import React from 'react'; import ReactDOM from 'react-dom/client' import App from './components/App'; const element=document.getElementById("root"); const root=ReactDOM.createRoot(element) root.render(<App/>)

Créer ces trois composants dans le dossier components puis créer le fichier index.js qui se trouve directement dans le dossier src Faire les changements nécessaires pour Afficher le titre,le nom et le prenom