Professional Documents
Culture Documents
TESTES
TESTES
Uploaded by
fuc usCopyright
Available Formats
Share this document
Did you find this document useful?
Is this content inappropriate?
Report this DocumentCopyright:
Available Formats
TESTES
TESTES
Uploaded by
fuc usCopyright:
Available Formats
1.
Partie théorique : import
{
Provider
}
from
"react-redux"
;
1. Commande pour créer un nouveau projet React : - `npx create-react-app nom_du_projet` import
UsersList
from
"./UsersList"
;
2. Port par défaut du serveur de développement React : - `3000`
import
AddUser
from
"./AddUser"
;
3. Copie du DOM "réel" conservée en mémoire : - `a. Virtual DOM`
4. Props dans ReactJS : - `c) Les deux a et b sont vrais.` import
UserEdit
from
"./UserEdit"
;
2. Partie pratique import
{
BrowserRouter
,
Route
,
Routes
}
from
'react-router-dom'
;
Étape 1: Création du store et les reducers avec Redux Toolkit
1. **Créer le store Redux:** - Dans `features/store.js`: function
App
() {
//store.js
return
(
import
{
configureStore
}
from
"@reduxjs/toolkit"
;
<
Provider
store
=
{
store
}
>
import
usersReducer
from
"./usersSlice"
;
<
BrowserRouter
>
const
store
=
configureStore
({
<
Routes
>
reducer:
{
<
Route
index
path
=
"/"
element
=
{
<
UsersList
/>
}
/>
user
:
usersReducer
,
<
Route
path
=
"/userEdit/:id"
element
=
{
<
UserEdit
/>
}
/>
},
<
Route
path
=
"/addUser"
element
=
{
<
AddUser
/>
}
/>
});
</
Routes
>
export
default
store
;
</
BrowserRouter
>
</
Provider
>
2-3-4. **Créer le slice usersSlice:** - Dans `features/usersSlice.js`:
);
//UserList.js
}
import
React
, {
useEffect
}
from
'react'
;
export
default
App
;
import
{
useDispatch
,
useSelector
}
from
'react-redux'
;
import
{
getUsers
}
from
'../features/usersSlice'
;
import
UserItem
from
'./UserItem'
;
2. **<UsersList/>:** - Dans `components/UsersList.js`:
//UserList.js
import
{
NavLink
}
from
'react-router-dom'
;
import
React
, {
useEffect
}
from
'react'
;
import
{
useDispatch
,
useSelector
}
from
'react-redux'
;
const
UsersList
=
()
=>
{
import
{
getUsers
}
from
'../features/usersSlice'
;
const
dispatch
=
useDispatch
();
import
UserItem
from
'./UserItem'
;
import
{
NavLink
}
from
'react-router-dom'
;
const
{
value
,
isLoading
,
err
}
=
useSelector
((
state
)
=>
state
.
user
);
const
UsersList
= ()
=>
{
useEffect
(()
=>
{
const
dispatch
=
useDispatch
();
dispatch
(
getUsers
());
}, [
dispatch
]);
const
{
value
,
isLoading
,
err
} =
useSelector
((
state
)
=>
state
.
user
);
const
users
=
(
useEffect
(()
=>
{
<div>
dispatch
(
getUsers
());
{
value
.
length
>
0
?
value
.
m
ap
((
item
)
=>
<
UserItem
user
=
{
i
tem
}
key
=
{
item
.
id
}
/>
) :
null}
}, [
dispatch
]);
</div>
);
const
users
= (
<div>
if
(
err
!==
null
) {
{
value
.
length
>
0
?
value
.
m
ap
((
item
)
=>
<
UserItem
user
=
{
i
tem
}
key
=
{
item
.
id
}
/>
) :
null}
return
<h1>
{
err
}
<
/h1>
;
</div>
}
);
return
(
if
(
err
!==
null
) {
<div
className
=
"
container mt-5"
>
return
<h1>
{
err
}
</h1>
;
<h1>
Users List
</h1>
}
{
isLoading
?
'Loading...'
:
users
}
{
value
.
length
===
0
&& !
isLoading
&&
<h2>
There are no users
</h2>
}
<
br
/>
<
NavLink
to
=
"/addUser"
><button>
Add User
</button></
NavLink
>
</div>
);
return
(
};
<div
className
=
"
container mt-5"
>
export
default
UsersList
;
<h1>
Users List
</h1>
{
isLoading
?
'Loading...'
:
users
}
Etape 2: Donner les scripts en React JS des composants suivants :
1. **<App/>:** - Dans `components/App.js`: {
value
.
length
===
0
&& !
isLoading
&&
<h2>
There are no users
</h2>
}
<
br
/>
import
React
from
"react"
;
<
NavLink
to
=
"/addUser"
><button>
Add User
</button></
NavLink
>
import
store
from
"../features/store"
;
</div>
);
email:
user
.
email
,
};
});
export
default
UsersList
;
}
3. **<UserItem/>:** - Dans `components/UserItem.js`: }, [
user
]);
//UserItem.js
import
React
from
"react"
;
const
handleInputChange
=
(
e
)
=>
{
import
{
useDispatch
}
from
"react-redux"
;
setUserData
({
...
userData
,
[e.target.name]:
e
.
target
.
value
,});
import
{
NavLink
}
from
"react-router-dom"
;
};
import
{
deleteUser
}
from
"../features/usersSlice"
;
const
handleSubmit
=
(
e
)
=>
{
export
default
function
UserItem
(
props
) {
e
.
preventDefault
();
const
{
name
,
username
,
email
,
id
} =
props
.
user
;
dispatch
(
updateUser
({
id:
user
.
id
,
...
userData
}));
const
dispatch
=
useDispatch
();
navigate
(
"/"
);
};
const
handleDelete
= ()
=>
{
dispatch
(
deleteUser
(
id
));
return
(
};
<>
<h1>
Edit User
</h1>
return
( <form
onSubmit
=
{
h
andleSubmit
}
>
<>
Name:
<div
style
=
{
{
"
border"
:
"2px solid black"
}
}
>
<input
type
=
"text"
name
=
"
name"
value
=
{
userData
.
name
}
onChange
=
{
h
andleInputChange
}
/><br/>
<h3>
{
name
}
<
/h3> Username:
<p>
@
{
username
}
</p> <input
type
=
"text"
name
=
"
username"
value
=
{
userData
.
username
}
<p>
{
email
}
</p>
onChange
=
{
handleInputChange
}
/><br/>
<
NavLink
to
=
{
̀/userEdit/
${
id
}
̀
}
><button>
Edit
</button></
NavLink
>
Email:
<button
onClick
=
{
handleDelete
}
>
Delete
</button>
<input
type
=
"text"
name
=
"
email"
value
=
{
userData
.
email
}
onChange
=
{
handleInputChange
}
/
><br/>
</div>
<button
type
=
"submit"
>
Update User
</button><br/>
</>
<
Link
to
=
"/"
><button>
back
</button></
Link
>
);
</form>
}
</>
4. **<UserEdit/>:** - Dans `components/UserEdit.js`: );
// UserEdit.js
};
import
React
, {
useState
,
useEffect
}
from
"react"
;
export
default
UserEdit
;
import
{
useDispatch
,
useSelector
}
from
"react-redux"
;
import
{
useParams
,
useNavigate
}
from
"react-router-dom"
;
import
{
updateUser
}
from
"../features/usersSlice"
;
import
{
Link
}
from
"react-router-dom"
;
const
UserEdit
=
()
=>
{
const
dispatch
=
useDispatch
();
const
navigate
=
useNavigate
();
const
{
id
}
=
useParams
();
const
user
=
useSelector
((
state
)
=>
state
.
user
.
value
.
find
((
item
)
=>
item
.
id
===
parseInt
(
i
d
)));
const
[
userData
,
setUserData
]
=
useState
({
name:
user
?
user
.
n
ame
:
""
,
username:
user
?
user
.
username
:
""
,
email:
user
?
user
.
email
:
""
,
});
useEffect
(()
=>
{
if
(
u
ser
) {
setUserData
({
name:
user
.
n
ame
,
username:
user
.
username
,
AddUser.js:
// AddUser.js
import
React
, {
useState
}
from
"react"
;
import
{
useDispatch
}
from
"react-redux"
;
import
{
addUser
}
from
"../features/usersSlice"
;
import
{
L
ink
,
useNavigate
}
from
"react-router-dom"
;
const
AddUser
=
()
=>
{
const
dispatch
=
useDispatch
();
const
navigate
=
useNavigate
();
const
[
userData
,
setUserData
]
=
useState
({
name:
""
,
username:
""
,
email:
""
,
});
const
handleChange
=
(
e
)
=>
{
setUserData
({
...
userData
,
[e.target.name]:
e
.
target
.
value
,});
};
const
handleSubmit
=
(
e
)
=>
{
e
.
preventDefault
();
dispatch
(
addUser
(
userData
));
navigate
(
"/"
);
};
return
(
<>
<h2>
Add User
</h2>
<form
onSubmit
=
{
h
andleSubmit
}
>
Name:
<input
type
=
"
text"
name
=
"
name"
value
=
{
userData
.
name
}
onChange
=
{
h
andleChange
}
/><br/>
Username:
<input
type
=
"
text"
name
=
"
username"
value
=
{
userData
.
username
}
onChange
=
{
handleChange
}
/><br/>
Email:
<input
type
=
"
text"
name
=
"
email"
value
=
{
userData
.
email
}
onChange
=
{
handleChange
}
/><br/>
<button
type
=
"submit"
>
Add User
</button><br/>
<
Link
to
=
"/"
><button>
back
</button></
Link
>
</form>
</>
);
};
export
default
AddUser
;
You might also like
- Zmfbdc1 Heading: No Standard Page Line-SizeDocument9 pagesZmfbdc1 Heading: No Standard Page Line-Sizemohamed FareedhNo ratings yet
- Angular Routes and Forms HandsonDocument11 pagesAngular Routes and Forms Handsonswati sharmaNo ratings yet
- Sallah - Google DriveDocument9 pagesSallah - Google Drivefuc usNo ratings yet
- Reactjs Cheat SheetDocument1 pageReactjs Cheat SheetSabrina Moraru100% (1)
- Network Programming With Go Cheat SheetDocument1 pageNetwork Programming With Go Cheat SheetThành PhúcNo ratings yet
- SpinnerDocument6 pagesSpinnerSumit SahaNo ratings yet
- A5E34928958-01en PS2HART FBDocument2 pagesA5E34928958-01en PS2HART FBesutjiadiNo ratings yet
- Spring Boot s1Document22 pagesSpring Boot s1Hedir Ben MoussaNo ratings yet
- Siemens SIPART PS2 Valve Positioner Commissioning GuideDocument20 pagesSiemens SIPART PS2 Valve Positioner Commissioning GuideWagner GuimarãesNo ratings yet
- Creating An E-Commerce Site With MERN Stack - Part III - MediumDocument23 pagesCreating An E-Commerce Site With MERN Stack - Part III - Mediumrac.software.2023No ratings yet
- Manual Camara1Document1 pageManual Camara1Lilibeth Dessire B. CarpioNo ratings yet
- Ces Idées Qui CollentDocument19 pagesCes Idées Qui CollentEmna GharianiNo ratings yet
- DotDocument1 pageDotFiras Ben HmidaNo ratings yet
- Code SplittingDocument4 pagesCode SplittingTanzeel Ahmad MujahidNo ratings yet
- Polymorphism: V.Mareeswari / Ap / SiteDocument37 pagesPolymorphism: V.Mareeswari / Ap / SiteShiva PoduguNo ratings yet
- Nestjs 201217055528Document19 pagesNestjs 201217055528Hamza ElgariNo ratings yet
- Rishit Week 6Document4 pagesRishit Week 6aqeelNo ratings yet
- Usage With TypescriptDocument7 pagesUsage With TypescriptT S Akshay 12cNo ratings yet
- 07-Service Container - Laravel - The PHP Framework For Web ArtisansDocument7 pages07-Service Container - Laravel - The PHP Framework For Web ArtisansLabel ExcellenceNo ratings yet
- CONTRIBUTING TeDocument5 pagesCONTRIBUTING Temmuhammadali9020No ratings yet
- OperatorDocument4 pagesOperatorRajendra BhosaleNo ratings yet
- Memoization in React JsDocument8 pagesMemoization in React JsSHIVAMNo ratings yet
- Angular 7 GuideDocument11 pagesAngular 7 GuideMohamed NissanNo ratings yet
- 20.02.2023 Inbuilt API ServiceDocument3 pages20.02.2023 Inbuilt API ServiceHemalatha LakshminarayananNo ratings yet
- (BOOK Notes) Ng-BookDocument17 pages(BOOK Notes) Ng-BookToby YuNo ratings yet
- React-Redux Cheatsheet: Provide Ke React ProjectDocument1 pageReact-Redux Cheatsheet: Provide Ke React Projectbip bopNo ratings yet
- SP2582-1-15-3 UmDocument141 pagesSP2582-1-15-3 UmMihai LefterNo ratings yet
- React HooksDocument110 pagesReact Hookskirti PatelNo ratings yet
- Every Free Supplement: WednesdayDocument1 pageEvery Free Supplement: WednesdaykareemNo ratings yet
- ContextDocument5 pagesContextTanzeel Ahmad MujahidNo ratings yet
- 1.register - Service.ts:: Injectable ObservableDocument3 pages1.register - Service.ts:: Injectable ObservableChaitanyaNo ratings yet
- Software Inventory TrackingDocument6 pagesSoftware Inventory TrackingNorihanMohamadSabdinNo ratings yet
- Formation Angular Lab 3 Services: Lab 3.1: Create Simple ProviderDocument8 pagesFormation Angular Lab 3 Services: Lab 3.1: Create Simple ProviderSana BargaouiNo ratings yet
- Solartech PSD600 DC Solar Pumps PDFDocument1 pageSolartech PSD600 DC Solar Pumps PDFleonel alexis reyes arancibiaNo ratings yet
- IcebergDocument36 pagesIcebergladoti7214No ratings yet
- Easy To Learn React JsDocument19 pagesEasy To Learn React JsUzain AliNo ratings yet
- Att U110!6!0 1 Install GuideDocument24 pagesAtt U110!6!0 1 Install Guidegilfyole69No ratings yet
- Socket AplicaDocument8 pagesSocket AplicaLuisVargasMolinaNo ratings yet
- Dustiq - Instruction Sheet: Dimensions Requirements Positions and OptionsDocument1 pageDustiq - Instruction Sheet: Dimensions Requirements Positions and Optionsnalvaro88No ratings yet
- Road ScholarDocument14 pagesRoad ScholarAyeesha BeeNo ratings yet
- React Cheat SheetDocument1 pageReact Cheat Sheetchayma tabaNo ratings yet
- Centurion Vantage Brochure - D10 TurboDocument2 pagesCenturion Vantage Brochure - D10 TurboRamez Bou-RizkNo ratings yet
- React HooksDocument2 pagesReact Hooksdoc advisorNo ratings yet
- Nipuna 2020 AprilDocument4 pagesNipuna 2020 AprilPkNo ratings yet
- Buku Coding Aplikasi Music Jazz StreamingDocument4 pagesBuku Coding Aplikasi Music Jazz StreamingAtika BeaugesteNo ratings yet
- LaravelDocument4 pagesLaravelpiru1No ratings yet
- What Is Angular 2 Service? (Steps For Create and Use of Angular 2 Services)Document7 pagesWhat Is Angular 2 Service? (Steps For Create and Use of Angular 2 Services)AshihsNo ratings yet
- Message. We Pass The Message Text and The Type of The Chat Bubble (User or AI) As Props To The Component - Documentos GoogleDocument4 pagesMessage. We Pass The Message Text and The Type of The Chat Bubble (User or AI) As Props To The Component - Documentos GoogleThiago Butignon ClaramuntNo ratings yet
- Django 3 - WebinarDocument5 pagesDjango 3 - WebinarPocho OrtizNo ratings yet
- Service Container (Symfony Docs)Document23 pagesService Container (Symfony Docs)criss rdNo ratings yet
- SpringBoot7AM 03022021Document4 pagesSpringBoot7AM 03022021Sambit baralNo ratings yet
- FEWD Unit4Document16 pagesFEWD Unit4Dimple GullaNo ratings yet
- Git Vs GithubDocument1 pageGit Vs Githubblackops88.legionNo ratings yet
- How To Build React-Native Bridge and Get PDF Viewer by Maksym RusynykDocument19 pagesHow To Build React-Native Bridge and Get PDF Viewer by Maksym RusynykSuzelle NGOUNOU MAGANo ratings yet
- Introduction To React - React Components Cheatsheet - CodecademyDocument4 pagesIntroduction To React - React Components Cheatsheet - CodecademyNima ShahiNo ratings yet
- Angular Cheat Sheet PrintDocument2 pagesAngular Cheat Sheet PrintAkshay PatidarNo ratings yet
- Techlistic: Selenium Webdriver - Browser and Navigation CommandsDocument13 pagesTechlistic: Selenium Webdriver - Browser and Navigation CommandsKavithaNo ratings yet
- Rmi in 5 Minutes: Source - Headfirst - Java Jsp&Servlet Ejb DesignpatternDocument5 pagesRmi in 5 Minutes: Source - Headfirst - Java Jsp&Servlet Ejb DesignpatternSamrat singhNo ratings yet
- Lap-Trinh-Huong-Doi-Tuong - Dinh-Ba-Tien - Oop - Week4 - (Cuuduongthancong - Com)Document17 pagesLap-Trinh-Huong-Doi-Tuong - Dinh-Ba-Tien - Oop - Week4 - (Cuuduongthancong - Com)Long TrầnNo ratings yet
- Spring Boot Intermediate Microservices: Resilient Microservices with Spring Boot 2 and Spring CloudFrom EverandSpring Boot Intermediate Microservices: Resilient Microservices with Spring Boot 2 and Spring CloudNo ratings yet
- Shrova Mall 3 - The Backend: A-to-Z e-commerce full-stack applicationFrom EverandShrova Mall 3 - The Backend: A-to-Z e-commerce full-stack applicationNo ratings yet
- College Information Retrieval Using Touch Screen KIOSKDocument88 pagesCollege Information Retrieval Using Touch Screen KIOSKa4athira100% (2)
- Student TrackerDocument36 pagesStudent TrackerThe MindNo ratings yet
- Java Programming: SerializationDocument4 pagesJava Programming: SerializationTeja PeddiNo ratings yet
- CA1016Document56 pagesCA1016Temp TempNo ratings yet
- QA Unit2Document16 pagesQA Unit2alysonmicheaalaNo ratings yet
- Choose The Most Appropriate AnswerDocument6 pagesChoose The Most Appropriate AnswerAcharya SuyogNo ratings yet
- Naukri Vikash (3y 7m)Document7 pagesNaukri Vikash (3y 7m)Thanveer Ahamed - Associated Search Professionals(ASP)No ratings yet
- VB1 Revision - Programming With VBDocument10 pagesVB1 Revision - Programming With VBGideon MogeniNo ratings yet
- Refrigeration System in Openstudio For Supermarket PDFDocument11 pagesRefrigeration System in Openstudio For Supermarket PDFfatima dialNo ratings yet
- Makefile Generation From AutotoolsDocument25 pagesMakefile Generation From AutotoolsWaqqas JabbarNo ratings yet
- History of C LanguageDocument23 pagesHistory of C LanguageVruddhi MehtaNo ratings yet
- List of Shortcut KeysDocument3 pagesList of Shortcut KeysSunita K RamanathanNo ratings yet
- Kurdish Java Structured Programming - 2 PDFDocument40 pagesKurdish Java Structured Programming - 2 PDFRanjaChavoshi100% (3)
- CPSC1050 Lab 4Document2 pagesCPSC1050 Lab 4Danny JirdanNo ratings yet
- Code BlocksDocument25 pagesCode BlocksMutaawe MMarkNo ratings yet
- Introduction To CSSDocument13 pagesIntroduction To CSSRicardo B. Vigan100% (1)
- Dynamics 365 Business Central On-Premises - EnglishDocument12 pagesDynamics 365 Business Central On-Premises - EnglishShantanuNo ratings yet
- Project 2 Description 20210619Document10 pagesProject 2 Description 20210619Yizi LiuNo ratings yet
- Student Management SystemDocument18 pagesStudent Management SystemAbhiram Bharadwaj SubramanyaNo ratings yet
- Introduction To Online Car Rental System: Presented by Maneesh BhdauriyaDocument39 pagesIntroduction To Online Car Rental System: Presented by Maneesh BhdauriyaManeesh Thakur100% (1)
- Imtiyaz Pasha: Work ExperienceDocument2 pagesImtiyaz Pasha: Work ExperiencevaidehiNo ratings yet
- DIP Lab Manual No 01Document20 pagesDIP Lab Manual No 01myfirstNo ratings yet
- Answers To Worksheet - 07. Conditional Constructs in JavaDocument4 pagesAnswers To Worksheet - 07. Conditional Constructs in Javajanudev0205No ratings yet
- Bharata Rajyangam FinalDocument138 pagesBharata Rajyangam FinalBrandon WilsonNo ratings yet
- Cp-Iii (Java Programming) Branch-Cs / Me (Cs-306 / Me-306)Document15 pagesCp-Iii (Java Programming) Branch-Cs / Me (Cs-306 / Me-306)badholiyaNo ratings yet
- Physics Class 10th Handwritten NotesDocument45 pagesPhysics Class 10th Handwritten NotesHarsh MishraNo ratings yet
- FOP Material Up To Unit - 5Document290 pagesFOP Material Up To Unit - 5Niket NaikNo ratings yet
- Software License Agreement AppendixDocument22 pagesSoftware License Agreement AppendixIstván FodorNo ratings yet
- PHP - Fast Track Digit MagazineDocument176 pagesPHP - Fast Track Digit Magazineapi-213911742100% (1)
