Scribd
Upload
78 views

Efm Regional React

Uploaded by

aichaaddib0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
78 views

Efm Regional React

Uploaded by

aichaaddib0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

EFM REGIONAL REACT

PARTIE 1:
QUESTION 1:

<BrowserRouter>
<Layout />
</BrowserRouter>

QUESTION 2:

import Home from './Home';


import Contact from './Contact';
import Article from './Article';
import Form from './Form';
import NoPage from './NoPage';
import { Link, Route, Routes } from 'react-router-dom';

function Layout() {
return (
<div>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/contact'>Contact</Link>
</li>
<li>
<Link to='/form'>Form</Link>
</li>
<li>
<Link to='/article'>Article</Link>
</li>
</ul>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/contact' element={<Contact />} />
<Route path='/form' element={<Form />} />
<Route path='/article' element={<Article />} />
<Route path='*' element={<NoPage />} />
</Routes>
</div>
);
}

export default Layout;

QUESTION 3:
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Article = () => {


const [products, setProducts] = useState([]);

useEffect(() => {
axios.get('https://fakestoreapi.com/products').then((res) =>
setProducts(res.data));
}, []);
return (
<div>
<ul>
{
products.map((p) => {
return (
<li key={p.id}>
<img src={p.image} alt="" style={{
maxWidth: '400px',
}} />
<p>{p.title}</p>
<p><b>PRIX: {p.price} MAD</b></p>
</li>)
})
}
</ul>
</div>
)
}

export default Article

QUESTION 4:

import React, { useEffect, useState } from 'react'

const Form = () => {


const [email, setEmail] = useState('');
const [motDePasse, setMotDePasse] = useState('');
const [pays, setPays] = useState('');
const [genre, setGenre] = useState('male');

const [paysData, setPaysData] = useState([]);

useEffect(() => {
fetch('https://countriesnow.space/api/v0.1/countries').then(res =>
res.json()).then(res => setPaysData(res.data));
}, [])

const handleSubmit = (e) => {


e.preventDefault();
console.log({
email,
motDePasse,
pays,
genre
})
}

return (
<div>
<form onSubmit={handleSubmit}>
<div>
<label>Email</label>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label>motDePasse</label>
<input type="password" value={motDePasse} onChange={(e) =>
setMotDePasse(e.target.value)} />
</div>
<div>
<label>Pays</label>
<select value={pays} onChange={(e) => setPays(e.target.value)}>
<option value="">-- select pays --</option>
{
paysData.map((p, index) => (
<option key={index} value={p.iso2}>{p.country}</option>
))
}
</select>
</div>
<div>
<label>Genre </label>
<br />
<label>
<input type="radio" name="genre" value='male' onChange={(e) =>
setGenre(e.target.value)} checked={genre === 'male'} />
Male
</label>
<label>
<input type="radio" name="genre" value='female' onChange={(e) =>
setGenre(e.target.value)} checked={genre === 'female'} />
Female
</label>
</div>
<button>Valider</button>
</form>
</div>
)
}

export default Form


PARTIE 1:

QUESTION 1:

npm install redux react-redux

QUESTION 2:
index.js

import React from 'react';


import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'
import store from './store'
import App from './App';

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


root.render(
<Provider store={store}>
<App />
</Provider>
);

QUESTION 3:

import { createStore } from "redux";

const store = createStore(panierReducer);


export default store;

QUESTION 4 et 5:

// Q4:
export const ADDARTICLE = 'ADDARTICLE';
// Q5:
export const REMOVEARTICLE = 'REMOVEARTICLE';

QUESTION 6 et 7:

const initialState = {
panier: []
};

const panierReducer = (state = initialState, action) => {


switch(action.type) {
case ADDARTICLE:
return {...state, panier: [...state.panier, action.payload.id]};
// QESTION 7
case REMOVEARTICLE:
return {...state, panier: state.panier.filter(p => p !== action.payload)}
//
default: return state
}
}

QUESTION 8:

import React, { useEffect, useState } from 'react';


import axios from 'axios';
import { useSelector, useDispatch } from 'react-redux'
import { ADDARTICLE, REMOVEARTICLE } from '../actionTypes';

const Article = () => {


const [products, setProducts] = useState([]);
const dispatch = useDispatch();
const panier = useSelector((state) => state.panier)
console.log(panier);
useEffect(() => {
axios.get('https://fakestoreapi.com/products').then((res) =>
setProducts(res.data));
}, []);
return (
<div>
<ul>
{
products.map((p) => {
return (
<li key={p.id}>
<img src={p.image} alt="" style={{
maxWidth: '400px',
}} />
<p>{p.title}</p>
<p><b>PRIX: {p.price} MAD</b></p>
{
panier.includes(p.id) ? (
<button
onClick={() => dispatch({
type:REMOVEARTICLE,
payload: p.id
})}
>Supprimer</button>
) : (
<button onClick={() => dispatch({
type: ADDARTICLE,
payload: p
})}>Ajouter</button>
)
}
</li>)
})
}
</ul>
</div>
)
}

export default Article

You might also like