1
00:00:02,160 --> 00:00:08,820
Teraz, aby wyświetlić naszą listę celów, tutaj, w widoku, chcę po prostu wypisać kilka składników tekstowych, na razie po

2
00:00:08,820 --> 00:00:16,290
prostu drukuję mój cel i aby to zrobić, możemy wprowadzić dynamiczne wyrażenie tutaj z pojedynczymi otwierającymi i zamykającymi nawiasami klamrowymi a teraz

3
00:00:16,290 --> 00:00:17,910
odwołujemy się do celów

4
00:00:18,390 --> 00:00:25,860
kursu, czyli tej zmiennej, którą tu dostaliśmy z rozkładem tablic. Cele kursu to nasza gama celów i teraz,

5
00:00:25,860 --> 00:00:27,890
podobnie jak w normalnym

6
00:00:28,110 --> 00:00:34,620
React, który tak naprawdę nie lubię, ponieważ w końcu używamy normalnego React, tak jak

7
00:00:34,800 --> 00:00:36,350
znasz go z

8
00:00:36,750 --> 00:00:43,590
React dla projektów internetowych, możesz teraz zamapuj tę tablicę danych na tablicę komponentów za pomocą

9
00:00:43,590 --> 00:00:50,280
metody map, która jest normalną metodą Javascript. Metoda map przyjmuje funkcję, która wykonuje się na

10
00:00:50,280 --> 00:00:52,230
każdym elemencie w tablicy, więc

11
00:00:52,230 --> 00:00:53,180
tutaj

12
00:00:53,190 --> 00:01:00,810
otrzymujemy nasz cel, a następnie musi zwrócić tutaj nowy komponent. Znowu użyję tej wbudowanej funkcji strzałki, gdzie zamiast

13
00:01:00,810 --> 00:01:07,230
mieć nawiasy klamrowe, a następnie coś zwracać, pomijam nawiasy klamrowe i pomijam instrukcję

14
00:01:07,230 --> 00:01:11,340
return, jest to poprawna składnia JavaScript, to również zwróci

15
00:01:11,370 --> 00:01:13,980
to, co tu wprowadzę.

16
00:01:14,160 --> 00:01:17,740
To, co chcę zwrócić, to komponent tekstowy, więc

17
00:01:17,880 --> 00:01:26,430
ten komponent tekstowy zaimportowaliśmy z React Native i dzięki temu możemy teraz wyświetlić nasz cel tutaj, ponieważ cel w celach kursu będzie

18
00:01:26,430 --> 00:01:32,280
po prostu tekstem, ponieważ to, co dodajemy do celów kursu, to wprowadzony cel i wpisany

19
00:01:32,280 --> 00:01:36,100
cel otrzymujemy z wprowadzania tekstu, a to tylko tekst.

20
00:01:36,570 --> 00:01:42,210
Więc teraz, właśnie wyprowadzamy trochę tekstu i mapuję wszystkie moje cele kursu na komponenty

21
00:01:42,390 --> 00:01:49,630
tekstowe, które zostaną wyświetlone w tym widoku tutaj. I dzięki temu, jeśli to uratujemy, powinniśmy już

22
00:01:49,720 --> 00:01:51,130
być w

23
00:01:51,220 --> 00:01:59,260
stanie zacząć dodawać pewne cele, więc naucz się React Native to jedna z rzeczy, które mogę tu wpisać,

24
00:01:59,260 --> 00:02:00,950
kliknij dodaj i oto

25
00:02:01,050 --> 00:02:06,300
jest, naucz się tego na poważnie, a my też to otrzymamy,

26
00:02:06,300 --> 00:02:11,610
a jeśli chcesz też zrobić naleśniki, możesz to zrobić i oczywiście działa

27
00:02:11,980 --> 00:02:18,480
to również na iOS, naprawdę poznaj React Native i oczywiście nadal chcę zrobić naleśniki.

28
00:02:18,550 --> 00:02:23,960
Więc to działa i w ten sposób możemy wygenerować prostą, bardzo trywialną listę przedmiotów tutaj.

29
00:02:23,980 --> 00:02:29,830
Teraz oczywiście te przedmioty wyglądają raczej nudno, więc może możemy zastosować tam stylizację,

30
00:02:29,830 --> 00:02:33,120
aby wyglądały lepiej. Zanim to zrobimy,

31
00:02:33,340 --> 00:02:36,680
pamiętaj, że mamy błąd w naszym terminalu.

32
00:02:36,730 --> 00:02:41,350
Teraz nasza aplikacja wyraźnie działa, ale błąd, który tu otrzymujemy, polega na tym, że każde dziecko

33
00:02:41,350 --> 00:02:46,190
na liście powinno mieć unikalny kluczowy rekwizyt i jest to normalna reguła React, nic React Native specyficzne.

34
00:02:46,300 --> 00:02:52,930
Rzeczywiście, zawsze należy przypisywać klucz do listy widżetów tutaj, aby React mógł skutecznie aktualizować tę listę

35
00:02:52,930 --> 00:02:58,750
za kulisami, jeśli zajdzie taka potrzeba. Robisz to, dodając tutaj kluczową prop, a następnie

36
00:02:59,110 --> 00:03:01,730
klucz powinien być unikalnym identyfikatorem, na razie

37
00:03:01,780 --> 00:03:05,890
przejdźmy do samego celu, który nie jest ściśle unikalny, możesz dwukrotnie wprowadzić

38
00:03:05,890 --> 00:03:09,970
ten sam cel z tym samym tekstem, co dałoby ci błąd, ale

39
00:03:10,240 --> 00:03:12,650
na razie załóżmy, że tego nie

40
00:03:12,670 --> 00:03:17,720
robisz, dlatego możemy użyć celu jako klucza, a jeśli to zrobimy, pozbywamy się tego ostrzeżenia.

41
00:03:17,720 --> 00:03:21,850
Jeśli teraz nauczyłem się React Native, mogę to dodać bez błędu.

42
00:03:21,850 --> 00:03:27,610
Znowu, jeśli dodam ten sam tekst dwa razy, to technicznie nawet nie dostaję tutaj błędu, ale byłoby to

43
00:03:27,610 --> 00:03:28,040
błędne,

44
00:03:28,040 --> 00:03:32,170
oto jest, oto błąd, ponieważ mam dwoje dzieci z tym samym kluczem.

45
00:03:32,200 --> 00:03:35,650
Więc na razie założymy, że tego nie

46
00:03:35,770 --> 00:03:40,580
robisz, to jest normalna kluczowa zasada, którą masz w normalnym React.

47
00:03:40,780 --> 00:03:46,210
Załóżmy więc, że nie osiągniesz dwukrotnie tego samego celu i kontynuuj stylizację tych przedmiotów, ponieważ

48
00:03:46,210 --> 00:03:48,910
w tej chwili nie wyglądają zbyt ekscytująco.