[Мусиц плаиинг] 

НЕЕЛ Мехта: Ево иде. 

Па, сви, добродошли на веб апликације у будућности са Реацт. Ово је ЦС50. Моје име је Нил. Ја сам техничку помоћ за ЦС50 и студент друге године на Харвард колеџу и веома, веома страствени веб девелопер. Тако да сам веома узбудљиво да разговарам с тобом данас, да ли овде или код куће смо ватцхинг, о Реацт, што је, опет као што сам рекао, будућност веб апликација. 

Дакле, Реацт је веб оквир. И као што сам говорио неким људима овде, оквир је само сет алата које можете користити да се установи и изградити свој веб апликацију. А веб апликације су, опет, сајтови који су интерактивни као што су Фацебоок, Твиттер.цом, Инстаграм.цом, како год. 

Дакле, Фацебоок је веб оквир који је развијен од стране Фацебоок неколико година уназад-- Реацт је. То је тада се користи за Фацебоок на својим мобилним апликацијама и веб апликација, Инстаграм. Кан Академија је још један истакнути рано примењује Реацт. 

То је заиста био постаје изузетно популаран. Ако сте икада користити ствари као што су угаони или Бацкбоне, је то од исте породице, али има од дубоке надмашују своју популарност. То је вруће нова ствар. То је стварно, стварно велика. 

И тако Реацт је добро не само као веб оквир за изградњу интерфејса. То је добро за изградњу веб интерфејса. Ту је ствар Реацт зове Матерњи који омогућава вам да изгради интерфејсе за Андроид и иОС и можда и друге платформе у будућности користећи само исти ЈаваСцрипт кода. Можете да користите исти ЈаваСцрипт код да пружи сајтова, то рендер Андроид апликације и иОС апликације. 

То је веома, веома узбудљиво време. То је стварно, стварно кул прилика. То је заиста универзална веб интерфејс развојни алат, тако да је веома, веома важно је да знате. И, као што сам говорио људима пре, ово, мислим, ће се променити како смо изгради веб апликације заувек. Дакле, можда је мало претјеривање, али ја Мислим да је прилично добра ствар да знате. 

У реду, па шта је реагирати? Реацт је оквир можете користити за изградњу интерфејса. Интерфејс је, опет, веб страница, зар не? Дакле, овде је Инстаграм.цом, користи Реацт. 

Реацт је изграђен на Идеја компоненти. Компонента је ХТМЛ елемент на стероидима, Тако ХТМЛ елемент је као дугме. То је став. То је заглавље, зар не? И Инстаграм ће користити ово, али ће такође користити компоненте Реацт. 

Реацт компоненте су побољшаном ХТМЛ елементи који имају сопствено понашање садржан у њима. Дакле, као пример, можемо имати време елеменат, време компонента, који ће садржати као време печат, знате, је профил компонента која ће садржати профил слику и име особе. Она може имати као бројач који Можете рачунати као бројем лајкова, а ако кликнете на њега, то ће повећање броја лајкова. Компонента је само гомила ХТМЛ кода који има функционалност умотани у њему. Дакле, то је као ХТМЛ елемент на стероидима, као што сам већ рекао. Можете узети ове компоненте, а можете их ставити заједно да нове компоненте, у овај случај, пост компонента, који садржи све ове ствари. То би садржати време, Профиле, ЛикеЦоунтер, можда коментар а можда сама слика. И тако веб апликације су само гради узимајући компоненте и стављајући их заједно. Инстаграм храна није ништа више него гомила постова један за другим, свака порука садржи као Тиме, Профиле, ЛикеЦоунтер, и тако даље. То је нека врста гради кућу. Ви не изгради кућа од врха до дна. Узми цомпонентс-- вас узети као купатило. Ти узми бедроом-- их држите заједно, и имате нову компоненту. Имате нови део куће. 

Дакле, реагује се све гради око ова идеја од компоненти које су интерактивне, који су декларативно. Као да само кажем да ми је профил је и оно га чини. Они су цомпосабле. Можете узети време и профил, пут их заједно, чине нешто боље. И они су за вишекратну употребу, тако да ако има изворни код за пост, можете уградити било где. 

Можете уградити Инстаграм ствар на свом веб сајту. Можете уградити на Фацебоок-у, на пример, док користи Реацт као добро. Дакле компоненте су стварно, стварно, стварно моћни градивни блокови веб који се могу користити свуда и ставити заједно да би нова зграда блокова. То је веома, веома Висок ниво преглед. Дакле, опет, ако имате каквих питања у сваком тренутку о филозофији реактора, а кодирање, да ме заустави, и јавите ми. 

У реду, тако да реагују због тога је кул има другачији начин гледања колико сте изградити веб апликације. Вероватно сте чули за МВЦ, а модел да контролишете у ЦС50 или било шта друга сондирање класе које користите. И већина оквири изграђен око идеје МВЦ. Реацт није. Реагује је изграђен око идеје од унидирекционе протока података као што се види у овом графикону или графику овде. 

У суштини, имате извор података. И извор података ће одлучити како да се постави одређене компоненте. И компоненте ће онда, када се мењају, они ће рећи извор података за промену. 

Да бисте користили Инстаграм пример, можда ћете морати списак поштанских објеката као што су у бази података или тако нешто. То података. А онда су наши пост компоненте ће те податке, и користе те податке да пружи ствар на екрану. То је оно што стрелица из података да компонента, а онда тај исти подаци користе да донесе гомилу компоненти. 

У Фацебоок Мессенгер за пример, који је Реацт, можда имате листу поруке као извору података. И то не би рендер само списак порука али и листа пријатеља имате. Имате број непрочитаних. Можда је учинило Фацебоок ствар то је на дну Фацебоок.цом. Исти података је један извор истине и који изазива доста компоненте да се изречена. И кад год једна од оних компоненте се мења, иде уназад и мења извор података. 

Ви пошаљете поруку, зар не? То мења извор података. Ви сте прочитали своје поруке, тако да подесите непрочитану на 0. То мења извор података. И приметите да све то једног арров да се вратимо на истим подацима извор, да знате, дат одређени скуп података, ви управо оно што је познато страница ће изгледати. То је детерминистички. Знате, дао одређене податке, што страница ће изгледати. Можете предвидети како ће то понашају и како ствари иду да раде када су заједно. 

И ако имам милион компоненте овде, то би се понаша исто, зар не? Не би имао било веирд интерконекције. Једна подаци донио милион компоненте. Милион компоненте могу вратите и измените податке. И то је веома лепо. Ми градимо цомпосабле, лако променљивих веб апликације. 

Имате један извор података, извор истине. То говори своје компоненте како да нокаутирати страницу, и компоненте ће хандле интеракцију. И ако желе да промене ствари, само се вратите и реци извор података да се мења. Ima smisla? Дакле, Реацт је све о разумевању како да изгради компоненту и како да направите компоненту интеракцију са спољним светом. 

Израда компоненту интеракцију са спољним светом користи другу технологију зове поток који је оквир који је аддед он врх Реацт. Нећемо да причамо о томе. Ми ћемо говорити више о, с обзиром података, како можете донети компоненту? 

И тако Реацт је стварно супер, јер вас Можете га користити са било којим задњем крају желите. Ако имате као Питхон задњем крају, ако ваш Питхон може испљунути неке податке, Реацт може да учини. Ако сте без ЈС излаза података, Реацт то чини. Руби шина са података, Реацт то чини. 

Дакле, Реацт је у суштини веб виев-- предњи крај са компонентама за било ког извора података икаквог. И тако иде од извора података у реагују компоненти је прилично лако. Гоинг Други начин је мало теже. То користи Флук као што сам већ поменуо. Нећемо улазити у то. Ми ћемо се фокусирати више на дата-то-компоненти страну. На овај начин можете направити цоол, фун веб апликације. То неће утицати на спољни свет за сада, али то је друга прича. 

У реду, тако да ако сте били овде фор ми ласт семинара знаћете да су сви кода за Данашњи разговор ће бити на овој адреси овде, жао ми је, овај УРЛ овде. У суштини ћемо ићи кроз четири корака, можда пет, Вероватно не пет. Ми ћемо прећи кроз четири корака изградње узорак Реацт апликацију. И тако све изворног кода за сваки корак на путу ће бити овде, па ако ви после заједно код куће, слободно прегледати овај код. Ако сте после заједно овде, ћемо то показује на екрану, тако да не брините о томе. Али, ако сте код куће, осећам Слободно посетите овај сајт. И, да, требало би да можете да добијете све код сте икада требати овде. Дакле, то је добра варалица стања и за ваше будуће авантуре са Реацт. Цоол, па ако свако ко је овде, па чак и ако сте код куће, подићи овај сајт, ис.гд/цс50реацт, нема капитала, не подвлачење, без ичега. 

Видећете страницу која изгледа мало овако. Ово је ствар која се зове ЦодеПен. ЦодеПен је заједнички кодирање окружење са којима могу писати код овде, и то ће аутоматски бити послат. И на овај начин, могу написати код. Могу покренути код овде. 

За екампле-- и ако релоадс-- види, Трчим ЈаваСцрипт код на страници овде, и то ће аутоматски донесе веб страницу са овим ЈаваСцрипт кода. И то је један од начина за нас да испробате код заиста брзо, без потребе да користите наша ИД или користите наш локални машине или шта год. То је врло брз начин да Моцкуп и тестирају различите врсте кода. 

Зато ћу узимати Пример кода, стављајући га овде. Ми ћемо радити кроз њега. А ако сте код куће, може повући ово као добро. И већ инсталиран Реацт овде, тако да једноставно не могу Овде напиши своје код, и пробајте га као своју игралиште. 

Да, ако сви отвори овај линк овде. Молим вас дајте ми палчеве до кад сте га отворено. Супер, цоол. Овде нема ничега за сада, али ми ћемо то променити врло брзо. 

У реду, тако да Реацт је Јава-скрипта библиотеке, и као таква, захтијева познавање ЈаваСцрипт, што је веб програмски језик. И то се користи и за друге ствари сада превише, али пре свега веб развој језик, па ако нисте упознати са да, прочитајте сајт под називом ЈСфорЦатс.цом. To je divno. Можете научити ЈаваСцрипт za pola sata. То је невероватно. 

Зато га прочитају. Такође је доста ХТМЛ овде, јер ми смо дизајнирању веб странице, наравно. Дакле, ако сте упознати са ХТМЛ цхецк оут ХТМЛдог.цом. Мислим да учи Реацт ис а милион пута лакше већ ако вас знам блокова за изградњу. Ако имате компоненте, то је лако направити већи компоненту. То је Реацт језик за тебе. 

Дакле, само напред и дати ове ствари које читају. Пауза овај видео. Дајте јој читање ако сте код куће ако нисте упознат са ХТМЛ или ЈаваСцрипт У реду, па шта ћемо урадите је да ћемо направити врло основни Фласхцард апликација помоћу Реацт. Ми ћемо имати Фласхцард. Можете флип картицу напред-назад. И такође ћемо имати листу све карте које имамо, а ако се осећате амбициозан, можемо бити у стању да прелазите аутомобили кликом на њих. 

Али ово је, ваш голи кости, веома једноставна Реацт апликацију. И то је заправо не тривијално да спроведе, али ћемо да покажемо да, ако урадите ово, то је врло, врло лако проширити ако други људи да вам помогнем са тим. Тако ћемо проћи кроз четири корака почевши од нуле да се изгради ово. 

ОК, дакле четири корака, ми ћемо кренути са првим кораком. Први корак ће бити градите прву компоненту. Као што сам раније рекао, компонента у Реацт је само један ХТМЛ елеменат на стероидима. Он наводи ХТМЛ а неки понашања, и ће одредити како људи може да сарађује са њим колико то би имало унутрашње стање. Као дугме ће знати колико као а то је кликнуо на пример, и она ће знати како да се нокаутирати. 

Дакле, идемо напред и градимо Прва компонента користећи ЈаваСцрипт. Дакле, ако је синтакса изгледа чудно, то је зато што је врста. Дакле, опет, идемо да направи променљиву названу апликација помоћу кључних речи пусти, што чини променљиву, нека Апп једнак Реацт.цреатеЦласс. 

Реацт је библиотека и има Цреате функцију класе. И ова функција мало код који могу користити да створи нови тип Реацт компоненту. И тако Реацт.цреатеЦласс чини компоненту, и Ова компонента ће бити у стању да уради ствари. Главна ствар је да урадите је рендер нешто, рендер у функцији. 

Опет, ако је овај индекс није очигледно ти, ја препоручујем да наставим ЈС за мачке и цхецк ит оут. Да ли је то зумира довољно добро? Кул. 

Дакле Свака компонента потребе да има оказание функцију. Функција рендер каже, Шта да штампам на екрану? Али компонента је бескорисно ако не знам шта да одштампате на екрану, тако морате да имате рендер функцију. 

Дакле, у рендер ствар, само треба да се врате неке ХТМЛ. А шта је је то кул постоји ствар која се зове ЈСКС, који је продужетак Јавасцрипт који се користе реагује. То је нека сте написали у ХТМЛ Ваше ЈаваСцрипт, која Звучи чудно када прво размислите о томе, али чини пуно смисла касније. Дакле, можемо да урадимо то. Ако сте упознати са ХТМЛ, знам имамо див са опште намене контејнер за ствари. Можемо вратити див, и унутра ово див, можемо ставити ствари. 

Рецимо желимо само да донесе равно-горе Фласхцард за сада. Фласхцард, рекао бих, ће имати питање и одговор. Дакле, у овом див, идемо одштампати један пасус која каже куестион-- Шта је крајњи одговор на живот, универзум? А онда је одговор ће бити, наравно, 42. 

То није дошао на добро. Да, тако у суштини заиста могу напиши ХТМЛ унутар вашег ЈаваСцрипт. И то ће бити одштампан у екран. Па хајде да га испробамо. 

Дакле, имамо компоненту. Морамо да кажемо реаговати да стави компонента на екрану тако Реацт.рендер, тако примећујемо да третирати апликацију као и сваки други елемент. Пишемо га као да је ХТМЛ елеменат. Као уместо да се каже као имг за слику или п за став, пишете Апп, па Апп третирају као ХТМЛ елемент. Као што сам раније рекао, то је елемент на стероидима. 

Тако да донесе Апп, а ви дајте му место да то оставите. И ово је како можете реци то где да га ставите. Ја сам створио једноставан див на страница зове са личном картом странице, и то је место где је Елемент ће ићи. 

И нећемо да ради са ХТМЛ. У основи ово ће добити стави унутар ове странице елемента да имамо на екрану. Тако да води овај код, и то привлачи ово ствар на екрану, тако да ту смо. Направили смо нашу прву компоненту реагује. 

Дакле, само као подсетимо, ми смо направили нежно нови тип компоненте, зар не? То је оно што Реацт.цреатеЦласс. И у том компоненти, ми рекао је оно што треба да уради. Кад год ова компонента је да се штампају на екрану, она ће одштампати ДИВ са два пасуса у њему. 

И оно што смо урадили, направили смо нову апликацију коришћењем угао носача апп запис. Рекли смо га да га стави унутар елемента странице. И оно што сам урадио, је створила нова апликација из тог обрасца. И онда сам га рекао да га донесе. Тако је рекао, у реду, апликација, шта треба да одштампате? Апп каже, иди одштампате див са два става унутар ње. И воила, ту је наша див са два пасуса у њему. Нека сада смисла? 

Дакле, опет, цела изазов Реацт је само знати како да компоненте. Како да чине компоненте раде заједно. Сада када смо направили наш први компонента, хајде да се вратимо и да компоненте прилагодљив. Па знаш како у ХТМЛ си може дати своју дугмад часове? Можете дати свој сидра на хреф. Можете дати свој улаза тип, зар не? Можете дати више обичај својства за све ваше елементе да би било занимљивије. И ми у ствари да урадимо исту ствар. 

Рецимо желимо наше апликација да се донесе било коју карту. Сада смо донио Хардцодед картицу. Ми знамо да је само једна картица може да уради, тако да смо Покушаћу да промени сада толико да бисмо могли да му дати неку картицу. То ће одштампати картицу. 

Требало би да покушате и направите свој компоненте веома опште намене. Дакле, на овај начин бих могао емаил ово је мој пријатељ и бити као, год фласхцард имате, само да се увуче овде, и да ће то учинити по себи. Можете ставити други ствари у вашој апликацији. 

Али прво, хајде да прекинемо ово на две компоненте, али желимо да се одвоји картицу штампа део од стварног апликације дела. Дакле, шта можемо да урадимо да је можете да промените из Апп да ЦардВиев, само ново име за апликацију, и можемо направити нови компонента се зове Апп, не треба мешати са старим Апп. Имамо цреатеЦласс, и као у ХТМЛ-у, можете гнездо Реацт компоненте унутар једни друге. 

Дакле, у овом донесе функцији, Функција повратак ЦардВиев, а то је иста ствар. Погледајте зашто је то иста ствар? Уместо пружања само апликацију која има и див упаривање унутар ње, апликација подноси ЦардВиев, и ЦардВиев чини ДИВ и став. Дакле, ово је наш први пример гнезде елементи унутар једни од других. Da li to ima smisla? Дакле, опет, имамо ЦардВиев елемент. Имамо апликација елементе да је већи од. 

У реду, тако да желимо наш ЦардВиев-- ако вас дати добар ЦардВиев одређену картицу, то ће одштампати за вас, зар не? Прво, морамо да направимо картицу, па хајде да направимо објекат картице. Дакле, да своју картицу екуал-- ако сте сви упознати, ово је само ознака одлука приговор у ЈаваСцрипт. То је нешто као струцт у Ц, па смо направили картицу, па сада можемо проћи ову картицу као имовина или као атрибут у ХТМЛ терминологија нашем апп. Дакле, можемо да урадимо ово, Апп картица једнако миЦард. 

Знате како у улаз, зар не инпут типе једнака текст или дугме класа једнако бтн за Боотстрап ,? Иста идеја, Апп картица екуалс-- мораш да стави протезу овде- Апп картица једнако миЦард, тако да је ово каже да имају ову картицу објекат. Ја ћу да га положе као имовину Апп компоненту. И ова апликација компонента ће моћи да јој приступе и да интересантне ствари са њим. 

Дакле, наша апликација ће бити с обзиром картица, тако да за сада, хајде да имате апликацију само дајте картица за ЦардВиев Сама јер као да апликација није да знам шта да радим са њим, тако да ћу га дати у ЦардВиев. Дакле, ми ћемо га је проћи Исто тако, картица једнако, и тако свака компонента може приступити ствари које су дате на њега. Они могу да приступе својства које су добили на њу Коришћењем овог синтаксу, тхис.пропс.цард. 

Дакле, шта се овде дешава се имате миЦард објекат. Ти то проћи у апп коришћењем апликације картице износи миЦард. Тај објекат картица даје апликацију. Апликација може приступити као тхис.пропс.цард. То је нека врста слике зна шта је извор. 

Ова апликација зна шта је то картица је, а то може да уради ствари са њим. То може да уради израчунавања. То може доносити одлуке засноване од тога. 

За сада, хтео сам да прође тхис.пропс.цард на на ЦардВиев. Нека сада смисла? То ће бити сада више смисла. 

У реду, тако да сада смо у ЦардВиев. Наш ЦардВиев, с обзиром на картицу, треба принт своју питање и одговор. Сада смо само штампани неке Хардцодед питања и одговори. Морамо да схватимо оут-- морамо то аск картицу да нам дали шта је питање и одговор, и затим одштампате ово у екран. 

Дакле, можемо да урадимо ово овде. У рендер бегин-- прво да једнако. Дакле, шта ми радимо овде је ми знамо да картице су нам дали на имовину, jel tako? То нам је дао као улаз. Као да је то скоро као аргументи на функцију. Картица је аргумент Скоро овом ЦардВиев. 

Ми ћемо извући да, и стави га у променљиве питање. Уверите се да је одговор је на варијабилни одговор. Тражи ту карту да одговори. И сад кад имамо ове, уместо штампање тај текст, идемо да одштампате све што нам је дао. 

Дакле, ово стуфф-- тако да ћемо да се угаси Питање Одговор. Да видимо да ли ово ради. Кул, па хајде да корак кроз њега још једном само да будемо сигурни. 

Тако да је моја картица је објекат картица, а ми дају ту карту у апликацију. А апликација ће да узме картица и дају га на ЦардВиев. И ово ЦардВиев каже, ако вас дај ми било фласхцард објекат, Ја ћу исписати своје питање и његов одговор, зар не? 

Дакле, шта могу да урадим да је могу пошаљите код, прва као 10 редова мог кода, до мог пријатеља. Он је могао да уградити у његова примена. И докле год је урадио исту ствар, као ЦардВиев картица једнако ово, докле год је створио ЦардВиев и дао му праве информације, могао је да донесе своју картицу. И тако на овај начин, то је стварно кул начин да изграде компоненте које користе једни друге, зар не? Ова картица, сам могао да објавим ово ЦардВиев на интернету, и људи ће моћи да га користе. У основи, то је као један од стандардне функције у Ц библиотеци. 

То је функција којој неко га је написао. Даш одређену улаз. То ће произвести одређени излаз. Не занима ме како интерно функционише. Докле год му дати право улаз, то ће бити прави излаз. 

И компонента може да помисли на исти начин. Ово је као ЦардВиев библиотека функција. Ако му дати неку картицу као имовине, то ће одштампате садржај те картице. Као да променим своју картицу уместо бити као што је 5 плус 37, да ће сходно томе ажурирати. Дакле, само променом улаз, она добија одређени излаз. Дакле, можете мислити компоненти готово као функције на овај начин, који можете ставити заједно. Можете добити улаз, као што је овај ЦардВиев као улаз, ти излаз. У том случају, излаз је ХТМЛ. Нека сада смисла? Кул, па опет, својства Како можете проћи информације у и од компоненти. 

У реду, па нека ово ствар интерактивни. Сада је некако досадно. Шта је [неразумљиво]? Можете да одштампате неки од, али то је све што могу да урадим. 

Дакле, хајде да се вратимо до старо питање само за сада. ОК, па управо сад ове компоненте су досадни јер сви раде, добију улаз. Они чине излаз, зар не? То је некако досадно. Желимо да имамо компоненти да моћи да нека врста унутрашњег стања, као сећам нешто. 

За фласхцард, за пример, какву државе Можда желите да запамтите за фласхцард? Шта привремени статус Можда желите да запамтите за фласхцард у фласхцард апп? ПУБЛИКА: Да ли је био преврнуо? НЕЕЛ Мехта: Да, у праву. Дакле, можда ћете желети да задржите колосек сте се суочи или су сте лицем на картици. На Фацебоок-у, на пример, ти би Желим да се сетите где у невс феед Да ли ви или воле ко је профил радиш сада. 

На Мессенгер, као што текст те укуцајте у поље за унос, зар не? Ако сте освежите страницу, она нестане. Али ти стварно не занима. То је само привремено. Да? 

ПУБЛИКА: [неразумљиво] НЕЕЛ Мехта: Као блица картица, као што можете видети да се Питање страни или одговор страни? 

ПУБЛИКА: У реду. 

НЕЕЛ Мехта: Као двострана Фласхцард, зар не? Да, тако ви желите да има ту идеју сада Имам својства, која је као улаза, али стање, које је привремена, ух, где сте на страници, зар не? Опет, рекао сам у Фацебоок Мессенгер, ја сам као особа која гледате Фацебоок или ко је профил, зар не? 

Ово је само привремено. Важно је да покаже корисника шта се дешава, али освежите страницу. Није битно. Дакле, то је само привремено стање, тако да све што држава. 

Дакле, опет, ту је држава и реквизите. Реквизити је улаз дат од свог извора података. Држава је као вредности. То је као да ствари чини ствар интерактивни. 

Дакле, у нашем ЦардВиев-- хајде да наш ЦардВиев-- тако да је лепо. Шта ћемо да радимо овде, идемо на додир ЦардВиев и само ЦардВиев. И тако мој пријатељ који је добио ово, они не би приметио никакву разлику. Они неће морати да мењају било који своју шифру, али они би виде своје ЦардВиев добио побољшаном горе. То је лепо део о компонентама. 

У реду, тако да у нашем ЦардВиев, хајде да пробамо и пратити да ли смо постепено до или лицем према доле. У Реацт радимо ово прво наводећи почетно стање. Где је картица почне? 

Зато будите функцију која се зове гетИнитиалСтате функционишу, а ми врати предмет. Овај објекат садржи неке државе, и држава је само кључна вредност пар. Као у упутим, имате кључ и вредност, имате као име је стринг. 

У овом случају, рецимо фронт је истина. То говори да имамо државу. Једна компонента државе је атрибут се зове напред. [Неразумљиво], тако да по дефаулту, ми смо у предњој страни картице, и можемо да променимо ово као што смо флип картицу. Ima smisla? 

У реду, тако да у рендер, сада смо показује питање и одговор. Сада шта треба да урадимо се показати питање ако смо на предњој страни картице тако одговор је за полеђини картице. Зато сте сви правимо картица интерактивни. Дакле, хајде да покушамо да ово овде. Па, прво само да променљиву. Можемо сада питати тхис.стате.фронт. Ми приступамо наводе исти смо приступ реквизити, тако тхис.стате.фронт. 

Ако се предњи смо, а онда текст је тхис.пропс.цард.куестион. Ако смо на предњој страни картица, ми ћемо покушати да зграби Питање из картице. У супротном, ако смо на полеђини картице, шта да радимо? 

ПУБЛИКА: Одговор? 

НЕЕЛ Мехта: Да, тако текст једнако тхис.пропс.цард.ансвер. Али ако приметите, ми користимо држава да донесе одлуку јер сада компоненте ће изгледати другачије заснива искључивање како они комуницирају са њим. Дакле, уместо да одштампа то, само ћемо одштампати текст. Цоол, тако да сада, као што видите, видимо само питање. И ако променимо стање овде ручно да предњи је лажна смо добили 42 бацк. 

Дакле, опет, ова компонента има своју државу. Као дугме зна да ли Прошло је притиснут или не, ово зна шта је на предњи или на леђима. По дефаулту, то је на фронту. И онда ако је на предњој страни, ћемо одштампати питање. Ако је на леђима, ми ћемо одштампати одговор. Дакле, опет, информације обзиром је исти. Али изгледа другачије на основу тога како сте га програмирали. Тако, на пример, Фацебоок Мессенгер, чак и ако добијете исти извор података, можда изгледа другачије јер је држава другачија. Ви гледате Порука различитих особе. 

У реду, тако да је ово све добро и добро, али сада шта је заправо да нас у могућности да промените, да ли наша картица је предња или задња. Ми то можемо урадити додавањем флип дугме, дугме на картицу која ће флип картицу ако је [неразумљиво]. Дакле, хајде да додамо дугме овде, ово дугме, а овај тастер ће рећи салто. 

И тако сада, то не ради ништа. Само лепо изгледа. Оно што можемо да урадимо је да можемо да додамо клик трговине, једнако онцлицк тхис.флип, па ћемо касније дефинисати салто. Али, у основи, онЦлицк је функција која бива назван када корисник кликне га. 

Дакле, тастер ће знати када је био кликнули. Вент то је кликнуо, она ће флип картицу. То је нешто као твој пица испоруке момак. Ти си као, у реду, кад год неко зове ме, ја ћу испоручити пицу, зар не? 

Ви региструје овај слушаоца. Слушаш за састанак. Ако те зове, и када је догађај деси, ви урадите нешто. Можете добити пицу. У том случају, када сте кликнули, можете флип картицу. 

И тако треба да дефинише функција која ће флип картицу, па ћемо написати право овде, флип функцију. И шта мислите Флип урадити? Опет се добија када се зове да кликните на дугме флип. Шта би требало да функција Флип уради? 

ПУБЛИКА: Промена тхис.стате.фронт од истине фалсе фалсе на труе. 

НЕЕЛ Мехта: Да, тако предузети све тхис.фронт је- фронт држава. Узмите предњи државу, ако то је истина, да је лажна. Ако је лажна, да ли је истина, зар не? Дакле, хајде да покушамо то. 

Не можете мењати стање само радећи тхис.стате. Не могу то да урадим. Не могу то да урадим. Морате да користите функцију зове тхис.сетСтате. 

Дакле, можете рећи тхис.сетСтате предњи дебелог црева ово где, опет, узвик тачка значи супротно. Претпостављам да ако ово. стате.фронт је истина, то ће окренути лажна. Тако ћемо поставити државу од тачно на лаж. Ако је лажна, ми ћемо сет је лаж да истина. 

Само приметио да смо кренули и да благо другачије, па хајде да пробамо ово. Бада Бинг, погледај ово. Дугме Флип ће сада пребаците напред да подржи државу. 

И ево где видите Мало магије Реацт. Као да никада није рекао да то поново учини. Ми никада није рекао да исцрта ништа. Ако ово радите без Реацт, ти би мораш-- волим када Флип кликнуто, морао би да исприча ручно поново рендер, зар не? 

Реацт је стварно кул у да ако дају му одређену државу и својства, увек ће донијети исту ствар. И тако, када смо икада мењамо држава и својства, реагују само поново чини целу ствар. Она зна да постоји један-на-један цорреспонденце између државе и параметара и ХТМЛ. Тако да кад год било оних промени за преко одређеног државе, то ће се променити како плата је поново изречена. И тако у суштини Реацт је као чекајући да се промени. 

Кад год се мења нешто, да ће поново донијети целу страницу. И ако звучи неефикасан, то је зато што би, али реагују користи ствар назива Схадов ДОМ. Уместо цртања страницу директно, то одржава виртуелну ХТМЛ дрво у меморији. 

Знате, ХТМЛ је као дрво, као хијерархијске структуре података. У њој се чува лажни дрво у меморији, и кад год ажурирати страницу, да ће извући још један лажњак дрво, и то ће израчунати оно што је потребно променити да би страна да су два стабла једнаки. У основи, то практично поново доноси много. А онда је само желео мења страница у малим Твеакс по потреби, тако да је веома, веома, веома ефикасно. 

Дакле, у основи Реацт ће кад год нешто променити, да ће поново донијети страницу практично. То ће схватити шта треба да променити се прави страница одражавају виртуелни страна, и да ће то урадити. То је виртуелни ДОМ. То је једна од највећих карактеристике Реацт. 

Da li to ima smisla? Neko pitanje? Да? 

ПУБЛИКА: Како упореди даље на МВЦ да смо разговарали о пре као ресурса. 

НЕЕЛ Мехта: Да, питање како то пореди са МВЦ? Питали сте о ресурсима. Па, хајде да причамо о томе како она функционише. 

У МВЦ, ти би ажурира модел. У том случају имали бисмо модел картице. Поглед би имати Флип дугме, а контрола би имати флип функцију. Дакле, поглед ће рећи контролер за Флип. Обрни би рећи Модел променити, зар не? 

И тако, када ти се МВЦ, ти слуша модел да се промени, а ви поново доноси у складу с поглед. Или је само да воле имају контролер. Сачекајте модел да промените, а затим бирати део као ствар da promene. Овде имамо једну ствар, али у великој апликације, морате да бих се сетим шта промена у сваком мјесту, тако да је мало нервира. И тако је лепо Реацт јер има Схадов Дом. То може приуштити да само преписати целу ствар. Не морате да селективно као погодите шта да ажурира. 

На Фацебоок-у ако желите добијете нову поруку, у МВЦ, морали би да се сетим, У реду, промените ствари на врху страна, икона порука. Такође, поп нови прозор на дну. Такође проверите нешто ново у том прозору. Такође, репродукује звук. 

То је пуно ствари излазак у исто време. И тако, ако не имају Схадов Дом, ти би мораш то да радиш ручно јер не можете отарасити целе странице. Не можете себи приуштити да, тако да имате да промените сваку ствар ручно, што је заиста досадан у МВЦ. 

Тако да би био штедљив, они су селективно упдате страницу, која је ефикасан, али и досадни. У Реацт, због Схадов Дом, ти обе ствари бесплатно. То је ефикасан, јер од Схадов дома. Уско грло ажурира страницу. То не иде манипулације стабло. Добијате ефикасност. Такође добити лакоћу употребе јер ако само преписати целу страницу, али само знам, у реду, ствари ће бити на страни негде. То може бити на неком другом месту, али то ће бити на страни, зар не? Дакле, само поново донио цела ствар практично, и можда направити пар промене у самој страници. 

Дакле, опет, у МВЦ иоу би морао да бира између једноставност употребе и ефикасности, и реаговати, обоје добити. Зато је боље. Ima smisla? Чврста. 

У реду, да видимо да поразговарамо мало о кораку 4, Како можемо уградити компоненте. Тако да сада имамо то право. Имамо цоол мало дугме. Можемо да окренемо леђа и даље, и то је све што ради. Рецимо желимо да има још једну компоненту. Рецимо наш фласхцард апликација треба садржи списак свих картица да имате, тако да значи треба да има још једну компоненту. Па, можда га зову поглед листа. Хајде да направимо приказ листе која коегзистира са ЦардВиев, и ова листа поглед и ЦардВиев допасти раде заједно. А можете их комбинујете да нашу апликацију за вас. 

Дакле, прво, хајде да направи пар више карата у праву. Рецимо, шта картице? И само да не морам да давим са куцањем га у, Само ћу да га копирате одавде. И тако ћу да не дај му само једну карту. Ја ћу му дати низ карата. Дакле, прво су апликације искрсло за сада. У реду, тако да ћемо направити ово у стању да обради више картица. Прво, ми ћемо га дати, не само једна картица већ низ карата, као списак од карата. И у овом случају, имамо троје. 

У реду, тако да је апликација ће добити списак картица, и да ће одлучити који један до показати ЦардВиев. ЦардВиев могу само рендер једну карту, али апликацију добија списак свих карата, зар не? 

Дакле, када схватите једну картица дати ЦардВиев, како би претпостављам да би могао да донесе одлуку о томе који картица pokazati? Да вам дати наговештај, то је привремено Бићете прегледате одређену картицу. Ако сте освежите страницу, ви ћете да се вратимо на прву картицу. То је у реду, јер је то привремено. Оно технику бисмо могли користити? 

ПУБЛИКА: Можете направити променљиву тако као сто си имао фронт. Да ли је то истина, можеш има струје картица једнако 1? 

НЕЕЛ Мехта: Да, па смо желе да имају државу, зар не? Ви би користили стање у компонента да схватим коју картицу желимо да добијемо. Као имамо списак све картице, ми ћемо користе државу да схватим један од првих картице, друге картице, треће карте, и тако даље. 

Дакле, апликација тако да се апликација ће добити имају функцију гетИнитиалСтате, гетИнитиалСтате функција повратак. А ми само ћу рећи ацтивеИндек 0. Тако да сада наша апликација има сопствени државу. 

И тако сада рендер, да схватим картица, идемо у низу и зграбите ствар у том индексу. Избор картица једнаке тхис.пропс.цардс тхис.стате.ацтивеИндек. Дакле, као што видите овде, у реквизитима и држава заправо раде заједно. Дакле, сада када имамо ацтивеЦард, ми ћемо га звати ацтивеЦард, па да видимо да ли ово ради. [Неразумљиво] 

Ох, то је био текст грешке. Ах. 

Цоол, да, тако да смо се вратили где смо били пре, зар не? Исти стари програма, осим Сада можемо да подржимо списак картица, а не само једна картица. А сада, опет, ако промените ацтивеИндек, можемо да идемо од 0 до 1, а сада је друга картица, и онда смо отишли ​​до 0. Дакле, овде је нови побољшаном верзијом нашег. 

У реду, тако да сада идемо на приказ листе која приказује све карте у свом програму, тако да ћемо направити нова компонента се зове ЛистВиев. Нека ЛистВиев једнако реацт.цреатеЦласс. Дакле, желимо да донесемо нередоследна Листа са листу ставки за сваку картицу. И тако имамо гомилу карата. Желимо само једну ставку листе за сваку картицу, зар не? Могли би да фор петљу или нешто да направи нову ставку листе. Али начин на који ви то радите у Реацт, користите нешто што се зове карту. Карта је алат или функцију користите да за сваку ставку, води неку функцију, узима повратну вредност и даје то назад. 

Дакле, као пример, имамо низ 1, 2, 3.мап фунцтион-- и овај је скраћеница за фунцтион-- к арров к пута к. Ово каже, за сваки број у 1, 2, 3, узми. Скуаре га, и да га врати. Дакле, шта мислите 1, 2, 3.мап х иде к пута х даје вам дати назад да је ова функција ради на сваком елементу тог низа. 

ПУБЛИКА: 1, 4 9? 

НЕЕЛ Мехта: Да, 1, 4, 9 јер ти 1 раз 1. То вам даје један. То је први елемент. 

2 пута 2 је 4. То је други елемент. 3 пута 3 је 9. То је трећи елемент. Ima smisla? Дакле, карта има вас технику користити у функционалним програмера, нови стил програмирање да уради нешто да сваки елемент у вашем листу. И то звучи познато. Имамо листу картица. Желимо да се са листе за сваки један, тако да ћемо само користити мапу овде. Ми ћемо рећи, нека листу једнаки тхис.пропс, картице, карта. 

И тако добија картицу, ми смо ће генерисати са листе са садржајем страна која картици за њега. Рецимо желимо да дају картице питање тако цард.куестион. Дакле, ова листа садржи низ Ли или Лист итемс где постоји једна листа Ставка за сваку картицу, и који садржи картице питање. Ima smisla? 

Кул, па хајде сада да заправо принт то. Дакле, ми ћемо вратити ул. Унутар тог Списак без редних бројева, само ћемо држати цео списак да су нам дали. Кул. 

У реду, тако да сада ово Лист Виев функционише наћи. Сва питања о приказу листе? Имате гомилу карата. Иоу маке ставку са листе за сваку картицу. А ти си их унутар нередоследна листа, а ти га вратити. Дакле, хајде да делују тако да смо ембед ово унутар наше апликације, тако да можемо да урадимо ово, лист виев. Шта Аргумент да пређемо на листу поглед? Шта својства ми га дати? Запамтите, ако дате то је гомила картица, то ће направити списак видите за ове картице. Дакле, шта бисмо проћи овде као аргумент? ПУБЛИКА: Списак карата? НЕЕЛ Мехта: Да, тако картицама једнако тхис.пропс.цардс, зар не? И тако једини проблем је да само можете окренуо један врхунски ниво елемент у рендер, тако да морате да га замотати у див. To je čudno. Дакле, хајде да видимо да ли је. Да ли то ради? 

Да, изволи. Тако да сада имамо списак картица на дну, и онда имамо нашу ЦардВиев се на врху, и да ће између флип две стране картице. Сада Има ли смисла како сам то урадио? Да, па опет, имамо две компоненте. Прва компонента штампа од сваке картице на листи. То је поглед листе. А друга компонента исписује само ту картицу. Ако му дати одређену картицу, то ће одштампати информације о тој картици и нека ти напред и назад флип. 

Дакле, ако желимо, можемо да покушамо и разговор о додавању неке нове могућности за то. У супротном можемо да причамо мало више око од брзине реактора, или можемо одговорити питања можете имати јер су све основне делове од реаговати да желим да причам о томе. Можемо ићи напред. Можемо одговорити на питања. Kako god hoćeš. 

ПУБЛИКА: Да ли можете користити ЈСКС у нормалном ЈаваСцрипт? Или је то нешто што дошао са [неразумљиво]? 

НЕЕЛ Мехта: Питање је конзерва користите јск са нормалном ЈаваСцрипт? Одговор је потврдан. ЈСКС је само начин да се чини да ваш Јавасцрипт да има ХТМЛ унутар ње, и то саставља у ЈаваСцрипт да нема ХТМЛ унутар њега. Тако приметити то-- тако приметити овде. Ово изгледа као да имате као див а ви имате ствари у њему. 

То саставља на ЈаваСцрипт да Као генерише исту ствар. Претпостављам да оно што ја кажем је да ЈСКС је само синтаксичких, као да је предпроцесор за ЈаваСцрипт много Као ПХП је Претпроцесор за ХТМЛ. АД је предпроцесор за ЈаваСцрипт која омогућава ставите ХТМЛ унутар вашег ЈаваСцрипт. И тако ако имате праву трансформатор што је ствар која се зове [неразумљиво], који ће трансформисати. Право Претпроцесор, то ће вам то дозволити. 

ПУБЛИКА: [неразумљиво] НЕЕЛ Мехта: Обично не треба ставити ХТМЛ унутар ЈаваСцрипт осим ако твоје дело Реацт. Али ти то можеш у сваком случају. Да? 

ПУБЛИКА: Мислим да би описао Реацт као функционални програмирање језика. Ми смо учили Ц у ЦС50. Да ли је Ц такође функционална језик? НЕЕЛ Мехта: Дакле, питање је око функционална у односу на друге ствари која се зове императив или процедурално програмирање. Постоје две врсте програма популарних. Један се зове процедурално, која је све о као раде команде, а једна је функционалан, што је све о томе да функције и има улаз и излаз од њих. Реацт је функционална парадигма. Ц је веома процедурална парадигма. 

И као пример, Ц на пример, то не урадите ово декларативни начин израде програма, зар не? Мораш да кажеш, одштампајте ово. Промените ову структуру података. Принт тхис. То је све о командама. 

У Реацт, нема да многи команде. То је све о томе да Компоненте сте ставили заједно. Они су као функција. Имате као функција зове ЦардВиев, која је функција која има улаз, излаз, па је све Реацт о овом филозофијом нас од хавинг-- имате податке. Ти то проћи кроз ово алгоритам, и то ће излаз ХТМЛ који вас само штампани страницу, па морате да Буилд Ит комад по комад. 

Тако да се направи метафору на оно што Што сам раније рекао, знате како на Фацебоок-у ако добијете поруку, и да изаберете оно што делови за ажурирање, То је процедурално. То је императив, зар не? ОК, имам поруку. Хајде да променимо налог тамо. 

Хајде да поп прозор овде. Хајде да променимо налог тамо. Хајде да ово нацртао овде. То је процедурални приступ. 

То је Које ствари као Угаона, Боост, Бацкбоне, остали оквири користе. Реацт је функционалан. То је веома другачији начин размишљања о стварима. Потребно је ову идеју хајде да функције или алгоритми који ће вас дајте му податке. То ће испљунути шта је треба да буде, а рачунар ће се побринути за вагање напоље. Ви не носити сами. Да ли то има мало смисла? Да? 

ПУБЛИКА: У функционалном језику, све дешава одједном? 

НЕЕЛ Мехта: Не, ствари се дешавају у реду. Као овде још увек има нареди, али то није то десити у редоследу као похвалити, команда, команда. То се дешава у редоследу Функција вам даје излаз. Стави то у неку другу функцију. Стави то у другу функција, друга функција. 

Ако то урадите цс51, ви ћете леарн функционалне програме мало изван обима овог. Али, у основи, оно што чини Реацт кул није само један-пут проток података и виртуелни дом, али ова идеја функционалан програмирање. И функционалан програмирање је врло лако да компонује и да кул ствари из, и то је врло лако да мислимо око и разлог о томе. Дакле, то је још један добар жреб за Реацт. Има ли још питања? Да? 

ПУБЛИКА: Хм, зашто би користе нека насупрот вар? 

НЕЕЛ Мехта: Дакле, питање је зашто користите дозволите уместо вар? Ово је ствар која се зове ЕС6 или за ЕЦМАСцрипт 6. То је нова верзија ЈаваСцрипт. Постоји гомила техничких разлога, али нека је боља верзија вар. 

То је како се прогласи променљиве. Можете користити пустити. Можете користити вар. Нека има гомилу техничких реасонс-- можете их погледаш до латер-- зашто је боље. У суштини, ЕС6 има неке фина Нова синтакса, неке нове функције на врху старог ЈаваСцрипт. 

Дакле, имамо као пет минута. Само сам хтео да причам о Још једна ствар веома брзо. Ако сте имали било каквих питања, хајде да причамо о томе после овога. Али само да ово постане ухваћен на камери, само желим да причам мало о томе како си заправо користе реагује на ваше апликације. 

Ако одеш овде, Фацебоок.ГитХуб.ИО/реацт, Ово је почетна страница за Реацт, и то ће вам показати како се заиста користити Реаговати у вашим страницама. У основи, то је мало компликовано покушавате да инсталирате Реацт. То није тако лако као што једноставно повуците и отпустите ЈаваСцрипт тамо. 

Морате да имате свој трансформатор подесите, који ће, као и раније, укључите јск у нормално ЈаваСцрипт-а. Морате да ствар која ће саставити сте ЕС6 у нормалу. Јавасцрипт има пуно кретања делови што треба да урадите, тако да је ствар зове Иеоман, Иеоман.ио. И то је командна линија алат који ћу помоћи да скеле своју Реацт Пројекти лако. 

Дакле, можете прочитати о томе касније, али постоје неки алат да Иеоман нуди. Они ће дозволити да креирате Реацт апликација са свиме изграђен. Као да ће саградили у, компоненте уграђене. То ће имати ваш трафо изграђен. Они имају много кул ствари изграђен аутоматски Коришћењем ових ствари које се зову генератори. 

Дакле, прочитајте о томе, ако желите. Само иди ИЕОМАН, И-Е-О-м-А-Н, и можете наћи генераторе попут ових. И са произвођачима као што су ово, само бих једну је неколико командна линија команде. То ће скеле од Цео Реацт апликацију за вас. То ће добити све ручно цевовода, и прљав посао уради за вас, и то је разлог зашто се фокусирамо на само писање у Реацт. 

Дакле, у основи изградњи Реацт апликација је нетривијална. То је виред сви заједно, али постоје су алатке које ће то учинити за вас. Дакле, ако желите да направите Реацт апликација, пробајте ради на тај начин. Ако само желите да експериментишу, можете покушати да користите ову ЦодеПен јер ово је ЦодеПен све реагују каблове. Урадио сам сав посао за вас већ. 

Дакле, ако желите да се Лике А производња да се ослободи Реацт апликацију, пробајте једну од ових генератора. Ако само желите да играте око, често вреди само Као покушати играјући се на ЦодеПен овде. Zvuči dobro? Кул. 

Дакле, то је све што имам. Опет, сва шифра и примери су ће бити на овом сајту овде. Дакле, опет, нисмо причали о много синтакса Реацт, али да пронађе све оне мали синтаксичких детаље, све је ће бити доступна на овом сајту овде. 

Тако бих препоручио као ја предузме први корак. Ставите га у свој ЦодеПен. Пробајте ради на изради га на други корак. Постоји и четврти корак, и само види одакле ти од тога. 

Има ли још питања, проверите од те странице или емаил ме. То је мој е-маил. Али волео бих да ти помогнем са било питања која можда имате о Реацт. Дакле, да, то је све што имам. Хвала вам свима пуно на гледања или за присуствовање. А ја ћу узети било каквих питања можда ћете морати након овога сада. Дакле, хвала вам свима за гледање.