1 00:00:02,260 --> 00:00:08,440 Teraz, w tym kursie odświeżającym, moduł Yeater nie napisze złożonej aplikacji reagującej, ponieważ to po prostu nie 2 00:00:08,440 --> 00:00:10,120 jest pomysł tego modułu. 3 00:00:10,630 --> 00:00:17,260 Później w tym kursie po tym module napiszemy realistyczną aplikację w głównym module, w którym będziemy pracować 4 00:00:17,260 --> 00:00:18,730 nad projektem kursu. 5 00:00:18,880 --> 00:00:20,890 Więc to tylko odświeżenie tutaj. 6 00:00:21,070 --> 00:00:25,840 Skupiam się na podstawowych elementach reagujących, Stael, na budowaniu niesamowitej aplikacji, a nie na tworzeniu. 7 00:00:26,530 --> 00:00:31,870 Dlatego w REACT chodzi o komponenty, dlatego zazwyczaj dzielimy naszą aplikację na komponenty. 8 00:00:32,080 --> 00:00:34,300 Teraz zacznijmy jednak bez podziału. 9 00:00:34,390 --> 00:00:41,320 I zamiast wypuszczać tutaj jedną technologię, aplikację, użyję div, powiedzmy w tym div. 10 00:00:41,710 --> 00:00:43,840 Dodajmy więcej kodu html. 11 00:00:44,050 --> 00:00:50,420 Mówię html tutaj, oczywiście, że J to X, ale zostało to jeszcze przetłumaczone na dwie notatki HCM Altidore. 12 00:00:50,500 --> 00:00:50,700 Dobrze. 13 00:00:50,980 --> 00:00:52,120 Ale to J to X. 14 00:00:53,020 --> 00:01:00,830 Więc tutaj możemy mieć H do oznaczenia, gdzie mówimy, że powodują cele, a poniżej, że chcemy mieć listę lub 15 00:01:00,830 --> 00:01:02,950 dodać listę naszych celów kursu. 16 00:01:03,180 --> 00:01:04,150 I są celem. 17 00:01:04,180 --> 00:01:04,840 Możliwe. 18 00:01:05,260 --> 00:01:09,460 Tato, chcemy ukończyć kurs. 19 00:01:10,350 --> 00:01:13,560 Że chcemy dowiedzieć się wszystkiego o kursie. 20 00:01:17,240 --> 00:01:21,230 Główny temat i chcemy, powiedzmy, pomóc. 21 00:01:22,920 --> 00:01:25,950 Nasi studenci w trakcie, CU i. 22 00:01:28,030 --> 00:01:31,890 Część, a może to być trochę złota. 23 00:01:32,260 --> 00:01:34,060 Teraz bardzo trywialna aplikacja. 24 00:01:34,240 --> 00:01:39,850 Teraz nie mam tutaj żadnej specjalnej efektownej stylizacji, dlatego to oszczędzamy i wyciągamy to. 25 00:01:39,880 --> 00:01:47,050 Ale teraz dodam trochę stylizacji i do tego dodam aplikację, plik Searsa tutaj i zaimportuję Deadfall do 26 00:01:47,110 --> 00:01:48,370 pliku JavaScript. 27 00:01:48,400 --> 00:01:53,710 Nie jest to oczywiście możliwe w Manili, JavaScript, ale z tego powodu pod maską narzędzi, które 28 00:01:53,710 --> 00:01:56,860 Nien analizuje nasze pliki, a następnie przekształca kod. 29 00:01:57,310 --> 00:02:02,740 Jest to możliwe i jest to po prostu przekształcane, aby wstrzyknąć ten kod CSX do H. 30 00:02:02,740 --> 00:02:03,790 Plik Timal również. 31 00:02:04,660 --> 00:02:07,580 Teraz tutaj dam C jako klasę. 32 00:02:07,600 --> 00:02:09,370 I jest jedna specjalna rzecz. 33 00:02:10,080 --> 00:02:16,500 Taki atrybut klasy nie istnieje, a J to X, ponieważ klasa jest słowem kluczowym w JavaScript. 34 00:02:16,840 --> 00:02:18,160 To jest nazwa klasy. 35 00:02:18,190 --> 00:02:21,870 I w ten sposób dodajesz klasy siestas do elementów, a J to X. 36 00:02:22,240 --> 00:02:28,400 To wszystko jest oczywiście dowodem lub przypomina wam, że to nie jest H Tim. 37 00:02:28,660 --> 00:02:29,320 Ale H Tim. 38 00:02:29,320 --> 00:02:37,630 Owlish wyglądająca składnia, wszystkie wymienione tutaj jako lista celów klas, a teraz tutaj możemy. 39 00:02:39,040 --> 00:02:46,300 Definiuje tutaj niektóre style dla Gollust, a ja po prostu ustawię listę stylów na non tutaj, 40 00:02:46,300 --> 00:02:52,660 usuń margines lub dam mu margines dwóch górnych i dolnych ram i dopełniania zera. 41 00:02:53,350 --> 00:03:00,040 I do każdego elementu listy bramek dodam margines jednego górnego i dolnego zera jednego pokoju dwa po lewej i prawej stronie, 42 00:03:00,460 --> 00:03:03,020 a następnie po prostu granicę bryły jednego piksela. 43 00:03:03,040 --> 00:03:07,460 A potem ten szarawy kolor i wyściółka jednego barana. 44 00:03:07,550 --> 00:03:12,460 To bardzo, bardzo prosta stylizacja, ponieważ nie chcę spędzać dużo czasu na pisaniu, patrz tutaj jako 45 00:03:12,520 --> 00:03:13,150 style. 46 00:03:13,930 --> 00:03:15,820 Teraz może jedna korekta. 47 00:03:16,420 --> 00:03:19,810 Dajmy liście margines dwóch wstążek we wszystkich kierunkach. 48 00:03:20,230 --> 00:03:24,310 Teraz mamy tę listę naszych celów, aby dostosować cele kursu tutaj na górze. 49 00:03:24,640 --> 00:03:25,990 Ja również. 50 00:03:27,750 --> 00:03:30,420 Nadaj temu d'Hiv nazwę klasy, oczywiście, czaszki. 51 00:03:31,460 --> 00:03:33,050 A potem w D. DO. jako plik US. 52 00:03:34,390 --> 00:03:41,410 Może na samym szczycie uda nam się zablokować bramki i ich d. h, aby oznaczyć do wyrównania w środku. 53 00:03:41,620 --> 00:03:42,220 Właśnie tak. 54 00:03:43,060 --> 00:03:45,160 Znowu bardzo ogromne gole. 55 00:03:45,190 --> 00:03:47,470 Ale tutaj można dyskutować. 56 00:03:47,650 --> 00:03:49,270 Po prostu ćwiczymy reagować. 57 00:03:49,780 --> 00:03:51,070 Mamy więc te cele kursu tutaj. 58 00:03:51,430 --> 00:03:51,880 Niesamowite. 59 00:03:52,450 --> 00:03:54,860 Jest to oczywiście bardzo prosty znacznik. 60 00:03:55,450 --> 00:04:00,940 Teraz, kiedy często reagujesz na to, co robisz, dzieląc to na więcej komponentów, na 61 00:04:00,940 --> 00:04:07,570 przykład outsourcingujesz tę listę do osobnego komponentu, aby każdy komponent pozostawał sam w sobie stosunkowo szczupły i 62 00:04:07,570 --> 00:04:09,640 skoncentrowany na jednym zadaniu. 63 00:04:10,180 --> 00:04:14,560 W tym celu możemy dodać folder sup składników tutaj w folderze źródłowym. 64 00:04:15,400 --> 00:04:20,650 I tam dodam listę celów J. S. Plik. 65 00:04:20,830 --> 00:04:22,960 To pomieści mój komponent listy celów. 66 00:04:23,620 --> 00:04:27,880 Teraz, aby stworzyć taki nowy komponent, musimy przede wszystkim zaimportować, zareagować od zareagować. 67 00:04:27,940 --> 00:04:30,450 W przeciwnym razie nie możemy użyć tego J jako X Syntex. 68 00:04:31,000 --> 00:04:32,290 A potem wspomniałem o martwych. 69 00:04:32,290 --> 00:04:33,760 Składnik jest funkcją. 70 00:04:33,880 --> 00:04:37,660 Nawiasem mówiąc, można również utworzyć za pomocą słowa kluczowego funkcji lub. 71 00:04:38,710 --> 00:04:42,280 Z wyrażeniem funkcyjnym lub. 72 00:04:43,490 --> 00:04:47,480 Dzięki funkcji strzałki wkrótce użyłem wcześniej tekstu, którego użyję w tym przypadku, ale nie 73 00:04:47,480 --> 00:04:48,680 jest to konieczne. 74 00:04:49,430 --> 00:04:52,430 A potem tutaj eksportuję moją listę celów w ten sposób. 75 00:04:52,790 --> 00:04:54,860 A teraz tutaj wracam. 76 00:04:55,920 --> 00:05:01,530 Ta nieuporządkowana lista, sól, wytnij ją tutaj, a następnie dodana, oto wartość zwracana, a 77 00:05:01,530 --> 00:05:07,500 jeśli reforma, zobaczysz automatycznie, że nawiasy są dodawane wokół niej, dzięki czemu można ją ładnie sformatować 78 00:05:07,680 --> 00:05:08,910 w wielu wierszach. 79 00:05:08,940 --> 00:05:10,890 W przeciwnym razie nie byłby to prawidłowy JavaScript. 80 00:05:11,280 --> 00:05:13,350 Podobnie jest w nawiasach. 81 00:05:13,350 --> 00:05:16,920 To dlatego, że JavaScript wie, że ten blok należy do siebie. 82 00:05:17,730 --> 00:05:20,170 Teraz mamy tutaj listę celów i aplikację. 83 00:05:20,430 --> 00:05:24,630 Tak, możemy teraz zaimportować nasz komponent listy celów. 84 00:05:24,930 --> 00:05:26,520 Możesz nazwać go tutaj, jak chcesz. 85 00:05:26,790 --> 00:05:29,990 Nie musi to być ta sama nazwa, pod którą eksportujesz go tutaj. 86 00:05:30,450 --> 00:05:36,720 Jedyną ważną rzeczą jest to, że musi zaczynać się od dużej litery tutaj w Abcess i importu z 87 00:05:36,720 --> 00:05:39,510 folderu komponentów i są one z listy celów. 88 00:05:39,780 --> 00:05:43,430 I jak wspomniałem wcześniej, możesz pominąć D. rozszerzenie pliku tutaj. 89 00:05:43,620 --> 00:05:44,460 To nie jest wymagane. 90 00:05:45,210 --> 00:05:52,710 A potem używasz listy przejść jak zwykłego J. S. Element X, jak zwykły element H tim L, można 91 00:05:52,710 --> 00:05:53,040 powiedzieć. 92 00:05:53,310 --> 00:05:58,890 Ale ponieważ nie mamy treści między tagiem otwierającym i zamykającym, możemy i musimy napisać tutaj tag 93 00:05:58,890 --> 00:05:59,460 samozamykający. 94 00:05:59,760 --> 00:06:00,960 To nie byłoby dozwolone. 95 00:06:01,050 --> 00:06:03,280 Zawsze musisz zamknąć podatek i jazz x. 96 00:06:03,990 --> 00:06:06,240 To byłby teraz mój komponent listy celów. 97 00:06:06,630 --> 00:06:10,230 A zatem, jeśli mamy bezpieczeństwo, widzimy taki sam wynik jak poprzednio. 98 00:06:10,980 --> 00:06:17,520 Otrzymujemy również tę samą stylizację, ponieważ tutaj style są zawsze stosowane globalnie, nawet jeśli zostaną zaimportowane do 99 00:06:17,520 --> 00:06:19,140 określonego pliku komponentu. 100 00:06:19,590 --> 00:06:26,250 Mimo to dobrą praktyką jest konfigurowanie stylów w pliku CSX obok komponentu, do którego należą. 101 00:06:26,520 --> 00:06:28,610 Dlatego dodam listę celów C jako plik. 102 00:06:29,040 --> 00:06:33,210 Dodaj moją listę celów Stollsteimer i zaimportuj tę listę celów. 103 00:06:33,300 --> 00:06:36,450 CSX wpada do pliku JavaScript listy celów. 104 00:06:36,720 --> 00:06:41,580 Nie jest to konieczne, ale ułatwia znalezienie stylów należących do tego komponentu. 105 00:06:41,880 --> 00:06:47,160 Należy pamiętać, że style nie są automatycznie uwzględniane w podziale na komponenty, chociaż stosowane są normalne 106 00:06:47,220 --> 00:06:52,860 reguły as, ponieważ całe to C jest następujące, bez względu na to, gdzie je importujesz, są stosowane globalnie 107 00:06:52,890 --> 00:06:54,120 do całej strony. 108 00:06:54,960 --> 00:06:57,540 Dzięki temu wracamy do tego samego wyniku, co wcześniej. 109 00:06:58,020 --> 00:06:59,220 Dlaczego to zrobiliśmy? 110 00:06:59,290 --> 00:07:02,280 I dlaczego dzielimy to, jeśli mamy taki sam wynik jak wcześniej?