Skip to content

Commit a9dae83

Browse files
LeagianLeagian
committed
Translation in french part7c line 250
1 parent 534e0f5 commit a9dae83

File tree

1 file changed

+253
-0
lines changed

1 file changed

+253
-0
lines changed

‎src/content/7/fr/part7c.md‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
---
2+
mainImage: ../../../images/part-7.svg
3+
part: 7
4+
letter: c
5+
lang: fr
6+
---
7+
8+
<div class="content">
9+
10+
Dans la partie 2, nous avons examiné deux manières différentes d'ajouter des styles à notre application: le vieux fichier [CSS unique](/fr/part2/styliser_vos_applications_react) et les [styles inline](/fr/part2/styliser_vos_applications_react#styles-en-ligne). Dans cette partie, nous allons examiner quelques autres méthodes.
11+
12+
### Bibliothèques UI prêtes à l'emploi
13+
14+
Une approche pour définir les styles d'une application consiste à utiliser un "framework UI" prêt à l'emploi.
15+
16+
L'un des premiers frameworks UI largement populaires était la boîte à outils [Bootstrap](https://getbootstrap.com/) créée par Twitter, qui peut encore être le framework le plus populaire. Récemment, il y a eu une explosion dans le nombre de nouveaux frameworks UI qui ont fait leur apparition sur la scène. La sélection est si vaste qu'il y a peu d'espoir de créer une liste exhaustive des options.
17+
18+
De nombreux frameworks UI fournissent aux développeurs d'applications web des thèmes prêts à l'emploi et des "composants" comme des boutons, des menus et des tables. Nous mettons des composants entre guillemets parce que, dans ce contexte, nous ne parlons pas de composants React. Généralement, les frameworks UI sont utilisés en incluant les feuilles de style CSS et le code JavaScript du framework dans l'application.
19+
20+
De nombreux frameworks UI ont des versions adaptées à React où les "composants" du framework ont été transformés en composants React. Il existe quelques versions React différentes de Bootstrap comme [reactstrap](http://reactstrap.github.io/) et [react-bootstrap](https://react-bootstrap.github.io/).
21+
22+
Ensuite, nous examinerons de plus près deux frameworks UI, Bootstrap et [MaterialUI](https://mui.com/). Nous utiliserons les deux frameworks pour ajouter des styles similaires à l'application que nous avons réalisée dans la section [React Router](/en/part7/react_router) du matériel de cours.
23+
24+
### React Bootstrap
25+
26+
Commençons par examiner Bootstrap avec l'aide du package [react-bootstrap](https://react-bootstrap.github.io/).
27+
28+
Installons le package avec la commande:
29+
30+
```bash
31+
npm install react-bootstrap
32+
```
33+
34+
Ensuite, ajoutons un [lien pour charger la feuille de style CSS](https://react-bootstrap.github.io/docs/getting-started/introduction#stylesheets) pour Bootstrap à l'intérieur de la balise <i>head</i> dans le fichier <i>public/index.html</i> de l'application:
35+
36+
```js
37+
<head>
38+
<link
39+
rel="stylesheet"
40+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
41+
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
42+
crossorigin="anonymous"
43+
/>
44+
// ...
45+
</head>
46+
```
47+
48+
Lorsque nous rechargeons l'application, nous remarquons qu'elle a déjà l'air un peu plus stylée:
49+
50+
![application de notes dans le navigateur avec bootstrap](../../images/7/5ea.png)
51+
52+
Dans Bootstrap, tout le contenu de l'application est généralement rendu à l'intérieur d'un [conteneur](https://getbootstrap.com/docs/4.1/layout/overview/#containers). En pratique, cela est accompli en donnant à l'élément div racine de l'application l'attribut de classe _container_:
53+
54+
```js
55+
const App = () => {
56+
// ...
57+
58+
return (
59+
<div className="container"> // highlight-line
60+
// ...
61+
</div>
62+
)
63+
}
64+
```
65+
66+
Nous remarquons que cela a déjà affecté l'apparence de l'application. Le contenu n'est plus aussi proche des bords du navigateur qu'il l'était auparavant:
67+
68+
![application de notes dans le navigateur avec espacement de marge](../../images/7/6ea.png)
69+
70+
#### Tables
71+
72+
Ensuite, apportons quelques modifications au composant <i>Notes</i> pour qu'il rende la liste des notes sous forme de [table](https://getbootstrap.com/docs/4.1/content/tables/). React Bootstrap fournit un composant [Table](https://react-bootstrap.github.io/docs/components/table/) intégré à cet effet, il n'est donc pas nécessaire de définir séparément les classes CSS.
73+
74+
```js
75+
const Notes = ({ notes }) => (
76+
<div>
77+
<h2>Notes</h2>
78+
<Table striped> // highlight-line
79+
<tbody>
80+
{notes.map(note =>
81+
<tr key={note.id}>
82+
<td>
83+
<Link to={`/notes/${note.id}`}>
84+
{note.content}
85+
</Link>
86+
</td>
87+
<td>
88+
{note.user}
89+
</td>
90+
</tr>
91+
)}
92+
</tbody>
93+
</Table>
94+
</div>
95+
)
96+
```
97+
98+
L'apparence de l'application est assez élégante:
99+
100+
![onglet de notes du navigateur avec table intégrée](../../images/7/7e.png)
101+
102+
Notez que les composants React Bootstrap doivent être importés séparément de la bibliothèque comme montré ci-dessous :
103+
104+
```js
105+
import { Table } from 'react-bootstrap'
106+
```
107+
108+
#### Formulaires
109+
110+
Améliorons le formulaire dans la vue <i>Login</i> avec l'aide des [formulaires](https://getbootstrap.com/docs/4.1/components/forms/) Bootstrap.
111+
112+
React Bootstrap fournit des [composants](https://react-bootstrap.github.io/docs/forms/overview/) intégrés pour créer des formulaires (bien que la documentation à leur sujet soit légèrement insuffisante):
113+
114+
```js
115+
let Login = (props) => {
116+
// ...
117+
return (
118+
<div>
119+
<h2>login</h2>
120+
<Form onSubmit={onSubmit}>
121+
<Form.Group>
122+
<Form.Label>username:</Form.Label>
123+
<Form.Control
124+
type="text"
125+
name="username"
126+
/>
127+
</Form.Group>
128+
<Form.Group>
129+
<Form.Label>password:</Form.Label>
130+
<Form.Control
131+
type="password"
132+
/>
133+
</Form.Group>
134+
<Button variant="primary" type="submit">
135+
login
136+
</Button>
137+
</Form>
138+
</div>
139+
)
140+
}
141+
```
142+
143+
Le nombre de composants que nous devons importer augmente:
144+
145+
```js
146+
import { Table, Form, Button } from 'react-bootstrap'
147+
```
148+
149+
Après être passés au formulaire Bootstrap, notre application améliorée ressemble à ceci:
150+
151+
![application de notes dans le navigateur avec connexion bootstrap](../../images/7/8ea.png)
152+
153+
#### Notification
154+
155+
Maintenant que le formulaire de connexion est en meilleure forme, examinons comment améliorer les notifications de notre application:
156+
157+
![application de notes dans le navigateur avec notification bootstrap](../../images/7/9ea.png)
158+
159+
Ajoutons un message pour la notification lorsqu'un utilisateur se connecte à l'application. Nous le stockerons dans la variable _message_ dans l'état du composant <i>App</i>:
160+
161+
```js
162+
const App = () => {
163+
const [notes, setNotes] = useState([
164+
// ...
165+
])
166+
167+
const [user, setUser] = useState(null)
168+
const [message, setMessage] = useState(null) // highlight-line
169+
170+
const login = (user) => {
171+
setUser(user)
172+
// highlight-start
173+
setMessage(`welcome ${user}`)
174+
setTimeout(() => {
175+
setMessage(null)
176+
}, 10000)
177+
// highlight-end
178+
}
179+
// ...
180+
}
181+
```
182+
183+
Nous allons rendre le message sous forme de composant [Alert](https://getbootstrap.com/docs/4.1/components/alerts/) Bootstrap. Encore une fois, la bibliothèque React Bootstrap nous fournit un [composant React](https://react-bootstrap.github.io/docs/components/alerts/) correspondant:
184+
185+
```js
186+
<div className="container">
187+
// highlight-start
188+
{(message &&
189+
<Alert variant="success">
190+
{message}
191+
</Alert>
192+
)}
193+
// highlight-end
194+
// ...
195+
</div>
196+
```
197+
198+
#### Structure de navigation
199+
200+
Enfin, modifions le menu de navigation de l'application pour utiliser le composant [Navbar](https://getbootstrap.com/docs/4.1/components/navbar/) de Bootstrap. La bibliothèque React Bootstrap nous fournit des [composants intégrés correspondants](https://react-bootstrap.github.io/docs/components/navbar/#responsive-behaviors). À force d'essais et d'erreurs, nous arrivons à une solution fonctionnelle malgré la documentation énigmatique:
201+
202+
```js
203+
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
204+
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
205+
<Navbar.Collapse id="responsive-navbar-nav">
206+
<Nav className="me-auto">
207+
<Nav.Link href="#" as="span">
208+
<Link style={padding} to="/">home</Link>
209+
</Nav.Link>
210+
<Nav.Link href="#" as="span">
211+
<Link style={padding} to="/notes">notes</Link>
212+
</Nav.Link>
213+
<Nav.Link href="#" as="span">
214+
<Link style={padding} to="/users">users</Link>
215+
</Nav.Link>
216+
<Nav.Link href="#" as="span">
217+
{user
218+
? <em style={padding}>{user} logged in</em>
219+
: <Link style={padding} to="/login">login</Link>
220+
}
221+
</Nav.Link>
222+
</Nav>
223+
</Navbar.Collapse>
224+
</Navbar>
225+
```
226+
227+
La mise en page résultante a une apparence très propre et agréable:
228+
229+
![application de notes dans le navigateur avec barre de navigation noire bootstrap](../../images/7/10ea.png)
230+
231+
Si le viewport du navigateur est réduit, nous remarquons que le menu "se replie" et il peut être déployé en cliquant sur le bouton "hamburger":
232+
233+
![application de notes dans le navigateur avec menu hamburger](../../images/7/11ea.png)
234+
235+
Bootstrap et une grande majorité des frameworks UI existants produisent des conceptions [réactives](https://en.wikipedia.org/wiki/Responsive_web_design), signifiant que les applications résultantes se rendent bien sur une variété de tailles d'écran différentes.
236+
237+
Les outils de développement de Chrome permettent de simuler l'utilisation de notre application dans le navigateur de différents clients mobiles :
238+
239+
![outils de développement Chrome avec aperçu du navigateur mobile de l'application de notes](../../images/7/12ea.png)
240+
241+
Vous pouvez trouver le code complet de l'application [ici](https://github.com/fullstack-hy2020/misc/blob/master/notes-bootstrap.js).
242+
243+
### Material UI
244+
245+
Comme deuxième exemple, nous examinerons la bibliothèque React [MaterialUI](https://mui.com/), qui implémente le langage visuel [Material Design](https://material.io/) développé par Google.
246+
247+
Installez la bibliothèque avec la commande
248+
249+
```bash
250+
npm install @mui/material @emotion/react @emotion/styled
251+
```
252+
253+
</div>

0 commit comments

Comments
 (0)