Scribd
Importer
33 vues8 pages

Efm Rabat-Sale

Le document présente des concepts clés en développement d'applications, tels que la séparation de la logique, la prévisibilité et la facilité de test. Il inclut également des exemples de code en React pour gérer des requêtes HTTP, l'état d'un composant et la navigation entre une liste de produits et les détails d'un produit. Enfin, il montre comment utiliser React Router pour gérer les routes dans une application full stack.

Transféré par

مروان مروان
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
33 vues8 pages

Efm Rabat-Sale

Le document présente des concepts clés en développement d'applications, tels que la séparation de la logique, la prévisibilité et la facilité de test. Il inclut également des exemples de code en React pour gérer des requêtes HTTP, l'état d'un composant et la navigation entre une liste de produits et les détails d'un produit. Enfin, il montre comment utiliser React Router pour gérer les routes dans une application full stack.

Transféré par

مروان مروان
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

1/

-Séparation claire de la logique de l'application

-Prévisibilité

-Facilité de test

-Possibilité de développer des applications distribuées

-Possibilité de "undo" et "redo"

ex2

1-c

2-b

3-c

4-d

5-d

Exercice 3/ Full Stack::

Code 1 est utilisé pour effectuer une requête HTTP à l'aide de la fonction fetch() pour récupérer des
données à partir de l'URL spécifiée, qui renvoie une réponse en format JSON. La méthode then() est
utilisée pour traiter cette réponse, en utilisant console.log(response) pour afficher la réponse dans la
console, puis en utilisant response.json() pour convertir la réponse en un objet JavaScript. Enfin, la
méthode setState() est utilisée pour mettre à jour l'état de l'application en utilisant les données
récupérées.

ex 3

code 2

un composant React pour gérer l'état (nombre de clics sur un bouton) et les effets secondaires (mise
à jour du titre de la page en fonction des clics). useState permet de déclarer une variable count et
une fonction pour la mettre à jour, tandis que useEffect permet de gérer les effets secondaires (mise
à jour du titre de la page) en fonction de cette variable. Le composant affiche également un message
indiquant le nombre de clics sur le bouton.
Partie pratique- full stack ::

1/

import React from 'react';

const ProductList = (props) => {

return (

<div>

{props.products.map((product) => (

<Product

key={product.id}

id={product.id}

intitule={product.intitule}

prix={product.prix}

source={product.source}

/>

))}

</div>

);

};

const Product = (props) => {

return (

<div>

<h2>{props.intitule}</h2>

<img src={props.source} alt={props.intitule} />

<p>Prix: {props.prix}</p>

</div>

);

};
export default ProductList;

2/

import React from 'react';

const ProductDetail = (props) => {

return (

<div>

<h1>{props.intitule}</h1>

<img src={props.source} alt={props.intitule} />

<p>{props.prix}</p>

<p>{props.description}</p>

</div>

);

};

export default ProductDetail;

3//

import React, { Component } from 'react';

import { BrowserRouter as Router, Route } from 'react-router-dom';

import ProductList from './ProductList';

import ProductDetail from './ProductDetail';

class App extends Component {

render() {
return (

<Router>

<div>

<Route

exact

path="/"

render={(props) => <ProductList {...props} products={products} />}

/>

<Route

path="/product/:id"

render={(props) => (

<ProductDetail

{...props}

products={products}

product={products.find((p) => p.id === Number(props.match.params.id))}

/>

)}

/>

</div>

</Router>

);

export default App;

Vous aimerez peut-être aussi