1 00:00:00,000 --> 00:00:02,910 >> [MUZYKI] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> NEEL Mehta: Tu idzie. 4 00:00:07,275 --> 00:00:11,070 >> Cóż, każdy, zapraszamy do sieci aplikacje przyszłości z React. 5 00:00:11,070 --> 00:00:11,870 To CS50. 6 00:00:11,870 --> 00:00:12,930 Nazywam się Neel. 7 00:00:12,930 --> 00:00:17,689 Jestem TA dla CS50 i student drugiego roku w Harvard College i bardzo, bardzo 8 00:00:17,689 --> 00:00:18,730 namiętne web developer. 9 00:00:18,730 --> 00:00:20,730 Więc jestem bardzo ekscytujące mówić do was dzisiaj, 10 00:00:20,730 --> 00:00:24,550 czy jesteś tutaj lub w domu oglądania, o React, który jest ponownie 11 00:00:24,550 --> 00:00:27,270 jak powiedziałem, przyszłość aplikacji internetowych. 12 00:00:27,270 --> 00:00:29,055 >> Więc React to ramy internetowej. 13 00:00:29,055 --> 00:00:30,930 A jak byłem informacją niektórych ludzi tutaj, 14 00:00:30,930 --> 00:00:33,400 ramy jest tylko zestaw narzędzi można używać 15 00:00:33,400 --> 00:00:35,770 zorganizować i budować swoją aplikację. 16 00:00:35,770 --> 00:00:39,010 I aplikacje internetowe są ponownie, strony internetowe które są interaktywne, takich jak Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, cokolwiek. 18 00:00:42,330 --> 00:00:45,590 >> Więc Facebook to framework WWW który został opracowany przez Facebook 19 00:00:45,590 --> 00:00:48,060 kilka lat back-- reagują jest. 20 00:00:48,060 --> 00:00:50,830 To ponieważ stosuje się w Facebook na swoich aplikacji mobilnych 21 00:00:50,830 --> 00:00:52,460 a aplikacja internetowa, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy jest inny widoczne wśród pierwszych React. 23 00:00:56,350 --> 00:00:58,630 >> To naprawdę było uzyskanie bardzo popularne. 24 00:00:58,630 --> 00:01:03,420 Jeśli kiedykolwiek używać rzeczy jak kątowe lub Kręgosłup, to jest z tej samej rodziny 25 00:01:03,420 --> 00:01:05,830 ale od tego czasu znacznie wyprzedzi ich popularność. 26 00:01:05,830 --> 00:01:06,890 Jest to gorąca nowość. 27 00:01:06,890 --> 00:01:09,590 To naprawdę, naprawdę ogromny. 28 00:01:09,590 --> 00:01:13,470 >> I tak React jest dobre nie tylko jako Ramy internetowa dla interfejsów budowlanych. 29 00:01:13,470 --> 00:01:16,020 To jest dobre dla budowania interfejsów internetowych. 30 00:01:16,020 --> 00:01:18,350 Jest też rzeczą Język, który nazywa React 31 00:01:18,350 --> 00:01:22,200 pozwala tworzyć interfejsy dla Androida i iOS 32 00:01:22,200 --> 00:01:26,390 i być może inne platformy w przyszłości używając tylko tego samego kodu JavaScript. 33 00:01:26,390 --> 00:01:31,130 Można użyć dokładnie to samo Kod JavaScript do renderowania stron internetowych, 34 00:01:31,130 --> 00:01:33,040 renderowanie aplikacji Android i iOS aplikacje. 35 00:01:33,040 --> 00:01:35,000 >> To bardzo, bardzo ekscytujący czas. 36 00:01:35,000 --> 00:01:37,070 To naprawdę, naprawdę super okazja. 37 00:01:37,070 --> 00:01:42,020 To naprawdę uniwersalnym internetowej narzędzie rozwoju interfejs, 38 00:01:42,020 --> 00:01:44,420 więc jest to bardzo, bardzo Ważne jest, aby wiedzieć. 39 00:01:44,420 --> 00:01:46,949 I tak jak mówiłem ludzi przed, to, jak sądzę, 40 00:01:46,949 --> 00:01:48,990 ulegnie zmianie, jak tworzenie aplikacji internetowych na zawsze. 41 00:01:48,990 --> 00:01:55,820 Więc to może trochę przesada, ale myślę, że to całkiem dobra rzecz znać. 42 00:01:55,820 --> 00:01:57,580 >> OK, więc to, co jest React? 43 00:01:57,580 --> 00:02:01,020 React to ramy można używać do budowania interfejsów. 44 00:02:01,020 --> 00:02:03,240 Interfejs jest znowu strona internetowa, prawda? 45 00:02:03,240 --> 00:02:06,340 Więc oto Instagram.com, zastosowania React. 46 00:02:06,340 --> 00:02:08,740 >> React jest zbudowany na Pomysł składników. 47 00:02:08,740 --> 00:02:11,900 Komponent jest HTML Element na sterydach, 48 00:02:11,900 --> 00:02:14,470 więc element HTML jest jak przycisk. 49 00:02:14,470 --> 00:02:15,250 To jest akapit. 50 00:02:15,250 --> 00:02:17,500 To jest nagłówek, prawda? 51 00:02:17,500 --> 00:02:22,740 I Instagram będzie z nich korzystać, ale to będzie również wykorzystywać elementy React. 52 00:02:22,740 --> 00:02:25,740 >> React elementy są nabierający szybkości elementy HTML 53 00:02:25,740 --> 00:02:28,100 które mają swoje zachowanie zawarte w nich. 54 00:02:28,100 --> 00:02:31,800 Tak więc, na przykład, może to mieć element razem składnik razem 55 00:02:31,800 --> 00:02:34,095 która będzie zawierać jak znacznik czasu, wiesz, 56 00:02:34,095 --> 00:02:37,170 składnik profil, który zawiera obraz profilu 57 00:02:37,170 --> 00:02:38,820 i nazwisko osoby. 58 00:02:38,820 --> 00:02:42,930 To może mieć, jak licznik, który mogą liczyć jak wielu lubi, 59 00:02:42,930 --> 00:02:45,610 i po kliknięciu na nim, to będzie zwiększyć liczbę lubi. 60 00:02:45,610 --> 00:02:48,200 Komponent jest tylko kilka kodu HTML, który 61 00:02:48,200 --> 00:02:50,520 ma pewne funkcje owinięte w jej wnętrzu. 62 00:02:50,520 --> 00:02:53,770 Tak to jest jak elementu HTML na sterydach, jak powiedziałem wcześniej. 63 00:02:53,770 --> 00:02:56,270 Możesz wziąć te elementy, i można je połączyć 64 00:02:56,270 --> 00:02:59,060 aby nowe elementy, w w tym przypadku, składnik po, 65 00:02:59,060 --> 00:03:00,505 która zawiera wszystkie te rzeczy. 66 00:03:00,505 --> 00:03:04,050 Będzie zawierać Czas, Profil, LikeCounter, może komentarz 67 00:03:04,050 --> 00:03:06,100 a może sam obraz. 68 00:03:06,100 --> 00:03:10,810 I tak właśnie aplikacji internetowych są budowane poprzez elementy i zestawiając je. 69 00:03:10,810 --> 00:03:15,620 Karma dla Instagram jest niczym więcej niż kilka postów jeden po drugim, 70 00:03:15,620 --> 00:03:19,032 każde stanowisko zawiera jak Time, Profil, LikeCounter, i tak dalej. 71 00:03:19,032 --> 00:03:20,490 To trochę jak budowa domu. 72 00:03:20,490 --> 00:03:22,660 Nie budować dom od góry do dołu. 73 00:03:22,660 --> 00:03:24,960 Bierzesz components-- was podjąć jak łazienki. 74 00:03:24,960 --> 00:03:28,320 Bierzesz bedroom-- je trzymać razem i masz nowy składnik. 75 00:03:28,320 --> 00:03:29,760 Masz nową część domu. 76 00:03:29,760 --> 00:03:32,860 >> Więc React to wszystko wokół Ten pomysł komponentów 77 00:03:32,860 --> 00:03:36,600 są interaktywne, które są deklaratywne. 78 00:03:36,600 --> 00:03:39,650 Podobnie jak po prostu powiedzieć, co Profil jest i to czyni go. 79 00:03:39,650 --> 00:03:40,600 Są sk. 80 00:03:40,600 --> 00:03:43,880 Możesz wziąć czas i profil, umieścić je ze sobą, aby coś lepszego. 81 00:03:43,880 --> 00:03:47,770 I są wielokrotnego użytku, więc jeśli mam kod źródłowy dla stanowiska, 82 00:03:47,770 --> 00:03:49,440 można osadzić, że nigdzie. 83 00:03:49,440 --> 00:03:53,160 >> Można osadzić Instagram rzeczą, na własnej stronie internetowej. 84 00:03:53,160 --> 00:03:56,830 Możesz umieścić na Facebooku, na przykład, pod warunkiem, że stosuje reagują również. 85 00:03:56,830 --> 00:04:00,360 Więc elementy są naprawdę, naprawdę, naprawdę potężne budulcem sieci 86 00:04:00,360 --> 00:04:04,180 które mogą być wykorzystane w dowolnym miejscu i umieścić razem do nowych bloków. 87 00:04:04,180 --> 00:04:07,159 To jest bardzo, bardzo Przegląd wysoki poziom. 88 00:04:07,159 --> 00:04:09,200 Tak, znowu, jeśli masz Wszelkie pytania w dowolnym punkcie 89 00:04:09,200 --> 00:04:14,470 o filozofii reaktora kodowanie, aby mnie powstrzymać, i daj mi znać. 90 00:04:14,470 --> 00:04:18,420 >> OK, więc reagują jest fajne, bo to ma inny sposób patrzenia 91 00:04:18,420 --> 00:04:19,870 w jaki sposób budować aplikacje internetowe. 92 00:04:19,870 --> 00:04:23,620 Prawdopodobnie słyszeliście o MVC, a Model można kontrolować w CS50 lub cokolwiek 93 00:04:23,620 --> 00:04:25,940 inne próbkowania klasy używasz. 94 00:04:25,940 --> 00:04:29,000 A większość ramy są zbudowany wokół idei MVC. 95 00:04:29,000 --> 00:04:30,410 React nie jest. 96 00:04:30,410 --> 00:04:32,980 React opiera się na idei of jednokierunkowy przepływ danych 97 00:04:32,980 --> 00:04:36,510 jak widać przez ten wykres lub grafikę tutaj. 98 00:04:36,510 --> 00:04:38,260 >> Zasadniczo masz źródło danych. 99 00:04:38,260 --> 00:04:42,380 Oraz źródło danych zadecyduje jak ułożyć pewnych składników. 100 00:04:42,380 --> 00:04:45,452 A składniki będą Następnie, gdy zmienia, 101 00:04:45,452 --> 00:04:47,160 będą one powiedzieć Źródłem danych do zmiany. 102 00:04:47,160 --> 00:04:49,350 >> Aby korzystać z Instagram Przykładem, może być 103 00:04:49,350 --> 00:04:52,050 lista obiektów pocztowych, takich jak w bazie danych, czy coś. 104 00:04:52,050 --> 00:04:53,310 Że dane. 105 00:04:53,310 --> 00:04:57,600 Nasze komponenty, a następnie dodaj ofertę weźmie te dane, 106 00:04:57,600 --> 00:05:01,830 i wykorzystać te dane do renderowania coś na ekranie. 107 00:05:01,830 --> 00:05:04,300 To, co strzałka na podstawie danych z elementem jest, 108 00:05:04,300 --> 00:05:07,930 a następnie, że same dane są wykorzystywane aby uczynić kilka elementów. 109 00:05:07,930 --> 00:05:10,290 >> Facebook Messenger dla Przykładem, który ma reagować 110 00:05:10,290 --> 00:05:13,410 możesz mieć listę wiadomości jako źródła danych. 111 00:05:13,410 --> 00:05:15,927 I to nie czyni tylko lista wiadomości 112 00:05:15,927 --> 00:05:17,510 ale także lista przyjaciół masz. 113 00:05:17,510 --> 00:05:19,200 Masz nieprzeczytane liczyć. 114 00:05:19,200 --> 00:05:23,330 Może również spowodować, że coś Facebook to na dole Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Te same dane jest jedno źródło prawdy 116 00:05:25,610 --> 00:05:28,290 i powoduje dużo elementy mają być świadczone. 117 00:05:28,290 --> 00:05:30,290 A gdy jeden z tych, Elementy zmianie 118 00:05:30,290 --> 00:05:32,320 wraca i zmiany źródła danych. 119 00:05:32,320 --> 00:05:33,460 >> Możesz wysłać wiadomość, prawda? 120 00:05:33,460 --> 00:05:34,780 Że zmiany źródła danych. 121 00:05:34,780 --> 00:05:39,490 Odczytywanie wiadomości, tak ustawić nieprzeczytane 0. 122 00:05:39,490 --> 00:05:41,136 Że zmiany źródła danych. 123 00:05:41,136 --> 00:05:44,010 I zauważyć, że wszystkie z nich z jednej strzałka wraca do tych samych danych 124 00:05:44,010 --> 00:05:47,662 source, więc wiesz, biorąc pod uwagę pewien zestaw danych, 125 00:05:47,662 --> 00:05:49,870 dokładnie to, co wiem, Strona będzie wyglądać. 126 00:05:49,870 --> 00:05:50,700 To deterministyczny. 127 00:05:50,700 --> 00:05:53,451 Wiesz, podane pewnych danych, co strona będzie wyglądać. 128 00:05:53,451 --> 00:05:56,158 Można przewidzieć, jak to będzie zachowywać i jak się sprawy mają 129 00:05:56,158 --> 00:05:57,650 do pracy, gdy są razem. 130 00:05:57,650 --> 00:06:00,410 >> I gdybym miał milion części tu, to zachowują się tak samo, prawda? 131 00:06:00,410 --> 00:06:02,290 Nie powodowałoby dziwne połączenia. 132 00:06:02,290 --> 00:06:04,120 Jeden Dane renderowane miliona elementów. 133 00:06:04,120 --> 00:06:06,879 Milion Components wrócić i edytować dane. 134 00:06:06,879 --> 00:06:07,920 A więc to jest bardzo miłe. 135 00:06:07,920 --> 00:06:10,870 Budujemy sk, łatwo skalowalne aplikacje webowe. 136 00:06:10,870 --> 00:06:13,150 >> Masz jedno źródło danych, źródło prawdy. 137 00:06:13,150 --> 00:06:15,790 To mówi komponentów jak układ strony, 138 00:06:15,790 --> 00:06:18,190 a składniki będą obsługi interakcji. 139 00:06:18,190 --> 00:06:20,150 A jeśli chcesz zmienić rzeczy, po prostu wrócić 140 00:06:20,150 --> 00:06:21,750 i powiedz źródło danych, aby zmienić. 141 00:06:21,750 --> 00:06:22,850 Mieć sens? 142 00:06:22,850 --> 00:06:26,010 Więc React jest o zrozumienie jak zbudować składnik 143 00:06:26,010 --> 00:06:29,540 i jak zrobić swój komponent interakcji ze światem zewnętrznym. 144 00:06:29,540 --> 00:06:31,850 >> Dokonywanie Interact podzespołów ze światem 145 00:06:31,850 --> 00:06:34,490 wykorzystuje inną technologię nazywa Flux, która 146 00:06:34,490 --> 00:06:36,872 Jest to struktura, która jest dodaje się w górnej części React. 147 00:06:36,872 --> 00:06:38,330 Nie będziemy o tym rozmawiać. 148 00:06:38,330 --> 00:06:42,990 Mamy zamiar porozmawiać o, biorąc pod uwagę Dane, w jaki sposób można uczynić komponent? 149 00:06:42,990 --> 00:06:47,010 >> I tak React jest naprawdę fajne, bo Ciebie Można go używać z dowolnym tylnym końcu chcesz. 150 00:06:47,010 --> 00:06:50,480 Jeśli masz jak Python back-end, jeśli Python może wypluć kilka danych, 151 00:06:50,480 --> 00:06:51,610 React może to uczynić. 152 00:06:51,610 --> 00:06:54,700 Jeśli ma wyjść JS danych, React renderuje go. 153 00:06:54,700 --> 00:06:56,890 Ruby szynach z Dane, React renderuje go. 154 00:06:56,890 --> 00:07:01,860 >> Więc React jest w zasadzie internetowej view-- przedni koniec z elementami 155 00:07:01,860 --> 00:07:03,910 dla dowolnego źródła danych w ogóle. 156 00:07:03,910 --> 00:07:07,145 I tak dzieje się od źródła danych, aby reagować elementów jest całkiem proste. 157 00:07:07,145 --> 00:07:08,770 Idąc w drugą stronę jest trochę trudniej. 158 00:07:08,770 --> 00:07:10,462 Który wykorzystuje Flux jak wcześniej wspomniałem. 159 00:07:10,462 --> 00:07:11,420 Nie będziemy się do tego. 160 00:07:11,420 --> 00:07:13,740 Skupimy się bardziej na Dane na składowe boku. 161 00:07:13,740 --> 00:07:15,880 W ten sposób można dokonać fajne, zabawne aplikacje webowe. 162 00:07:15,880 --> 00:07:19,870 To nie będzie miało wpływu na świat zewnętrzny na teraz, ale to już inna historia. 163 00:07:19,870 --> 00:07:22,210 >> OK, więc gdybyś tu był dla mojego ostatniego seminarium 164 00:07:22,210 --> 00:07:26,610 będziesz wiedzieć, że cały kod dla dzisiejsza rozmowa będzie pod tym adresem 165 00:07:26,610 --> 00:07:29,320 o, przepraszam, ten URL tutaj. 166 00:07:29,320 --> 00:07:32,730 I w zasadzie mamy zamiar iść w czterech krokach, może pięć, 167 00:07:32,730 --> 00:07:33,510 Prawdopodobnie nie pięć. 168 00:07:33,510 --> 00:07:37,300 Będziemy poruszać się po czterech etapach budowy próbki React aplikację. 169 00:07:37,300 --> 00:07:39,550 I tak cały kod źródłowy dla każdego etapu sposobu 170 00:07:39,550 --> 00:07:42,216 będzie tutaj, więc jeśli jesteś po wzdłuż w domu, 171 00:07:42,216 --> 00:07:43,991 zachęcamy do zapoznania się z tym kod. 172 00:07:43,991 --> 00:07:46,740 Jeśli jesteś po wzdłuż tutaj, będziemy pokazując je na ekranie, 173 00:07:46,740 --> 00:07:47,739 więc nie martw się o to. 174 00:07:47,739 --> 00:07:50,930 Ale jeśli jesteś w domu, czuję do odwiedzenia tej strony internetowej. 175 00:07:50,930 --> 00:07:56,400 A, tak, powinieneś być w stanie uzyskać cały kod można kiedykolwiek potrzebujemy tutaj. 176 00:07:56,400 --> 00:08:01,380 Więc jest to dobry ściągawki oraz dla przyszłych przygodach z React. 177 00:08:01,380 --> 00:08:04,490 Fajne, więc jeśli każdy, kto tu jest, a nawet jeśli jesteś w domu, 178 00:08:04,490 --> 00:08:11,580 wyciągać z tej strony internetowej, is.gd/cs50react, brak kapitału, bez podkreślenia, nie ma nic. 179 00:08:11,580 --> 00:08:15,849 >> Zobaczysz stronę, która wygląda trochę tak. 180 00:08:15,849 --> 00:08:17,140 To jest coś, co nazywa CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen jest wspólnym środowiska kodowania 182 00:08:20,030 --> 00:08:23,364 z którym można pisać kod tutaj, i To będzie automatycznie wysłane do Ciebie. 183 00:08:23,364 --> 00:08:24,780 I ten sposób można napisać kod. 184 00:08:24,780 --> 00:08:26,920 Mogę uruchomić kod tutaj. 185 00:08:26,920 --> 00:08:33,470 >> Dla example-- i jeśli reloads-- to zobaczyć, Używam kodu JavaScript na stronie 186 00:08:33,470 --> 00:08:36,390 tu, i będziesz automatycznie uczynić stronę internetową 187 00:08:36,390 --> 00:08:37,980 z tego kodu JavaScript. 188 00:08:37,980 --> 00:08:40,039 I tak to jest sposób dla nas wypróbować kod 189 00:08:40,039 --> 00:08:43,089 bardzo szybko, bez konieczności użycia nasz osobisty lub skorzystać z naszego komputera lokalnego 190 00:08:43,089 --> 00:08:44,290 lub cokolwiek. 191 00:08:44,290 --> 00:08:47,670 Jest to bardzo szybki sposób na makieta i przetestować różne rodzaje kodu. 192 00:08:47,670 --> 00:08:50,560 >> Więc mam zamiar brać Przykładowy kod, umieszczenie go tutaj. 193 00:08:50,560 --> 00:08:52,374 Mamy zamiar pracować przez nią. 194 00:08:52,374 --> 00:08:54,540 A jeśli jesteś w domu, można to podciągnąć również. 195 00:08:54,540 --> 00:08:57,530 A ja już zainstalowany React tutaj, więc można po prostu 196 00:08:57,530 --> 00:09:00,770 napisać własny kod tutaj, i spróbuj go jako własny plac zabaw. 197 00:09:00,770 --> 00:09:04,940 >> Tak, jeśli wszyscy się otwórz ten link tutaj. 198 00:09:04,940 --> 00:09:08,080 Proszę mi dać kciuki się, gdy już jest otwarty. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Super, super fajne. 201 00:09:13,770 --> 00:09:16,914 Nic tu nie ma teraz, ale będzie to zmienić bardzo szybko. 202 00:09:16,914 --> 00:09:21,250 >> OK, więc React jest JavaScript biblioteki, i jako takie, 203 00:09:21,250 --> 00:09:24,480 wymaga znajomości JavaScript, który jest językiem programowania WWW. 204 00:09:24,480 --> 00:09:27,660 I jest używany do innych rzeczy teraz też, ale przede wszystkim w internecie opracowanie 205 00:09:27,660 --> 00:09:32,040 język, więc jeśli nie jesteś zaznajomiony z że, przeczytaj stronę o nazwie JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 To jest piękne. 207 00:09:32,700 --> 00:09:34,240 Możesz się dowiedzieć JavaScript w ciągu pół godziny. 208 00:09:34,240 --> 00:09:34,990 To niesamowite. 209 00:09:34,990 --> 00:09:36,420 >> Więc dać mu czytać. 210 00:09:36,420 --> 00:09:39,960 Mamy również jest dużo HTML tutaj, ponieważ mamy do projektowania stron internetowych, oczywiście. 211 00:09:39,960 --> 00:09:43,890 Więc jeśli nie znasz HTML, sprawdź HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Uważam, że nauka React jest milion razy łatwiejsze, jeśli już 213 00:09:46,520 --> 00:09:47,892 wiem budulec. 214 00:09:47,892 --> 00:09:50,600 Jeśli masz składników, to łatwe do wykonania większego składnika. 215 00:09:50,600 --> 00:09:51,860 To React język dla Ciebie. 216 00:09:51,860 --> 00:09:54,270 >> Więc idź naprzód i dać te rzeczy, czytać. 217 00:09:54,270 --> 00:09:55,070 Pauza ten film. 218 00:09:55,070 --> 00:09:57,440 Daj mu czytać, jeśli jesteś w domu, jeśli nie są 219 00:09:57,440 --> 00:10:00,794 zaznajomieni z HTML lub JavaScript 220 00:10:00,794 --> 00:10:02,960 OK, więc to, co mamy zamiar zrobić, to mamy zamiar zrobić 221 00:10:02,960 --> 00:10:06,470 bardzo prosty app kartami za pomocą React. 222 00:10:06,470 --> 00:10:08,210 Mamy zamiar mieć kartami. 223 00:10:08,210 --> 00:10:09,880 Można przełączyć kartę w tę iz powrotem. 224 00:10:09,880 --> 00:10:12,399 I będziemy mieć listę wszystkie karty, które posiadamy, 225 00:10:12,399 --> 00:10:14,190 i jeśli czujemy ambitny, możemy być 226 00:10:14,190 --> 00:10:17,060 w stanie przełączać się między samochody, klikając na nich. 227 00:10:17,060 --> 00:10:20,360 >> Ale to, z gołymi kości, bardzo prosty React aplikację. 228 00:10:20,360 --> 00:10:22,560 I tak to jest rzeczywiście nie banalne do wykonania, 229 00:10:22,560 --> 00:10:26,030 ale mamy zamiar pokazać, że, jeśli nie tego, to bardzo, bardzo łatwo ją przedłużyć 230 00:10:26,030 --> 00:10:27,680 jeśli inni ludzie ci pomóc z tym. 231 00:10:27,680 --> 00:10:33,750 Tak więc mamy zamiar przejść przez cztery etapy od podstaw zbudować to. 232 00:10:33,750 --> 00:10:36,740 >> Ok, więc cztery kroki, będziemy zacząć od pierwszego kroku. 233 00:10:36,740 --> 00:10:39,790 Pierwszym krokiem będzie budować swój pierwszy składnik. 234 00:10:39,790 --> 00:10:44,830 Jak powiedziałem wcześniej, składnik w React jest tylko elementem HTML na sterydach. 235 00:10:44,830 --> 00:10:49,660 Określa HTML i niektóre jego działania, i 236 00:10:49,660 --> 00:10:52,600 określi, jak ludzie mogą wchodzić w interakcje z nim how 237 00:10:52,600 --> 00:10:54,270 byłoby to stan wewnętrzny. 238 00:10:54,270 --> 00:10:57,630 Podobnie jak przycisk będzie wiedział, jak, ile razy to było kliknięciu na przykład, 239 00:10:57,630 --> 00:11:01,010 i będzie wiedzieć, jak położyć się na zewnątrz. 240 00:11:01,010 --> 00:11:04,430 >> Więc idź naprzód i budować naszą Pierwszy składnik przy użyciu JavaScript. 241 00:11:04,430 --> 00:11:09,711 Więc jeśli składnia wygląda dziwnie, to dlatego, że to niby jest. 242 00:11:09,711 --> 00:11:11,710 Tak, znowu, będziemy do zmiennej o nazwie 243 00:11:11,710 --> 00:11:14,580 aplikacja pozwala za pomocą słów kluczowych, co sprawia, że ​​zmienna, 244 00:11:14,580 --> 00:11:18,210 niech App równe React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> React jest biblioteką i ma funkcji Create klasy. 246 00:11:22,609 --> 00:11:24,400 A to funkcja kawałek kodu, który cię 247 00:11:24,400 --> 00:11:29,090 można użyć do utworzenia nowego typ React komponent. 248 00:11:29,090 --> 00:11:32,780 I tak React.createClass sprawia, że ​​komponent, 249 00:11:32,780 --> 00:11:35,270 i ta część będzie być w stanie zrobić rzeczy. 250 00:11:35,270 --> 00:11:40,460 Najważniejsze, to może zrobić to uczynić czymś, czynią w funkcji. 251 00:11:40,460 --> 00:11:44,500 >> Ponownie, jeśli wskaźnik ten nie jest oczywiste Ci, polecam wybrać się na JS dla kotów 252 00:11:44,500 --> 00:11:45,682 i to sprawdzić. 253 00:11:45,682 --> 00:11:47,710 Czy to powiększony wystarczająco dobrze? 254 00:11:47,710 --> 00:11:48,490 Fajne. 255 00:11:48,490 --> 00:11:50,670 >> Więc każdy potrzeby składowe mieć funkcję renderowania. 256 00:11:50,670 --> 00:11:53,010 Funkcja czynią mówi, co mogę wydrukować na ekranie? 257 00:11:53,010 --> 00:11:54,760 Jednak komponent bezużyteczne, jeśli nie 258 00:11:54,760 --> 00:11:58,060 wiem co wydrukować na ekranie, więc trzeba mieć funkcję renderowania. 259 00:11:58,060 --> 00:12:01,904 >> Tak więc w tynku rzecz, ci Wystarczy wrócić niektóre HTML. 260 00:12:01,904 --> 00:12:03,820 A co to jest cool istnieje coś, co nazywa 261 00:12:03,820 --> 00:12:08,660 JSX, który jest przedłużeniem JavaScript, który jest wykorzystywany przez reakcję. 262 00:12:08,660 --> 00:12:11,845 To pozwala ci pisać w HTML wewnątrz Twojego JavaScript, który 263 00:12:11,845 --> 00:12:13,970 brzmi trochę dziwne, gdy najpierw pomyśl o tym, 264 00:12:13,970 --> 00:12:15,553 ale to sprawia, że ​​wiele sensu potem. 265 00:12:15,553 --> 00:12:17,430 Tak więc możemy to zrobić. 266 00:12:17,430 --> 00:12:21,360 Jeśli jesteś zaznajomiony z HTML, wiem mamy div z celów ogólnych 267 00:12:21,360 --> 00:12:22,790 pojemnik na rzeczy. 268 00:12:22,790 --> 00:12:26,380 Możemy wrócić div, a wewnątrz DIV, możemy umieścić rzeczy. 269 00:12:26,380 --> 00:12:32,390 >> Więc powiedzmy, że chcemy uczynić tylko prosto-up kartami do teraz. 270 00:12:32,390 --> 00:12:34,890 Kartami, powiedziałbym, będzie miał pytanie i odpowiedź. 271 00:12:34,890 --> 00:12:37,530 Więc wewnątrz tego div, niech wydrukować pkt 272 00:12:37,530 --> 00:12:42,155 który mówi question-- Co to jest ostateczną odpowiedź na życie, wszechświat? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 I wtedy odpowiedź jest Będzie oczywiście 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Że nie przyszedł się dobrze w ogóle. 277 00:12:59,730 --> 00:13:04,164 Tak, więc w zasadzie można naprawdę Napisać HTML wewnątrz JavaScript. 278 00:13:04,164 --> 00:13:06,330 I to ma być drukowane na ekranie. 279 00:13:06,330 --> 00:13:08,250 Warto więc spróbować. 280 00:13:08,250 --> 00:13:09,520 >> Więc mamy komponent. 281 00:13:09,520 --> 00:13:12,210 Musimy powiedzieć React umieścić składnik na ekranie 282 00:13:12,210 --> 00:13:18,990 tak React.render, więc zauważyć, że traktować jak każdą inną aplikację elementu. 283 00:13:18,990 --> 00:13:21,010 Piszemy go, ponieważ był to element HTML. 284 00:13:21,010 --> 00:13:25,100 Jak zamiast mówić jak img dla obrazu lub p do ust, 285 00:13:25,100 --> 00:13:28,120 piszesz aplikację, więc aplikacja jest traktowane jako elementu HTML. 286 00:13:28,120 --> 00:13:30,380 Jak powiedziałem wcześniej, jest to element na sterydach. 287 00:13:30,380 --> 00:13:32,870 >> Więc uczynić aplikacji, a dać mu miejsce, aby ją umieścić. 288 00:13:32,870 --> 00:13:37,170 I to jest, jak to tylko możliwe powiedz gdzie go umieścić. 289 00:13:37,170 --> 00:13:46,200 Stworzyłem prostą div na Strona nazywa się z ID strony, 290 00:13:46,200 --> 00:13:48,300 i to, gdzie Element pójdzie. 291 00:13:48,300 --> 00:13:49,841 >> A my nie zamierzamy uruchomić z HTML. 292 00:13:49,841 --> 00:13:53,145 Zasadniczo będzie się umieścić wewnątrz tego elementu strony 293 00:13:53,145 --> 00:13:54,270 że mamy na ekranie. 294 00:13:54,270 --> 00:13:59,210 Tak działa ten kod, a to przyciąga to co na ekranie, więc tutaj jesteśmy. 295 00:13:59,210 --> 00:14:01,770 Zrobiliśmy nasze pierwsze reagują komponent. 296 00:14:01,770 --> 00:14:08,000 >> Więc po prostu jako Przypomnę, że delikatnie się nowy typ elementu, prawda? 297 00:14:08,000 --> 00:14:10,145 To właśnie React.createClass. 298 00:14:10,145 --> 00:14:12,680 I w tym składniku, to powiedział jej, co ma robić. 299 00:14:12,680 --> 00:14:15,590 Zawsze, gdy składnik ten jest być drukowane na ekranie 300 00:14:15,590 --> 00:14:19,300 będzie wydrukować div z dwa akapity w jej wnętrzu. 301 00:14:19,300 --> 00:14:24,460 >> I to, co zrobiliśmy, zrobiliśmy nową aplikację Kąt użyciem notacji Uchwyt aplikacji. 302 00:14:24,460 --> 00:14:27,160 Powiedzieliśmy jej, aby ją umieścić wewnątrz elementu strony. 303 00:14:27,160 --> 00:14:29,867 A więc to, co zrobiłem, to utworzony nowa aplikacja z tego szablonu. 304 00:14:29,867 --> 00:14:31,200 I wtedy powiedział jej, żeby go uczynić. 305 00:14:31,200 --> 00:14:33,680 Więc to powiedział, OK, aplikacja, co mam wydrukować? 306 00:14:33,680 --> 00:14:36,970 App mówi, przejdź wydrukować div z dwoma akapitami wewnątrz niego. 307 00:14:36,970 --> 00:14:40,420 I voila, nie nasz div z dwa akapity w jej wnętrzu. 308 00:14:40,420 --> 00:14:43,180 Sensu tak daleko? 309 00:14:43,180 --> 00:14:46,690 >> A więc znowu, cały wyzwanie React jest po prostu wiedząc, jak zrobić komponenty. 310 00:14:46,690 --> 00:14:48,500 Jak sprawić, by elementy współpracują ze sobą. 311 00:14:48,500 --> 00:14:51,780 Teraz, zrobiliśmy nasz pierwszy Komponent, wróćmy 312 00:14:51,780 --> 00:14:54,284 i zrobić komponenty konfigurowalny. 313 00:14:54,284 --> 00:14:56,700 Więc wiesz, jak w HTML można może dać swoje klasy przyciski? 314 00:14:56,700 --> 00:14:59,146 Możesz podać swoje kotwice href. 315 00:14:59,146 --> 00:15:00,770 Możesz podać swoje wejścia typu, prawda? 316 00:15:00,770 --> 00:15:04,740 Możesz podać więcej klientów Właściwości do wszystkich elementów 317 00:15:04,740 --> 00:15:06,490 aby uczynić go bardziej interesujące. 318 00:15:06,490 --> 00:15:09,030 A tak naprawdę może zrobić dokładnie to samo. 319 00:15:09,030 --> 00:15:17,500 >> Więc powiedzmy, że chcemy, aby nasze aplikacja iść czyni żadnej karty. 320 00:15:17,500 --> 00:15:19,630 Teraz po prostu renderowane na sztywno karty. 321 00:15:19,630 --> 00:15:22,530 Wiemy, że jest tylko jedna karta może zrobić, więc jesteśmy 322 00:15:22,530 --> 00:15:25,960 zamiar spróbować zmienić to teraz tak że możemy po prostu dać mu jakąś kartkę. 323 00:15:25,960 --> 00:15:27,410 To będzie wydrukować kartę. 324 00:15:27,410 --> 00:15:29,380 >> Powinieneś spróbować i zrobić Elementy bardzo ogólnego przeznaczenia. 325 00:15:29,380 --> 00:15:31,654 Więc w ten sposób mogłem email to mój przyjaciel i być jak, 326 00:15:31,654 --> 00:15:33,820 co kartami masz, po prostu podać go do tutaj, 327 00:15:33,820 --> 00:15:35,290 i będzie to robić sama. 328 00:15:35,290 --> 00:15:37,650 Możesz umieścić inne rzeczy w swojej własnej aplikacji. 329 00:15:37,650 --> 00:15:40,600 >> Ale najpierw niech podzielenie się na dwie części, 330 00:15:40,600 --> 00:15:44,500 ale chcemy oddzielić kartę Część drukowanie od rzeczywistego app części. 331 00:15:44,500 --> 00:15:46,660 Więc co możemy zrobić, to mamy Można zmienić to z App 332 00:15:46,660 --> 00:15:51,300 do CardView, tylko Nowa nazwa dla aplikacji, 333 00:15:51,300 --> 00:15:54,450 i możemy zrobić nowy komponent o nazwie App, 334 00:15:54,450 --> 00:15:56,336 nie mylić ze starym App. 335 00:15:56,336 --> 00:16:00,730 Mamy createClass, i podobnie jak w HTML, 336 00:16:00,730 --> 00:16:03,590 można zagnieździć React komponenty wewnątrz siebie. 337 00:16:03,590 --> 00:16:16,430 >> Więc w tej funkcji renderowania, Funkcja CardView powrotu, 338 00:16:16,430 --> 00:16:18,234 i to jest dokładnie to samo. 339 00:16:18,234 --> 00:16:19,400 Zobacz, dlaczego to jest to samo? 340 00:16:19,400 --> 00:16:22,590 Zamiast renderowania tylko aplikacji, które ma div i parowanie wewnątrz niego, 341 00:16:22,590 --> 00:16:26,194 aplikacja renderuje CardView, a CardView czyni div i paragraf. 342 00:16:26,194 --> 00:16:29,110 Więc to jest nasz pierwszy przykład gniazdowania elementy wewnątrz siebie. 343 00:16:29,110 --> 00:16:32,177 Czy to ma sens? 344 00:16:32,177 --> 00:16:33,760 Tak więc znów mamy element CardView. 345 00:16:33,760 --> 00:16:37,250 Mamy elementy app jest on większy niż. 346 00:16:37,250 --> 00:16:40,990 >> OK, więc chcemy, aby nasze CardView-- jeśli Ciebie dać dobry CardView pewną kartę, 347 00:16:40,990 --> 00:16:43,370 będzie to wydrukować dla ciebie, prawda? 348 00:16:43,370 --> 00:16:48,050 Więc po pierwsze, musimy mieć kartę, więc zróbmy obiekt karty. 349 00:16:48,050 --> 00:17:02,930 Więc moja karta equal-- jeśli jesteś wszystkim znane, 350 00:17:02,930 --> 00:17:05,260 jest to tylko zapis podejmowania obiektu w JavaScript. 351 00:17:05,260 --> 00:17:09,280 To trochę jak struktury w C, więc zrobiliśmy karty, 352 00:17:09,280 --> 00:17:15,920 i tak teraz możemy przekazać tę kartę jako własność lub jako atrybut w HTML 353 00:17:15,920 --> 00:17:17,290 Terminologia do naszej aplikacji. 354 00:17:17,290 --> 00:17:20,210 Tak więc możemy zrobić, App karty wynosi myCard. 355 00:17:20,210 --> 00:17:23,200 >> Wiesz, jak na wejściu, to zrobić Typ wejścia równa tekst lub przycisk 356 00:17:23,200 --> 00:17:25,240 Klasa równa btn dla bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Ta sama idea, karta App equals-- musisz umieścić szelki here-- 358 00:17:29,500 --> 00:17:33,830 Karta App równa myCard, więc mówi, mamy ten obiekt karty. 359 00:17:33,830 --> 00:17:39,149 Zamierzam przekazać ją jako Nieruchomość do komponentu aplikacji. 360 00:17:39,149 --> 00:17:41,440 A ta aplikacja elementem będzie być w stanie do niego dostęp i zrobić 361 00:17:41,440 --> 00:17:43,580 ciekawe rzeczy z nim. 362 00:17:43,580 --> 00:17:47,650 >> Więc nasza aplikacja będzie dane karty, więc teraz, 363 00:17:47,650 --> 00:17:49,980 niech mają aplikację daj karta do CardView 364 00:17:49,980 --> 00:17:53,110 Sam, bo jak aplikacja nie jest będzie wiedział, co z nim zrobić, 365 00:17:53,110 --> 00:17:54,850 więc musimy po prostu dać go do CardView. 366 00:17:54,850 --> 00:18:00,050 Więc my go do przejść sam sposób, karta równa, 367 00:18:00,050 --> 00:18:05,426 i dlatego każdy składnik może uzyskać dostęp do rzeczy, które zostały podane do niego. 368 00:18:05,426 --> 00:18:07,800 Mogą one uzyskać dostęp do właściwości że nadano jej 369 00:18:07,800 --> 00:18:09,470 Korzystając z tej składni, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Więc co się dzieje tutaj masz obiekt myCard. 372 00:18:14,920 --> 00:18:18,250 Przekazać go do aplikacji przy użyciu karty App równa myCard. 373 00:18:18,250 --> 00:18:21,420 To obiekt karta daje się Twojej aplikacji. 374 00:18:21,420 --> 00:18:24,400 Aplikacja do niego dostęp jak this.props.card. 375 00:18:24,400 --> 00:18:28,780 To trochę jak obraz wie, co to jest źródłem jest. 376 00:18:28,780 --> 00:18:31,972 >> Ta aplikacja nie wie, co to jest karta jest, i może robić rzeczy z nim. 377 00:18:31,972 --> 00:18:32,930 Może zrobić obliczeń. 378 00:18:32,930 --> 00:18:35,290 To może podejmować decyzje w oparciu wyłączyć. 379 00:18:35,290 --> 00:18:39,950 >> Na razie miałem zamiar przekazać this.props.card na CardView. 380 00:18:39,950 --> 00:18:43,420 Sensu tak daleko? 381 00:18:43,420 --> 00:18:45,210 Będzie to więcej sensu teraz. 382 00:18:45,210 --> 00:18:46,990 >> OK, więc teraz jesteśmy w CardView. 383 00:18:46,990 --> 00:18:51,719 Nasz CardView, otrzymują kartę, należy wydrukować swoje pytanie i odpowiedź. 384 00:18:51,719 --> 00:18:54,510 Teraz po prostu wydrukować niektóre sztywno pytania i odpowiedzi. 385 00:18:54,510 --> 00:18:57,720 Musimy dowiedzieć out-- musimy zwrócić się do karty, które dali nam 386 00:18:57,720 --> 00:19:01,360 co to jest pytanie i odpowiedź, i następnie wydrukować na to uwagę na ekran. 387 00:19:01,360 --> 00:19:02,470 >> Tak więc możemy to zrobić tutaj. 388 00:19:02,470 --> 00:19:06,135 W uczynić begin-- najpierw zrobić równa. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Więc to, co robimy tutaj, to wiemy, że karty są nam dane do nieruchomości, 391 00:19:13,050 --> 00:19:13,580 dobrze? 392 00:19:13,580 --> 00:19:15,930 To nam dana jako wejście. 393 00:19:15,930 --> 00:19:19,440 Jak to prawie jak argumenty do funkcji. 394 00:19:19,440 --> 00:19:22,810 Karta jest argument prawie do tego CardView. 395 00:19:22,810 --> 00:19:25,239 >> Będziemy wyodrębnić, że i umieścić że w kwestii zmienny. 396 00:19:25,239 --> 00:19:27,280 Upewnij się, że odpowiedź udał do odpowiedzi zmiennej. 397 00:19:27,280 --> 00:19:31,130 Informuje, że karta odpowiedzi. 398 00:19:31,130 --> 00:19:35,072 I teraz, że mamy to, zamiast drukować na ten tekst, 399 00:19:35,072 --> 00:19:37,030 mamy zamiar wydrukować co nam dali. 400 00:19:37,030 --> 00:19:43,580 >> Więc to stuff-- więc jedziemy zgasić Pytanie Odpowiedź. 401 00:19:43,580 --> 00:19:46,380 Zobaczymy, czy to działa. 402 00:19:46,380 --> 00:19:52,800 Fajne, więc niech to przejść przez niego jeszcze raz dla pewności. 403 00:19:52,800 --> 00:20:00,470 >> Więc moja karta jest przedmiotem karty, a my dają tej karty do aplikacji. 404 00:20:00,470 --> 00:20:04,790 A aplikacja będzie podjąć karty i dać go do CardView. 405 00:20:04,790 --> 00:20:09,190 I to CardView mówi, jeśli Ciebie daj mi dowolny obiekt kartami, 406 00:20:09,190 --> 00:20:11,920 Będę wydrukować swoje pytanie a jego odpowiedź, prawda? 407 00:20:11,920 --> 00:20:14,590 >> Więc to, co mogłem zrobić, to mogę wyślij ten kod, pierwszy 408 00:20:14,590 --> 00:20:16,580 jak 10 linii kodu, do mojego mojego przyjaciela. 409 00:20:16,580 --> 00:20:18,820 Mógł umieścić go w własnej aplikacji. 410 00:20:18,820 --> 00:20:27,200 I tak długo, jak on zrobił to samo, jak karta CardView równa tej, 411 00:20:27,200 --> 00:20:30,580 tak długo, jak stworzył CardView i dał mu właściwe informacje, 412 00:20:30,580 --> 00:20:31,987 mógł uczynić swoją kartę. 413 00:20:31,987 --> 00:20:34,320 I tak, w ten sposób, to naprawdę fajny sposób na budowanie 414 00:20:34,320 --> 00:20:35,906 Elementy, które korzystają z siebie nawzajem, prawda? 415 00:20:35,906 --> 00:20:38,280 Ta karta może opublikować to CardView w internecie, 416 00:20:38,280 --> 00:20:39,790 a ludzie będą mogli z niego korzystać. 417 00:20:39,790 --> 00:20:45,070 Więc w zasadzie, to jak jeden z Standardowe funkcje w bibliotece C. 418 00:20:45,070 --> 00:20:47,280 >> Jest to funkcja, gdy ktoś napisał go. 419 00:20:47,280 --> 00:20:48,419 Dać pewne nakłady. 420 00:20:48,419 --> 00:20:49,710 To będzie produkować pewną moc. 421 00:20:49,710 --> 00:20:50,890 Nie obchodzi mnie, jak to działa wewnętrznie. 422 00:20:50,890 --> 00:20:53,790 Tak długo, jak dać mu prawo wejście, to będzie dokonać właściwego wyjścia. 423 00:20:53,790 --> 00:20:57,850 >> A komponent może być że w ten sam sposób. 424 00:20:57,850 --> 00:21:00,280 Ten CardView jest jak funkcja biblioteki. 425 00:21:00,280 --> 00:21:03,400 Jeśli dasz mu trochę kartę jako własność, to będziesz 426 00:21:03,400 --> 00:21:05,095 wydrukować zawartość tej karty. 427 00:21:05,095 --> 00:21:16,820 Podobnie jak w przypadku zmiany karty do zamiast być jak to, co jest 5 oraz 37, 428 00:21:16,820 --> 00:21:19,210 będzie odpowiednio zaktualizować. 429 00:21:19,210 --> 00:21:21,955 Więc po prostu przez zmianę wejścia, to dostaje pewną moc. 430 00:21:21,955 --> 00:21:24,830 Więc można myśleć komponentów prawie jako funkcje w ten sposób, co 431 00:21:24,830 --> 00:21:25,920 można umieścić razem. 432 00:21:25,920 --> 00:21:29,440 Masz wejście, jak ten CardView jako wejście, masz wyjścia. 433 00:21:29,440 --> 00:21:31,900 W tym przypadku wyjście jest HTML. 434 00:21:31,900 --> 00:21:34,404 Sensu tak daleko? 435 00:21:34,404 --> 00:21:36,890 Fajne, więc ponownie, właściwości są w jaki sposób można przekazać informacje 436 00:21:36,890 --> 00:21:40,900 do oraz z elementów. 437 00:21:40,900 --> 00:21:42,740 >> OK, więc zróbmy to rzeczą interaktywne. 438 00:21:42,740 --> 00:21:44,450 Teraz to trochę nudne. 439 00:21:44,450 --> 00:21:45,520 Co to jest [niesłyszalne]? 440 00:21:45,520 --> 00:21:48,210 Można wydrukować niektóre na zewnątrz, ale to wszystko można zrobić. 441 00:21:48,210 --> 00:21:51,550 >> Więc wróćmy do stare pytanie, po prostu teraz. 442 00:21:51,550 --> 00:21:54,405 Ok, więc w tej chwili te składniki są nudne, bo wszystko robią, 443 00:21:54,405 --> 00:21:55,030 dostają wejście. 444 00:21:55,030 --> 00:21:56,100 Robią wyjścia, prawda? 445 00:21:56,100 --> 00:21:57,049 To trochę nudne. 446 00:21:57,049 --> 00:21:59,090 Chcemy, aby nasze Składniki w stanie mieć 447 00:21:59,090 --> 00:22:02,150 jakiś stanu wewnętrznego, jak sobie coś przypomnieć. 448 00:22:02,150 --> 00:22:05,320 >> Na karcie flash, na Przykładem, jakie państwa 449 00:22:05,320 --> 00:22:07,550 warto pamiętaj na karcie flash? 450 00:22:07,550 --> 00:22:09,740 Jaki status tymczasowy warto pamiętać, 451 00:22:09,740 --> 00:22:12,491 na karcie flash w aplikacji z kartami? 452 00:22:12,491 --> 00:22:13,990 PUBLICZNOŚCI: Czy to był odwrócony? 453 00:22:13,990 --> 00:22:14,990 NEEL Mehta: Tak, racja. 454 00:22:14,990 --> 00:22:17,665 Więc może chcesz zachować tor jesteś stroną zadrukowaną do góry lub są 455 00:22:17,665 --> 00:22:19,100 twarz w dół na karcie. 456 00:22:19,100 --> 00:22:23,420 Na Facebooku, na przykład, byś chcą sobie przypomnieć, gdzie w news feed 457 00:22:23,420 --> 00:22:25,870 jesteś lub jak kto profil robisz teraz. 458 00:22:25,870 --> 00:22:30,127 >> Na Messenger, jak to, co tekst, wpisz w polu wprowadzania, prawda? 459 00:22:30,127 --> 00:22:31,710 Jeśli odśwież stronę, odchodzi. 460 00:22:31,710 --> 00:22:32,793 Ale tak naprawdę nie obchodzi. 461 00:22:32,793 --> 00:22:33,770 To tylko tymczasowe. 462 00:22:33,770 --> 00:22:34,548 Tak? 463 00:22:34,548 --> 00:22:36,152 >> PUBLICZNOŚCI: [niesłyszalne] 464 00:22:36,152 --> 00:22:38,360 NEEL Mehta: jak błysk karta, jak można widzieć 465 00:22:38,360 --> 00:22:40,290 strona po stronie pytanie, czy odpowiedź? 466 00:22:40,290 --> 00:22:41,070 >> PUBLICZNOŚCI: OK. 467 00:22:41,070 --> 00:22:43,270 >> NEEL Mehta: Like a dwustronne z kartami, prawda? 468 00:22:43,270 --> 00:22:46,370 Tak, tak, chcesz mają ten pomysł teraz 469 00:22:46,370 --> 00:22:50,370 Mam właściwości, które jest jak wejść, ale państwo, które jest tymczasowe, uh, 470 00:22:50,370 --> 00:22:51,839 gdzie jesteś na stronie, prawda? 471 00:22:51,839 --> 00:22:54,380 Znowu powiedział w Facebook Komunikator, mam podobne, które osoba 472 00:22:54,380 --> 00:22:56,550 jesteś przeglądania Facebooka lub kto jest profil, prawda? 473 00:22:56,550 --> 00:22:58,030 >> To jest tylko tymczasowe. 474 00:22:58,030 --> 00:23:01,200 Ważne jest, aby pokazać użytkownikowi co się dzieje, ale odświeżyć stronę. 475 00:23:01,200 --> 00:23:02,250 To naprawdę nie ma znaczenia. 476 00:23:02,250 --> 00:23:04,530 Więc jest to stan tymczasowy, więc wszyscy państwo to. 477 00:23:04,530 --> 00:23:06,250 >> Tak więc raz jeszcze, jest państwo i rekwizyty. 478 00:23:06,250 --> 00:23:09,084 Rekwizyty podany jest wejście ze źródła danych. 479 00:23:09,084 --> 00:23:10,250 Państwo jest jak domyślne. 480 00:23:10,250 --> 00:23:13,700 To tak, jak rzeczy, które sprawia, że ​​rzeczą interaktywne. 481 00:23:13,700 --> 00:23:17,720 >> Tak więc w naszym CardView-- rzućmy nasze CardView--, więc było miło. 482 00:23:17,720 --> 00:23:21,420 Co będziemy robić tutaj, jedziemy dotykać CardView i tylko CardView. 483 00:23:21,420 --> 00:23:25,105 A więc mój przyjaciel, który dostał to, że nie zauważy różnicy. 484 00:23:25,105 --> 00:23:27,230 Nie będą musieli zmienić każdy z własnym kodem 485 00:23:27,230 --> 00:23:29,410 ale oni uważają, że ich CardView ale nabierający. 486 00:23:29,410 --> 00:23:31,270 To miły część o komponenty. 487 00:23:31,270 --> 00:23:35,290 >> OK, więc w naszej CardView, spróbujmy śledzić, czy jesteśmy stopniowo się 488 00:23:35,290 --> 00:23:36,560 lub do dołu. 489 00:23:36,560 --> 00:23:40,480 W React robimy to pierwszy określenie stanu początkowego. 490 00:23:40,480 --> 00:23:42,070 Gdzie karta zacząć? 491 00:23:42,070 --> 00:23:48,480 >> Więc być funkcję o nazwie getInitialState funkcjonować, i wracamy do obiektu. 492 00:23:48,480 --> 00:23:53,310 Obiekt ten zawiera jakiś stan, a państwo jest tylko parę klucz-wartość. 493 00:23:53,310 --> 00:23:56,950 Podobnie jak w poinstruować, masz klucz i wartości, jak masz na imię ciąg. 494 00:23:56,950 --> 00:24:01,410 >> W tym przypadku, powiedzmy, że z przodu jest prawdą. 495 00:24:01,410 --> 00:24:03,760 Ten mówi, że mamy państwo. 496 00:24:03,760 --> 00:24:06,570 Jednym z komponentów do stanu jest atrybutem o nazwie przodu. 497 00:24:06,570 --> 00:24:09,649 [Niesłyszalne], więc domyślnie jesteśmy w przedniej części karty, 498 00:24:09,649 --> 00:24:11,440 i możemy to zmienić jak odwrócić kartę. 499 00:24:11,440 --> 00:24:13,380 Mieć sens? 500 00:24:13,380 --> 00:24:18,190 >> OK, więc w render, teraz jesteśmy przedstawiający pytanie i odpowiedź. 501 00:24:18,190 --> 00:24:20,860 Teraz to, co powinniśmy zrobić jest pokazać pytanie 502 00:24:20,860 --> 00:24:24,370 jeśli jesteśmy na froncie karty tak Odpowiedź jest na tylnej stronie karty. 503 00:24:24,370 --> 00:24:26,850 Dlatego wszystko, aby karta interaktywne. 504 00:24:26,850 --> 00:24:28,100 Więc spróbujmy to tutaj. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Cóż, po pierwsze po prostu zrobić zmienną. 507 00:24:33,620 --> 00:24:37,790 Możemy zapytać teraz this.state.front. 508 00:24:37,790 --> 00:24:42,010 Mamy dostęp stwierdzić to samo my rekwizyty dostępu, więc this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Jeśli jesteśmy z przodu, a następnie tekst jest this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Jeśli jesteśmy na froncie karty, mamy zamiar spróbować i grab 512 00:24:51,360 --> 00:24:52,485 pytanie z karty. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 W przeciwnym razie, jeśli mamy na plecach karty, co mamy robić? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> PUBLICZNOŚCI: Odpowiedź? 517 00:25:02,750 --> 00:25:05,041 >> NEEL Mehta: Tak, tak, tekst równa this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Ale jeśli zauważysz, używamy państwo do podjęcia decyzji 520 00:25:10,930 --> 00:25:14,420 Bo teraz komponentu będzie wyglądać inaczej 521 00:25:14,420 --> 00:25:16,710 opiera się, jak to z nim kontaktować. 522 00:25:16,710 --> 00:25:20,355 Więc zamiast drukować na tym, musimy po prostu wydrukować tekst. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Fajne, więc teraz, jak widać, widzimy tylko pytanie. 525 00:25:28,650 --> 00:25:37,720 A jeśli tu ręcznie zmienić stan do przodu jest fałszywa mamy 42 plecy. 526 00:25:37,720 --> 00:25:39,720 >> A więc znowu, ten składnik ma swój własny stan. 527 00:25:39,720 --> 00:25:43,440 Podobnie jak przycisk wie, czy że został naciśnięty, czy nie, 528 00:25:43,440 --> 00:25:46,080 tego, co wie, co jest na z przodu lub z tyłu. 529 00:25:46,080 --> 00:25:48,320 Domyślnie jest to z przodu. 530 00:25:48,320 --> 00:25:50,840 A następnie, jeśli jest z przodu, będziemy drukować na pytanie. 531 00:25:50,840 --> 00:25:53,106 Jeśli jest to na plecach, będziemy wydrukować odpowiedź. 532 00:25:53,106 --> 00:25:54,980 A więc znowu, informacja podane są takie same. 533 00:25:54,980 --> 00:25:59,090 To po prostu wygląda inaczej na podstawie tego, jak go zaprogramować. 534 00:25:59,090 --> 00:26:02,670 Tak więc, na przykład, Facebook Messenger, nawet jeśli się tego samego źródła danych, 535 00:26:02,670 --> 00:26:05,170 może to wyglądać inaczej ponieważ stan jest inny. 536 00:26:05,170 --> 00:26:08,421 Ty patrzysz na Komunikat różne osoby. 537 00:26:08,421 --> 00:26:10,930 >> OK, więc to wszystko jest dobrze i dobre, ale teraz to, co rzeczywiście 538 00:26:10,930 --> 00:26:15,940 sprawiają, że jesteśmy w stanie zmienić, czy nasza karta jest z przodu lub z tyłu. 539 00:26:15,940 --> 00:26:19,010 Możemy to zrobić poprzez dodanie klapki przycisk, przycisk do karty, które 540 00:26:19,010 --> 00:26:22,950 będzie odwrócić kartę, czy to [niesłyszalne]. 541 00:26:22,950 --> 00:26:31,770 Więc tutaj dodać przycisk, to przycisk, a ten przycisk powie klapki. 542 00:26:31,770 --> 00:26:35,650 >> I tak teraz, to nic nie robi. 543 00:26:35,650 --> 00:26:37,075 To po prostu wygląda ładnie. 544 00:26:37,075 --> 00:26:43,650 Co możemy zrobić, to możemy dodać kliknięcie obsługi, onClick równa this.flip, 545 00:26:43,650 --> 00:26:44,820 a my zdefiniować klapki później. 546 00:26:44,820 --> 00:26:47,120 Ale w zasadzie, onClick Jest to funkcja, która 547 00:26:47,120 --> 00:26:48,675 jest wywoływana, gdy użytkownik kliknie. 548 00:26:48,675 --> 00:26:52,330 >> Więc przycisk będzie wiedział, kiedy to został wciśnięty. 549 00:26:52,330 --> 00:26:54,750 Went to został wciśnięty, będzie odwrócić kartę. 550 00:26:54,750 --> 00:26:58,382 To trochę jak twój dostawa pizzy facet. 551 00:26:58,382 --> 00:27:01,590 Jesteś jak, dobrze, gdy ktoś wzywa mnie, będę dostarczyć pizzę, prawda? 552 00:27:01,590 --> 00:27:03,420 >> Możesz zarejestrować ten słuchacza. 553 00:27:03,420 --> 00:27:04,530 Słuchasz na imprezę. 554 00:27:04,530 --> 00:27:07,657 Można się nazywa, a gdy zdarzenie, coś zrobić. 555 00:27:07,657 --> 00:27:08,240 Można dostać pizzę. 556 00:27:08,240 --> 00:27:11,480 W tym przypadku, gdy jesteś kliknięciu, klapka karty. 557 00:27:11,480 --> 00:27:14,560 >> A więc musimy zdefiniować Funkcja, która będzie odwrócić kartę, 558 00:27:14,560 --> 00:27:17,930 więc musimy napisać, że prawo tutaj, funkcji Flip. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 I tak, jak myślisz, co zrobi z klapką? 561 00:27:23,680 --> 00:27:27,180 Znowu jest wywoływana, gdy klikamy przycisk z klapką. 562 00:27:27,180 --> 00:27:29,406 Co należy klapka funkcja zrobić? 563 00:27:29,406 --> 00:27:34,136 >> PUBLICZNOŚCI: Zmień this.state.front z true na false false na true. 564 00:27:34,136 --> 00:27:38,420 >> NEEL Mehta: Tak, tak, podjąć wszelkie this.front jest-- stan przodu jest. 565 00:27:38,420 --> 00:27:40,930 Weź stan przód, jeśli to prawda, sprawiają, że fałszywe. 566 00:27:40,930 --> 00:27:42,530 Jeśli jest to fałsz, że to prawda, prawda? 567 00:27:42,530 --> 00:27:45,330 Warto więc spróbować. 568 00:27:45,330 --> 00:27:48,240 >> Nie można zmienić stan po prostu wykonując this.state. 569 00:27:48,240 --> 00:27:50,380 Nie możesz tego zrobić. 570 00:27:50,380 --> 00:27:52,030 Nie możesz tego zrobić. 571 00:27:52,030 --> 00:27:55,810 Musisz użyć funkcji nazywa this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Więc można powiedzieć, this.setState przodu jelita grubego to gdzie, znowu, wykrzyknik 573 00:28:03,230 --> 00:28:04,330 punkt oznacza odwrotnie. 574 00:28:04,330 --> 00:28:07,420 Myślę, że jeśli tego. state.front jest prawdą, to będzie włączyć fałszywe. 575 00:28:07,420 --> 00:28:09,170 Będziemy więc ustawić stan z true na false. 576 00:28:09,170 --> 00:28:11,430 Jeśli jest to fałsz, będziemy ustawić to false na true. 577 00:28:11,430 --> 00:28:17,210 >> Wystarczy zauważyć, że ustawienie i uzyskać nieco inaczej, a więc spróbujmy. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, spójrz na to. 579 00:28:18,675 --> 00:28:21,810 Przycisk klapka będzie teraz przełącz przodu do tyłu stan. 580 00:28:21,810 --> 00:28:24,990 >> I tak oto, gdy widzisz Trochę magii React. 581 00:28:24,990 --> 00:28:28,420 Podobnie jak nigdy nie powiedział jej, że do ponownego renderowania. 582 00:28:28,420 --> 00:28:30,910 Nigdy nie powiedziałem, że przerysować coś. 583 00:28:30,910 --> 00:28:32,630 Jeśli robisz to bez React, można by 584 00:28:32,630 --> 00:28:34,588 nie to-- lubię, gdy kliknięciu przycisku klapka jest, 585 00:28:34,588 --> 00:28:37,290 trzeba by powiedzieć to, aby ręcznie ponownie czynią, prawda? 586 00:28:37,290 --> 00:28:43,050 >> React jest naprawdę fajne w, że jeśli dać mu pewien stan i właściwości, 587 00:28:43,050 --> 00:28:45,760 to zawsze czynią dokładnie to samo. 588 00:28:45,760 --> 00:28:48,690 I tak, gdy kiedykolwiek zmienimy stan i właściwości, 589 00:28:48,690 --> 00:28:50,819 reagują tylko wczyta całość. 590 00:28:50,819 --> 00:28:52,860 Ona wie, że istnieje jeden-do-jednego korespondencji 591 00:28:52,860 --> 00:28:57,270 między państwem a parametr i HTML. 592 00:28:57,270 --> 00:29:00,110 Więc gdy którykolwiek z tych Zmiany wg ustalonej przez państwo, 593 00:29:00,110 --> 00:29:03,750 to się zmieni, jak wynagrodzenie jest ponownie renderowane. 594 00:29:03,750 --> 00:29:06,650 I tak w zasadzie React jest jak czekając na zmianę. 595 00:29:06,650 --> 00:29:09,870 >> Zawsze, gdy coś się zmienia, to będzie ponownie uczynić całą stronę. 596 00:29:09,870 --> 00:29:12,480 A jeśli brzmi to nieefektywne, to dlatego, że byłoby to, 597 00:29:12,480 --> 00:29:15,050 ale reagują używa rzeczy nazywany Cień DOM. 598 00:29:15,050 --> 00:29:19,950 Zamiast rysowania strony bezpośrednio, to utrzymuje drzewo wirtualny HTML w pamięci. 599 00:29:19,950 --> 00:29:23,620 >> Wiesz, HTML jest jak drzewo, jak hierarchicznej struktury danych. 600 00:29:23,620 --> 00:29:28,990 Utrzymuje fałszywego drzewa w pamięci, i kiedy zaktualizować stronę, 601 00:29:28,990 --> 00:29:31,940 będzie to wyciągnąć kolejny fałszywy drzewo, i będzie to obliczyć 602 00:29:31,940 --> 00:29:35,120 co zmienić, musi uczynić Strona zrobić dwa drzewa równe. 603 00:29:35,120 --> 00:29:38,540 Tak w zasadzie, to praktycznie ponownie czyni wiele. 604 00:29:38,540 --> 00:29:41,540 A potem to tylko jak zmienia Strona w małych usprawnień, w razie potrzeby, 605 00:29:41,540 --> 00:29:44,240 więc jest to bardzo, bardzo, bardzo wydajny. 606 00:29:44,240 --> 00:29:46,970 >> Więc w zasadzie React będzie każdym razem, gdy coś zmienić, 607 00:29:46,970 --> 00:29:49,010 będzie to ponowne renderowanie strony praktycznie. 608 00:29:49,010 --> 00:29:52,830 To będzie dowiedzieć się, co jest potrzebne, aby zmienić, aby odzwierciedlić rzeczywisty strona 609 00:29:52,830 --> 00:29:55,602 strona wirtualny, i będzie to zrobić. 610 00:29:55,602 --> 00:29:56,560 To wirtualny DOM. 611 00:29:56,560 --> 00:29:59,350 To jeden z największych cechy React. 612 00:29:59,350 --> 00:30:00,880 >> Czy to ma sens? 613 00:30:00,880 --> 00:30:01,540 Jakiekolwiek pytania? 614 00:30:01,540 --> 00:30:02,040 Tak? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> PUBLICZNOŚCI: W jaki sposób porównać wciąż do MVC 617 00:30:08,969 --> 00:30:10,760 że rozmawialiśmy o przed, jak zasobów. 618 00:30:10,760 --> 00:30:13,527 >> NEEL Mehta: Tak, pytanie to jak to porównać do MVC? 619 00:30:13,527 --> 00:30:14,610 Pytałeś o zasobach. 620 00:30:14,610 --> 00:30:16,445 Dobrze, porozmawiajmy o tym, jak funkcjonuje. 621 00:30:16,445 --> 00:30:18,190 >> W MVC, chcesz zaktualizować modelu. 622 00:30:18,190 --> 00:30:20,560 W tym przypadku mielibyśmy model karty. 623 00:30:20,560 --> 00:30:24,540 Widok będzie mieć klapka przycisk, a kontrola 624 00:30:24,540 --> 00:30:26,310 miałby funkcję odwrotną. 625 00:30:26,310 --> 00:30:28,450 Więc widok nie powiedzieć Kontroler odwrócić klapki. 626 00:30:28,450 --> 00:30:30,370 Odwróć by powiedzieć Model zmienić, prawda? 627 00:30:30,370 --> 00:30:33,915 >> I tak, kiedy zrobić MVC, ty posłuchaj model zmienić, 628 00:30:33,915 --> 00:30:37,150 i ponownie renderować widok odpowiednio. 629 00:30:37,150 --> 00:30:39,210 Albo po prostu trzeba lubić mają kontrolera. 630 00:30:39,210 --> 00:30:42,418 Poczekaj na model do zmiany, a następnie wybierać część jak rzeczy 631 00:30:42,418 --> 00:30:44,032 zmienić. 632 00:30:44,032 --> 00:30:45,740 Tutaj mamy jedną rzecz, ale w dużej aplikacji, 633 00:30:45,740 --> 00:30:48,510 trzeba jak pamiętam, co zmiana w każdym miejscu, 634 00:30:48,510 --> 00:30:50,290 więc jest to trochę irytujące. 635 00:30:50,290 --> 00:30:53,670 I tak React jest ładne ponieważ ma cienia Dom. 636 00:30:53,670 --> 00:30:56,040 To może sobie pozwolić na tak przepisać całą rzecz. 637 00:30:56,040 --> 00:30:58,680 Nie musisz do selektywnego jak wiecie co, aby zaktualizować. 638 00:30:58,680 --> 00:31:02,186 >> Na Facebooku, jeśli chcesz otrzymasz nową wiadomość, w MVC, 639 00:31:02,186 --> 00:31:04,060 że trzeba pamiętać, OK, zmienić rzeczy 640 00:31:04,060 --> 00:31:06,260 na szczycie Strona, ikona wiadomości. 641 00:31:06,260 --> 00:31:08,290 Także pojawiają się nowe okno w dolnej części. 642 00:31:08,290 --> 00:31:10,070 Również coś nowego w tym oknie. 643 00:31:10,070 --> 00:31:11,060 Także odtwarzanie dźwięku. 644 00:31:11,060 --> 00:31:13,150 >> To bardzo dużo rzeczy dzieje się w tym samym czasie. 645 00:31:13,150 --> 00:31:15,320 I tak, jeśli nie mają cień Dom, wy mieliście 646 00:31:15,320 --> 00:31:18,740 musisz zrobić to ręcznie, ponieważ nie możesz pozbyć się całej strony. 647 00:31:18,740 --> 00:31:21,430 Nie można sobie pozwolić, aby, więc trzeba ręcznie zmienić każdą rzecz, 648 00:31:21,430 --> 00:31:23,990 co jest naprawdę irytujące w MVC. 649 00:31:23,990 --> 00:31:27,640 >> Tak, aby być oszczędny, selektywnie 650 00:31:27,640 --> 00:31:30,750 zaktualizować stronę, która jest skuteczny, ale również uciążliwe. 651 00:31:30,750 --> 00:31:34,002 W reakcję, ponieważ w cieniu Dom, masz obie rzeczy za darmo. 652 00:31:34,002 --> 00:31:35,710 To wydajne, ponieważ Shadow Dom. 653 00:31:35,710 --> 00:31:37,210 Wąskim gardłem jest aktualizowanie strony. 654 00:31:37,210 --> 00:31:40,292 To nie robi manipulację drzewa. 655 00:31:40,292 --> 00:31:41,250 Otrzymasz efektywności. 656 00:31:41,250 --> 00:31:45,420 Ty też możesz mieć łatwość użycia, ponieważ jeśli po prostu przepisać całą stronę, 657 00:31:45,420 --> 00:31:48,970 ale po prostu wiem, wszystko w porządku, rzeczy będą na stronie gdzieś. 658 00:31:48,970 --> 00:31:51,180 To może być w innym miejscu, ale to będzie na stronie, prawda? 659 00:31:51,180 --> 00:31:52,860 Więc po prostu ponownie renderowane cała rzecz praktycznie, 660 00:31:52,860 --> 00:31:55,540 i można zrobić kilka zmiany w samej strony. 661 00:31:55,540 --> 00:31:57,850 >> Tak więc raz jeszcze, w MVC Ciebie musiałby wybrać 662 00:31:57,850 --> 00:32:01,840 między łatwości obsługi i efektywności, i reagować, można dostać się zarówno. 663 00:32:01,840 --> 00:32:04,020 Tak jest lepiej. 664 00:32:04,020 --> 00:32:05,220 Mieć sens? 665 00:32:05,220 --> 00:32:06,676 Solidny. 666 00:32:06,676 --> 00:32:12,080 >> OK, więc zobaczymy porozmawiajmy trochę o punkcie 4, 667 00:32:12,080 --> 00:32:14,740 jak możemy osadzić elementy. 668 00:32:14,740 --> 00:32:16,260 Więc mamy to teraz. 669 00:32:16,260 --> 00:32:19,420 Mamy fajny mały przycisk. 670 00:32:19,420 --> 00:32:23,157 Możemy odwrócić go z powrotem i dalej, i to wszystko robi. 671 00:32:23,157 --> 00:32:24,990 Powiedzmy, że chcemy mają inny komponent. 672 00:32:24,990 --> 00:32:28,730 Powiedzmy, że nasza aplikacja kartami powinny zawierać listę wszystkich kart 673 00:32:28,730 --> 00:32:31,520 że masz, więc to oznacza, że powinien mieć inny komponent. 674 00:32:31,520 --> 00:32:32,970 Cóż, może to nazwać widoku listy. 675 00:32:32,970 --> 00:32:36,200 Zróbmy widoku listy, które współistnieje z CardView, 676 00:32:36,200 --> 00:32:39,680 i ten widok listy i CardView będzie tak jak ze sobą współpracować. 677 00:32:39,680 --> 00:32:43,190 I można je łączyć do naszej aplikacji dla Ciebie. 678 00:32:43,190 --> 00:32:45,160 >> Więc po pierwsze, zróbmy Kilka Pierwsza w prawo. 679 00:32:45,160 --> 00:32:46,370 Powiedzmy, jakie karty? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 I tak nie mam do Was zanudzać wpisując go w, 682 00:32:51,910 --> 00:32:53,410 Mam zamiar po prostu skopiować go tutaj. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 I tak mam zamiar nie dać tylko jedną kartę. 685 00:33:03,580 --> 00:33:06,910 Mam zamiar dać mu szereg kart. 686 00:33:06,910 --> 00:33:10,240 Więc pierwsze aplikacje zamiar złamać teraz. 687 00:33:10,240 --> 00:33:14,717 W porządku, więc mamy zamiar zrobić to w stanie obsługiwać wiele kart. 688 00:33:14,717 --> 00:33:17,800 Więc po pierwsze, mamy zamiar dać go, nie tylko jedna karta, ale szereg kart, 689 00:33:17,800 --> 00:33:18,700 jak lista kart. 690 00:33:18,700 --> 00:33:20,980 I w tym przypadku, mamy trzy z nich. 691 00:33:20,980 --> 00:33:27,280 >> Dobrze, tak więc aplikacja jest dostanie karty lista, 692 00:33:27,280 --> 00:33:29,870 i to się zdecydować, które jeden, aby pokazać na CardView. 693 00:33:29,870 --> 00:33:33,740 CardView może tylko uczynić jedną kartę, ale aplikację 694 00:33:33,740 --> 00:33:37,610 uzyskuje listę wszystkich kart, prawda? 695 00:33:37,610 --> 00:33:40,820 >> Kiedy więc dowiedzieć się jedną karta dać CardView, 696 00:33:40,820 --> 00:33:44,660 jak można odgadnąć, może być w stanie do podjęcia decyzji, o których karty 697 00:33:44,660 --> 00:33:47,064 pokazywać? 698 00:33:47,064 --> 00:33:49,980 Aby dać wskazówkę, że to tymczasowe Będziesz oglądania pewną kartę. 699 00:33:49,980 --> 00:33:53,260 Jeśli odśwież stronę, będziesz po prostu wrócić do pierwszej karty. 700 00:33:53,260 --> 00:33:55,464 To jest OK, bo to tymczasowe. 701 00:33:55,464 --> 00:33:56,630 Jaką technikę możemy użyć? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> PUBLICZNOŚCI: Można zrobić zmienną tak, jak trzeba było przednie. 704 00:34:08,760 --> 00:34:11,989 Czy to prawda, można mają prąd karty wynosi 1? 705 00:34:11,989 --> 00:34:14,150 >> NEEL Mehta: Tak, tak, my chcą mieć państwo, prawda? 706 00:34:14,150 --> 00:34:16,080 Należy użyć stan w Komponent dowiedzieć się, 707 00:34:16,080 --> 00:34:17,288 która karta chcemy uzyskać. 708 00:34:17,288 --> 00:34:19,290 Jak mamy listę wszystkie karty, będziemy 709 00:34:19,290 --> 00:34:21,630 Korzystamy dowiedzieć się, jedna z pierwszej karty 710 00:34:21,630 --> 00:34:23,710 Druga karta, trzecia karta, i tak dalej. 711 00:34:23,710 --> 00:34:28,760 >> Więc aplikacja więc aplikacja dostanie posiada funkcję getInitialState, 712 00:34:28,760 --> 00:34:35,020 getInitialState powrotu funkcji. 713 00:34:35,020 --> 00:34:39,929 A my po prostu powiedzieć activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Więc teraz nasza aplikacja ma swój stan własnego. 715 00:34:42,889 --> 00:34:47,179 >> I tak teraz uczynić, aby dowiedzieć się, karta, chodźmy do tablicy 716 00:34:47,179 --> 00:34:49,969 i chwycić coś w tym indeksie. 717 00:34:49,969 --> 00:34:53,580 Wybierz kart równe this.props.cards this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 Tak więc, jak widać tutaj, rekwizyty i państwo faktycznie pracują razem. 720 00:35:00,162 --> 00:35:08,990 Więc teraz, że mamy activeCard, nazwijmy go activeCard, 721 00:35:08,990 --> 00:35:10,470 i zobaczymy, czy to działa. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [NIESŁYSZALNY] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Och, to był błąd tekst. 726 00:35:44,900 --> 00:35:45,400 Ach. 727 00:35:45,400 --> 00:35:51,420 728 00:35:51,420 --> 00:35:54,840 >> Fajne, yep, tak i teraz byliśmy z powrotem gdzie byliśmy wcześniej, prawda? 729 00:35:54,840 --> 00:35:57,100 Sam stary program, z wyjątkiem teraz możemy wspierać 730 00:35:57,100 --> 00:35:59,390 lista kart, a nie tylko jedna karta. 731 00:35:59,390 --> 00:36:04,130 I teraz znowu, jeśli zmienić activeIndex, możemy przejść od 0 do 1, 732 00:36:04,130 --> 00:36:07,330 a teraz, że druga karta, a następnie udaliśmy się do 0. 733 00:36:07,330 --> 00:36:10,390 Więc oto nowa nabierający szybkości wersję. 734 00:36:10,390 --> 00:36:16,000 >> OK, więc teraz niech mają widoku listy, które pokazuje wszystkie karty w programie, 735 00:36:16,000 --> 00:36:19,980 tak zrobimy nowy komponent zwany ListView. 736 00:36:19,980 --> 00:36:22,155 Niech listView równa react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Dlatego chcemy, aby uczynić nieuporządkowana listy z elementu listy dla każdej karty. 739 00:36:38,800 --> 00:36:41,490 A więc mamy kilka kart. 740 00:36:41,490 --> 00:36:44,990 Chcemy, aby jeden element listy za każdą kartę, prawda? 741 00:36:44,990 --> 00:36:47,490 Możemy zrobić dla pętli lub coś, aby nowy element listy. 742 00:36:47,490 --> 00:36:50,522 Ale sposób, w jaki to zrobić w Reagować, użyj rzecz zwaną mapę. 743 00:36:50,522 --> 00:36:57,150 Mapa jest narzędziem lub funkcję korzystania że dla każdego elementu, prowadzi jakąś funkcję, 744 00:36:57,150 --> 00:36:59,510 ma wartość zwracaną, a daje to z powrotem. 745 00:36:59,510 --> 00:37:06,310 >> Tak na przykład, mamy tablicę 1, 2, i ten 3.map function-- 746 00:37:06,310 --> 00:37:12,120 jest skrótem dla function-- x strzałek x razy x. 747 00:37:12,120 --> 00:37:16,110 Mówi, że ten, dla każdej liczby w 1, 2, 3, weź go. 748 00:37:16,110 --> 00:37:17,800 Kwadratu i oddać. 749 00:37:17,800 --> 00:37:22,090 Więc co sądzisz 1, 2, 3.map x idzie x-krotności 750 00:37:22,090 --> 00:37:25,480 x daje powrotem podano że ta funkcja jest 751 00:37:25,480 --> 00:37:27,680 uruchomić na każdym elemencie tej tablicy. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> PUBLICZNOŚCI: 1, 4: 9? 754 00:37:32,190 --> 00:37:35,709 >> NEEL Mehta: Tak, 1, 4, 9 bo robisz 1 razy 1. 755 00:37:35,709 --> 00:37:36,500 To daje jeden. 756 00:37:36,500 --> 00:37:37,690 To pierwszy element. 757 00:37:37,690 --> 00:37:38,530 >> 2 razy 2 jest 4. 758 00:37:38,530 --> 00:37:39,570 To jest drugi element. 759 00:37:39,570 --> 00:37:40,310 3 razy 3 9. 760 00:37:40,310 --> 00:37:41,540 To jest trzeci element. 761 00:37:41,540 --> 00:37:42,640 Mieć sens? 762 00:37:42,640 --> 00:37:45,015 Więc mapa ma technika, używać w programistów funkcjonalnych, 763 00:37:45,015 --> 00:37:48,090 nowy styl programowanie coś zrobić 764 00:37:48,090 --> 00:37:50,500 do każdego elementu na liście. 765 00:37:50,500 --> 00:37:51,970 I tak to brzmi znajomo. 766 00:37:51,970 --> 00:37:53,370 Mamy listę kart. 767 00:37:53,370 --> 00:37:56,860 Chcemy, aby uzyskać element listy do każdego jeden, więc użyjemy tutaj mapę. 768 00:37:56,860 --> 00:38:00,250 Powiemy, niech lista równych this.props, karty, mapa. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> I tak, biorąc pod uwagę karty, jesteśmy będzie generować element listy 771 00:38:15,070 --> 00:38:17,580 z tej karty zawartości stronie. 772 00:38:17,580 --> 00:38:20,660 Powiedzmy, że chcemy dać się karty pytanie więc card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Więc ta lista zawiera Tablica Li lub Pozycji 775 00:38:30,649 --> 00:38:32,440 gdzie jest jedna lista pozycja dla każdej karty, 776 00:38:32,440 --> 00:38:35,150 i że zawiera pytanie kart. 777 00:38:35,150 --> 00:38:37,640 Mieć sens? 778 00:38:37,640 --> 00:38:39,450 >> Fajne, więc teraz niech faktycznie wydrukować to. 779 00:38:39,450 --> 00:38:46,521 Więc wracamy do ul. 780 00:38:46,521 --> 00:38:49,020 Wewnątrz tej liście nieuporządkowanej, musimy po prostu trzymać całą listę 781 00:38:49,020 --> 00:38:49,890 że dali nam. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Fajne. 784 00:38:53,350 --> 00:38:56,060 >> Dobrze, więc teraz to Widok listy działa tylko znaleźć. 785 00:38:56,060 --> 00:38:59,842 Wszelkie pytania na temat widoku listy? 786 00:38:59,842 --> 00:39:01,270 Masz kilka kart. 787 00:39:01,270 --> 00:39:02,800 Tworzysz pozycję listy dla każdej karty. 788 00:39:02,800 --> 00:39:05,466 I umieścić je wewnątrz nieuporządkowana lista, a ty go oddać. 789 00:39:05,466 --> 00:39:09,410 Więc teraz niech działają więc osadzić to wewnątrz naszej aplikacji, 790 00:39:09,410 --> 00:39:14,310 więc możemy to zrobić, widoku listy. 791 00:39:14,310 --> 00:39:17,070 Jaki argument, możemy przejść do widoku listy? 792 00:39:17,070 --> 00:39:18,320 Jakie właściwości dajemy go? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Pamiętaj, że jeśli dasz jest kilka kart, 795 00:39:26,860 --> 00:39:29,590 to zrobi listę zobaczyć na tych kart. 796 00:39:29,590 --> 00:39:32,267 Więc co mijamy tutaj jako argument? 797 00:39:32,267 --> 00:39:33,350 PUBLICZNOŚCI: Lista kart? 798 00:39:33,350 --> 00:39:37,130 NEEL Mehta: Tak, tak, karty równa this.props.cards, prawda? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 I tak tylko problem jest to, że tylko można 801 00:39:44,370 --> 00:39:48,600 zwrócił się jeden element najwyższego poziomu w render, więc musisz zawinąć go w div. 802 00:39:48,600 --> 00:39:49,100 To dziwne. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Zobaczmy więc, czy to. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Czy to działa? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Tak, proszę. 809 00:40:31,030 --> 00:40:33,700 Więc teraz mamy listę karty na dnie 810 00:40:33,700 --> 00:40:36,180 a następnie Mamy CardView się na górze 811 00:40:36,180 --> 00:40:40,486 i że będzie odwrócić między obie strony karty. 812 00:40:40,486 --> 00:40:42,610 Teraz robi to ma sens, jak to zrobiłem? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Tak, tak, znowu mamy dwa składniki. 815 00:40:46,790 --> 00:40:49,666 Pierwsze odciski składowe się każda karta na liście. 816 00:40:49,666 --> 00:40:50,540 To jest widok listy. 817 00:40:50,540 --> 00:40:54,770 I drugi składnik wypisuje tylko tej karty. 818 00:40:54,770 --> 00:40:58,840 Jeśli dasz mu pewną kartę, to będzie wydrukuj informacje o tej karcie 819 00:40:58,840 --> 00:41:01,870 i pozwala przerzucić tam iz powrotem. 820 00:41:01,870 --> 00:41:05,850 >> Więc jeśli chcemy, możemy spróbować i mówić o dodanie kilku nowych funkcji do tego. 821 00:41:05,850 --> 00:41:09,482 W przeciwnym razie możemy mówić nieco więcej o prędkości do reaktora 822 00:41:09,482 --> 00:41:11,190 lub możemy odpowiedzieć pytania można mieć 823 00:41:11,190 --> 00:41:15,050 ponieważ są wszystkie części rdzeniowych od reagują, że chcę rozmawiać. 824 00:41:15,050 --> 00:41:16,540 Możemy iść dalej. 825 00:41:16,540 --> 00:41:17,590 Możemy odpowiedzieć na pytania. 826 00:41:17,590 --> 00:41:18,560 Cokolwiek chcesz. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> PUBLICZNOŚCI: Czy można używać JSX w normalnym JavaScript? 829 00:41:24,205 --> 00:41:27,150 Albo jest to, że coś, co przyszedł z [niesłyszalne]? 830 00:41:27,150 --> 00:41:30,760 >> NEEL Mehta: Pytanie jest puszka korzystania JSX z normalnym JavaScript? 831 00:41:30,760 --> 00:41:32,620 Odpowiedź brzmi: tak. 832 00:41:32,620 --> 00:41:41,070 JSX to tylko sposób z nich ma swoje JavaScript, który ma HTML w jej wnętrzu, 833 00:41:41,070 --> 00:41:44,215 i kompiluje w JavaScript, który nie ma kodu HTML w jej wnętrzu. 834 00:41:44,215 --> 00:41:47,880 Więc zauważyć that-- więc zauważyć tutaj. 835 00:41:47,880 --> 00:41:50,820 To wygląda jak masz jak div i masz rzeczy w jej wnętrzu. 836 00:41:50,820 --> 00:41:54,970 >> To kompiluje się JavaScript, który jak generuje samo. 837 00:41:54,970 --> 00:41:59,590 Myślę, że to, co mówię, jest to, że JSX tylko składniowym, jak to 838 00:41:59,590 --> 00:42:03,530 preprocesor języka JavaScript dużo jak PHP jest preprocesor dla HTML. 839 00:42:03,530 --> 00:42:05,490 JSC jest preprocesor w JavaScript, który umożliwia 840 00:42:05,490 --> 00:42:12,970 umieścić HTML wewnątrz JavaScript. 841 00:42:12,970 --> 00:42:16,425 I tak, jeśli masz odpowiedni transformator co jest rzeczą, o nazwie [niesłyszalne], 842 00:42:16,425 --> 00:42:17,300 które zmieni. 843 00:42:17,300 --> 00:42:19,360 Prawo preprocesora, to będzie na to pozwolić. 844 00:42:19,360 --> 00:42:20,235 >> PUBLICZNOŚCI: [niesłyszalne] 845 00:42:20,235 --> 00:42:23,026 NEEL Mehta: Zazwyczaj nie trzeba umieścić HTML wewnątrz JavaScript 846 00:42:23,026 --> 00:42:24,110 chyba robisz React. 847 00:42:24,110 --> 00:42:27,146 Ale można to robić. 848 00:42:27,146 --> 00:42:27,645 Tak? 849 00:42:27,645 --> 00:42:29,353 >> PUBLICZNOŚCI: Myślę, że cię opisał React 850 00:42:29,353 --> 00:42:31,970 jako funkcjonalny języku programowania. 851 00:42:31,970 --> 00:42:35,646 Byliśmy nauki C w CS50. 852 00:42:35,646 --> 00:42:38,032 Czy C również język funkcjonalne? 853 00:42:38,032 --> 00:42:39,990 NEEL Mehta: Więc pytanie to jest o funkcjonalne 854 00:42:39,990 --> 00:42:43,010 w porównaniu do innej rzeczy zwanej konieczne lub proceduralne programowania. 855 00:42:43,010 --> 00:42:44,820 Są dwa rodzaje programów popularnych. 856 00:42:44,820 --> 00:42:48,550 Jeden nazywa proceduralne, które wszystko o jak robi poleceń, 857 00:42:48,550 --> 00:42:51,510 oraz jeden funkcjonalny, który jest cały o konieczności funkcje i mające 858 00:42:51,510 --> 00:42:52,930 wejścia i wyjścia z nich. 859 00:42:52,930 --> 00:42:55,930 React to funkcjonalne paradygmat. 860 00:42:55,930 --> 00:42:58,010 C jest paradygmatem bardzo proceduralne. 861 00:42:58,010 --> 00:43:02,360 >> I jako przykład, C np nie robisz tego deklaratywny sposób 862 00:43:02,360 --> 00:43:04,390 dokonywania program, prawda? 863 00:43:04,390 --> 00:43:06,826 Trzeba powiedzieć, drukuj. 864 00:43:06,826 --> 00:43:07,950 Zmienić tę strukturę danych. 865 00:43:07,950 --> 00:43:08,530 Drukuj. 866 00:43:08,530 --> 00:43:10,160 To wszystko na temat poleceń. 867 00:43:10,160 --> 00:43:12,640 >> W React, nie ma że wiele poleceń. 868 00:43:12,640 --> 00:43:15,145 To wszystko o konieczności elementy można umieścić razem. 869 00:43:15,145 --> 00:43:16,300 Są jak funkcje. 870 00:43:16,300 --> 00:43:26,360 Musisz jak funkcja nazywa CardView, 871 00:43:26,360 --> 00:43:28,680 który jest funkcją który ma wejścia, wyjścia 872 00:43:28,680 --> 00:43:30,660 i tak React wszystko o filozofii 873 00:43:30,660 --> 00:43:32,700 nam z having-- masz dane. 874 00:43:32,700 --> 00:43:34,910 Przekazać go przez to Algorytm, i to będzie 875 00:43:34,910 --> 00:43:36,800 Wyjście HTML, który cię po prostu wydrukować stronę, 876 00:43:36,800 --> 00:43:39,180 i tak trzeba zbudować go kawałek po kawałku. 877 00:43:39,180 --> 00:43:42,800 >> Więc zwrócić metaforę do tego, co Powiedziałem wcześniej, wiesz, jak 878 00:43:42,800 --> 00:43:47,050 na Facebooku, jeśli pojawi się komunikat, i wybrać jakie części do aktualizacji, 879 00:43:47,050 --> 00:43:47,882 to proceduralna. 880 00:43:47,882 --> 00:43:48,840 Jest to konieczne, prawda? 881 00:43:48,840 --> 00:43:49,806 OK, mam wiadomość. 882 00:43:49,806 --> 00:43:50,930 Chodźmy tam zmienić konto. 883 00:43:50,930 --> 00:43:52,110 >> Miejmy pop okno tutaj. 884 00:43:52,110 --> 00:43:52,780 Chodźmy tam zmienić konto. 885 00:43:52,780 --> 00:43:53,700 Narysujmy to tutaj. 886 00:43:53,700 --> 00:43:55,220 To podejście procesowe. 887 00:43:55,220 --> 00:44:00,240 >> To właśnie takie rzeczy jak kątowe, Boost, Kręgosłup, inne ramy korzystania. 888 00:44:00,240 --> 00:44:01,200 React jest funkcjonalny. 889 00:44:01,200 --> 00:44:03,324 Jest to zupełnie inny sposób myślenia o rzeczach. 890 00:44:03,324 --> 00:44:07,950 To trwa ten pomysł, zróbmy funkcje i algorytmy, które będą 891 00:44:07,950 --> 00:44:08,800 dać mu dane. 892 00:44:08,800 --> 00:44:11,820 To będzie wypluć, co go powinny być, i komputer 893 00:44:11,820 --> 00:44:13,490 zajmie się ważenie. 894 00:44:13,490 --> 00:44:15,890 Nie obsługiwać samodzielnie. 895 00:44:15,890 --> 00:44:18,470 Czy to ma trochę rozsądku? 896 00:44:18,470 --> 00:44:18,970 Tak? 897 00:44:18,970 --> 00:44:24,180 >> PUBLICZNOŚCI: W języku funkcjonalnym, wszystko dzieje się na raz? 898 00:44:24,180 --> 00:44:26,800 >> NEEL Mehta: Nie, rzeczy dzieją się w porządku. 899 00:44:26,800 --> 00:44:29,320 Jak tutaj jest jeszcze zamówić, ale tak nie jest 900 00:44:29,320 --> 00:44:32,390 zdarzają się w kolejności jak polecam, komendy, polecenia. 901 00:44:32,390 --> 00:44:36,459 Zdarza się, w kolejności Funkcja daje wyjście. 902 00:44:36,459 --> 00:44:37,750 Załóż, że w innej funkcji. 903 00:44:37,750 --> 00:44:39,550 Załóż, że na drugi funkcja, inna funkcja. 904 00:44:39,550 --> 00:44:41,470 >> Jeśli nie CS51, będziesz nauczyć programy funkcjonalne 905 00:44:41,470 --> 00:44:42,886 trochę poza zakresem tego. 906 00:44:42,886 --> 00:44:45,090 Ale w zasadzie, co sprawia, React fajne jest nie tylko 907 00:44:45,090 --> 00:44:46,840 przepływ danych w jedną stronę i wirtualnego Dom, 908 00:44:46,840 --> 00:44:48,700 ale również idea programowanie funkcjonalne. 909 00:44:48,700 --> 00:44:51,720 I programowanie funkcjonalne jest bardzo łatwe komponować i zrobić fajne rzeczy z, 910 00:44:51,720 --> 00:44:53,844 i to jest bardzo łatwe do myślenia o, a powodem temat. 911 00:44:53,844 --> 00:44:55,450 Więc jest to kolejny dobry remis React. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Jeszcze jakieś pytania? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Tak? 916 00:45:03,150 --> 00:45:06,840 >> PUBLICZNOŚCI: Um, dlaczego chcesz Użyjmy w przeciwieństwie do var? 917 00:45:06,840 --> 00:45:10,450 >> NEEL Mehta: Więc pytanie jest Dlaczego używasz niech zamiast var? 918 00:45:10,450 --> 00:45:13,220 To jest coś, co nazywa ES6 lub ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Jest to nowa wersja JavaScript. 920 00:45:15,820 --> 00:45:19,050 Istnieje kilka przyczyn technicznych, Ale niech to lepsza wersja var. 921 00:45:19,050 --> 00:45:20,724 >> To, w jaki sposób zadeklarować zmienne. 922 00:45:20,724 --> 00:45:21,390 Możesz użyć pozwolić. 923 00:45:21,390 --> 00:45:22,140 Możesz użyć var. 924 00:45:22,140 --> 00:45:23,825 Niech ma kilka technicznych reasons-- można ich szukać 925 00:45:23,825 --> 00:45:25,610 się later-- dlaczego to lepiej. 926 00:45:25,610 --> 00:45:28,780 Zasadniczo ES6 posiada kilka nowa składnia, niektóre nowe funkcje 927 00:45:28,780 --> 00:45:30,720 na szczycie starego JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Więc mamy jak pięć minut. 929 00:45:32,782 --> 00:45:34,990 Chciałem tylko porozmawiać o jedna rzecz naprawdę szybko. 930 00:45:34,990 --> 00:45:36,450 Gdybyś miał jakiekolwiek pytania, porozmawiajmy o tym po to. 931 00:45:36,450 --> 00:45:38,366 Ale tak to dostaje złowionych w aparacie, po prostu 932 00:45:38,366 --> 00:45:41,550 chcesz porozmawiać trochę o tym, jak faktycznie korzysta React w swoich aplikacjach. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Jeśli tu, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 to jest strona główna na React i będzie to pokazać, jak faktycznie korzysta 936 00:46:03,320 --> 00:46:05,320 Reagować na swoich stronach. 937 00:46:05,320 --> 00:46:08,845 Zasadniczo, jest to trochę skomplikowane próbuje zainstalować React. 938 00:46:08,845 --> 00:46:12,300 To nie jest tak proste, jak po prostu przeciągnij i upuść JavaScript tam. 939 00:46:12,300 --> 00:46:15,890 >> Musisz mieć swój transformator skonfigurować, które, jak to miało miejsce wcześniej, 940 00:46:15,890 --> 00:46:18,120 włączyć JSX się normalny JavaScript. 941 00:46:18,120 --> 00:46:21,030 Musisz rzeczy, że będzie kompilacji można ES6 do normy. 942 00:46:21,030 --> 00:46:24,720 JavaScript jest wiele ruchomych części, co musisz zrobić, więc jest rzeczą 943 00:46:24,720 --> 00:46:27,200 nazywa Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 I jest to, że narzędzie wiersza poleceń będziesz pomóc rusztowania swoje React 945 00:46:31,110 --> 00:46:32,380 projekty łatwo. 946 00:46:32,380 --> 00:46:38,660 >> Więc można przeczytać na ten temat później, ale istnieją pewne narzędzia 947 00:46:38,660 --> 00:46:40,160 że Yeoman oferuje. 948 00:46:40,160 --> 00:46:43,280 Oni pozwalają stworzyć React Aplikacja z wszystkiego zbudowany w. 949 00:46:43,280 --> 00:46:46,030 Jak będzie to zbudowali w, elementów zbudowany w. 950 00:46:46,030 --> 00:46:47,880 To będzie mieć swój transformator wbudowany. 951 00:46:47,880 --> 00:46:50,699 Mają dużo fajne rzeczy zbudowany automatycznie 952 00:46:50,699 --> 00:46:52,240 korzystania z tych rzeczy zwane generatory. 953 00:46:52,240 --> 00:46:54,620 >> Więc przeczytać o tym, jeśli chcesz. 954 00:46:54,620 --> 00:46:59,110 Wystarczy przejść na Yeoman, Y-E-O-M-A-N oraz można znaleźć generatory jak te. 955 00:46:59,110 --> 00:47:01,263 I z generatorów, takich jak nich, po prostu jak jeden 956 00:47:01,263 --> 00:47:03,010 jest polecenia wiersz polecenia parą. 957 00:47:03,010 --> 00:47:05,530 To będzie rusztowania z Cały React aplikacji dla Ciebie. 958 00:47:05,530 --> 00:47:10,470 To będzie uzyskać wszystkie ręczne rurociągów, Prace grunt zrobić dla ciebie, 959 00:47:10,470 --> 00:47:13,010 i dlatego po prostu skupić się na po prostu pisząc w React. 960 00:47:13,010 --> 00:47:16,739 >> Więc w zasadzie budowania React aplikacja jest wcale trywialne. 961 00:47:16,739 --> 00:47:19,530 To przewodowy wszyscy razem, ale nie to narzędzia, które zrobię to za Ciebie. 962 00:47:19,530 --> 00:47:23,070 Więc jeśli chcesz zrobić React aplikacja, spróbować zrobić to w ten sposób. 963 00:47:23,070 --> 00:47:26,360 Jeśli chcesz tylko do eksperymentowania, można spróbować użyć tej CodePen 964 00:47:26,360 --> 00:47:28,550 bo to CodePen ma wszyscy reagują okablowanie. 965 00:47:28,550 --> 00:47:30,240 Zrobiłem wszystko za Ciebie już. 966 00:47:30,240 --> 00:47:34,610 >> Więc jeśli chcesz, aby jak produkcja zwolnić React aplikacji, 967 00:47:34,610 --> 00:47:37,220 spróbować jednego z tych generatorów. 968 00:47:37,220 --> 00:47:40,240 Jeśli chcesz tylko grać wokół, często warto po prostu 969 00:47:40,240 --> 00:47:44,490 jak spróbować zabawy na CodePen tutaj. 970 00:47:44,490 --> 00:47:45,470 Brzmi dobrze? 971 00:47:45,470 --> 00:47:45,970 Fajne. 972 00:47:45,970 --> 00:47:47,890 >> Więc to wszystko, co mam. 973 00:47:47,890 --> 00:47:52,470 Ponownie, wszystkie kod i przykłady będzie na tej stronie tutaj. 974 00:47:52,470 --> 00:47:55,509 Tak więc raz jeszcze, że nie mówić o wiele składnia React, 975 00:47:55,509 --> 00:47:57,550 ale znaleźć tych wszystkich, małe składniowych szczegóły, 976 00:47:57,550 --> 00:48:00,320 to wszystko będzie dostępne na tej stronie tutaj. 977 00:48:00,320 --> 00:48:02,660 >> Więc polecam jak zrobić pierwszy krok. 978 00:48:02,660 --> 00:48:06,277 Umieścić go w CodePen. 979 00:48:06,277 --> 00:48:08,110 Spróbuj pracować nad że do drugiego etapu. 980 00:48:08,110 --> 00:48:11,310 Jest czwarty etap, a tylko zobaczyć, gdzie można uzyskać z tego. 981 00:48:11,310 --> 00:48:14,840 >> Jakieś pytania, należy sprawdzić na tej stronie lub napisz do mnie. 982 00:48:14,840 --> 00:48:16,490 To mój e-mail. 983 00:48:16,490 --> 00:48:19,885 Ale chciałbym, aby pomóc w dowolnym pytania można mieć o React. 984 00:48:19,885 --> 00:48:21,010 Tak, Tak, to wszystko, co mam. 985 00:48:21,010 --> 00:48:23,410 Dziękuję wam bardzo za oglądania lub za udział. 986 00:48:23,410 --> 00:48:26,820 A ja wezmę na wszelkie pytania Może masz po to teraz. 987 00:48:26,820 --> 00:48:29,140 Więc dziękuję wszystkim za oglądanie. 988 00:48:29,140 --> 00:48:31,270