TP1  React

1       Exercice – Composants et Props. 1

2       Etapes. 1

Latest React App Setup (Vite) Using Visual Studio Code. 1

2.1         Install required tools. 2

Install Node.js. 2

Install Visual Studio Code. 2

2.2         Open VS Code. 2

2.3         Open Terminal in VS Code. 2

2.4         Create React project with Vite. 2

2.5         Move into the project. 2

2.6         Install dependencies. 2

2.7         Run the app. 2

2.8         Open in browser. 3

2.9         Project structure (important). 3

3       Instructions : 3

4       Solution. 3

 

1         Exercice – Composants et Props

Objectif : Créer une petite application React qui utilise plusieurs composants et passe des propriétés (props) entre eux.

2         Etapes

 

Latest React App Setup (Vite) Using Visual Studio Code

2.1    Install required tools

 

Install Node.js

https://nodejs.org

Check:
node -v
npm -v

Install Visual Studio Code

https://code.visualstudio.com

2.2    Open VS Code

• Open VS Code
• Click: File → Open Folder (choose where you want your project)

2.3    Open Terminal in VS Code

• Menu: Terminal → New Terminal (choose cmd)

2.4     Create React project with Vite

npm create vite@latest my-app

(Select: React → JavaScript

2.5    Move into the project

cd my-app

2.6    Install dependencies

npm install

2.7    Run the app

npm run dev

 

2.8    Open in browser

http://localhost:5173$

 

Pour quitter taper q

2.9    Project structure (important)

• src/ → main code
• src/App.jsx → main component
• src/main.jsx → entry point

3         Instructions :

Dans App.jsx

1. Créer un composant (function)  Welcome
• Ce composant reçoit une prop name.

o    Il affiche :

<h1 className="welcome-text">Hello, {name}</h1>

2. Créer un composant Navbar
• Ce composant reçoit une prop src.
• Il affiche une image (img) avec la source passée via src et la classe CSS navbar-photo.
• Le tout doit être dans une balise <nav> avec la classe navbar.
3. Créer un composant Photo
• Ce composant reçoit src et alt en props.
• Il affiche une image (img) avec ces props et la classe CSS photo.
• Si alt n’est pas fourni, utiliser "photo" par défaut.
4. Créer le composant principal App
• Ce composant doit inclure :
• Le composant Navbar avec la prop src pointant vers /saida.png.
• Deux composants Welcome avec les noms "Ahmed" et "Amine" dans un <div> séparé.
• Le composant Photo avec la prop src pointant aussi vers /saida.png et alt="Profile".
• Tous les éléments doivent être contenus dans une <div> avec la classe app-container.
5. Importer le fichier CSS
• import './App.css' au début du fichier.

 

4         Solution

App.jsx     import './App.css' function Welcome(p) {   return <h1 className="welcome-text">Hello, {p.name}</h1>; }   function Navbar(p) {   return (     <nav className="navbar">       <img src={p.src} alt="Profile" className="navbar-photo" />     </nav>   ); } function Photo({ src, alt }) {   return <img src={src} alt={alt || "photo"} className="photo" />; }   function App() {   return (     <div className="app-container">       <Navbar src="/saida.png" /> {/* replace with your photo path */}       <div className='div'>       <Welcome name="Ahmed" />             <Welcome name="Amine" />       </div>       <Photo src="/saida.png" alt="Profile" />     </div>   ); }   export default App;

Main.jsx import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx'   createRoot(document.getElementById('root')).render(   <StrictMode>     <App />   </StrictMode>, )

App.css   /* Align all components in a row */ .app-container {   display: flex;   align-items: center;   gap: 20px; /* space between components */ }   /* Photo styling */ .photo {   width: 50px;   height: 50px;   border-radius: 50%; /* circular photo */   object-fit: cover; }   /* Welcome text styling */ .welcome-text {   margin: 0;   width: 300px;   font-size: 1.5rem; } .div{   display:flex;   flex-direction: column;}