1
00:00:02,460 --> 00:00:04,290
Alors maintenant que nous savons ce

2
00:00:04,290 --> 00:00:07,370
qu'est React Native, jetons un bref coup d'œil dans les coulisses.

3
00:00:07,530 --> 00:00:13,080
Maintenant, comme je l'ai mentionné, avec React et React Native, nous créons une application et notre code ressemble généralement

4
00:00:13,080 --> 00:00:13,700
à ceci.

5
00:00:13,710 --> 00:00:19,260
Nous construisons des composants React normaux comme vous le savez sur le Web avec Javascript car Javascript est le langage

6
00:00:19,260 --> 00:00:21,650
que nous utilisons pour créer des applications React

7
00:00:21,810 --> 00:00:26,290
Native, mais là-bas, nous utilisons des composants spéciaux comme la vue et le texte ici.

8
00:00:26,310 --> 00:00:31,130
Ce ne sont pas vos éléments HTML normaux car les éléments HTML normaux ne sont

9
00:00:31,680 --> 00:00:37,230
pas pris en charge, les plateformes natives ne savent pas comment les utiliser, donc vous utilisez des composants

10
00:00:37,230 --> 00:00:42,600
spéciaux qui vous sont fournis par React Native pour lesquels React Native est capable de les traduire

11
00:00:42,630 --> 00:00:46,380
en instructions les plates-formes natives comprennent, c'est ainsi que cela fonctionne.

12
00:00:46,380 --> 00:00:51,150
Maintenant, il est important de comprendre que vos vues, donc les composants avec lesquels vous travaillez, sont finalement

13
00:00:51,150 --> 00:00:58,440
compilés en vrais widgets natifs, en vrais éléments natifs, en vrai code natif. Votre code Javascript où vous gérez votre logique métier ne

14
00:00:58,470 --> 00:01:03,480
sera pas compilé mais vos vues le seront et cela signifie également que vous obtenez

15
00:01:03,750 --> 00:01:09,190
généralement de bonnes performances lors de la création d'applications React Native car le résultat est une véritable

16
00:01:09,190 --> 00:01:14,310
application native où une grande partie de la le code est un vrai code natif.

17
00:01:14,310 --> 00:01:19,300
Maintenant, si nous examinons de plus près ce composant, il est important de comprendre que vous

18
00:01:19,320 --> 00:01:25,640
pouvez bien sûr utiliser React pour créer des applications Web, mais que vous pouvez également créer des applications natives pour Android

19
00:01:25,650 --> 00:01:31,530
et iOS avec du code natif, donc sans React Native ou que vous peut utiliser React Native, ce sont donc

20
00:01:31,530 --> 00:01:37,410
quatre façons différentes de créer des applications où, bien sûr, React pour le Web ne nous donnera pas une application

21
00:01:37,410 --> 00:01:40,260
native, mais simplement pour comparer comment cela serait lié.

22
00:01:40,260 --> 00:01:45,630
Donc, si vous utilisez React pour le Web, vous travaillez généralement avec, disons, une div pour structurer votre contenu.

23
00:01:46,260 --> 00:01:48,540
Si vous travailliez directement avec Android,

24
00:01:48,540 --> 00:01:54,780
donc vous créeriez votre application dans Android Studio sans React Native du tout, vous travailleriez avec une vue Android

25
00:01:54,780 --> 00:02:00,600
par exemple, ce serait un widget que vous pouvez utiliser là dans l'interface utilisateur que vous construisez

26
00:02:00,600 --> 00:02:08,970
directement avec les fonctionnalités de la plateforme native pour structurer votre contenu. Sur iOS, ce serait le widget de vue de l'interface utilisateur et vous n'avez

27
00:02:08,970 --> 00:02:10,780
pas besoin de mémoriser ces

28
00:02:10,830 --> 00:02:16,020
termes, je veux juste expliquer comment React Native traduit les choses pour vous parce que dans les applications

29
00:02:16,020 --> 00:02:18,180
React Native, vous utilisez réellement l'élément view.

30
00:02:18,180 --> 00:02:22,950
Maintenant, si vous regardez cet élément de vue, vous voyez bien sûr qu'il est très similaire

31
00:02:23,010 --> 00:02:24,830
à l'élément div, il ressemble

32
00:02:24,840 --> 00:02:30,510
à une balise HTML, la différence est bien sûr qu'il commence par un caractère majuscule et que la vue n'est

33
00:02:30,690 --> 00:02:36,180
pas une balise HTML , le navigateur ne sait pas quoi faire avec une vue, mais React Native le

34
00:02:36,240 --> 00:02:42,990
fait et React Native traduira cette vue vers la vue Android ou la vue de l'interface utilisateur pour vous et il le fait bien

35
00:02:43,050 --> 00:02:49,260
sûr non seulement pour ce composant de wrapper général, mais par exemple, si vous récupérez une entrée utilisateur, sur le Web, vous

36
00:02:49,260 --> 00:02:54,210
le feriez avec l'élément d'entrée, si vous construisez une application Android native, vous utiliserez le texte d'édition,

37
00:02:54,210 --> 00:02:59,850
pour une application iOS native, vous utiliserez le champ de texte de l'interface utilisateur et dans React Native, il

38
00:03:00,090 --> 00:03:06,240
y a le composant de saisie de texte, encore une fois React Native le compile pour les widgets natifs pour vous

39
00:03:06,240 --> 00:03:11,520
et c'est ainsi que React Native fonctionne en arrière-plan. Bien sûr, nous ne nous soucions pas du Web dans

40
00:03:11,520 --> 00:03:17,310
ce cours ici, juste pour que vous compreniez qu'il y a des similitudes, nous utilisons ces balises qui ressemblent à des balises HTML mais bien

41
00:03:17,440 --> 00:03:24,660
sûr, la différence importante est que ce sont des composants spéciaux compilés au code natif. Maintenant, comme je l'ai déjà mentionné, il est important de

42
00:03:24,660 --> 00:03:30,500
comprendre que pour l'interface utilisateur, React Native vous donne des composants spéciaux qui sont ensuite compilés pour

43
00:03:30,540 --> 00:03:33,000
une utilisation native, pour votre autre

44
00:03:33,060 --> 00:03:38,760
logique, donc si vous utilisez Redux ou si vous avez une logique métier, vous '' En envoyant

45
00:03:38,760 --> 00:03:47,070
des requêtes HTTP, vous transformez des données, tous vos autres codes Javascript ne sont pas compilés en code natif mais à la place, ils

46
00:03:47,070 --> 00:03:52,980
s'exécutent sur un thread spécial hébergé par React Native. Vous pouvez donc imaginer votre application React Native que vous

47
00:03:52,980 --> 00:03:58,450
obtenez au final comme une véritable application native, car elle en est une, où toutes les vues ont

48
00:03:58,450 --> 00:04:05,760
été compilées en widgets natifs mais où il y a une mini-application supplémentaire à l'intérieur de votre application, un mini Javascript application qui s'exécute là-bas,

49
00:04:05,760 --> 00:04:12,690
hébergée et démarrée par React Native pour ainsi dire, qui exécute tout votre code Javascript et votre code Javascript peut ensuite parler à

50
00:04:12,690 --> 00:04:13,800
la plate-forme native.

51
00:04:14,160 --> 00:04:19,860
Vous pouvez l'imaginer comme ceci ici, vous avez votre code, votre application et vous créez une application native et qui

52
00:04:19,860 --> 00:04:25,110
s'exécute sur une plate-forme native et bien sûr là-bas, vous avez certaines fonctionnalités de plate-forme disponibles comme par exemple

53
00:04:25,110 --> 00:04:27,150
en utilisant l'appareil photo de l'appareil.

54
00:04:27,150 --> 00:04:32,520
Maintenant, comme déjà mentionné, votre code peut être divisé en deux choses ici - vos vues

55
00:04:32,520 --> 00:04:38,430
et votre logique métier, donc l'autre code Javascript. Maintenant, comme déjà mentionné plusieurs fois, vos vues

56
00:04:38,490 --> 00:04:46,620
sont compilées en vues natives, en widgets natifs pour ces plates-formes et votre code est cependant conservé en tant que code Javascript et vous pouvez

57
00:04:46,620 --> 00:04:53,090
exploiter les fonctionnalités de la plate-forme native comme la caméra car votre code Javascript s'exécute dans un environnement virtuel spécial

58
00:04:53,100 --> 00:04:58,430
à la fin, tourné et hébergé par React Native à l'intérieur de votre application, donc la

59
00:04:58,440 --> 00:05:04,710
bonne partie ici est tout à l'intérieur de notre application native que nous expédions aux app stores et que le

60
00:05:04,710 --> 00:05:10,080
code Javascript, cette machine virtuelle Javascript, sait parler aux fonctionnalités de la plate-forme native, donc au système

61
00:05:10,200 --> 00:05:14,340
d'exploitation sur lequel votre application s'exécute à la fin via un pont spécial

62
00:05:14,340 --> 00:05:20,580
que vous pourriez dire et ce pont et cette machine virtuelle, tout cela est automatiquement fourni par React Native.

63
00:05:20,580 --> 00:05:22,050
Vous n'avez pas à

64
00:05:22,170 --> 00:05:29,190
vous en soucier, tout ce que vous faites est d'écrire votre application React Native avec Javascript et avec ces composants spéciaux et c'est tout ce que

65
00:05:29,190 --> 00:05:30,720
vous devez savoir pour le moment,

66
00:05:30,720 --> 00:05:36,870
voici comment une application React Native fonctionne en arrière-plan et je il est important d'en être conscient, car cela enlève une partie de

67
00:05:37,170 --> 00:05:43,050
la magie dans un sens positif, car vous comprenez ce que vous écrivez réellement et ce qui se passera avec votre code

68
00:05:43,050 --> 00:05:47,020
et comment ce code se retrouve dans une application native et bien sûr, vous comprenez

69
00:05:47,100 --> 00:05:51,960
également que vous avez finalement une vraie application native. Tout votre code n'est pas compilé, ce

70
00:05:51,960 --> 00:05:52,980
serait assez

71
00:05:52,980 --> 00:05:58,300
impossible, mais vos vues sont compilées et bien sûr, les vues, donc la partie que l'utilisateur voit,

72
00:05:58,320 --> 00:06:03,650
est la partie la plus importante en matière de performances pour une application, car le rendu de

73
00:06:03,650 --> 00:06:05,700
l'interface utilisateur et tout cela, c'est

74
00:06:05,700 --> 00:06:10,620
généralement la partie exigeante en performances et donc c'est très bien que cela soit compilé

75
00:06:10,620 --> 00:06:13,410
et c'est l'une des grandes forces de React Native.