[MUZYKI] 

NEEL Mehta: Tu idzie. 

Cóż, każdy, zapraszamy do sieci aplikacje przyszłości z React. To CS50. Nazywam się Neel. Jestem TA dla CS50 i student drugiego roku w Harvard College i bardzo, bardzo namiętne web developer. Więc jestem bardzo ekscytujące mówić do was dzisiaj, czy jesteś tutaj lub w domu oglądania, o React, który jest ponownie jak powiedziałem, przyszłość aplikacji internetowych. 

Więc React to ramy internetowej. A jak byłem informacją niektórych ludzi tutaj, ramy jest tylko zestaw narzędzi można używać zorganizować i budować swoją aplikację. I aplikacje internetowe są ponownie, strony internetowe które są interaktywne, takich jak Facebook, Twitter.com, Instagram.com, cokolwiek. 

Więc Facebook to framework WWW który został opracowany przez Facebook kilka lat back-- reagują jest. To ponieważ stosuje się w Facebook na swoich aplikacji mobilnych a aplikacja internetowa, Instagram. Khan Academy jest inny widoczne wśród pierwszych React. 

To naprawdę było uzyskanie bardzo popularne. Jeśli kiedykolwiek używać rzeczy jak kątowe lub Kręgosłup, to jest z tej samej rodziny ale od tego czasu znacznie wyprzedzi ich popularność. Jest to gorąca nowość. To naprawdę, naprawdę ogromny. 

I tak React jest dobre nie tylko jako Ramy internetowa dla interfejsów budowlanych. To jest dobre dla budowania interfejsów internetowych. Jest też rzeczą Język, który nazywa React pozwala tworzyć interfejsy dla Androida i iOS i być może inne platformy w przyszłości używając tylko tego samego kodu JavaScript. Można użyć dokładnie to samo Kod JavaScript do renderowania stron internetowych, renderowanie aplikacji Android i iOS aplikacje. 

To bardzo, bardzo ekscytujący czas. To naprawdę, naprawdę super okazja. To naprawdę uniwersalnym internetowej narzędzie rozwoju interfejs, więc jest to bardzo, bardzo Ważne jest, aby wiedzieć. I tak jak mówiłem ludzi przed, to, jak sądzę, ulegnie zmianie, jak tworzenie aplikacji internetowych na zawsze. Więc to może trochę przesada, ale myślę, że to całkiem dobra rzecz znać. 

OK, więc to, co jest React? React to ramy można używać do budowania interfejsów. Interfejs jest znowu strona internetowa, prawda? Więc oto Instagram.com, zastosowania React. 

React jest zbudowany na Pomysł składników. Komponent jest HTML Element na sterydach, więc element HTML jest jak przycisk. To jest akapit. To jest nagłówek, prawda? I Instagram będzie z nich korzystać, ale to będzie również wykorzystywać elementy React. 

React elementy są nabierający szybkości elementy HTML które mają swoje zachowanie zawarte w nich. Tak więc, na przykład, może to mieć element razem składnik razem która będzie zawierać jak znacznik czasu, wiesz, składnik profil, który zawiera obraz profilu i nazwisko osoby. To może mieć, jak licznik, który mogą liczyć jak wielu lubi, i po kliknięciu na nim, to będzie zwiększyć liczbę lubi. Komponent jest tylko kilka kodu HTML, który ma pewne funkcje owinięte w jej wnętrzu. Tak to jest jak elementu HTML na sterydach, jak powiedziałem wcześniej. Możesz wziąć te elementy, i można je połączyć aby nowe elementy, w w tym przypadku, składnik po, która zawiera wszystkie te rzeczy. Będzie zawierać Czas, Profil, LikeCounter, może komentarz a może sam obraz. I tak właśnie aplikacji internetowych są budowane poprzez elementy i zestawiając je. Karma dla Instagram jest niczym więcej niż kilka postów jeden po drugim, każde stanowisko zawiera jak Time, Profil, LikeCounter, i tak dalej. To trochę jak budowa domu. Nie budować dom od góry do dołu. Bierzesz components-- was podjąć jak łazienki. Bierzesz bedroom-- je trzymać razem i masz nowy składnik. Masz nową część domu. 

Więc React to wszystko wokół Ten pomysł komponentów są interaktywne, które są deklaratywne. Podobnie jak po prostu powiedzieć, co Profil jest i to czyni go. Są sk. Możesz wziąć czas i profil, umieścić je ze sobą, aby coś lepszego. I są wielokrotnego użytku, więc jeśli mam kod źródłowy dla stanowiska, można osadzić, że nigdzie. 

Można osadzić Instagram rzeczą, na własnej stronie internetowej. Możesz umieścić na Facebooku, na przykład, pod warunkiem, że stosuje reagują również. Więc elementy są naprawdę, naprawdę, naprawdę potężne budulcem sieci które mogą być wykorzystane w dowolnym miejscu i umieścić razem do nowych bloków. To jest bardzo, bardzo Przegląd wysoki poziom. Tak, znowu, jeśli masz Wszelkie pytania w dowolnym punkcie o filozofii reaktora kodowanie, aby mnie powstrzymać, i daj mi znać. 

OK, więc reagują jest fajne, bo to ma inny sposób patrzenia w jaki sposób budować aplikacje internetowe. Prawdopodobnie słyszeliście o MVC, a Model można kontrolować w CS50 lub cokolwiek inne próbkowania klasy używasz. A większość ramy są zbudowany wokół idei MVC. React nie jest. React opiera się na idei of jednokierunkowy przepływ danych jak widać przez ten wykres lub grafikę tutaj. 

Zasadniczo masz źródło danych. Oraz źródło danych zadecyduje jak ułożyć pewnych składników. A składniki będą Następnie, gdy zmienia, będą one powiedzieć Źródłem danych do zmiany. 

Aby korzystać z Instagram Przykładem, może być lista obiektów pocztowych, takich jak w bazie danych, czy coś. Że dane. Nasze komponenty, a następnie dodaj ofertę weźmie te dane, i wykorzystać te dane do renderowania coś na ekranie. To, co strzałka na podstawie danych z elementem jest, a następnie, że same dane są wykorzystywane aby uczynić kilka elementów. 

Facebook Messenger dla Przykładem, który ma reagować możesz mieć listę wiadomości jako źródła danych. I to nie czyni tylko lista wiadomości ale także lista przyjaciół masz. Masz nieprzeczytane liczyć. Może również spowodować, że coś Facebook to na dole Facebook.com. Te same dane jest jedno źródło prawdy i powoduje dużo elementy mają być świadczone. A gdy jeden z tych, Elementy zmianie wraca i zmiany źródła danych. 

Możesz wysłać wiadomość, prawda? Że zmiany źródła danych. Odczytywanie wiadomości, tak ustawić nieprzeczytane 0. Że zmiany źródła danych. I zauważyć, że wszystkie z nich z jednej strzałka wraca do tych samych danych source, więc wiesz, biorąc pod uwagę pewien zestaw danych, dokładnie to, co wiem, Strona będzie wyglądać. To deterministyczny. Wiesz, podane pewnych danych, co strona będzie wyglądać. Można przewidzieć, jak to będzie zachowywać i jak się sprawy mają do pracy, gdy są razem. 

I gdybym miał milion części tu, to zachowują się tak samo, prawda? Nie powodowałoby dziwne połączenia. Jeden Dane renderowane miliona elementów. Milion Components wrócić i edytować dane. A więc to jest bardzo miłe. Budujemy sk, łatwo skalowalne aplikacje webowe. 

Masz jedno źródło danych, źródło prawdy. To mówi komponentów jak układ strony, a składniki będą obsługi interakcji. A jeśli chcesz zmienić rzeczy, po prostu wrócić i powiedz źródło danych, aby zmienić. Mieć sens? Więc React jest o zrozumienie jak zbudować składnik i jak zrobić swój komponent interakcji ze światem zewnętrznym. 

Dokonywanie Interact podzespołów ze światem wykorzystuje inną technologię nazywa Flux, która Jest to struktura, która jest dodaje się w górnej części React. Nie będziemy o tym rozmawiać. Mamy zamiar porozmawiać o, biorąc pod uwagę Dane, w jaki sposób można uczynić komponent? 

I tak React jest naprawdę fajne, bo Ciebie Można go używać z dowolnym tylnym końcu chcesz. Jeśli masz jak Python back-end, jeśli Python może wypluć kilka danych, React może to uczynić. Jeśli ma wyjść JS danych, React renderuje go. Ruby szynach z Dane, React renderuje go. 

Więc React jest w zasadzie internetowej view-- przedni koniec z elementami dla dowolnego źródła danych w ogóle. I tak dzieje się od źródła danych, aby reagować elementów jest całkiem proste. Idąc w drugą stronę jest trochę trudniej. Który wykorzystuje Flux jak wcześniej wspomniałem. Nie będziemy się do tego. Skupimy się bardziej na Dane na składowe boku. W ten sposób można dokonać fajne, zabawne aplikacje webowe. To nie będzie miało wpływu na świat zewnętrzny na teraz, ale to już inna historia. 

OK, więc gdybyś tu był dla mojego ostatniego seminarium będziesz wiedzieć, że cały kod dla dzisiejsza rozmowa będzie pod tym adresem o, przepraszam, ten URL tutaj. I w zasadzie mamy zamiar iść w czterech krokach, może pięć, Prawdopodobnie nie pięć. Będziemy poruszać się po czterech etapach budowy próbki React aplikację. I tak cały kod źródłowy dla każdego etapu sposobu będzie tutaj, więc jeśli jesteś po wzdłuż w domu, zachęcamy do zapoznania się z tym kod. Jeśli jesteś po wzdłuż tutaj, będziemy pokazując je na ekranie, więc nie martw się o to. Ale jeśli jesteś w domu, czuję do odwiedzenia tej strony internetowej. A, tak, powinieneś być w stanie uzyskać cały kod można kiedykolwiek potrzebujemy tutaj. Więc jest to dobry ściągawki oraz dla przyszłych przygodach z React. Fajne, więc jeśli każdy, kto tu jest, a nawet jeśli jesteś w domu, wyciągać z tej strony internetowej, is.gd/cs50react, brak kapitału, bez podkreślenia, nie ma nic. 

Zobaczysz stronę, która wygląda trochę tak. To jest coś, co nazywa CodePen. CodePen jest wspólnym środowiska kodowania z którym można pisać kod tutaj, i To będzie automatycznie wysłane do Ciebie. I ten sposób można napisać kod. Mogę uruchomić kod tutaj. 

Dla example-- i jeśli reloads-- to zobaczyć, Używam kodu JavaScript na stronie tu, i będziesz automatycznie uczynić stronę internetową z tego kodu JavaScript. I tak to jest sposób dla nas wypróbować kod bardzo szybko, bez konieczności użycia nasz osobisty lub skorzystać z naszego komputera lokalnego lub cokolwiek. Jest to bardzo szybki sposób na makieta i przetestować różne rodzaje kodu. 

Więc mam zamiar brać Przykładowy kod, umieszczenie go tutaj. Mamy zamiar pracować przez nią. A jeśli jesteś w domu, można to podciągnąć również. A ja już zainstalowany React tutaj, więc można po prostu napisać własny kod tutaj, i spróbuj go jako własny plac zabaw. 

Tak, jeśli wszyscy się otwórz ten link tutaj. Proszę mi dać kciuki się, gdy już jest otwarty. Super, super fajne. Nic tu nie ma teraz, ale będzie to zmienić bardzo szybko. 

OK, więc React jest JavaScript biblioteki, i jako takie, wymaga znajomości JavaScript, który jest językiem programowania WWW. I jest używany do innych rzeczy teraz też, ale przede wszystkim w internecie opracowanie język, więc jeśli nie jesteś zaznajomiony z że, przeczytaj stronę o nazwie JSforCats.com. To jest piękne. Możesz się dowiedzieć JavaScript w ciągu pół godziny. To niesamowite. 

Więc dać mu czytać. Mamy również jest dużo HTML tutaj, ponieważ mamy do projektowania stron internetowych, oczywiście. Więc jeśli nie znasz HTML, sprawdź HTMLdog.com. Uważam, że nauka React jest milion razy łatwiejsze, jeśli już wiem budulec. Jeśli masz składników, to łatwe do wykonania większego składnika. To React język dla Ciebie. 

Więc idź naprzód i dać te rzeczy, czytać. Pauza ten film. Daj mu czytać, jeśli jesteś w domu, jeśli nie są zaznajomieni z HTML lub JavaScript OK, więc to, co mamy zamiar zrobić, to mamy zamiar zrobić bardzo prosty app kartami za pomocą React. Mamy zamiar mieć kartami. Można przełączyć kartę w tę iz powrotem. I będziemy mieć listę wszystkie karty, które posiadamy, i jeśli czujemy ambitny, możemy być w stanie przełączać się między samochody, klikając na nich. 

Ale to, z gołymi kości, bardzo prosty React aplikację. I tak to jest rzeczywiście nie banalne do wykonania, ale mamy zamiar pokazać, że, jeśli nie tego, to bardzo, bardzo łatwo ją przedłużyć jeśli inni ludzie ci pomóc z tym. Tak więc mamy zamiar przejść przez cztery etapy od podstaw zbudować to. 

Ok, więc cztery kroki, będziemy zacząć od pierwszego kroku. Pierwszym krokiem będzie budować swój pierwszy składnik. Jak powiedziałem wcześniej, składnik w React jest tylko elementem HTML na sterydach. Określa HTML i niektóre jego działania, i określi, jak ludzie mogą wchodzić w interakcje z nim how byłoby to stan wewnętrzny. Podobnie jak przycisk będzie wiedział, jak, ile razy to było kliknięciu na przykład, i będzie wiedzieć, jak położyć się na zewnątrz. 

Więc idź naprzód i budować naszą Pierwszy składnik przy użyciu JavaScript. Więc jeśli składnia wygląda dziwnie, to dlatego, że to niby jest. Tak, znowu, będziemy do zmiennej o nazwie aplikacja pozwala za pomocą słów kluczowych, co sprawia, że ​​zmienna, niech App równe React.createClass. 

React jest biblioteką i ma funkcji Create klasy. A to funkcja kawałek kodu, który cię można użyć do utworzenia nowego typ React komponent. I tak React.createClass sprawia, że ​​komponent, i ta część będzie być w stanie zrobić rzeczy. Najważniejsze, to może zrobić to uczynić czymś, czynią w funkcji. 

Ponownie, jeśli wskaźnik ten nie jest oczywiste Ci, polecam wybrać się na JS dla kotów i to sprawdzić. Czy to powiększony wystarczająco dobrze? Fajne. 

Więc każdy potrzeby składowe mieć funkcję renderowania. Funkcja czynią mówi, co mogę wydrukować na ekranie? Jednak komponent bezużyteczne, jeśli nie wiem co wydrukować na ekranie, więc trzeba mieć funkcję renderowania. 

Tak więc w tynku rzecz, ci Wystarczy wrócić niektóre HTML. A co to jest cool istnieje coś, co nazywa JSX, który jest przedłużeniem JavaScript, który jest wykorzystywany przez reakcję. To pozwala ci pisać w HTML wewnątrz Twojego JavaScript, który brzmi trochę dziwne, gdy najpierw pomyśl o tym, ale to sprawia, że ​​wiele sensu potem. Tak więc możemy to zrobić. Jeśli jesteś zaznajomiony z HTML, wiem mamy div z celów ogólnych pojemnik na rzeczy. Możemy wrócić div, a wewnątrz DIV, możemy umieścić rzeczy. 

Więc powiedzmy, że chcemy uczynić tylko prosto-up kartami do teraz. Kartami, powiedziałbym, będzie miał pytanie i odpowiedź. Więc wewnątrz tego div, niech wydrukować pkt który mówi question-- Co to jest ostateczną odpowiedź na życie, wszechświat? I wtedy odpowiedź jest Będzie oczywiście 42. 

Że nie przyszedł się dobrze w ogóle. Tak, więc w zasadzie można naprawdę Napisać HTML wewnątrz JavaScript. I to ma być drukowane na ekranie. Warto więc spróbować. 

Więc mamy komponent. Musimy powiedzieć React umieścić składnik na ekranie tak React.render, więc zauważyć, że traktować jak każdą inną aplikację elementu. Piszemy go, ponieważ był to element HTML. Jak zamiast mówić jak img dla obrazu lub p do ust, piszesz aplikację, więc aplikacja jest traktowane jako elementu HTML. Jak powiedziałem wcześniej, jest to element na sterydach. 

Więc uczynić aplikacji, a dać mu miejsce, aby ją umieścić. I to jest, jak to tylko możliwe powiedz gdzie go umieścić. Stworzyłem prostą div na Strona nazywa się z ID strony, i to, gdzie Element pójdzie. 

A my nie zamierzamy uruchomić z HTML. Zasadniczo będzie się umieścić wewnątrz tego elementu strony że mamy na ekranie. Tak działa ten kod, a to przyciąga to co na ekranie, więc tutaj jesteśmy. Zrobiliśmy nasze pierwsze reagują komponent. 

Więc po prostu jako Przypomnę, że delikatnie się nowy typ elementu, prawda? To właśnie React.createClass. I w tym składniku, to powiedział jej, co ma robić. Zawsze, gdy składnik ten jest być drukowane na ekranie będzie wydrukować div z dwa akapity w jej wnętrzu. 

I to, co zrobiliśmy, zrobiliśmy nową aplikację Kąt użyciem notacji Uchwyt aplikacji. Powiedzieliśmy jej, aby ją umieścić wewnątrz elementu strony. A więc to, co zrobiłem, to utworzony nowa aplikacja z tego szablonu. I wtedy powiedział jej, żeby go uczynić. Więc to powiedział, OK, aplikacja, co mam wydrukować? App mówi, przejdź wydrukować div z dwoma akapitami wewnątrz niego. I voila, nie nasz div z dwa akapity w jej wnętrzu. Sensu tak daleko? 

A więc znowu, cały wyzwanie React jest po prostu wiedząc, jak zrobić komponenty. Jak sprawić, by elementy współpracują ze sobą. Teraz, zrobiliśmy nasz pierwszy Komponent, wróćmy i zrobić komponenty konfigurowalny. Więc wiesz, jak w HTML można może dać swoje klasy przyciski? Możesz podać swoje kotwice href. Możesz podać swoje wejścia typu, prawda? Możesz podać więcej klientów Właściwości do wszystkich elementów aby uczynić go bardziej interesujące. A tak naprawdę może zrobić dokładnie to samo. 

Więc powiedzmy, że chcemy, aby nasze aplikacja iść czyni żadnej karty. Teraz po prostu renderowane na sztywno karty. Wiemy, że jest tylko jedna karta może zrobić, więc jesteśmy zamiar spróbować zmienić to teraz tak że możemy po prostu dać mu jakąś kartkę. To będzie wydrukować kartę. 

Powinieneś spróbować i zrobić Elementy bardzo ogólnego przeznaczenia. Więc w ten sposób mogłem email to mój przyjaciel i być jak, co kartami masz, po prostu podać go do tutaj, i będzie to robić sama. Możesz umieścić inne rzeczy w swojej własnej aplikacji. 

Ale najpierw niech podzielenie się na dwie części, ale chcemy oddzielić kartę Część drukowanie od rzeczywistego app części. Więc co możemy zrobić, to mamy Można zmienić to z App do CardView, tylko Nowa nazwa dla aplikacji, i możemy zrobić nowy komponent o nazwie App, nie mylić ze starym App. Mamy createClass, i podobnie jak w HTML, można zagnieździć React komponenty wewnątrz siebie. 

Więc w tej funkcji renderowania, Funkcja CardView powrotu, i to jest dokładnie to samo. Zobacz, dlaczego to jest to samo? Zamiast renderowania tylko aplikacji, które ma div i parowanie wewnątrz niego, aplikacja renderuje CardView, a CardView czyni div i paragraf. Więc to jest nasz pierwszy przykład gniazdowania elementy wewnątrz siebie. Czy to ma sens? Tak więc znów mamy element CardView. Mamy elementy app jest on większy niż. 

OK, więc chcemy, aby nasze CardView-- jeśli Ciebie dać dobry CardView pewną kartę, będzie to wydrukować dla ciebie, prawda? Więc po pierwsze, musimy mieć kartę, więc zróbmy obiekt karty. Więc moja karta equal-- jeśli jesteś wszystkim znane, jest to tylko zapis podejmowania obiektu w JavaScript. To trochę jak struktury w C, więc zrobiliśmy karty, i tak teraz możemy przekazać tę kartę jako własność lub jako atrybut w HTML Terminologia do naszej aplikacji. Tak więc możemy zrobić, App karty wynosi myCard. 

Wiesz, jak na wejściu, to zrobić Typ wejścia równa tekst lub przycisk Klasa równa btn dla bootstrap ,? Ta sama idea, karta App equals-- musisz umieścić szelki here-- Karta App równa myCard, więc mówi, mamy ten obiekt karty. Zamierzam przekazać ją jako Nieruchomość do komponentu aplikacji. A ta aplikacja elementem będzie być w stanie do niego dostęp i zrobić ciekawe rzeczy z nim. 

Więc nasza aplikacja będzie dane karty, więc teraz, niech mają aplikację daj karta do CardView Sam, bo jak aplikacja nie jest będzie wiedział, co z nim zrobić, więc musimy po prostu dać go do CardView. Więc my go do przejść sam sposób, karta równa, i dlatego każdy składnik może uzyskać dostęp do rzeczy, które zostały podane do niego. Mogą one uzyskać dostęp do właściwości że nadano jej Korzystając z tej składni, this.props.card. 

Więc co się dzieje tutaj masz obiekt myCard. Przekazać go do aplikacji przy użyciu karty App równa myCard. To obiekt karta daje się Twojej aplikacji. Aplikacja do niego dostęp jak this.props.card. To trochę jak obraz wie, co to jest źródłem jest. 

Ta aplikacja nie wie, co to jest karta jest, i może robić rzeczy z nim. Może zrobić obliczeń. To może podejmować decyzje w oparciu wyłączyć. 

Na razie miałem zamiar przekazać this.props.card na CardView. Sensu tak daleko? Będzie to więcej sensu teraz. 

OK, więc teraz jesteśmy w CardView. Nasz CardView, otrzymują kartę, należy wydrukować swoje pytanie i odpowiedź. Teraz po prostu wydrukować niektóre sztywno pytania i odpowiedzi. Musimy dowiedzieć out-- musimy zwrócić się do karty, które dali nam co to jest pytanie i odpowiedź, i następnie wydrukować na to uwagę na ekran. 

Tak więc możemy to zrobić tutaj. W uczynić begin-- najpierw zrobić równa. Więc to, co robimy tutaj, to wiemy, że karty są nam dane do nieruchomości, dobrze? To nam dana jako wejście. Jak to prawie jak argumenty do funkcji. Karta jest argument prawie do tego CardView. 

Będziemy wyodrębnić, że i umieścić że w kwestii zmienny. Upewnij się, że odpowiedź udał do odpowiedzi zmiennej. Informuje, że karta odpowiedzi. I teraz, że mamy to, zamiast drukować na ten tekst, mamy zamiar wydrukować co nam dali. 

Więc to stuff-- więc jedziemy zgasić Pytanie Odpowiedź. Zobaczymy, czy to działa. Fajne, więc niech to przejść przez niego jeszcze raz dla pewności. 

Więc moja karta jest przedmiotem karty, a my dają tej karty do aplikacji. A aplikacja będzie podjąć karty i dać go do CardView. I to CardView mówi, jeśli Ciebie daj mi dowolny obiekt kartami, Będę wydrukować swoje pytanie a jego odpowiedź, prawda? 

Więc to, co mogłem zrobić, to mogę wyślij ten kod, pierwszy jak 10 linii kodu, do mojego mojego przyjaciela. Mógł umieścić go w własnej aplikacji. I tak długo, jak on zrobił to samo, jak karta CardView równa tej, tak długo, jak stworzył CardView i dał mu właściwe informacje, mógł uczynić swoją kartę. I tak, w ten sposób, to naprawdę fajny sposób na budowanie Elementy, które korzystają z siebie nawzajem, prawda? Ta karta może opublikować to CardView w internecie, a ludzie będą mogli z niego korzystać. Więc w zasadzie, to jak jeden z Standardowe funkcje w bibliotece C. 

Jest to funkcja, gdy ktoś napisał go. Dać pewne nakłady. To będzie produkować pewną moc. Nie obchodzi mnie, jak to działa wewnętrznie. Tak długo, jak dać mu prawo wejście, to będzie dokonać właściwego wyjścia. 

A komponent może być że w ten sam sposób. Ten CardView jest jak funkcja biblioteki. Jeśli dasz mu trochę kartę jako własność, to będziesz wydrukować zawartość tej karty. Podobnie jak w przypadku zmiany karty do zamiast być jak to, co jest 5 oraz 37, będzie odpowiednio zaktualizować. Więc po prostu przez zmianę wejścia, to dostaje pewną moc. Więc można myśleć komponentów prawie jako funkcje w ten sposób, co można umieścić razem. Masz wejście, jak ten CardView jako wejście, masz wyjścia. W tym przypadku wyjście jest HTML. Sensu tak daleko? Fajne, więc ponownie, właściwości są w jaki sposób można przekazać informacje do oraz z elementów. 

OK, więc zróbmy to rzeczą interaktywne. Teraz to trochę nudne. Co to jest [niesłyszalne]? Można wydrukować niektóre na zewnątrz, ale to wszystko można zrobić. 

Więc wróćmy do stare pytanie, po prostu teraz. Ok, więc w tej chwili te składniki są nudne, bo wszystko robią, dostają wejście. Robią wyjścia, prawda? To trochę nudne. Chcemy, aby nasze Składniki w stanie mieć jakiś stanu wewnętrznego, jak sobie coś przypomnieć. 

Na karcie flash, na Przykładem, jakie państwa warto pamiętaj na karcie flash? Jaki status tymczasowy warto pamiętać, na karcie flash w aplikacji z kartami? PUBLICZNOŚCI: Czy to był odwrócony? NEEL Mehta: Tak, racja. Więc może chcesz zachować tor jesteś stroną zadrukowaną do góry lub są twarz w dół na karcie. Na Facebooku, na przykład, byś chcą sobie przypomnieć, gdzie w news feed jesteś lub jak kto profil robisz teraz. 

Na Messenger, jak to, co tekst, wpisz w polu wprowadzania, prawda? Jeśli odśwież stronę, odchodzi. Ale tak naprawdę nie obchodzi. To tylko tymczasowe. Tak? 

PUBLICZNOŚCI: [niesłyszalne] NEEL Mehta: jak błysk karta, jak można widzieć strona po stronie pytanie, czy odpowiedź? 

PUBLICZNOŚCI: OK. 

NEEL Mehta: Like a dwustronne z kartami, prawda? Tak, tak, chcesz mają ten pomysł teraz Mam właściwości, które jest jak wejść, ale państwo, które jest tymczasowe, uh, gdzie jesteś na stronie, prawda? Znowu powiedział w Facebook Komunikator, mam podobne, które osoba jesteś przeglądania Facebooka lub kto jest profil, prawda? 

To jest tylko tymczasowe. Ważne jest, aby pokazać użytkownikowi co się dzieje, ale odświeżyć stronę. To naprawdę nie ma znaczenia. Więc jest to stan tymczasowy, więc wszyscy państwo to. 

Tak więc raz jeszcze, jest państwo i rekwizyty. Rekwizyty podany jest wejście ze źródła danych. Państwo jest jak domyślne. To tak, jak rzeczy, które sprawia, że ​​rzeczą interaktywne. 

Tak więc w naszym CardView-- rzućmy nasze CardView--, więc było miło. Co będziemy robić tutaj, jedziemy dotykać CardView i tylko CardView. A więc mój przyjaciel, który dostał to, że nie zauważy różnicy. Nie będą musieli zmienić każdy z własnym kodem ale oni uważają, że ich CardView ale nabierający. To miły część o komponenty. 

OK, więc w naszej CardView, spróbujmy śledzić, czy jesteśmy stopniowo się lub do dołu. W React robimy to pierwszy określenie stanu początkowego. Gdzie karta zacząć? 

Więc być funkcję o nazwie getInitialState funkcjonować, i wracamy do obiektu. Obiekt ten zawiera jakiś stan, a państwo jest tylko parę klucz-wartość. Podobnie jak w poinstruować, masz klucz i wartości, jak masz na imię ciąg. 

W tym przypadku, powiedzmy, że z przodu jest prawdą. Ten mówi, że mamy państwo. Jednym z komponentów do stanu jest atrybutem o nazwie przodu. [Niesłyszalne], więc domyślnie jesteśmy w przedniej części karty, i możemy to zmienić jak odwrócić kartę. Mieć sens? 

OK, więc w render, teraz jesteśmy przedstawiający pytanie i odpowiedź. Teraz to, co powinniśmy zrobić jest pokazać pytanie jeśli jesteśmy na froncie karty tak Odpowiedź jest na tylnej stronie karty. Dlatego wszystko, aby karta interaktywne. Więc spróbujmy to tutaj. Cóż, po pierwsze po prostu zrobić zmienną. Możemy zapytać teraz this.state.front. Mamy dostęp stwierdzić to samo my rekwizyty dostępu, więc this.state.front. 

Jeśli jesteśmy z przodu, a następnie tekst jest this.props.card.question. Jeśli jesteśmy na froncie karty, mamy zamiar spróbować i grab pytanie z karty. W przeciwnym razie, jeśli mamy na plecach karty, co mamy robić? 

PUBLICZNOŚCI: Odpowiedź? 

NEEL Mehta: Tak, tak, tekst równa this.props.card.answer. Ale jeśli zauważysz, używamy państwo do podjęcia decyzji Bo teraz komponentu będzie wyglądać inaczej opiera się, jak to z nim kontaktować. Więc zamiast drukować na tym, musimy po prostu wydrukować tekst. Fajne, więc teraz, jak widać, widzimy tylko pytanie. A jeśli tu ręcznie zmienić stan do przodu jest fałszywa mamy 42 plecy. 

A więc znowu, ten składnik ma swój własny stan. Podobnie jak przycisk wie, czy że został naciśnięty, czy nie, tego, co wie, co jest na z przodu lub z tyłu. Domyślnie jest to z przodu. A następnie, jeśli jest z przodu, będziemy drukować na pytanie. Jeśli jest to na plecach, będziemy wydrukować odpowiedź. A więc znowu, informacja podane są takie same. To po prostu wygląda inaczej na podstawie tego, jak go zaprogramować. Tak więc, na przykład, Facebook Messenger, nawet jeśli się tego samego źródła danych, może to wyglądać inaczej ponieważ stan jest inny. Ty patrzysz na Komunikat różne osoby. 

OK, więc to wszystko jest dobrze i dobre, ale teraz to, co rzeczywiście sprawiają, że jesteśmy w stanie zmienić, czy nasza karta jest z przodu lub z tyłu. Możemy to zrobić poprzez dodanie klapki przycisk, przycisk do karty, które będzie odwrócić kartę, czy to [niesłyszalne]. Więc tutaj dodać przycisk, to przycisk, a ten przycisk powie klapki. 

I tak teraz, to nic nie robi. To po prostu wygląda ładnie. Co możemy zrobić, to możemy dodać kliknięcie obsługi, onClick równa this.flip, a my zdefiniować klapki później. Ale w zasadzie, onClick Jest to funkcja, która jest wywoływana, gdy użytkownik kliknie. 

Więc przycisk będzie wiedział, kiedy to został wciśnięty. Went to został wciśnięty, będzie odwrócić kartę. To trochę jak twój dostawa pizzy facet. Jesteś jak, dobrze, gdy ktoś wzywa mnie, będę dostarczyć pizzę, prawda? 

Możesz zarejestrować ten słuchacza. Słuchasz na imprezę. Można się nazywa, a gdy zdarzenie, coś zrobić. Można dostać pizzę. W tym przypadku, gdy jesteś kliknięciu, klapka karty. 

A więc musimy zdefiniować Funkcja, która będzie odwrócić kartę, więc musimy napisać, że prawo tutaj, funkcji Flip. I tak, jak myślisz, co zrobi z klapką? Znowu jest wywoływana, gdy klikamy przycisk z klapką. Co należy klapka funkcja zrobić? 

PUBLICZNOŚCI: Zmień this.state.front z true na false false na true. 

NEEL Mehta: Tak, tak, podjąć wszelkie this.front jest-- stan przodu jest. Weź stan przód, jeśli to prawda, sprawiają, że fałszywe. Jeśli jest to fałsz, że to prawda, prawda? Warto więc spróbować. 

Nie można zmienić stan po prostu wykonując this.state. Nie możesz tego zrobić. Nie możesz tego zrobić. Musisz użyć funkcji nazywa this.setState. 

Więc można powiedzieć, this.setState przodu jelita grubego to gdzie, znowu, wykrzyknik punkt oznacza odwrotnie. Myślę, że jeśli tego. state.front jest prawdą, to będzie włączyć fałszywe. Będziemy więc ustawić stan z true na false. Jeśli jest to fałsz, będziemy ustawić to false na true. 

Wystarczy zauważyć, że ustawienie i uzyskać nieco inaczej, a więc spróbujmy. Bada Bing, spójrz na to. Przycisk klapka będzie teraz przełącz przodu do tyłu stan. 

I tak oto, gdy widzisz Trochę magii React. Podobnie jak nigdy nie powiedział jej, że do ponownego renderowania. Nigdy nie powiedziałem, że przerysować coś. Jeśli robisz to bez React, można by nie to-- lubię, gdy kliknięciu przycisku klapka jest, trzeba by powiedzieć to, aby ręcznie ponownie czynią, prawda? 

React jest naprawdę fajne w, że jeśli dać mu pewien stan i właściwości, to zawsze czynią dokładnie to samo. I tak, gdy kiedykolwiek zmienimy stan i właściwości, reagują tylko wczyta całość. Ona wie, że istnieje jeden-do-jednego korespondencji między państwem a parametr i HTML. Więc gdy którykolwiek z tych Zmiany wg ustalonej przez państwo, to się zmieni, jak wynagrodzenie jest ponownie renderowane. I tak w zasadzie React jest jak czekając na zmianę. 

Zawsze, gdy coś się zmienia, to będzie ponownie uczynić całą stronę. A jeśli brzmi to nieefektywne, to dlatego, że byłoby to, ale reagują używa rzeczy nazywany Cień DOM. Zamiast rysowania strony bezpośrednio, to utrzymuje drzewo wirtualny HTML w pamięci. 

Wiesz, HTML jest jak drzewo, jak hierarchicznej struktury danych. Utrzymuje fałszywego drzewa w pamięci, i kiedy zaktualizować stronę, będzie to wyciągnąć kolejny fałszywy drzewo, i będzie to obliczyć co zmienić, musi uczynić Strona zrobić dwa drzewa równe. Tak w zasadzie, to praktycznie ponownie czyni wiele. A potem to tylko jak zmienia Strona w małych usprawnień, w razie potrzeby, więc jest to bardzo, bardzo, bardzo wydajny. 

Więc w zasadzie React będzie każdym razem, gdy coś zmienić, będzie to ponowne renderowanie strony praktycznie. To będzie dowiedzieć się, co jest potrzebne, aby zmienić, aby odzwierciedlić rzeczywisty strona strona wirtualny, i będzie to zrobić. To wirtualny DOM. To jeden z największych cechy React. 

Czy to ma sens? Jakiekolwiek pytania? Tak? 

PUBLICZNOŚCI: W jaki sposób porównać wciąż do MVC że rozmawialiśmy o przed, jak zasobów. 

NEEL Mehta: Tak, pytanie to jak to porównać do MVC? Pytałeś o zasobach. Dobrze, porozmawiajmy o tym, jak funkcjonuje. 

W MVC, chcesz zaktualizować modelu. W tym przypadku mielibyśmy model karty. Widok będzie mieć klapka przycisk, a kontrola miałby funkcję odwrotną. Więc widok nie powiedzieć Kontroler odwrócić klapki. Odwróć by powiedzieć Model zmienić, prawda? 

I tak, kiedy zrobić MVC, ty posłuchaj model zmienić, i ponownie renderować widok odpowiednio. Albo po prostu trzeba lubić mają kontrolera. Poczekaj na model do zmiany, a następnie wybierać część jak rzeczy zmienić. Tutaj mamy jedną rzecz, ale w dużej aplikacji, trzeba jak pamiętam, co zmiana w każdym miejscu, więc jest to trochę irytujące. I tak React jest ładne ponieważ ma cienia Dom. To może sobie pozwolić na tak przepisać całą rzecz. Nie musisz do selektywnego jak wiecie co, aby zaktualizować. 

Na Facebooku, jeśli chcesz otrzymasz nową wiadomość, w MVC, że trzeba pamiętać, OK, zmienić rzeczy na szczycie Strona, ikona wiadomości. Także pojawiają się nowe okno w dolnej części. Również coś nowego w tym oknie. Także odtwarzanie dźwięku. 

To bardzo dużo rzeczy dzieje się w tym samym czasie. I tak, jeśli nie mają cień Dom, wy mieliście musisz zrobić to ręcznie, ponieważ nie możesz pozbyć się całej strony. Nie można sobie pozwolić, aby, więc trzeba ręcznie zmienić każdą rzecz, co jest naprawdę irytujące w MVC. 

Tak, aby być oszczędny, selektywnie zaktualizować stronę, która jest skuteczny, ale również uciążliwe. W reakcję, ponieważ w cieniu Dom, masz obie rzeczy za darmo. To wydajne, ponieważ Shadow Dom. Wąskim gardłem jest aktualizowanie strony. To nie robi manipulację drzewa. Otrzymasz efektywności. Ty też możesz mieć łatwość użycia, ponieważ jeśli po prostu przepisać całą stronę, ale po prostu wiem, wszystko w porządku, rzeczy będą na stronie gdzieś. To może być w innym miejscu, ale to będzie na stronie, prawda? Więc po prostu ponownie renderowane cała rzecz praktycznie, i można zrobić kilka zmiany w samej strony. 

Tak więc raz jeszcze, w MVC Ciebie musiałby wybrać między łatwości obsługi i efektywności, i reagować, można dostać się zarówno. Tak jest lepiej. Mieć sens? Solidny. 

OK, więc zobaczymy porozmawiajmy trochę o punkcie 4, jak możemy osadzić elementy. Więc mamy to teraz. Mamy fajny mały przycisk. Możemy odwrócić go z powrotem i dalej, i to wszystko robi. Powiedzmy, że chcemy mają inny komponent. Powiedzmy, że nasza aplikacja kartami powinny zawierać listę wszystkich kart że masz, więc to oznacza, że powinien mieć inny komponent. Cóż, może to nazwać widoku listy. Zróbmy widoku listy, które współistnieje z CardView, i ten widok listy i CardView będzie tak jak ze sobą współpracować. I można je łączyć do naszej aplikacji dla Ciebie. 

Więc po pierwsze, zróbmy Kilka Pierwsza w prawo. Powiedzmy, jakie karty? I tak nie mam do Was zanudzać wpisując go w, Mam zamiar po prostu skopiować go tutaj. I tak mam zamiar nie dać tylko jedną kartę. Mam zamiar dać mu szereg kart. Więc pierwsze aplikacje zamiar złamać teraz. W porządku, więc mamy zamiar zrobić to w stanie obsługiwać wiele kart. Więc po pierwsze, mamy zamiar dać go, nie tylko jedna karta, ale szereg kart, jak lista kart. I w tym przypadku, mamy trzy z nich. 

Dobrze, tak więc aplikacja jest dostanie karty lista, i to się zdecydować, które jeden, aby pokazać na CardView. CardView może tylko uczynić jedną kartę, ale aplikację uzyskuje listę wszystkich kart, prawda? 

Kiedy więc dowiedzieć się jedną karta dać CardView, jak można odgadnąć, może być w stanie do podjęcia decyzji, o których karty pokazywać? Aby dać wskazówkę, że to tymczasowe Będziesz oglądania pewną kartę. Jeśli odśwież stronę, będziesz po prostu wrócić do pierwszej karty. To jest OK, bo to tymczasowe. Jaką technikę możemy użyć? 

PUBLICZNOŚCI: Można zrobić zmienną tak, jak trzeba było przednie. Czy to prawda, można mają prąd karty wynosi 1? 

NEEL Mehta: Tak, tak, my chcą mieć państwo, prawda? Należy użyć stan w Komponent dowiedzieć się, która karta chcemy uzyskać. Jak mamy listę wszystkie karty, będziemy Korzystamy dowiedzieć się, jedna z pierwszej karty Druga karta, trzecia karta, i tak dalej. 

Więc aplikacja więc aplikacja dostanie posiada funkcję getInitialState, getInitialState powrotu funkcji. A my po prostu powiedzieć activeIndex 0. Więc teraz nasza aplikacja ma swój stan własnego. 

I tak teraz uczynić, aby dowiedzieć się, karta, chodźmy do tablicy i chwycić coś w tym indeksie. Wybierz kart równe this.props.cards this.state.activeIndex. Tak więc, jak widać tutaj, rekwizyty i państwo faktycznie pracują razem. Więc teraz, że mamy activeCard, nazwijmy go activeCard, i zobaczymy, czy to działa. [NIESŁYSZALNY] 

Och, to był błąd tekst. Ach. 

Fajne, yep, tak i teraz byliśmy z powrotem gdzie byliśmy wcześniej, prawda? Sam stary program, z wyjątkiem teraz możemy wspierać lista kart, a nie tylko jedna karta. I teraz znowu, jeśli zmienić activeIndex, możemy przejść od 0 do 1, a teraz, że druga karta, a następnie udaliśmy się do 0. Więc oto nowa nabierający szybkości wersję. 

OK, więc teraz niech mają widoku listy, które pokazuje wszystkie karty w programie, tak zrobimy nowy komponent zwany ListView. Niech listView równa react.createClass. Dlatego chcemy, aby uczynić nieuporządkowana listy z elementu listy dla każdej karty. A więc mamy kilka kart. Chcemy, aby jeden element listy za każdą kartę, prawda? Możemy zrobić dla pętli lub coś, aby nowy element listy. Ale sposób, w jaki to zrobić w Reagować, użyj rzecz zwaną mapę. Mapa jest narzędziem lub funkcję korzystania że dla każdego elementu, prowadzi jakąś funkcję, ma wartość zwracaną, a daje to z powrotem. 

Tak na przykład, mamy tablicę 1, 2, i ten 3.map function-- jest skrótem dla function-- x strzałek x razy x. Mówi, że ten, dla każdej liczby w 1, 2, 3, weź go. Kwadratu i oddać. Więc co sądzisz 1, 2, 3.map x idzie x-krotności x daje powrotem podano że ta funkcja jest uruchomić na każdym elemencie tej tablicy. 

PUBLICZNOŚCI: 1, 4: 9? 

NEEL Mehta: Tak, 1, 4, 9 bo robisz 1 razy 1. To daje jeden. To pierwszy element. 

2 razy 2 jest 4. To jest drugi element. 3 razy 3 9. To jest trzeci element. Mieć sens? Więc mapa ma technika, używać w programistów funkcjonalnych, nowy styl programowanie coś zrobić do każdego elementu na liście. I tak to brzmi znajomo. Mamy listę kart. Chcemy, aby uzyskać element listy do każdego jeden, więc użyjemy tutaj mapę. Powiemy, niech lista równych this.props, karty, mapa. 

I tak, biorąc pod uwagę karty, jesteśmy będzie generować element listy z tej karty zawartości stronie. Powiedzmy, że chcemy dać się karty pytanie więc card.question. Więc ta lista zawiera Tablica Li lub Pozycji gdzie jest jedna lista pozycja dla każdej karty, i że zawiera pytanie kart. Mieć sens? 

Fajne, więc teraz niech faktycznie wydrukować to. Więc wracamy do ul. Wewnątrz tej liście nieuporządkowanej, musimy po prostu trzymać całą listę że dali nam. Fajne. 

Dobrze, więc teraz to Widok listy działa tylko znaleźć. Wszelkie pytania na temat widoku listy? Masz kilka kart. Tworzysz pozycję listy dla każdej karty. I umieścić je wewnątrz nieuporządkowana lista, a ty go oddać. Więc teraz niech działają więc osadzić to wewnątrz naszej aplikacji, więc możemy to zrobić, widoku listy. Jaki argument, możemy przejść do widoku listy? Jakie właściwości dajemy go? Pamiętaj, że jeśli dasz jest kilka kart, to zrobi listę zobaczyć na tych kart. Więc co mijamy tutaj jako argument? PUBLICZNOŚCI: Lista kart? NEEL Mehta: Tak, tak, karty równa this.props.cards, prawda? I tak tylko problem jest to, że tylko można zwrócił się jeden element najwyższego poziomu w render, więc musisz zawinąć go w div. To dziwne. Zobaczmy więc, czy to. Czy to działa? 

Tak, proszę. Więc teraz mamy listę karty na dnie a następnie Mamy CardView się na górze i że będzie odwrócić między obie strony karty. Teraz robi to ma sens, jak to zrobiłem? Tak, tak, znowu mamy dwa składniki. Pierwsze odciski składowe się każda karta na liście. To jest widok listy. I drugi składnik wypisuje tylko tej karty. Jeśli dasz mu pewną kartę, to będzie wydrukuj informacje o tej karcie i pozwala przerzucić tam iz powrotem. 

Więc jeśli chcemy, możemy spróbować i mówić o dodanie kilku nowych funkcji do tego. W przeciwnym razie możemy mówić nieco więcej o prędkości do reaktora lub możemy odpowiedzieć pytania można mieć ponieważ są wszystkie części rdzeniowych od reagują, że chcę rozmawiać. Możemy iść dalej. Możemy odpowiedzieć na pytania. Cokolwiek chcesz. 

PUBLICZNOŚCI: Czy można używać JSX w normalnym JavaScript? Albo jest to, że coś, co przyszedł z [niesłyszalne]? 

NEEL Mehta: Pytanie jest puszka korzystania JSX z normalnym JavaScript? Odpowiedź brzmi: tak. JSX to tylko sposób z nich ma swoje JavaScript, który ma HTML w jej wnętrzu, i kompiluje w JavaScript, który nie ma kodu HTML w jej wnętrzu. Więc zauważyć that-- więc zauważyć tutaj. To wygląda jak masz jak div i masz rzeczy w jej wnętrzu. 

To kompiluje się JavaScript, który jak generuje samo. Myślę, że to, co mówię, jest to, że JSX tylko składniowym, jak to preprocesor języka JavaScript dużo jak PHP jest preprocesor dla HTML. JSC jest preprocesor w JavaScript, który umożliwia umieścić HTML wewnątrz JavaScript. I tak, jeśli masz odpowiedni transformator co jest rzeczą, o nazwie [niesłyszalne], które zmieni. Prawo preprocesora, to będzie na to pozwolić. 

PUBLICZNOŚCI: [niesłyszalne] NEEL Mehta: Zazwyczaj nie trzeba umieścić HTML wewnątrz JavaScript chyba robisz React. Ale można to robić. Tak? 

PUBLICZNOŚCI: Myślę, że cię opisał React jako funkcjonalny języku programowania. Byliśmy nauki C w CS50. Czy C również język funkcjonalne? NEEL Mehta: Więc pytanie to jest o funkcjonalne w porównaniu do innej rzeczy zwanej konieczne lub proceduralne programowania. Są dwa rodzaje programów popularnych. Jeden nazywa proceduralne, które wszystko o jak robi poleceń, oraz jeden funkcjonalny, który jest cały o konieczności funkcje i mające wejścia i wyjścia z nich. React to funkcjonalne paradygmat. C jest paradygmatem bardzo proceduralne. 

I jako przykład, C np nie robisz tego deklaratywny sposób dokonywania program, prawda? Trzeba powiedzieć, drukuj. Zmienić tę strukturę danych. Drukuj. To wszystko na temat poleceń. 

W React, nie ma że wiele poleceń. To wszystko o konieczności elementy można umieścić razem. Są jak funkcje. Musisz jak funkcja nazywa CardView, który jest funkcją który ma wejścia, wyjścia i tak React wszystko o filozofii nam z having-- masz dane. Przekazać go przez to Algorytm, i to będzie Wyjście HTML, który cię po prostu wydrukować stronę, i tak trzeba zbudować go kawałek po kawałku. 

Więc zwrócić metaforę do tego, co Powiedziałem wcześniej, wiesz, jak na Facebooku, jeśli pojawi się komunikat, i wybrać jakie części do aktualizacji, to proceduralna. Jest to konieczne, prawda? OK, mam wiadomość. Chodźmy tam zmienić konto. 

Miejmy pop okno tutaj. Chodźmy tam zmienić konto. Narysujmy to tutaj. To podejście procesowe. 

To właśnie takie rzeczy jak kątowe, Boost, Kręgosłup, inne ramy korzystania. React jest funkcjonalny. Jest to zupełnie inny sposób myślenia o rzeczach. To trwa ten pomysł, zróbmy funkcje i algorytmy, które będą dać mu dane. To będzie wypluć, co go powinny być, i komputer zajmie się ważenie. Nie obsługiwać samodzielnie. Czy to ma trochę rozsądku? Tak? 

PUBLICZNOŚCI: W języku funkcjonalnym, wszystko dzieje się na raz? 

NEEL Mehta: Nie, rzeczy dzieją się w porządku. Jak tutaj jest jeszcze zamówić, ale tak nie jest zdarzają się w kolejności jak polecam, komendy, polecenia. Zdarza się, w kolejności Funkcja daje wyjście. Załóż, że w innej funkcji. Załóż, że na drugi funkcja, inna funkcja. 

Jeśli nie CS51, będziesz nauczyć programy funkcjonalne trochę poza zakresem tego. Ale w zasadzie, co sprawia, React fajne jest nie tylko przepływ danych w jedną stronę i wirtualnego Dom, ale również idea programowanie funkcjonalne. I programowanie funkcjonalne jest bardzo łatwe komponować i zrobić fajne rzeczy z, i to jest bardzo łatwe do myślenia o, a powodem temat. Więc jest to kolejny dobry remis React. Jeszcze jakieś pytania? Tak? 

PUBLICZNOŚCI: Um, dlaczego chcesz Użyjmy w przeciwieństwie do var? 

NEEL Mehta: Więc pytanie jest Dlaczego używasz niech zamiast var? To jest coś, co nazywa ES6 lub ECMAScript 6. Jest to nowa wersja JavaScript. Istnieje kilka przyczyn technicznych, Ale niech to lepsza wersja var. 

To, w jaki sposób zadeklarować zmienne. Możesz użyć pozwolić. Możesz użyć var. Niech ma kilka technicznych reasons-- można ich szukać się later-- dlaczego to lepiej. Zasadniczo ES6 posiada kilka nowa składnia, niektóre nowe funkcje na szczycie starego JavaScript. 

Więc mamy jak pięć minut. Chciałem tylko porozmawiać o jedna rzecz naprawdę szybko. Gdybyś miał jakiekolwiek pytania, porozmawiajmy o tym po to. Ale tak to dostaje złowionych w aparacie, po prostu chcesz porozmawiać trochę o tym, jak faktycznie korzysta React w swoich aplikacjach. 

Jeśli tu, Facebook.GitHub.IO/react, to jest strona główna na React i będzie to pokazać, jak faktycznie korzysta Reagować na swoich stronach. Zasadniczo, jest to trochę skomplikowane próbuje zainstalować React. To nie jest tak proste, jak po prostu przeciągnij i upuść JavaScript tam. 

Musisz mieć swój transformator skonfigurować, które, jak to miało miejsce wcześniej, włączyć JSX się normalny JavaScript. Musisz rzeczy, że będzie kompilacji można ES6 do normy. JavaScript jest wiele ruchomych części, co musisz zrobić, więc jest rzeczą nazywa Yeoman, Yeoman.io. I jest to, że narzędzie wiersza poleceń będziesz pomóc rusztowania swoje React projekty łatwo. 

Więc można przeczytać na ten temat później, ale istnieją pewne narzędzia że Yeoman oferuje. Oni pozwalają stworzyć React Aplikacja z wszystkiego zbudowany w. Jak będzie to zbudowali w, elementów zbudowany w. To będzie mieć swój transformator wbudowany. Mają dużo fajne rzeczy zbudowany automatycznie korzystania z tych rzeczy zwane generatory. 

Więc przeczytać o tym, jeśli chcesz. Wystarczy przejść na Yeoman, Y-E-O-M-A-N oraz można znaleźć generatory jak te. I z generatorów, takich jak nich, po prostu jak jeden jest polecenia wiersz polecenia parą. To będzie rusztowania z Cały React aplikacji dla Ciebie. To będzie uzyskać wszystkie ręczne rurociągów, Prace grunt zrobić dla ciebie, i dlatego po prostu skupić się na po prostu pisząc w React. 

Więc w zasadzie budowania React aplikacja jest wcale trywialne. To przewodowy wszyscy razem, ale nie to narzędzia, które zrobię to za Ciebie. Więc jeśli chcesz zrobić React aplikacja, spróbować zrobić to w ten sposób. Jeśli chcesz tylko do eksperymentowania, można spróbować użyć tej CodePen bo to CodePen ma wszyscy reagują okablowanie. Zrobiłem wszystko za Ciebie już. 

Więc jeśli chcesz, aby jak produkcja zwolnić React aplikacji, spróbować jednego z tych generatorów. Jeśli chcesz tylko grać wokół, często warto po prostu jak spróbować zabawy na CodePen tutaj. Brzmi dobrze? Fajne. 

Więc to wszystko, co mam. Ponownie, wszystkie kod i przykłady będzie na tej stronie tutaj. Tak więc raz jeszcze, że nie mówić o wiele składnia React, ale znaleźć tych wszystkich, małe składniowych szczegóły, to wszystko będzie dostępne na tej stronie tutaj. 

Więc polecam jak zrobić pierwszy krok. Umieścić go w CodePen. Spróbuj pracować nad że do drugiego etapu. Jest czwarty etap, a tylko zobaczyć, gdzie można uzyskać z tego. 

Jakieś pytania, należy sprawdzić na tej stronie lub napisz do mnie. To mój e-mail. Ale chciałbym, aby pomóc w dowolnym pytania można mieć o React. Tak, Tak, to wszystko, co mam. Dziękuję wam bardzo za oglądania lub za udział. A ja wezmę na wszelkie pytania Może masz po to teraz. Więc dziękuję wszystkim za oglądanie.