1
00:00:02,420 --> 00:00:08,930
Maintenant, avec tout cela dans ce module, vous avez beaucoup appris sur la façon de créer de vraies applications avec React Native.

2
00:00:08,930 --> 00:00:11,780
Vous avez beaucoup appris sur les composants intégrés, vous

3
00:00:11,780 --> 00:00:16,370
avez beaucoup appris sur le style et la façon de disposer les choses comme vous

4
00:00:16,370 --> 00:00:17,300
le souhaitez

5
00:00:17,300 --> 00:00:24,290
et comment les styliser comme vous le souhaitez, ainsi que la façon dont le style diffère entre certains composants, par exemple que pour

6
00:00:24,320 --> 00:00:26,320
les composants de texte, le style est

7
00:00:26,390 --> 00:00:31,970
en cascade dans une certaine mesure, donc les styles sont hérités dans les styles imbriqués là-bas, quelque chose

8
00:00:31,970 --> 00:00:39,770
dont nous profitons dans le jeu sur l'écran ici, mais que sur tous les autres composants comme la vue, les styles que vous lui appliquez ne

9
00:00:39,770 --> 00:00:45,880
s'appliquent vraiment qu'à cette vue et ne sont pas en cascade, ne sont pas partagées avec les vues enfant imbriquées.

10
00:00:45,890 --> 00:00:52,010
Vous avez également appris comment partager des styles courants, par exemple avec des composants personnalisés, comme notre corps de texte qui définit

11
00:00:52,010 --> 00:00:58,100
une famille de polices générale afin que nous puissions utiliser le corps de texte au lieu du texte intégré si nous

12
00:00:58,130 --> 00:01:00,480
voulons du texte avec cette famille de polices.

13
00:01:00,590 --> 00:01:04,190
Bien sûr, c'est un concept que vous pouvez utiliser pour n'importe quel style partagé

14
00:01:04,310 --> 00:01:09,980
que vous souhaitez, comme nous le faisons également pour le type de carte, où nous avons une vue prédéfinie pour nous donner ce

15
00:01:10,010 --> 00:01:12,140
joli look de carte avec un peu d'ombre.

16
00:01:12,140 --> 00:01:17,450
Vous avez également appris comment configurer certains thèmes avec des constantes que vous pouvez importer dans différents fichiers, à la fois pour

17
00:01:17,870 --> 00:01:23,990
les couleurs ici ou également si vous en avez besoin, pour les styles de texte ou pour tout autre style que vous souhaitez partager entre

18
00:01:23,990 --> 00:01:29,630
les composants afin de ne pas '' Je n'ai pas à le réécrire tout le temps, particulièrement utile dans les cas où vous

19
00:01:29,630 --> 00:01:33,120
ne le souhaitez pas ou lorsque vous ne pouvez pas créer de composants séparés

20
00:01:33,260 --> 00:01:36,070
comme nous le faisons pour la famille de polices par exemple.

21
00:01:36,250 --> 00:01:40,820
Donc, si ce n'est pas possible, ce qui en cas de couleurs aurait été

22
00:01:40,820 --> 00:01:47,690
difficile car nous avons besoin de couleurs dans toutes sortes d'endroits, alors ces styles partagés ou constantes partagées sont un excellent moyen

23
00:01:47,690 --> 00:01:53,420
et en général, j'espère que vous aurez une idée de la façon dont vous composez des interfaces utilisateur avec

24
00:01:53,450 --> 00:01:58,820
des composants intégrés et avec vos propres composants personnalisés qui s'appuient ensuite sur les composants intégrés et

25
00:01:58,820 --> 00:02:02,120
comment vous pouvez donc créer de belles applications React Native.

26
00:02:02,140 --> 00:02:07,390
Nous avons jeté un coup d'œil à certains composants de base et je veux donc également vous donner un bref résumé de

27
00:02:07,390 --> 00:02:09,710
ce que vous avez appris sur ces composants ici.

28
00:02:09,760 --> 00:02:15,080
Le composant le plus important est probablement la vue, qui est un conteneur que vous entourez d'autres

29
00:02:15,100 --> 00:02:21,180
composants pour ensuite les disposer ou pour ajouter certains styles de conteneur, comme les ombres, les bordures, la couleur

30
00:02:21,190 --> 00:02:24,760
d'arrière-plan, des choses comme ça. Le composant texte

31
00:02:24,760 --> 00:02:29,870
que vous utilisez pour produire du texte est tout aussi important.

32
00:02:29,950 --> 00:02:36,130
Vous pouvez également imbriquer du texte dans du texte où un certain style est même partagé et vous pouvez en général contrôler

33
00:02:36,130 --> 00:02:41,980
la façon dont le texte doit être sorti, s'il doit s'habiller, ce qui est la valeur par défaut ou s'il

34
00:02:41,980 --> 00:02:43,070
ne doit sortir

35
00:02:43,210 --> 00:02:49,450
qu'une ou deux lignes et c'est là que le composant texte vous aide vraiment à transmettre ces informations précieuses à vos utilisateurs.

36
00:02:49,450 --> 00:02:53,860
Maintenant, parfois, vous ne voulez pas seulement sortir des informations, mais aussi récupérer des informations et pour cela,

37
00:02:53,860 --> 00:02:55,930
la saisie de texte peut être utile.

38
00:02:55,930 --> 00:03:00,760
Nous allons maintenant approfondir la récupération des entrées utilisateur plus tard dans le cours, mais vous avez déjà un premier aperçu de la

39
00:03:00,760 --> 00:03:05,290
façon de le styliser et de le configurer et de vous assurer que vous obtenez la bonne entrée et que vous êtes

40
00:03:05,320 --> 00:03:11,210
valider l'entrée et vous ne travaillez vraiment qu'avec l'entrée dont vous avez besoin. Maintenant, en parlant de saisie par l'utilisateur, le bouton est

41
00:03:11,210 --> 00:03:14,230
également un élément crucial, que ce soit le bouton intégré

42
00:03:14,330 --> 00:03:19,070
ou votre propre bouton que vous pouvez créer avec les composants tactiles qui sont également super

43
00:03:19,130 --> 00:03:20,960
importants et dans les cas où

44
00:03:20,960 --> 00:03:26,660
vous devez générer des listes de données, vous avez appris sur FlatList et sur la vue de défilement où la

45
00:03:26,750 --> 00:03:32,270
principale différence est que FlatList est optimisé pour les listes très longues ou les listes où vous ne savez

46
00:03:32,270 --> 00:03:35,790
pas vraiment combien de temps elles seront mais elles sont potentiellement très

47
00:03:35,930 --> 00:03:42,470
longues, alors que la vue de défilement est idéale pour tout autre contenu défilant qui n'est pas infiniment long, où vous irez certainement

48
00:03:42,470 --> 00:03:48,410
au-delà des limites de l'écran mais ce ne sera pas trop de contenu supplémentaire parce que si tout ce contenu

49
00:03:48,410 --> 00:03:54,110
supplémentaire est rendu sans qu'il soit utilisé, sans qu'il soit visible pour l'utilisateur, alors vous perdez des performances et

50
00:03:54,110 --> 00:03:54,860
c'est là

51
00:03:54,920 --> 00:03:56,710
que FlatList entre en jeu

52
00:03:56,780 --> 00:03:59,980
car cela ne rend que ce que l'utilisateur peut vraiment voir.

53
00:04:00,020 --> 00:04:05,330
En parlant de ce que l'utilisateur peut voir, dans ce module, vous avez également appris à ajouter vos propres polices personnalisées et

54
00:04:05,330 --> 00:04:08,770
parfois vous n'avez pas besoin d'une police mais d'une image, vous avez également

55
00:04:08,900 --> 00:04:14,580
appris à le faire, à inclure à la fois local ou réseau images et comment vous pouvez styler ces images pour qu'elles soient belles.

56
00:04:14,600 --> 00:04:20,240
En parlant de style, pour cela, nous utilisons la feuille de style qui n'est pas un composant

57
00:04:20,240 --> 00:04:22,130
mais une classe ou un

58
00:04:22,130 --> 00:04:28,190
objet fourni par React Native et l'avantage d'utiliser cette feuille de style n'est pas seulement que vous obtiendrez vos

59
00:04:28,190 --> 00:04:35,090
styles du code jsx qui vous voulez rester relativement maigre, court et concis mais que vous obtenez également une validation automatique

60
00:04:35,180 --> 00:04:41,110
de vos styles et React Native vous indique lorsque vous utilisez un style de manière incorrecte et qu'à

61
00:04:41,150 --> 00:04:47,860
l'avenir, vous pourrez également obtenir des optimisations de performances supplémentaires. Et avec cela, nous ne pouvons que vous encourager à garder

62
00:04:47,860 --> 00:04:48,810
cette section

63
00:04:48,820 --> 00:04:55,540
à l'esprit, peut-être à la parcourir une deuxième fois et à l'utiliser comme base pour la poursuite de votre cours où nous utiliserons

64
00:04:55,540 --> 00:05:01,570
tous ces composants avec lesquels nous avons travaillé, où nous écrirons plus styles, où nous allons construire des interfaces utilisateur plus

65
00:05:01,570 --> 00:05:07,330
complexes et où vous aurez vraiment besoin de ces principes fondamentaux que vous avez appris dans le deuxième et

66
00:05:07,330 --> 00:05:11,080
dans ce module de cours pour ensuite créer des applications React Native incroyables.

67
00:05:11,080 --> 00:05:11,890
Continuons donc.