[За възпроизвеждане на музика] 

Нийл Мехта: Тук тя отива. 

Е, всички, добре дошли в уеб приложения на бъдещето с реагират. Това е CS50. Моето име е Нийл. Аз съм TA за CS50 и второкурсник в Харвардския колеж и много, много страстна уеб разработчик. Така че аз съм много вълнуващо да да говоря с вас днес, независимо дали сте тук или у дома гледане, за реагират, което е, отново както казах, бъдещето на уеб приложения. 

Така реагират е уеб рамка. И тъй като аз съм бил казвам за някои хора тук, рамка е просто набор от инструменти, можете да използвате за структуриране и изграждане на уеб приложението си. А уеб приложения са, отново, уеб сайтове които са интерактивни, като Facebook, Twitter.com, Instagram.com, независимо. 

Така че Facebook е уеб рамка който е разработен от Facebook няколко години back-- реагират е. Това е, тъй като е било използвано в Facebook на своите мобилни приложения и уеб приложението, Instagram. Khan Academy е друг виден ранно осиновител на React. 

Това е наистина била получаване изключително популярна. Ако някога използват неща като ъглови или Опорна, това е на едно и също семейство, но оттогава досега изпреварва тяхната популярност. Това е най-горещата нова нещо. Това е наистина, наистина огромен. 

И така React е добро не само като уеб рамка за изграждане на интерфейси. Това е добре за изграждане на уеб интерфейси. Освен това има и нещо наречено React Native които ви позволява да се изгради интерфейси за Android и IOS а може би и други платформи в бъдеще използвайки само една и съща JavaScript кода. Можете да използвате точно същото JavaScript код, за да направи уеб сайтове, да направи Android приложения и IOS приложения. 

Това е много, много вълнуващо време. Това е наистина, наистина готино възможност. Това е наистина универсален уеб инструмент за развитие интерфейс, така че това е един много, много Важно е да знаете. И, както ми беше да казвам на хората преди, това, мисля, няма да се промени начина, по който изграждане на уеб приложения завинаги. Така че това е може би малко хипербола, но аз Мисля, че е доста добро нещо, за да знам. 

ОК, така че това, което е React? Реагират е рамка можете да използвате за изграждане на интерфейси. Интерфейс е отново уеб страница, нали? Така че тук е Instagram.com, употреби реагира. 

Реагират е изградена въз основа на идея на компоненти. Даден компонент е HTML елемент на стероиди, така че един HTML елемент е като един бутон. Това е една точка. Това е удар с глава, нали? И Instagram ще ги използва, но това ще използва компоненти на React. 

Реагират компоненти са souped-нагоре HTML елементи че има собственото си поведение съдържащи се в тях. Така че, като пример, бихме могли да имаме елемент време, компонент време, който ще съдържа като печата време, нали знаеш, нов профил компонент, който ще съдържа изображение на профил и името на лицето. Тя може да има като брояч, който може да се разчита като на броя харесвания, и ако щракнете върху нея, тя ще увеличаване на броя на харесвания. Даден компонент е просто куп HTML код, който има някои функции увит в нея. Така че това е един HTML елемент като на стероиди, както казах и преди. Можете да вземете тези компоненти, и можете да ги съберете заедно да се правят нови компоненти, в този случай, пост компонент, който съдържа всички тези неща. Тя ще съдържа Time, профил, LikeCounter, може би коментара а може би и на самото изображение. И така уеб приложения са просто изградени чрез вземане компоненти и пускането им заедно. Една емисия Instagram е нищо повече от куп мнения едно след друго, всеки пост съдържа като Time, Профил, LikeCounter, и така нататък. Това е нещо като строеж на къща. Вие не строят на къща от горе на долу. Можете ви отнеме components-- вземе като банята. Ако вземеш под с вие ги придържате заедно, а вие имате нов компонент. Имате нова част на къщата. 

Така че всички реагират е изградена около тази идея за компоненти, които са интерактивни, които са декларативни. Както можете просто да кажа какво е Профилът е, и това го прави. Те са composable. Можете да вземете време и профил, сложи ги заедно, да направи нещо по-добро. И те са за многократна употреба, така че ако имаме изходния код за определена длъжност, можете да вградите че навсякъде. 

Можете да вградите една Instagram нещо на собствения си уебсайт. Можете да вградите в Facebook, например, стига да използва реагира добре. Така компоненти са наистина, наистина, наистина мощните строителни блокове на мрежата който може да се използва навсякъде и сложи заедно, за да се правят нови строителни блокове. Това е много, много високо ниво преглед. Така че, отново, ако имате някакви въпроси във всяка точка за философията на реактора, на кодиране, за да ме спре, и да ме уведомите. 

ОК, така че да реагира, тъй като тя е готино има различен начин на възприемане как да изградите уеб приложения. Вероятно сте чували за MVC, а модел можете да контролирате в CS50 или каквото друга сондиране класове, които използвате. И повечето рамки са изградена около идеята за MVC. Реагират не е така. Реагират е изградена около идеята еднопосочен поток от данни както се вижда от тази таблица или графика тук. 

По принцип, трябва да имате източник на данни. И източник на данни ще реши как да изложи някои компоненти. И компонентите ще тогава, когато те се променят, те ще разкаже източник на данни, за да се промени. 

За да използвате Instagram Например, може да се наложи списък на пощенските обекти като в база данни или нещо такова. Че данните. И тогава нашите публикувайте компоненти ще вземе, че данните, и да използват тези данни, за да направи нещо на екрана. Това е, което стрелката от данни да е компонент, и след това същата данни се използва да се направи един куп компоненти. 

В Facebook Messenger, за например, която е реагира възможно е да има списък на съобщения като източник на данни. И това няма да направи само списъка на съобщения но също така и в списъка на приятелите, които имате. Имате Броят непрочетени. Може също така да направи нещо, което Facebook това е в дъното на Facebook.com. Същите данни е единствен източник на истината и че причинява много компоненти да бъдат предоставени. И всеки път, когато един от тези, компоненти се променили, той се връща и променя източника на данни. 

Можете да изпратите съобщение, нали? Това променя източника на данни. Вие четете вашите съобщения, така че можете да зададете непрочетено 0. Това променя източника на данни. И забележете, че всички от тях на една стрелка връщаме към едни и същи данни източник, така че да знаете, даден определен набор данни, Знаете ли, че точно това, което страница ще изглежда така. Това е детерминирана. Знаеш ли, дадени на някои данни, това, което страницата ще изглежда така. Можете да се предскаже как ще се се държат и как се развиват нещата да работят, когато са взети заедно. 

И ако имах един милион компоненти тук, че ще се държат еднакви, нали? Вие няма да има никакво странни взаимовръзки. Един данни донесе един милион компоненти. Един милион компоненти могъл върнете и да промените данните. И така, това е много хубаво. Строим composable, лесно мащабируеми уеб приложения. 

Имате един източник на данни, източник на истина. Това казва на вашите компоненти как да се изложи на страницата, и компонентите ще справят взаимодействие. И ако искат да се промени неща, просто се върнете и кажи на източника на данни, за да се промени. Има смисъл? Така реагират е всичко за разбиране как да се изгради компонент и как да направите вашия компонент взаимодействат с външния свят. 

Осъществяване взаимодействат компонент с външния свят използва друга технология наречено Flux, които е рамка, която е добавен на върха на React. Ние няма да говорим за това. Отиваме да говорим повече за, предвид данни, как може да се направи компонент? 

И така React е наистина страхотно, защото вие да го използвате с всяка задния край, който искате. Ако имате като задния край Python, ако си Python може да изплюе някои данни, Реагират може да го направи. Ако са открити JS изходи на данни, React го прави. Ruby релси с данни, React го прави. 

Така реагират е в основата на уеб view-- предния край с компоненти за някой източник на данни, каквато. И така, като се започне от източник на данни, за да реагират компоненти е доста лесно. Отивате в другата посока е малко по-трудно. Това използва Flux както споменах преди. Ние няма да вляза в тази. Ние ще се съсредоточим повече върху данни към компонент страна. По този начин можете да направите готини, забавни уеб приложения. Това няма да се отрази на външния свят за сега, но това е друга история. 

ОК, така че ако сте били тук за последния ми семинар вие ще знаете, че целият код за днешната беседа ще бъде в този URL тук, съжалявам, това URL тук. И в общи линии ние ще отидем през четири стъпки, може би пет, вероятно не пет. Ние ще се движат през четири етапа за изграждане на проба React ап. И така всички изходния код за всяка стъпка от пътя ще бъде точно тук, така че ако можете да започнете следващата заедно у дома, Чувствайте се свободни да чета този код. Ако след заедно тук, ние ще го показва на екрана, така че не се притеснявайте за това. Но ако сте като у дома си, се чувстват свободни да посетите този сайт. И, да, би трябвало да можете да получите всички код, което някога ще трябва тук. Така че това е един добър мамят лист, както и за бъдещите си приключения с React. Cool, така че ако всеки, който е тук, и дори ако сте вкъщи, спра този сайт, is.gd/cs50react, Не капитал, без долна черта, нито нищо. 

Вие ще видите страница, която изглежда малко като този. Това е нещо, наречено CodePen. CodePen е съвместен кодиране на околната среда с които мога да пиша код тук, и той автоматично ще бъде изпратено до вас. И с този начин, мога да пиша код. Мога да тичам код тук. 

За example-- и ако reloads-- видите, Бягам JavaScript код на страницата точно тук, и това ще автоматично да направи уеб страница с този код JavaScript. И така, това е начин за нас, за да изпробват код наистина бързо, без да се налага да ползвате нашата ID или използвайте нашата локална машина или нещо такова. Това е един много бърз начин за вас да макет и тествате различни видове код. 

Така че ще трябва да се вземат Например код, извеждайки го тук. Отиваме да се работи през него. И ако сте вкъщи, можете може да тегли тази, както добре. И аз вече сте инсталирали Реагират тук, така че може просто напишете своя собствен код тук, и го пробвам като свой собствен кът. 

Да, ако всеки да отворят тази връзка тук. Моля, дайте ми палец нагоре, след като сте я отвори. Cool, хладно готино. Тук няма нищо за сега, но ние ще се промени, че много скоро. 

ОК, така реагират е JavaScript библиотека, и като такива, изисква познаване на JavaScript, който е езикът уеб програмиране. И това е да се използват за други неща Сега също, но най-вече в интернет се развиват език, така че, ако не сте запознати с че чете един сайт, наречен JSforCats.com. Чудесно е. Можете да научите JavaScript след половин час. Това е невероятно. 

Така го дам за четене. Ние също е много HTML тук, защото ние сме проектиране на уеб страници, разбира се. Така че, ако не сте запознати с HTML, разгледайте HTMLdog.com. Мисля, че ученето е React милион пъти по-лесно, ако вече знаете градивните елементи. Ако имате компонентите, това е лесно да се направи по-голяма компонент. Това е React език за вас. 

Така че продължавайте напред и да даде тези неща за четене. Пауза това видео. Дай го на четене, ако сте у дома, ако не сте запознати с HTML или JavaScript ОК, така че това, което ние ще направите е да отиваме да се направи един много основен Flashcard ап използвайки React. Отиваме да имат Flashcard. Можете да обърнете картата назад и напред. И ние също ще имаме списък на всички карти, които имаме, и ако ние се чувствате амбициозни, за да бъдем можете да превключвате между автомобили, като щракнете върху тях. 

Но това е, на вашия гола кости, много просто реагират ап. И така, това е действително не тривиално да изпълни, но ние ще покажем, че, ако го направите това, че е много, много лесно да го удължи ако други хора да ви помогнат с това. Така че ние ще да мине през четири етапа започва от нулата, за да се изгради тази. 

ОК, така че четирите стъпки, ние ще започнем с първата стъпка. Първата стъпка ще бъде изграждане на първата си компонент. Както казах и преди, компонент в React е само един HTML елемент на стероиди. В него се посочва HTML и някои поведение, и ще се уточни как хората може да взаимодейства с него, как тя ще има вътрешно състояние. Подобно на един бутон ще знам като как мнозина пъти това е било кликнато например, и той ще знае как да се изложи. 

Така че нека да вървим напред и да градим Първият компонент се използва JavaScript. Така че, ако синтаксисът изглежда странно, това е, защото тя е вид. Така че, отново, отиваме да се направи променлива, наречена ап помощта на ключовата дума нека, което прави променлива, нека App равно React.createClass. 

Реагират е библиотека и има Създаване функция клас. И тази функция е малко код, който може да се използва за създаване на нова тип React компонент. И така React.createClass прави компонент, и този компонент ще да може да прави такива неща. Основното, което той може да направи, е да направи нещо, направи като функция. 

Отново, ако този индекс не е очевидно за вие, препоръчвам ви да отидете на JS за котки и да го проверите. Е, че увеличени в достатъчно добре? Готино. 

Така че всеки компонент нужди да има направят функция. Направи Функцията казва, това, което мога да се отпечата на екрана? Но компонент е безполезна, ако това не е така знае какво да се отпечата на екрана, така че вие трябва да имате направи функция. 

Така че в нещо рендера, вие просто трябва да се върнат някои HTML. И това, което е готино е, че има нещо, наречено JSX, което е разширение на JavaScript който се използва от реагира. Той нека да пишете HTML вътре на вашия JavaScript, които Звучи странно, когато вид първо мисля за това, но го прави много смисъл след това. Така че можем да направим това. Ако сте запознати с HTML, знам, имаме Разделения с общо предназначение контейнер за такива неща. Ние може да се върне на Разделения, и отвътре Разделения това, можем да сложим неща. 

Така че нека да кажем, ние искаме да се направи само прав-нагоре Flashcard за сега. The Flashcard, бих казал, ще имам един въпрос и отговор. Така че в този Разделения, нека разпечатате един параграф която казва question-- Каква е Крайната отговор на живота, вселената? И тогава отговорът е щеше да бъде, разбира се, 42. 

Това не излезе добре на всички. Да, така че основно се може наистина напиши HTML във вашия JavaScript. И това ще бъде отпечатани в екрана. Така че нека да го изпробвате. 

Така че ние имаме свой компонент. Трябва да кажа, React да се сложи компонента на екрана така React.render, така че забележите, че ние лечение на ап като всеки друг елемент. Ние ще го напиша, тъй като е един HTML елемент. Като вместо да каже подобно IMG за изображение или р за параграф, пишете App, така App е третира като HTML елемент. Както казах и преди, това е елемент на стероиди. 

Така че ви окажа App, и вие тя даде място, за да го сложи. И това е как можете да го каже къде да го сложи. Аз създадох една проста Разделения относно страница, наречена с ID на страницата, и това е, когато елемент ще отида. 

И ние няма да работи с HTML. Основно това ще се получи, сложат на тази страница елемент че имаме на екрана. Така че той работи този код и го насочва тази нещо на екрана, така че тук сме. Ние направихме първата ни React компонент. 

Така че просто като една рекапитулация, ние внимателно изработени нов тип компонент, нали? Това е, което React.createClass. И в този компонент, ние той каза какво да направи. Всеки път, когато този компонент е да се се отпечатва върху екрана, тя ще разпечатате на DIV с двата параграфа вътре в него. 

И това, което направихме, направихме ново приложение използвайки наколонените ъгъл скоба ап. Ние го казал да го сложи вътре елемент в страницата. И така, какво съм направил, го е създал ново приложение от този шаблон. И тогава аз го казах, за да го направят. Така че тя каза, OK, ап, какво трябва да разпечатате? App казва, отидете отпечатате Разделения с две точки вътре в него. И готово, там е нашата Разделения с две точки вътре в него. Направи смисъл досега? 

Така че, отново, че целият предизвикателството да реагират е просто не знаят как да направят компоненти. Как да направим компоненти работят заедно. Сега, след като сме направили първата ни компонент, нека се върнем и да направи компоненти персонализация. Така ли как в HTML ви да дадете на вашите бутони класове? Можете да дадете на вашите котви на Href. Можете да дадете на вашите входове тип, нали? Можете да дадете повече обичай свойства на всичките си елементи да стане по-интересно. И ние всъщност може да направи точно същото нещо. 

Така че нека да кажем, ние искаме нашата приложение, за да отида да направи всяка карта. Точно сега ние просто постановено по кодиран карта. Знаем, че има само един картон той може да направи, така че сме Ще се опитам и да промени това сега така че ние можем просто да даде някаква карта. Тя ще разпечатате картата. 

Би трябвало да се опита и да направи своя компоненти много общо предназначение. Така че по този начин мога да приятел това ми е приятел и ще бъда като, независимо Flashcard имате, Просто я храня в тук, и това ще го направя сам по себе си. Можете да поставите друг нещата в собствения си апартамент. 

Но първо, нека да се разбие на две части, но ние искаме да се разделят на картата печат част от действителната ап част. И така, какво можем да направим ние е можете да промените това от App да CardView, просто ново име на приложението, и ние можем да направим нова компонент, наречен App, да не се бърка със стария App. Имаме най-createClass, и като в HTML, можете да гнездят React компоненти в един от друг. 

Така че в този оказва функция, връщане от функция CardView, и това е точно същото нещо. Вижте защо това е едно и също нещо? Вместо да прави само ап, че има DIV и сдвояването вътре в него, ап прави CardView, и CardView прави DIV и алинея. Така че това е първият ни пример за гнездене елементи вътре един от друг. Това прави ли смисъл? Така че, отново, ние имаме елемент CardView. Имаме ап елементи че е по-голям от. 

ОК, така че ние искаме нашата CardView-- ако даде добра CardView определена карта, той ще отпечата за вас, нали? Така че на първо място, ние трябва да направим карта, така че нека да се направи обект карта. Така че нека ми карта equal-- ако сте запознати, това е само нотация вземане възражение в JavaScript. Това е нещо като структура на в C, така че ние направихме една карта, и така сега можем да преминат тази карта като имот или като атрибут в HTML терминология в нашия ап. Така че можем да направим това, App карта равнява myCard. 

Знаеш ли как на входа, което правите Тип на входния равнява на текст или бутон клас се равнява BTN за фърмуера ,? Същата идея, App карта equals-- сте се погрижили да сложи скоби here-- App карта равнява myCard, така че това казва, че ние имаме тази карта обект. Отивам да го давате като собственост на ап компонент. И това приложение компонент ще да бъде в състояние за достъп до нея и да направя интересни неща с него. 

Така че нашата ап ще бъде дадена карта, така че за сега, нека да има ап просто да даде Картата на CardView себе си, защото като приложението не е ще знам какво да правя с него, така че ние просто ще го даде на CardView. Така че ние ще го мине същия начин, картон равни, и така всеки компонент може да получите достъп до неща, които са му дадени. Те имат достъп до свойствата че да се даде на това използвайки този синтаксис, this.props.card. 

Така че това, което се случва тук, е имате myCard обекта. Можете да го премине в ап използване на App карта равнява myCard. Това картон обект се дава на приложението си. Приложението може да получите достъп до него като this.props.card. Това е нещо като образ знае какво е това е източник. 

Това приложение не знае за какво става картон е, и той може да направи неща с него. Той може да направи изчисления. Той може да взема решения, основаващи се на разстояние от него. 

За сега, щях да мине this.props.card върху CardView. Направи смисъл досега? Той ще има повече смисъл сега. 

ОК, така че сега сме в CardView. Нашата CardView, предвид на картата, трябва разпечатате своя въпрос и отговор. Точно сега ние просто отпечатва някои твърдокодирани въпроси и отговори. Ние трябва да разбера out-- ние нужда да поиска от картата, която те ни дадоха какъв е въпроса и отговора, и след това да отпечатате тази навън в екрана. 

Така че можем да направим това тук. В направят begin-- първата направя равни. Така че това, което правим тук, е, че ние знаем, картите са ни дадени на имот, нали? Той е дал на нас като вход. Подобно на това е почти като доводите на функция. Картата е аргумент почти до този CardView. 

Ние ще извлече, че и сложи то в променлива въпрос. Уверете се, че отговорът му мина на променливата отговор. Подканва тази карта, за да се отговори. И сега, когато имаме тези, вместо да отпечатате този текст, отиваме да разпечатате каквото и да ни даде. 

Така че това stuff-- така че ние отиваме да се изнеса Въпрос Отговор. Да видим дали това работи. Cool, така че нека да се оттегли през него още един път, само за да бъде сигурен. 

Така че моята карта е обект карта, и ние се даде на тази карта, за да ап. А на приложението ще отнеме на картон и да го даде на CardView. И това CardView казва, ако дайте ми някакъв Flashcard обект, Ще разпечатате си въпрос и неговия отговор, нали? 

Така че това, което можех да направя, е мога да изпрати този код, първият като 10 линии на моя код, за моя приятел. Можеше да го вградите в собствената си кандидатура. И толкова дълго, колкото той направи същото нещо, като CardView карта равнява това, толкова дълго, колкото той създава CardView и го даде правилната информация, той може да направи своя собствена карта. И така, по този начин, това е наистина готин начин за вас да се изгради компоненти, които използват един на друг, нали? Тази карта, мога да публикувам това CardView в интернет, и хората ще могат да го използват. Така че основно, това е като един от най- стандартните функции в библиотеката С. 

Това е функция, където някой го е написал. Даваш определен вход. Тя ще произвежда определен изход. Не ме интересува как работи вътрешно. Стига да му се даде правото вход, ще направят правилния изход. 

И един компонент може да бъде мисли по същия начин. Това е като CardView функция библиотека. Ако го даде някаква карта като свойство, тя ще отпечатате съдържанието на тази карта. Подобно, ако сменя картата ми да вместо да бъде като това, което е 5 плюс 37, тя ще се актуализира съответно. Така че просто чрез промяна на входа, той получава определен изход. Така че можете да мислите за компоненти почти като функции по този начин, което можете да сложите заедно. Можете да получите вход, като този CardView като вход, можете да получите на изхода. В този случай, изход е HTML. Направи смисъл досега? Cool, така че отново, имоти са как можете да подадете информация за и от компоненти. 

ОК, така че нека да направим този нещо интерактивно. Точно сега това е вид скучно. Какво е [недоловим]? Можете да отпечатате някои от, но това е всичко, той може да направи. 

Така че нека да се върнем към стар въпрос просто за сега. ОК, така че в момента тези компоненти са скучни, защото всичко, което правят, те ще получат вход. Те правят изход, нали? Това е вид скучно. Ние искаме да имаме компоненти, за да бъдат в състояние да имат някакво вътрешно състояние, като си спомня нещо. 

За Flashcard за Например, какъв вид държавна може да искате да не забравяйте за Flashcard? Какво временен статут може да искате да си припомните за Flashcard в Flashcard приложение? АУДИТОРИЯ: Дали това е било копна? Нийл Мета: Да, точно така. Така че може да искате да запазите следите са изправени нагоре или са сте с лице надолу върху картата. На Facebook, например, бихте искам да си спомням, когато в храната новини Ако сте искали или кой профил правиш точно сега. 

На Messenger, като това, което текст напишете в полето за въвеждане, нали? Ако обнови страницата, тя си отива. Но ти не ми пука. Това е просто временно. Да? 

АУДИТОРИЯ: [недоловим] Нийл Мехта: Подобно на флаш карта, като можете да се видим страна на въпрос или страната на отговор? 

АУДИТОРИЯ: OK. 

Нийл Мехта: Като две едностранно Flashcard, нали? Да, така че искам да имат тази идея за сега Имам имоти, което е като входове, но състояние, което е временно, ъ-ъ, къде се намирате на страницата, нали? Отново, аз казах в Facebook Messenger, имам подобни, които човек който преглеждате Facebook или кой е профил, нали? 

Това е само временно. Важно е да се покаже на потребителя какво се случва, но обнови страницата. Това няма значение. Така че това е временно състояние, така че ние всички го държава. 

Така че, отново, там е държавна и реквизит. Подпори е даден вход от вашия източник на данни. Членка е точно като по подразбиране. Това е точно като неща, които прави нещо интерактивно. 

Така че в нашия CardView-- нека да има нашата CardView-- така че е хубаво. Това, което ние ще направим тук, отиваме да се докоснат CardView и само CardView. И така, моят приятел, който имам това, те няма да забележите никаква разлика. Те не би трябвало да се промени всеки от своя собствен код, но те ще видят CardView имам souped до. Това е хубава част за компоненти. 

ОК, така че в нашата CardView, нека се опитаме и следите дали ние постепенно нагоре или с лице надолу. В React правим това, като първо определяне на първоначалното състояние. Къде се започне картата? 

Така че да е функция, наречена getInitialState функционира, и ние се върне един обект. Този обект съдържа някаква държава, и състояние е само една двойка ключ-стойност. Както и в инструктират, че имате ключ и стойност, имате подобно име е низ. 

В този случай, нека да кажем пред е вярно. Това се казва, че имаме държава. Един от компонентите на държавата е атрибут наречен предната. [Недоловим], така че по подразбиране, ние сме в предната част на картата, и ние можем да променим това тъй като ние флип картата. Има смисъл? 

ОК, така че в окаже, точно сега, ние сме показващ въпроса и отговора. Сега какво трябва да правим се покаже на въпроса ако сме на предната страна на картата, така че отговорът е за гърба на картата. Ето защо всичко, което направи картата с интерактивно. Така че нека да се опитаме и да това тук. Ами, първо просто се променлива. Ние можем да попитам сега this.state.front. Ние достъп заявя същото WE подпори за достъп, така this.state.front. 

Ако сме отпред, след това текстово е this.props.card.question. Ако сме на предната част на карта, ние ще се опитаме да вземете въпроса от картата. В противен случай, ако сме на гърба на картата, какво ще правим? 

АУДИТОРИЯ: Отговорът? 

Нийл Мета: Да, така текст равнява this.props.card.answer. Но ако забележите, че използваме държавата да вземе решение защото сега компонента ще изглежда различно на базата на разстояние как те си взаимодействат с него. Така че, вместо да отпечатате това, ние просто ще разпечатате текста. Cool, така че сега, както виждате, ние виждаме само въпроса. И ако мога да променя състоянието тук ръчно до предния е фалшива получаваме 42 назад. 

Така че, отново, този компонент има своя собствена държава. Подобно на един бутон знае дали това е било пресовано или не, това нещо не знае какво е отпред или на гърба. По подразбиране това е в предната част. И тогава, ако това е в предната част, ние ще изведем въпроса. Ако това е на гърба, ние ще разпечатате отговора. Така, отново, информацията дадена е същото. Той просто изглежда по различен начин въз основа на това как можете да го програмирате. Така, например, Facebook Messenger, дори и да получите един и същ източник на данни, тя може да изглежда различно защото държавата е различна. Ти гледаш на по- съобщение различен човек. 

ОК, така че всичко това е добре и добро, но сега какво е всъщност да ни направи способни да се промени, независимо дали нашата карта е напред или назад. Ние можем да направим това, чрез добавяне на флип бутон, бутон за картата, която ще флип картата, ако това е [недоловим]. Така че нека да добавите бутон тук, това бутон, а този бутон ще каже флип. 

И така, точно сега, тя не направи нищо. Той просто изглежда добре. Какво можем да направим, е да можем да добавим едно кликване манипулатор, OnClick равнява this.flip, и ние ще определи флип-късно. Но общо взето, OnClick е функция, която получава нарича, когато потребителят щракне. 

Така бутона ще знаете когато това е било кликнато. Отиде това е било кликнато, тя ще флип картата. Това е нещо като вашия доставка на пица момче. Ти си като, добре, когато някой призовава мен, аз ще достави пица, нали? 

Можете да се регистрирате по този слушател. Можете да слушате за дадено събитие. Можете да се нарича, и когато събитие се случи, може да направим нещо. Можете да получите пица. В този случай, когато сте кликнали, флип картата. 

И така, ние трябва да се определят по- функция, която ще се обърне на картата, така че ние ще напиша това право Оттук флип функция. И така, какво мислиш флип ще правим? Отново това стане, когато нарича ние щракнете върху бутона флип. Какво трябва да направи функция капакът? 

АУДИТОРИЯ: Промени this.state.front от верни на фалшиви, неверни да е вярно. 

Нийл Мета: Да, така предприемат всички this.front is-- предната състояние е. Вземи пред държавата, ако това е вярно, да я направи фалшиво. Ако това е фалшиво, да я вярно, нали? Така че нека да се опитаме това. 

Вие не можете да променяте състояние само чрез правене this.state. Вие не можете да направите това. Вие не може да направи това. Трябва да използвате функция наречено this.setState. 

Така че може да се каже this.setState предната дебелото черво, където това, отново, възклицанието точка означава обратното. Предполагам, че ако това. state.front е вярно, то ще се превърне фалшива. Така че ние ще определи държавата от верни на невярна. Ако това е фалшиво, ние ще го настроите фалшива да е вярно. 

Само забележете, че ние се създаде и да получите малко по- по различен начин, и така нека се опитаме това. Bada Бинг, виж това. Бутонът за флип сега ще превключите отпред назад състояние. 

И така, тук е мястото, където можете да видите малко от магията на React. Както ние никога не го каза тя отново да направи. Ние никога не каза, че преначертае нищо. Ако правите това без React, щеше са to-- харесва, когато Бутон флип е щракване, ще трябва да го кажа, за да ръчно повторно направи, нали? 

Реагират е наистина страхотно с това, че ако тя даде определено състояние и свойства, тя винаги ще въздаде точно същото нещо. И така, когато ние някога сме се промени състоянието и свойствата, реагират просто отново прави цялото нещо. Той знае, че има едно към едно кореспонденция между държавата и параметър и HTML. Така че, когато една от тези промени, като в резултат на комплекс състояние, тя ще промени начина, по който заплащането е повторно постановеното. И така, в общи линии е като React Очакваме ви да се промени. 

Всеки път, когато тя се променя нещо, той ще направи отново цялата страница. И ако това звучи неефективна, това е, защото това би било, но реагира използва нещо нарича сянка DOM. Вместо изготвянето на страницата директно, тя поддържа виртуална HTML дърво в паметта. 

Знаеш ли, HTML е като дърво, като йерархична структура на данните. Той запазва фалшив дърво в паметта, и всеки път, когато се актуализира на страницата, тя ще привлече още един фалшив дърво, и това ще се изчисли това, което се промени е необходимо да се направи страница, за да се направят две дървета, равен. Така че основно, това на практика повторното прави много. И тогава той само искал променя страницата на малки ощипвам, ако е необходимо, така че това е много, много, много ефективен. 

Така че основно ще реагират всеки път, когато се промени нещо, той ще направи отново на страницата на практика. Ще разбера какво ми е необходимо, за да променя, за да отрази реалната страница виртуалната страница, и това ще го направя. Това е виртуален DOM. Това е един от най-големите Гостите на реагирате. 

Това прави ли смисъл? Някакви въпроси? Да? 

АУДИТОРИЯ: Как действа сравни все още на MVC че ние говорихме за преди като ресурси. 

Нийл Мета: Да, въпросът е как се сравнява с MVC? Можете попита за ресурси. Ами, нека да поговорим за това как тя функционира. 

В MVC, ще актуализира модела. В този случай ние ще трябва модел карта. Гледката ще има флип бутон и контрола ще има функцията флип. Така че гледката ще разкаже контролер, за да флип флип. Flip ще разкаже модел, за да се промени, нали? 

И така, когато правиш едно MVC, вие слушате за модела да се промени, и можете отново да направят гледката по съответния начин. Или просто трябва да се харесва Трябва контролера. Изчакайте моделът да се промени, а след това изберат част от подобно нещо да се промени. Тук имаме едно нещо, но в един голям апартамент, вие трябва да си спомните какво харесва промяната във всяко едно място, така че е малко досадно. И така React е хубаво защото има сянка Dom. Тя може да си позволи да просто пренапише цялото нещо. Вие не трябва да селективно като предполагам какво да се актуализира. 

На Facebook, ако ви харесва получите ново съобщение, в MVC, ще трябва да се помни, OK, променя нещата в горната част на страница, иконата на съобщение. Също така се появи нов прозорец в долната част. Също така се нещо ново в този прозорец. Също така играе звук. 

Това е много неща излиза по същото време. И така, ако не го направите има сянка Dom, щеше Трябва да направите това ръчно, защото вие не можете да се отървете от цялата страница. Вие не можете да си позволите да, така че трябва да промени всяко нещо ръчно, което е много досадно в MVC. 

Така че, за да бъде пестеливи, те селективно актуализиране на страницата, което е ефективност, но също така и досадно. В реагират, защото на Сянката Dom, можете да получите и двете неща безплатно. Това е ефективен, защото на сянка Dom. Запушването е актуализиране на страницата. Това не прави манипулацията на дърво. Можете да получите на ефективността. Можете също така да получите лекотата на използване, тъй като ако просто пренапише цялата страница, но просто знам, всичко е наред, нещата ще бъдат на страницата някъде. То може да бъде на различно място, но тя ще бъде по страницата, нали? Така че просто повторно постановеното цялото нещо на практика, и може да се направят няколко промени в самата страница. 

Така че, отново, в MVC ви ще трябва да избират между лекота на използване и ефективност, и реагират, можете да получите и двете. Така че е по-добре. Има смисъл? Solid. 

ОК, така че нека да видим нека да поговорим малко за стъпка 4, как можем да вградите компоненти. Така че ние имаме това точно сега. Ние разполагаме със готино малко бутон. Можем да го обърнете назад и напред, и това е всичко го прави. Да кажем, че искаме да има друг компонент. Да кажем, че нашата Flashcard ап трябва съдържа списък с всички карти че имате, така че означава, че ние трябва да има друг компонент. Е, може би го наричат ​​списъчен изглед. Нека да направим оглед списък, който съжителства с CardView, и този списък оглед и CardView ще искали да работим заедно. И вие можете да ги комбинирате да направим нашата ап за вас. 

Така че на първо място, нека да се направи полето още няколко карти. Да кажем, че, какви карти? И точно затова не трябва да се ви отегчавам с него пишете в, Аз съм просто ще го копирате от тук. И така, аз отивам да не тя даде само една карта. Отивам да го дам един набор от карти. Така че първите приложения ще прекъсне за сега. Добре, така че ние ще направим това състояние да се справят няколко карти. Така че на първо място, ние ще го дам, не само една карта, но масив от карти, като списък с карти. И в този случай, ние имаме три от тях. 

Добре де, толкова приложение е ще получите списък карти, и това ще реши кои един да покажат на CardView. The CardView може само направи една карта, но ап получава списък с всички карти, нали? 

Така че, когато разбера едно карта, за да дам на CardView, как бихте Предполагам, че може да сте в състояние да вземе решение за това кои карти да покажа? За да ви дам един намек, че е временно Ще бъдат гледане определена карта. Ако обнови страницата, ще Просто се върнете към първата карта. Това е добре, защото това е временно. Каква техника може да използваме? 

АУДИТОРИЯ: Можете да направите променлива така както сте имали предната. Вярно ли е това, бихте могли има ток карта е равно на 1? 

Нийл Мета: Да, така че ние искате да имате състояние, нали? Можете да използвате членка в компонент, за да разбера коя карта искаме да стигнем. Като имаме списък на всички карти, ние ще използвате състояние да разбера една от първата карта, втора карта, трета карта, и така нататък. 

Така че един апартамент, така че един апартамент ще получите имат функцията getInitialState, getInitialState връщане от функция. И ние просто ще кажа, activeIndex 0. Така че сега нашата ап има свой състояние. 

И така нататък направи, за да разбера карта, нека просто да отидете на масива и вземете нещо в този форум. Изберете карти равни this.props.cards this.state.activeIndex. Така че, както виждате тук, реквизита и държавата действително работят заедно. Така че сега ние имаме свой activeCard, ние ще го наричаме activeCard, и нека да видим дали това работи. [Недоловим] 

О, това е текст грешка. Ah. 

Cool, да, така че сега бяхме отново там, където бяхме преди, нали? Същата стара програма освен Сега можем да подкрепим списък с карти, а не само една карта. И сега, отново, ако променим activeIndex, можем да отидем 0-1, и сега, че втората карта, и след това отидохме до 0. Така че тук е ново souped-нагоре версия на нашия. 

ОК, така че сега нека да има списъчен изглед, че показва всички карти от вашата програма, така че ние ще се направи нов компонент, наречен ListView. Нека ListView равнява react.createClass. Така че ние искаме да оказват неподреден списък със списък елемент за всяка карта. И така, ние имаме един куп карти. Искаме един елемент от списъка за всяка карта, нали? Бихме могли да направим за линия или нещо да се направи нов елемент от списъка. Но начина, по който го направи в Реагират, използвайте нещо, наречено карта. Карта е инструмент или функция използвате че за всеки елемент, тече някаква функция, отнема върнатата стойност, и дава, че обратно. 

Така, като пример, ние имаме масива 1, 2, 3.map function-- и тази е съкращение за function-- х стрелки х пъти х. Това се казва, за всеки номер в 1, 2, 3, вземете я. Тя квадрат, и го върна. И така, какво мислиш 1, 2, 3.map х отива на х пъти х ви дава обратно дадена че тази функция е работи на всеки елемент от този масив. 

АУДИТОРИЯ: 1, 4 9? 

Нийл Мета: Да, 1, 4, 9, защото ти направя 1 пъти 1. Това дава една. Това е първият елемент. 

2 пъти 2 е 4. Това е втори елемент. 3 пъти 3 е 9. Това е трети елемент. Има смисъл? Така че картата има ли техника използвате във функционалните програмисти, новия стил на програмиране, за да се направи нещо на всеки елемент в списъка си. И така, това звучи познато. Имаме списък с карти. Искаме да получите списък елемент за всеки един, така че ние ще се използва само на картата тук. Ще кажа, нека списък равни this.props, карти, карта. 

И така даде карта, ние сме ще генерира елемент от списъка с тази карта е съдържанието му страна. Нека просто кажем, ние искаме да дадем на картите разпитват така card.question. Така че този списък съдържа масив от LI или Списък артикули където има един списък точка, за всяка карта, и който съдържа въпроса на карти. Има смисъл? 

Cool, затова нека сега всъщност отпечатате, че навън. Така че ние ще се върне на ул. Вътре, че неподреден списък, ние просто ще остана целия списък че те ни дадоха. Готино. 

Добре, така че сега това списък разглеждате произведения просто намери. Всякакви въпроси за изгледа на списъка? Имате куп карти. Можете да направите точка от списъка за всяка карта. А ти ги сложи вътре неподреден списък, а ти го върна. Така че сега нека да действа, за да сме вграждане това вътре в нашата ап, така че можем да направим това, списъчен изглед. Какво аргумент можем да преминат към списъка изглед? Какви качества трябва да му дам? Не забравяйте, че ако ви дам тя куп карти, той ще направи списъка видите за тези карти. И така, какво ще минаваме тук като аргумент? АУДИТОРИЯ: списък на карти? Нийл Мета: Да, така карти равнява this.props.cards, нали? И така, единственият проблем е само, че можете да Оказа един от високо ниво елемент оказва, така сте се погрижили да го увийте в Разделение. Това е странно. Така че нека да видим дали това. Ли това, че работи? 

Да, там ще отида. Така че сега ние имаме списък на карти в долната част, и след това ние разполагаме със Самата CardView на върха, и че ще флип между от двете страни на картата. Сега не, че има смисъл, как го направих? Да, така отново, ние имаме два компонента. Отпечатъците първия компонент от всяка карта в списъка. Това е изгледа на списъка. И вторият компонент отпечатва само тази карта. Ако му се даде определена карта, тя ще разпечатате информация за тази карта и да ви позволи да обърнете назад и напред. 

Така че, ако искаме, можем да се опитаме и да поговорим за добавянето на някои нови функции към това. В противен случай можем да говорим малко по- за на скоростта на реактор, или можем да отговорим въпроси, които може да имат защото те са всички основни части на реагиране, че искам да говорим. Ние можем да вървим напред. Можем да отговаря на въпроси. Каквото искаш. 

АУДИТОРИЯ: Можете ли да използвате JSX в нормален JavaScript? Или това е нещо, което дойде с [недоловим]? 

Нийл Мехта: Въпросът е консерва използвате JSX с нормална JavaScript? Отговорът е да. JSX е просто начин да го вземе от Вашето JavaScript, че има HTML вътре в него, и той съставя в JavaScript, че не разполага с HTML вътре в него. Така че забележите that-- така забележите тук. Това прилича ли харесват Разделения и имате неща вътре в него. 

Това компилира до JavaScript, че като генерира едно и също нещо. Предполагам, че това, което искам да кажа е, че JSX е само синтактична, като това е препроцесор за JavaScript много като PHP е Препроцесор за HTML. АД е Препроцесор за JavaScript, който ви позволява поставите HTML вътрешността на вашия JavaScript. И така, ако имате право трансформатора което е нещо, наречено [недоловим], която ще преобрази. Дясната Препроцесорът, тя ще ви позволи да направите това. 

АУДИТОРИЯ: [недоловим] Нийл Мехта: Обикновено не е нужно да се сложи HTML вътрешността на JavaScript освен ако не е твое дело React. Но вие може да го направи така или иначе. Да? 

АУДИТОРИЯ: I смятате бе описано React като функционален език за програмиране. Ние сме били обучение C в CS50. Е С и функционална език? Нийл Мехта: Така че въпросът е около функционална спрямо друго нещо, наречено Наложително или процедурно програмиране. Има два вида програми популярни. Един нарича процедурно, които е за всички, като правят команди, и един е функционален, който е всичко за да се налага функции и имащи вход и изход от тях. React е функционална парадигма. С е много процедурно парадигма. 

И като пример, например С, вие не направите това декларативен начин на вземане на програмата, нали? Трябва да се каже, Разпечатайте. Променете тази структура на данните. Печат. Това е всичко за команди. 

В React, там не е че много команди. Това е всичко за имащ компонентите, които, взети заедно. Те са като функции. Имате като функция наречено CardView, който е функция който има вход, изход, и така е всички реагират за тази философия ни на having-- имате данни. Можете да го премине през този алгоритъм, и това ще изход HTML, че сте Просто отпечатана на страницата, и затова трябва да го изградим парче по парче. 

Така че, за да се направи една метафора на това, което Казах и преди, знаете как на Facebook, ако получите съобщение, и да изберете кои части да се актуализира, това е процедурно. Това е наложително, нали? OK, аз получих съобщение. Нека да променим сметка там. 

Нека да се появи прозорец тук. Нека да променим сметка там. Нека да се направи това тук. Това е процедурен подход. 

Това е, което неща като ъглови, Boost, Backbone, други рамки използват. Реагират е функционален. Това е много по-различен начин на мислене за нещата. Това отнема тази идея за нека да има функции или алгоритми, които ще ви тя даде данни. Тя ще изплюе какво трябва да бъде, и компютъра ще се грижи за претегляне. Вие не се справя сам. Това прави ли малко смисъл? Да? 

АУДИТОРИЯ: В функционален език, всичко се случва наведнъж? 

Нийл Мета: Не, нещата да се случват в ред. Както тук има още поръчка, но това не е така да се случи по ред на подобно Поздравявам, команда, команда. Това се случва по реда на функция дава изход. Поставете това в друга функция. Сложете че в друг функция, друга функция. 

Ако го направите CS51, ще научите функционални програми малко извън обхвата на това. Но в общи линии, това, което прави Реагират готино е не само потокът еднопосочен данни и виртуалния Dom, но и тази идея за функционално програмиране. И функционално програмиране е много лесно да композира и да направи готини неща от, и това е много лесно да се мисли около и причина за. Така че това е още един добър жребий на React. Всякакви други въпроси? Да? 

АУДИТОРИЯ: Хм, защо да ви ползване нека, за разлика от Var? 

Нийл Мехта: Така че въпросът е защо се използва нека вместо вар? Това е нещо, наречено ES6 или ECMAScript 6. Това е най-новата версия на JavaScript. Има един куп технически причини, Но нека е по-добра версия на Var. 

Това е начина, по който декларира променливи. Можете да използвате нека. Можете да използвате Var. Нека има куп технически reasons-- можете да ги гледам до later-- защо е по-добре. По принцип, ES6 има някой хубав Новият синтаксис, някои нови функции на върха на старата JavaScript. 

Така че ние имаме като пет минути. Аз просто исках да говоря за още едно нещо наистина бързо. Ако сте имали някакви въпроси, нека да говорим за нея, след това. Но просто така се получава това уловен от камера, аз просто Искам да поговорим малко за това как можете действително използват реагират в своите приложения. 

Ако отидете тук, Facebook.GitHub.IO/react, това е началната страница на React, и тя ще ви покажа как можете реално да използва Реагират в страниците си. По принцип, това е малко сложно опитвате да инсталирате React. Това не е толкова лесно, колкото ти просто плъзнете и пуснете JavaScript там. 

Вие трябва да имате свой трансформатор създаден, който ще, както преди, превърнете в JSX нормалната JavaScript. Трябва да сте нещо, което ще съставят ви ES6 към нормалното. JavaScript има много на движещи части което трябва да направите, така че има нещо наречено Yeoman, Yeoman.io. И това е инструмент на командния ред, че ще да ви помогне да скеле вашето React проекти лесно. 

Така че можете да прочетете за това по-късно, но има някои инструменти че Yeoman предлага. Те ще ви позволи да създадете React ап с всичко построен инча Подобно на това ще са изградили в, компоненти построен инча Той ще трябва трансформатор построен инча Те имат много готин неща, построена през автоматично използването на тези неща, наречени генератори. 

Така че прочетете за това, ако ви харесва. Просто отидете на Yeoman, Y-E-O-M-A-N, и можете да намерите генератори като тези. И с генератори като тези, можете просто искал един е няколко команди команди. Той ще извърши скеле Цялата React ап за вас. Ще получите цялата ръчна тръбите, и грухтене работа за вас, и това е причината да просто да се съсредоточи само на писане в React. 

Така че основно изграждане на Реагират приложение е nontrivial. Той е свързан всички заедно, но има са инструменти, които ще го направя за теб. Така че, ако искате да направите React ап, опитайте се да го прави по този начин. Ако просто искате да експериментирате, можете да се опитате да използвате това CodePen поради това има CodePen всички реагират окабеляване. Аз бях направил цялата работа за вас вече. 

Така че, ако искате да направите като производството, за да освободите React ап, опитайте една от тези генератори. Ако просто искате да играете наоколо, това е често струва само като се опитам да си поиграете на CodePen тук. Звучат добре? Готино. 

Така че това е всичко, което имам. Отново, всички код и примери са щеше да бъде на този сайт тук. Така че, отново, ние говорим не за много по синтаксис на React, но, за да намерите всички онези, малки детайли, синтактични всичко това е ще бъде на разположение В този сайт тук. 

Така че бих препоръчал като направи първата стъпка. Сложете го в своя CodePen. Опитайте работи по вземане да втория етап. Има и четвърти етап, и просто виж където можете да получите от това. 

Всякакви други въпроси, за бележки , че на страницата или да ми пишете. Това е моят имейл. Но бих искал да ви помогне с всякаква въпроси, които може да имат около реагира. Така че, да, това е всичко, което имам. Благодаря на всички ви много за гледане или за посещаване. И аз ще взема някакви въпроси може да се наложи след това сега. Така че благодаря на всички ви за гледане.