1
00:00:02,460 --> 00:00:04,290
Teraz, gdy wiemy, czym

2
00:00:04,290 --> 00:00:07,370
jest React Native, rzućmy okiem za kulisy.

3
00:00:07,530 --> 00:00:13,080
Jak już wspomniałem, przy pomocy React i React Native budujemy aplikację, a nasz kod zwykle wygląda mniej więcej

4
00:00:13,080 --> 00:00:13,700
tak.

5
00:00:13,710 --> 00:00:19,260
Budujemy normalne komponenty React, tak jak je znasz, z języka JavaScript, ponieważ JavaScript jest językiem,

6
00:00:19,260 --> 00:00:21,650
którego używamy do tworzenia aplikacji

7
00:00:21,810 --> 00:00:26,290
React Native, ale tutaj używamy specjalnych komponentów, takich jak widok i tekst.

8
00:00:26,310 --> 00:00:31,130
To nie są twoje normalne elementy HTML, ponieważ normalne elementy HTML nie

9
00:00:31,680 --> 00:00:37,230
są obsługiwane, platformy natywne nie wiedzą, jak ich używać, dlatego używasz specjalnych składników dostarczonych

10
00:00:37,230 --> 00:00:42,600
przez React Native, dla których React Native jest w stanie przetłumaczyć je na

11
00:00:42,630 --> 00:00:46,380
instrukcje platformy natywne rozumieją, więc tak to działa.

12
00:00:46,380 --> 00:00:51,150
Teraz ważne jest, aby zrozumieć, że twoje widoki, więc komponenty, z którymi pracujesz, są w końcu kompilowane

13
00:00:51,150 --> 00:00:58,440
do prawdziwych natywnych widgetów, do prawdziwych elementów natywnych, do prawdziwego kodu natywnego. Twój kod JavaScript, w którym zarządzasz logiką biznesową,

14
00:00:58,470 --> 00:01:03,480
nie zostanie skompilowany, ale Twoje poglądy będą, a to oczywiście oznacza również,

15
00:01:03,750 --> 00:01:09,190
że zazwyczaj uzyskujesz doskonałą wydajność podczas tworzenia aplikacji React Native, ponieważ wynikiem jest

16
00:01:09,190 --> 00:01:14,310
prawdziwa aplikacja natywna, w której duża część kod jest prawdziwym rodzimym kodem.

17
00:01:14,310 --> 00:01:19,300
Teraz, jeśli przyjrzymy się bliżej temu składnikowi, ważne jest, aby zrozumieć, że możesz oczywiście

18
00:01:19,320 --> 00:01:25,640
używać React do tworzenia aplikacji internetowych, ale możesz także tworzyć aplikacje natywne dla Androida i iOS z natywnym

19
00:01:25,650 --> 00:01:31,530
kodem, więc bez React Native lub że może korzystać z React Native, więc są to cztery różne

20
00:01:31,530 --> 00:01:37,410
sposoby tworzenia aplikacji, w których React dla Internetu nie dostarczy nam natywnej aplikacji, a jedynie w celu

21
00:01:37,410 --> 00:01:40,260
porównania, w jaki sposób będzie to powiązane.

22
00:01:40,260 --> 00:01:45,630
Więc jeśli używasz React dla sieci, zwykle pracujesz z, powiedzmy div, aby ustrukturyzować zawartość.

23
00:01:46,260 --> 00:01:48,540
Jeśli będziesz pracować bezpośrednio

24
00:01:48,540 --> 00:01:54,780
z Androidem, więc zbudujesz swoją aplikację w Android Studio bez React Native, na przykład będziesz

25
00:01:54,780 --> 00:02:00,600
pracować z widokiem Androida, który byłby widżetem, którego możesz używać w tworzonym interfejsie

26
00:02:00,600 --> 00:02:08,970
użytkownika bezpośrednio z natywnymi funkcjami platformy w celu uporządkowania treści. W systemie iOS byłby to widżet widoku interfejsu użytkownika i nie

27
00:02:08,970 --> 00:02:10,780
trzeba zapamiętywać tych terminów,

28
00:02:10,830 --> 00:02:16,020
chcę tylko wyjaśnić, w jaki sposób React Native tłumaczy dla Ciebie, ponieważ w aplikacjach

29
00:02:16,020 --> 00:02:18,180
React Native faktycznie używasz elementu widoku.

30
00:02:18,180 --> 00:02:22,950
Teraz, gdy spojrzysz na ten element widoku, oczywiście zobaczysz, że jest bardzo

31
00:02:23,010 --> 00:02:24,830
podobny do elementu div,

32
00:02:24,840 --> 00:02:30,510
wygląda jak znacznik HTML, różnica polega na tym, że zaczyna się od dużej litery, a ten

33
00:02:30,690 --> 00:02:36,180
widok nie jest znacznikiem HTML , przeglądarka nie wiedziałaby, co zrobić z widokiem, ale React

34
00:02:36,240 --> 00:02:42,990
Native to robi, a React Native przetłumaczy ten widok na widok Androida lub widok interfejsu użytkownika i robi to

35
00:02:43,050 --> 00:02:49,260
oczywiście nie tylko dla tego ogólnego elementu opakowania, ale na przykład, jeśli pobierasz dane wejściowe od użytkownika,

36
00:02:49,260 --> 00:02:54,210
w sieci zrobiłbyś to z elementem wejściowym, jeśli zbudowałbyś natywną aplikację na Androida,

37
00:02:54,210 --> 00:02:59,850
użyłbyś edycji tekstu, dla natywnej aplikacji na iOS użyłbyś pola tekstowego interfejsu użytkownika a w

38
00:03:00,090 --> 00:03:06,240
React Native jest komponent do wprowadzania tekstu, ponownie React Native kompiluje to dla natywnych widżetów dla Ciebie

39
00:03:06,240 --> 00:03:11,520
i tak działa React Native za kulisami. Oczywiście w tym kursie nie dbamy o sieć,

40
00:03:11,520 --> 00:03:17,310
tylko dlatego, aby zrozumieć, że istnieją pewne podobieństwa, używamy tych tagów, które wyglądają jak tagi HTML, ale oczywiście istotną

41
00:03:17,440 --> 00:03:24,660
różnicą jest to, że są to kompilowane specjalne komponenty do kodu natywnego. Teraz, jak już wspomniałem, ważne jest, aby zrozumieć,

42
00:03:24,660 --> 00:03:30,500
że w przypadku interfejsu użytkownika React Native oferuje specjalne komponenty, które są następnie kompilowane

43
00:03:30,540 --> 00:03:33,000
do użycia natywnego, dla twojej

44
00:03:33,060 --> 00:03:38,760
innej logiki, więc jeśli używasz Redux lub jeśli masz jakąkolwiek logikę biznesową, możesz:

45
00:03:38,760 --> 00:03:47,070
wysyłając żądania HTTP, transformujesz dane, cały twój inny kod JavaScript nie jest skompilowany do kodu natywnego, ale zamiast tego działa

46
00:03:47,070 --> 00:03:52,980
w specjalnym wątku hostowanym przez React Native. Możesz więc wyobrazić sobie swoją aplikację React Native,

47
00:03:52,980 --> 00:03:58,450
którą ostatecznie otrzymujesz jako prawdziwą aplikację natywną, ponieważ jest to ta, w której wszystkie

48
00:03:58,450 --> 00:04:05,760
widoki zostały skompilowane do natywnych widżetów, ale w której znajduje się dodatkowa mini aplikacja wewnątrz aplikacji, mini Javascript działająca tam

49
00:04:05,760 --> 00:04:12,690
aplikacja hostowana i uruchamiana przez React Native, która uruchamia cały kod JavaScript, a następnie kod JavaScript może rozmawiać z

50
00:04:12,690 --> 00:04:13,800
platformą macierzystą.

51
00:04:14,160 --> 00:04:19,860
Możesz to sobie wyobrazić tutaj, masz swój kod, swoją aplikację i tworzysz natywną aplikację, która

52
00:04:19,860 --> 00:04:25,110
działa na natywnej platformie i oczywiście masz pewne funkcje platformy, takie jak na

53
00:04:25,110 --> 00:04:27,150
przykład używanie kamery urządzenia.

54
00:04:27,150 --> 00:04:32,520
Teraz, jak już wspomniano, twój kod można podzielić na dwie rzeczy - twoje poglądy i

55
00:04:32,520 --> 00:04:38,430
logikę biznesową, a więc drugi kod JavaScript. Teraz, jak już wspomniano wiele razy, twoje

56
00:04:38,490 --> 00:04:46,620
widoki są kompilowane do widoków natywnych, do natywnych widżetów dla tych platform, a twój kod jest jednak przechowywany jako kod JavaScript

57
00:04:46,620 --> 00:04:53,090
i możesz korzystać z funkcji platformy natywnej, takich jak kamera, ponieważ kod JavaScript działa w specjalnym wirtualnym

58
00:04:53,100 --> 00:04:58,430
maszyna w końcu, uruchomiona i obsługiwana przez React Native w Twojej aplikacji, więc właściwa

59
00:04:58,440 --> 00:05:04,710
część znajduje się w naszej natywnej aplikacji, którą wysyłamy do sklepów z aplikacjami, a ten kod

60
00:05:04,710 --> 00:05:10,080
JavaScript, ta wirtualna maszyna JavaScript, umie mówić do funkcji platformy natywnej, a więc do

61
00:05:10,200 --> 00:05:14,340
systemu operacyjnego, na którym aplikacja jest uruchomiona, poprzez specjalny mostek,

62
00:05:14,340 --> 00:05:20,580
który można powiedzieć, i ten most oraz maszynę wirtualną, wszystko to automatycznie dostarczane przez React Native.

63
00:05:20,580 --> 00:05:22,050
Nie musisz się

64
00:05:22,170 --> 00:05:29,190
tym przejmować, wszystko, co musisz zrobić, to napisać aplikację React Native z Javascriptem i tymi specjalnymi komponentami, i to wszystko, co musisz

65
00:05:29,190 --> 00:05:30,720
teraz wiedzieć, oto jak działa

66
00:05:30,720 --> 00:05:36,870
aplikacja React Native za kulisami, a ja ważne jest, aby zdawać sobie z tego sprawę, ponieważ zabiera to trochę

67
00:05:37,170 --> 00:05:43,050
magii w pozytywnym sensie, ponieważ rozumiesz, co tak naprawdę piszesz i co się stanie z twoim kodem oraz

68
00:05:43,050 --> 00:05:47,020
jak ten kod kończy się w natywnej aplikacji i oczywiście, rozumiesz również,

69
00:05:47,100 --> 00:05:51,960
że w końcu masz prawdziwą natywną aplikację. Nie cały kod jest skompilowany, byłoby

70
00:05:51,960 --> 00:05:52,980
to prawie

71
00:05:52,980 --> 00:05:58,300
niemożliwe, ale twoje widoki są skompilowane i oczywiście widoki, więc część, którą widzi użytkownik,

72
00:05:58,320 --> 00:06:03,650
jest najważniejszą częścią, jeśli chodzi o wydajność aplikacji, ponieważ ponowne renderowanie interfejsu użytkownika i

73
00:06:03,650 --> 00:06:05,700
to wszystko, zazwyczaj jest to

74
00:06:05,700 --> 00:06:10,620
część wymagająca dużej wydajności, dlatego bardzo dobrze jest, że jest ona skompilowana i

75
00:06:10,620 --> 00:06:13,410
jest to jedna z ogromnych zalet React Native.