TP4-1

UNIVERSITY OF HASSAN II - FACULTY OF SCIENCE AIN CHOCK - FULLSTACK & DEVOPS - FRONTEND 1 - Provided By M.
Noussair Fikri
LICENCES PROFESSIONNELLES
FS&DEVOPS
FRONT END 1
Travaux pratiques
TP4: Introduction au framework REACT JS
■ Installation NodeJS et NPM :

• https://nodejs.org/download/release/v23.3.0/node-v23.3.0-x64.msi
■ Ouvrir une ligne de commande POWERSHELL.
■ npm create vite@latest my-react-app -- --template react
■ Pour demarrer votre application, lancer les commandes suivantes:

npm install / npm start
npm i --save-dev react-router-dom
npm i --save-dev @types/react-router-dom
■ Parcourir le projet créée, sur le fichier src/index.js, commentez le code suivant:
--------------------------------------------------------------------------------------------------------
import App from './App';
Et
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
---------------------------------------------------------------------------------------
■ Parcourir le projet, supprimez les 3 fichiers:

src/App.js
src/App.css
src/App.test.js
■ Sous le dossier src, créez les 2 fichiers Main.js et Main.css, puis dans le fichier
Main.jsx mettez le code suivant :
import React from "react";

import { Link, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Products from "./Products";
import ProductDetails from "./ProductDetails";
UNIVERSITY OF HASSAN II - FACULTY OF SCIENCE AIN CHOCK - FULLSTACK & DEVOPS - FRONTEND 1 - Provided By M. Noussair Fikri
function Main() {
return (
<h1>Hello, world!</h1>
);
}
export default Main;
■ Dans le fichier index.jsx, importez le composant Main, s’inspirer de l’import

du composant App.
■ Decommentez le code de creation du root et de l’interpretation, puis remplacez

App par Main pour pouvoir afficher votre nouveau composant.
■ Dans le fichier index.js, importez le composant Main, s’inspirer de l’import du

composant App.
LET’S GOOO !
Cette partie consiste à créer une page d’accueil, une page d’affichage de la liste de
produit puis les details de chaque produits.
■ Créer un fichier Home.js qui comporte seulement le titre: Page d’accueil
■ Créer un fichier ProductData.js, et y copier les données suivants:
export default [
{
id: "1",
name: "XIAOMI Mi SMART TV P1 32",
description: "Everyone's have to buy a TV",
price: 2520.00
},
{
id: "2",
name: "Moulinex Blender Genuine LM241B25",
description:
"500W, 1 vitesse + pulse, Bol 1,75L et 1 accessoire",
price: 799.00
},
{
id: "3",
name: "Adidas Baskets Blanches",
description:
"Opte pour un look casual décontracté. Cette chaussure affiche
3 bandes cousues sur l’extérieur du pied. Elle est ornée de 3 bandes
perforées du côté interne.",
price: 499.00
}
];
■ Créer un fichier Products.js, qui va servir de composant regroupant la liste des

produits, puis ajouter les imports suivants:

import { Link } from "react-router-dom";
import productsData from "./productsData";
■ En vous inspirant de la section «React: Listes et clés» du cours essayez d’afficher la

liste des produits à partir de productsData afin de finaliser le composant Products.
N’afficher que le nom du produit en titre (Balise h4), le prix en gras (Balise <strong>).
Pour pouvoir renvoyez l’utilisateur vers les details d’un produit, utilisez le code
suivant:
<Link to={`/products/${product.id}`}>{product.name}</Link>
■ Créer un fichier ProductDetails.js qui va servir de composant pour afficher les details
d’un produit, puis y ajouter les imports suivants:
import React from "react"

import {useParams} from "react-router-dom"
import productsData from "./productsData"
■ Utilisez le code suivant pour récupérer l’ID du produit à partir de l’url:
const {productId} = useParams()

const thisProduct = productsData.find(prod => prod.id === productId)
■ Pour finaliser votre composant ProductDetails vous devez afficher le nom du produit
en titre (Balise h2), le prix en gras (Balise <strong>) et la description en paragraphe,
puis regrouper le tout dans un Div.
■ Revenir au composant principale Main, et remplacez le code existant par celui-ci:

import { Link, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Products from "./Products";
import ProductDetails from "./ProductDetails";
function Main() {
return (
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/products">Products</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="/products/:productId" element={<ProductDetails />} />
</Routes>
</div>
);
}
export default Main;

■ Et finalement remplacer le code de index.js par:
import React from 'react';

import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from "react-router-dom";
import Main from './Main';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<Router>
<Main />
</Router>
);

TP4-1

Transféré par

Droits d'auteur :

Formats disponibles

TP4-1

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP4-1

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITY OF HASSAN II - FACULTY OF SCIENCE AIN CHOCK - FULLSTACK & DEVOPS - FRONTEND 1 - Provided By M.

TP4: Introduction au framework REACT JS

■ Installation NodeJS et NPM :

■ Ouvrir une ligne de commande POWERSHELL.

■ npm create vite@latest my-react-app -- --template react

■ Pour demarrer votre application, lancer les commandes suivantes:

■ Parcourir le projet créée, sur le fichier src/index.js, commentez le code suivant:

const root = ReactDOM.createRoot(document.getElementById('root'));

■ Parcourir le projet, supprimez les 3 fichiers:

import React from "react";

export default Main;

■ Dans le fichier index.jsx, importez le composant Main, s’inspirer de l’import

■ Decommentez le code de creation du root et de l’interpretation, puis remplacez

■ Dans le fichier index.js, importez le composant Main, s’inspirer de l’import du

■ Créer un fichier Home.js qui comporte seulement le titre: Page d’accueil

■ Créer un fichier ProductData.js, et y copier les données suivants:

■ Créer un fichier Products.js, qui va servir de composant regroupant la liste des

import React from "react";

■ En vous inspirant de la section «React: Listes et clés» du cours essayez d’afficher la

import React from "react"

■ Utilisez le code suivant pour récupérer l’ID du produit à partir de l’url:

const {productId} = useParams()

■ Revenir au composant principale Main, et remplacez le code existant par celui-ci:

import React from "react";

export default Main;

■ Et finalement remplacer le code de index.js par:

import React from 'react';

Vous aimerez peut-être aussi