[Гуляе музыка] 

Неелі MEHTA: Вось ён ідзе. 

Ну, усё, сардэчна запрашаем на вэб прыкладання ў будучыні з React. Гэта CS50. Мяне клічуць Ніл. Я ТАЯ для CS50 і студэнт-другакурснік ў Гарвардскім каледжы і вельмі, вельмі гарачы вэб-распрацоўшчык. Так што я вельмі займальна гаварыць з вамі сёння, Ці вы тут або ў сябе дома глядзець, аб Рэагаваць, якія, зноў жа як я ўжо сказаў, што будучыня вэб-прыкладанняў. 

Так Рэагаваць з'яўляецца вэб-фреймворк. І, як я казаў для некаторых людзей тут, рамкі проста набор інструментаў вы можаце выкарыстоўваць структураваць і стварыць свой вэб-дадатак. І вэб-прыкладанні, зноў жа, вэб-сайты што з'яўляюцца інтэрактыўнымі, як Facebook, Twitter.com, Instagram.com, што заўгодна. 

Так Facebook з'яўляецца вэб-фреймворк які быў распрацаваны Facebook пару гадоў back-- рэактыў. Гэта тых часоў выкарыстоўваецца ў Facebook на сваіх мабільных прыкладаннях і вэб-дадатак, Instagram. Хан Акадэмія іншы бачны рана ўсынавіцеля React. 

Гэта сапраўды было атрыманне надзвычай папулярныя. Калі вы калі-небудзь выкарыстоўваць нешта накшталт Кутняе або Магістраль, гэта з таго ж сямейства, але з тых часоў далёка апярэдзіць іх папулярнасць. Гэта гарачая новая рэч. Гэта сапраўды, сапраўды велізарны. 

І так добра рэагаваць не толькі як вэб-фреймворк для пабудовы інтэрфейсаў. Гэта добра для стварэння вэб-інтэрфейсаў. Там таксама рэч Рэагаваць называецца Родны якія дазваляе ствараць інтэрфейсы для Android і прашыўкай і, магчыма, іншых платформаў у будучыні выкарыстоўваючы толькі той жа код JavaScript. Вы можаце выкарыстоўваць той жа самы Код JavaScript для адлюстравання вэб-сайтаў, аказваць праграмы і дадатку IOS. 

Гэта вельмі, вельмі захапляльнае час. Гэта сапраўды, сапраўды выдатна магчымасць. Гэта сапраўды універсальны вэб- сродак распрацоўкі інтэрфейсу, так што гэта вельмі, вельмі Важна ведаць. І, як я казаў людзям, раней, гэта, мне здаецца, збіраецца змяніць, як мы пабудаваць вэб-прыкладанняў назаўжды. Так што гэта, можа быць, трохі гіпербала, але я думаю, што гэта даволі добрая рэч, каб ведаць. 

Такім чынам, тое, што рэагаваць? Рэагаваць з'яўляецца асновай можна выкарыстоўваць для будаўніцтва інтэрфейсаў. Інтэрфейс, зноў жа, вэб-старонка, праўда? Дык вось Instagram.com, выкарыстання React. 

Рэагаваць пабудаваны на Ідэя кампанентаў. Кампанент з'яўляецца HTML- элемент на пазіцыі, метадалагічнай, так што HTML-элемент, як кнопкі. Гэта пункт. Гэта загаловак, праўда? І Instagram будзе выкарыстоўваць іх, але гэта таксама будзе выкарыстоўваць кампаненты React. 

Рэагаваць кампаненты фарсіраваным HTML элементы якія маюць сваё ўласнае паводзіны змяшчаюцца ў іх. Так, у якасці прыкладу, мы маглі б час элемент, час кампанент, які будзе ўтрымліваць, як штамп часу, вы ведаеце, кампанент, які Профіль будзе ўтрымліваць малюнак профілю і імя чалавека. Гэта можа быць як лічыльнік, які можа разлічваць як колькасць падобных, і калі вы пстрыкніце па ёй, яна будзе павялічыць лік падобных. Кампанент проста куча HTML код, які мае некаторую функцыянальнасць загорнутыя ўнутр яго. Так што гэта, як HTML элемент на пазіцыі, метадалагічнай, як я ўжо сказаў раней. Вы можаце ўзяць гэтыя кампаненты, і вы можаце пакласці іх разам каб новыя кампаненты, у гэты выпадак, пасада кампанент, які змяшчае ўсе гэтыя рэчы. Гэта будзе ўтрымліваць час, профілю, LikeCounter, магчыма каментар і, магчыма, само малюнак. І так вэб-прыкладанні толькі пабудаваны, прымаючы кампаненты і пакласці іх разам. Бесперапынна падаюць Instagram з'яўляецца не больш, чым куча паведамленняў адно за адным, кожны пост змяшчае як час, Профіль, LikeCounter, і гэтак далей. Гэта свайго роду, як будаваць хату. Вы не будаваць дом зверху ўніз. Вы бераце components-- вас прыняць як ванны пакой. Вы бераце bedroom-- вы прытрымліваецеся іх разам, і ў вас ёсць новы кампанент. У вас ёсць новая частка дома. 

Так Рэагаваць гэта ўсё пабудавана вакол гэтая ідэя кампанентаў, інтэрактыўныя, якія з'яўляюцца дэкларатыўнымі. Як вы толькі што сказалі, што такое профіль, і гэта робіць яго. Яны компонуемы. Вы можаце ўзяць час і профіль, паставіць іх разам, зрабіць што-то лепш. І яны шматразовыя, так што калі вы ёсць зыходны код на пасаду, можна ўбудоўваць што заўгодна. 

Вы можаце ўстаўляць Instagram што на вашым уласным сайце. Вы можаце ўстаўляць у Facebook, напрыклад, тых часоў, пакуль ён выкарыстоўвае React а. Так кампаненты сапраўды, сапраўды, сапраўды магутныя будаўнічыя блокі Сеткі якія могуць быць выкарыстаны ў любым месцы і паставіць разам, каб зрабіць новыя будаўнічыя блокі. Гэта вельмі, вельмі Агляд высокага ўзроўню. Так, зноў жа, калі ў вас ёсць якія-небудзь пытанні ў любым пункце пра філасофію рэактара, у кадаваньне, каб спыніць мяне, і дайце мне ведаць. 

ОК, так што рэагуюць халаднавата, таму што гэта мае іншы погляд на тое, як вы будуеце вэб-прыкладанняў. Вы, напэўна, чулі пра MVC, а Мадэль кіраваць ў CS50 ці ўсё іншы зандзіравання класы вы выкарыстоўваеце. І большасць гэтых рамачных структур пабудаваны вакол ідэі MVC. Рэагаваць няма. Рэагаваць пабудаваны вакол ідэі аднанакіраванага патоку дадзеных як бачна па гэтай карце або графіку тут. 

У прынцыпе, у вас ёсць крыніца дадзеных. А крыніца дадзеных будзе вырашаць як выкласці пэўныя кампаненты. І кампаненты потым, калі яны мяняюцца, яны скажуць Крыніца дадзеных, каб змяніць. 

Для выкарыстання Instagram Напрыклад, вы маглі б спіс паштовых аб'ектаў, такіх як ў базе дадзеных або нешта. Гэта дадзеных. А потым нашы паштовыя кампаненты будзе, што дадзеныя, і выкарыстоўваць гэтыя дадзеныя, каб зрабіць рэч на экране. Гэта тое, што стрэлка ад дадзеных да кампанент, а затым выкарыстоўваецца той жа дадзеныя аказваць кучу кампанентаў. 

У Facebook Messenger, для Прыклад, які з'яўляецца Рэагаваць, Вы маглі б мець спіс Паведамленні ў якасці крыніцы дадзеных. І, што б зрабіць ня толькі спіс паведамленняў але таксама спіс сяброў ў вас ёсць. У вас ёсць непрачытаных. Можа быць, таксама аказваюць самае Facebook гэта ў ніжняй частцы Facebook.com. Тое ж самае дадзеных з'яўляецца адзінай крыніцай ісьціны і што выклікае шмат кампаненты для візуалізацыі. І кожны раз, калі адзін з тых, Кампаненты змяняецца, яна ідзе назад і змены крыніцы дадзеных. 

Вы адпраўляеце паведамленне, праўда? Гэта змяняе крыніца дадзеных. Вы чытаць вашы паведамленні, так што вы ўсталюеце непрачытаных 0. Гэта змяняе крыніца дадзеных. І заўважце, што ўсе гэтыя аднаго стрэлка вяртаючыся да тых жа дадзеных Крыніца, так што вы ведаеце, улічваючы пэўны набор дадзеных, вы сапраўды ведаеце, што старонка будзе выглядаць. Гэта дэтэрмінаваных. Вы ведаеце, прыведзеныя пэўныя дадзеныя, тое, што старонка будзе выглядаць. Вы можаце прадказаць, як яна збіраецца паводзіць сябе і як ідуць справы працаваць, калі яны разам узятыя. 

І калі я быў мільён кампаненты тут, было б паводзіць сябе так жа, праўда? Вы б не любая дзіўныя ўзаемасувязі. Адзін дадзеныя аказалі мільён кампанентаў. Мільён кампаненты могуць вярнуцца і рэдагаваць дадзеныя. І такім чынам, гэта вельмі прыемна. Мы будуем компонуемы, лёгка маштабуюцца вэб-прыкладанняў. 

У вас ёсць адна крыніца дадзеных, крыніца ісціны. Гэта кажа вашыя кампаненты як выкласці старонку, і кампаненты апрацоўкі ўзаемадзеяння. І калі яны хочуць змяніць рэчы, проста вярнуцца і скажыце крыніца дадзеных для змены. Зрабіце пачуццё? Так Рэагаваць гэта ўсё аб разуменні як пабудаваць кампанент і як зрабіць свой кампанент ўзаемадзейнічаць з навакольным светам. 

Стварэнне кампанента ўзаемадзейнічаюць са знешнім светам выкарыстоўвае іншую тэхналогію Паток называецца, што з'яўляецца асновай, якая дадаў зверху React. Мы не будзем казаць аб тым, што. Мы збіраемся казаць пра больш, улічваючы Дадзеныя, як вы можаце зрабіць кампанент? 

І так рэагаваць сапраўды выдатна, таму што вы можаце выкарыстоўваць яго з любым задняй частцы вы хочаце. Калі ў вас ёсць як задні канец Python, калі ваш Python можа выплюнуць некаторыя дадзеныя, Рэагаваць можа зрабіць яго. Калі вы няма выйсця JS дадзеных, рэагаваць робіць яго. Лал рэйках з Дадзеныя, Рэагаваць робіць яго. 

Так Рэагаваць ў асноўным вэб- view-- пярэдні канец з кампанентамі для любога крыніцы дадзеных наогул. І так адбываецца з крыніцы дадзеных рэагаваць кампаненты даволі лёгка. Пераход у іншы бок крыху больш складана. Гэта выкарыстоўвае паток як я ўжо казаў раней. Мы не будзем удавацца ў гэта. Мы засяродзімся больш на Дадзеныя да кампанентнай баку. Такім чынам, вы можаце зрабіць халаднавата, вясёлыя вэб-прыкладанняў. Гэта не паўплывае на знешні свет цяпер, але гэта ўжо іншая гісторыя. 

ОК, так што калі вы былі тут для майго апошняга семінара Вы будзеце ведаць, што ўвесь код для сённяшняя гутарка будзе па гэтым адрасе тут, прабачце, гэты адрас тут. І ў асноўным мы збіраемся пайсці праз чатыры этапы, можа быць, пяць, верагодна, не пяць. Мы будзем рухацца праз чатыры этапы будаўніцтва ўзор Рэагаваць прыкладанне. І так увесь зыходны код для кожнага кроку на шляху будзе прама тут, так што калі вы вынікаеце дома, не саромейцеся, каб праглядзець гэты код. Калі вы вынікаеце тут, мы будзем паказваць яго на экране, так што не хвалюйцеся пра гэта. Але калі вы знаходзіцеся дома, адчуваюць сябе бясплатна наведаць гэты вэб-сайт. І, так, вы павінны быць у стане атрымаць увесь код, калі-небудзь трэба тут. Так што гэта добры шпаргалка а таксама для вашых будучых прыгоды з React. Крута, так што калі ўсё, хто тут, і нават калі вы знаходзіцеся дома, падцягнуць гэты сайт, is.gd/cs50react, няма капіталу, няма падкрэслення, няма нічога. 

Вы ўбачыце старонку, якая выглядае трохі як гэта. Гэта тое, што называецца CodePen. CodePen з'яўляецца сумесным серада кадавання з якой я магу напісаць код тут, і ён будзе аўтаматычна адпраўлены да вас. І такім чынам, я магу напісаць код. Я магу запусціць код тут. 

Для example-- а калі reloads-- см, Я бягу код JavaScript на старонцы прама тут, і гэта аўтаматычна зрабіць вэб-старонку з гэтым JavaScript кода. І так гэта спосаб для нас, каб паспрабаваць код вельмі хутка, без выкарыстання наша пасведчанне або выкарыстоўваць наш лакальны кампутар ці нешта. Гэта вельмі хуткі спосаб для вас, каб макет і праверыць розныя віды кода. 

Так што я збіраюся браць Прыклад кода, паставіўшы яго тут. Мы будзем працаваць праз яго. І калі вы дома, вы можа ажыццявіць гэта, а таксама. І я ўжо ўсталяваны Рэагаваць тут, так што вы можаце проста напісаць свой уласны код тут, і паспрабуйце яго як свой уласны гульнявой пляцоўцы. 

Так, калі ўсё ў адкрыць гэтую спасылку тут. Калі ласка, дайце мне вялікі палец адзін раз ён у вас адчыненыя. Прахладны, халаднавата халаднавата. Там нічога няма цяпер, але мы будзем мяняць, што вельмі хутка. 

ОК, так што гэта рэагаваць JavaScript бібліятэка, і, такім чынам, патрабуе веды JavaScript, які з'яўляецца мова вэб-праграмавання. І ён выкарыстоўваецца для іншых рэчаў цяпер таксама але ў першую чаргу вэб-распрацоўкі мова, так што калі вы не знаёмыя з што, чытаць сайт пад назвай JSforCats.com. Гэта выдатна. Вы можаце даведацца JavaScript у паўгадзіны. Гэта неверагодна. 

Так дайце яму пачытаць. Мы таксама шмат HTML тут, таму што мы праектавання вэб-старонак, вядома. Так што, калі вы не знаёмыя з HTML, праверыць HTMLdog.com. Я думаю, што вывучэнне Рэагаваць з'яўляецца мільён разоў лягчэй, калі вы ўжо ведаеце будаўнічыя блокі. Калі ў вас ёсць кампаненты, гэта лёгка зрабіць больш кампанент. Гэта Рэагаваць мова для вас. 

Так ісці наперад і даць гэтыя рэчы, чытаць. Паўза відэа. Дайце яму чытаць, калі вы дома, калі вы не знаёмыя з HTML або JavaScript Такім чынам, тое, што мы збіраемся зрабіць, мы збіраемся зрабіць вельмі просты флэш прыкладанне, з дапамогай React. Мы збіраемся, каб мець флэш-карту. Вы можаце перавярнуць карту і назад. І мы будзем таксама спіс усе карты, якія ў нас ёсць, і калі мы адчуваем сябе амбіцыйныя, мы маглі б быць магчымасць пераключэння паміж аўтамабілі, націснуўшы на іх. 

Але гэта, голымі косткі, вельмі просты Рэагаваць прыкладанне. І так гэта на самай справе не проста рэалізаваць, але мы збіраемся паказаць, што, калі ў вас гэта, гэта вельмі, вельмі лёгка пашыраць, калі іншыя людзі вам дапамагчы ў гэтым. Такім чынам, мы збіраемся прайсці праз чатыры этапы пачынаючы з нуля, каб пабудаваць гэта. 

Такім чынам, чатыры кроку, мы будзем пачаць з першага кроку. Першым крокам будзе будаваць свой першы кампанент. Як я ўжо казаў раней, складнік у Рэагаваць гэта проста HTML-элемент на пазіцыі, метадалагічнай. Ён вызначае HTML і некаторыя паводзіны, і будзе паказаць, як людзі можа ўзаемадзейнічаць з ім хаў ён будзе мець ўнутраны стан. Як кнопка будзе ведаць, напрыклад, колькі раз гэта была націснутая, напрыклад, і ён будзе ведаць, як закласці сам сябе. 

Так што давайце ісці наперад і будаваць нашу Першы кампанент, выкарыстоўваючы JavaScript. Так што, калі сінтаксіс выглядае дзіўна, гэта таму, што гэта накшталт ёсць. Так, зноў жа, мы збіраемся зрабіць зменную Дадатак з дапамогай хай ключавое слова, што робіць зменную, хай App роўны React.createClass. 

Рэагаваць бібліятэка і мае функцыю Стварыць класа. І гэтая функцыя трохі кода, які вам можна выкарыстоўваць для стварэння новага тып Рэагаваць кампанент. І так React.createClass робіць кампанент, і гэты кампанент будзе быць у стане зрабіць рэчы. Галоўнае гэта можа зрабіць, гэта зрабіць тое, аказваюць як функцыя. 

Зноў жа, калі гэты паказчык не з'яўляецца відавочным для Вы, я рэкамендую вам пайсці на JS для котак і праверыць яго. Хіба што павялічана дастаткова добра? Прахладны. 

Такім чынам, кожны кампанент павінен мець функцыю візуалізацыі. Функцыя візуалізацыі кажа, што я друкаваць на экране? Але кампанент бескарысны, калі ён не Ведайце, што друкаваць на экране, так што Вы павінны мець аказанне функцыю. 

Такім чынам, у самае зрабіць, вы проста трэба вярнуцца трохі HTML. І тое, што гэта крута, што ёсць тое, што называецца JSX, якая з'яўляецца працягам JavaScript, які выкарыстоўваецца рэагуюць. Гэта дазволіць Вам напісаць HTML ўнутры Вашага JavaScript, які Гучыць крыху дзіўна, калі спачатку думаць пра гэта, але ён робіць шмат сэнсу пазней. Такім чынам, мы можам зрабіць гэта. Калі вы знаёмыя з HTML, я ведаю, у нас ёсць DIV з агульнага прызначэння кантэйнер для рэчаў. Мы можам вярнуць DIV, а ўнутры гэта DIV, мы можам пакласці рэчы. 

Так што давайце казаць, што мы хочам, каб зрабіць проста прама-уверх флэш цяпер. Флэш, я б сказаў, будзе мець пытанне і адказ. Так ўнутры гэтага DIV, давайце раздрукаваць пункт што кажа question-- Што такое канчатковы адказ на жыццё, сусвет? І тады адказ будзе, вядома, 42. 

Гэта не прыдумаць добра на ўсіх. Так, так у асноўным вы сапраўды можаце напісаць HTML ўнутры вашай JavaScript. І гэта будзе раздрукаваць на экран. Так давайце паспрабуем гэта. 

Такім чынам, мы маем кампанент. Мы павінны сказаць Рэагаваць паставіць кампанент на экране так React.render, так заўважыце, што мы лячэння дадатак, як і любы іншы элемент. Мы пішам гэта, паколькі гэта быў элемент HTML. Як замест таго каб сказаць, як IMG для малюнка або р для пункта, Вы пішаце дадатак, так гэта дадатак ставіцца як да HTML элемента. Як я ўжо казаў раней, гэта элемент на пазіцыі, метадалагічнай. 

Такім чынам, вы зрабіць дадатак, і вы даць яму месца, каб змясціць яго. І гэта, як вы можаце сказаць яму, дзе яго паставіць. Я стварыў просты DIV на старонка выклікаецца з ID старонкі, і вось дзе элемент збіраецца ісці. 

І мы не збіраемся працаваць з HTML. У асноўным гэта адбываецца, каб атрымаць пакласці ўнутр гэтага элемента старонкі што ў нас ёсць на экране. Так ён працуе гэты код, і гэта прыцягвае гэта што на экране, так што тут мы. Мы зрабілі наш першы Рэагаваць кампанент. 

Гэтак жа, як паўтор, мы акуратна зрабіў новы тып кампанента, праўда? Гэта тое, што React.createClass. І ў гэтым кампаненце, мы сказаў яму, што ён павінен рабіць. Кожны раз, калі гэты кампанент з'яўляецца надрукаваць на экране, гэта выведзе DIV з два пункты ў гэтым. 

І тое, што мы зрабілі, мы зрабілі новае прыкладанне выкарыстоўваючы пазначэння кутка прыкладанне. Мы сказалі гэта, каб пакласці яго ўнутры элемента старонкі. І так, што я зрабіў, гэта стварыў новае прыкладанне з гэтага шаблону. І тады я сказаў гэта, каб зрабіць гэта. Так сказаў, добра, прыкладанне, што я павінен раздрукаваць? App кажа, перайдзіце раздрукаваць DIV з двума пунктамі ўнутры яго. І вуаля, ёсць наша DIV з два абзаца ўнутры яго. Зрабіце пачуццё да гэтага часу? 

Так, зноў жа, уся праблема Рэагаваць проста ведаючы, як зрабіць кампаненты. Як зрабіць кампаненты працуюць разам. Цяпер, калі мы зрабілі наш першы Кампанент, давайце вернемся і зрабіць наладжвальныя кампаненты. Такім чынам, вы ведаеце, як у HTML вы можа даць свае кнопкі класы? Вы можаце даць вашым якара ў HREF. Вы можаце даць вашым ўваходы тыпу, праўда? Вы можаце даць больш звычай ўласцівасці на ўсе вашы элементаў каб зрабіць яго больш цікавым. І мы на самай справе можам зрабіць дакладна такая ж рэч. 

Так што давайце казаць, што мы хочам, каб нашы Дадатак ісці аказаць любую карту. Зараз мы проста аказана жорстка запраграмаваны карту. Мы ведаем, што ёсць толькі адзін карта можа зрабіць, так што мы збіраюся паспрабаваць і змяніць гэта цяпер так што мы можам проста даць яму некаторы карту. Гэта будзе раздрукаваць карту. 

Вы павінны паспрабаваць і зрабіць свой кампаненты вельмі агульнага прызначэння. Так што гэта, як я мог адправіць гэта мой сябар, і быць, як усе флэш ў вас ёсць, проста карміць яго ў тут, і ён будзе рабіць гэта сам па сабе. Вы можаце паставіць іншы рэчы ў вашай ўласнай дадатку. 

Але спачатку, давайце разбярэм гэта на дзве складнікі, але мы хочам, каб аддзяліць карты друк частка з фактычнага прыкладанне часткі. Такім чынам, што мы можам зрабіць, гэта мы можаце змяніць гэта з App каб CardView, проста Новую назву для прыкладання, і мы можам зрабіць новы кампанент, званы дадатак, не блытаць са старым App. Мы атрымалі createClass, і як у HTML, Вы можаце гняздо Рэагаваць кампаненты ўнутры адзін аднаго. 

Такім чынам, у гэтым аказаць функцыі, Функцыя вяртання CardView, і гэта дакладна такая ж рэч. Даведайцеся, чаму гэта ж самае? Замест аказання толькі дадатак, якое мае DIV і спарванне ўнутры яго, прыкладанне робіць CardView, і CardView аказвае DIV і пункт. Так што гэта наш першы прыклад гнездавання элементы ўнутры адзін ад аднаго. Ці мае гэта сэнс? Так, зноў жа, у нас ёсць элемент CardView. У нас ёсць прыкладанне элементы што гэта больш, чым. 

Такім чынам, мы хочам, каб нашы CardView-- калі вы даць добры CardView пэўны карты, гэта будзе раздрукаваць для вас, дакладна? Такім чынам, спачатку мы павінны зрабіць карту, так давайце зробім аб'ект карты. Такім чынам, давайце маю картку equal-- калі вы ўсё знаёмыя, гэта проста абазначэнне рашэнняў аб'ект у JavaScript. Гэта накшталт як структуры ў C, таму мы зрабілі карту, і зараз мы можам перайсці гэтую карту як ўласцівасць або як атрыбут ў HTML тэрміналогія наша дадатак. Такім чынам, мы можам зрабіць гэта, прыкладанне карта роўная myCard. 

Вы ведаеце, як на ўваходзе, вы Тып уваходнага роўная тэкст або кнопку Клас роўная BTN для пачатковай загрузкі,? Тая ж самая ідэя, прыкладанне карты 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-- так што мы збіраемся патушыць пытанне адказ. Давайце паглядзім, калі гэта працуе. Крута, так што давайце крок праз яго яшчэ раз проста каб быць упэўненым. 

Так што мая карта з'яўляецца аб'ектам карты, і мы даюць гэтую карту ў дадатку. І прыкладанне будзе ўзяць карта і даць яго ў CardView. І гэта кажа CardView, калі вы даць мне любы аб'ект флэш, Я раздрукаваць яго пытанне і адказ, правільна? 

Так што я мог зрабіць, гэта я магу адправіць гэты код, першы як 10 ліній майго кода, да майго сябру. Ён мог ўстаўляць яго ў яго ўласнае прыкладанне. І да таго часу, як ён зрабіў тое ж самае, як CardView карты роўны гэта, тых часоў, як ён стварыў CardView і даў яму патрэбную інфармацыю, ён мог бы аказаць сваю картку. І таму гэты шлях, гэта сапраўды добры спосаб для вас, каб пабудаваць кампаненты, якія выкарыстоўваюць адзін аднаго, праўда? Гэтая карта, я мог апублікаваць гэта CardView ў Інтэрнэце, і людзі будуць мець магчымасць выкарыстоўваць яго. Таму ў асноўным, гэта як адзін з Стандартныя функцыі ў бібліятэцы C. 

Гэта функцыя, дзе нехта напісаў яго. Вы даеце пэўную ўваход. Гэта будзе вырабляць пэўны выхад. Вы не хвалюе, як яна працуе ўнутры. Пакуль вы даеце яму права ўваход, гэта будзе зрабіць правільны вывад. 

І кампанент можа быць падумаў пра такім жа чынам. Гэта, як CardView бібліятэчная функцыя. Калі вы даеце яму некаторы карту як ўласцівасць, то гэта раздрукаваць змесціва гэтай карты. Як калі б я змяніць сваю карту замест гэтага, як тое, што 5 плюс 37, яна абновіць адпаведна. Так, проста змяніўшы ўваход, ён атрымлівае пэўную выснову. Такім чынам, вы можаце думаць кампанентаў амаль як функцыі на гэтым шляху, якія Вы можаце змясціць разам. Вы ўваход, як гэты CardView як уваход, вы атрымаеце выхад. У гэтым выпадку, выйсце ёсць HTML. Зрабіце пачуццё да гэтага часу? Прахладны, так што зноў, ўласцівасці як вы можаце перадаць інфармацыю у і з кампанентаў. 

Такім чынам, давайце зробім гэта рэч інтэрактыўным. Цяпер гэта сумна. Што [неразборліва]? Вы можаце раздрукаваць некаторыя з, але гэта ўсё, што можна зрабіць. 

Такім чынам, давайце вернемся да стары пытанне толькі цяпер. Такім чынам, цяпер гэтыя кампаненты сумна, таму што яны ўсё робяць, яны атрымліваюць ўваход. Яны робяць выхад, праўда? Гэта сумна. Мы хочам, каб нашы Кампаненты, каб мець магчымасць мець свайго роду ўнутраны стан, як нешта ўспомніць. 

Для флэш для Напрыклад, якая дзяржава можа вы хочаце, каб запомніць на флэш? Што часовы статус можа вы хочаце, каб памятаць для флэш ў флэш прыкладанне? АЎДЫТОРЫЯ: Калі гэта было адлюстравана? Неелі MEHTA: Так, дакладна. Такім чынам, вы, магчыма, захочаце, каб трымаць трэк вы тварам уверх ці Вы тварам уніз на карту. На Facebook, напрыклад, вы б хачу ўспомніць, дзе ў стужцы навін ты ці як хто профіль Вы робіце прама цяпер. 

На Messenger, як тое, што тэкст, які вы ўвядзіце ў поле ўводу, праўда? Калі вы абновіце старонку, яна сыходзіць. Але вы на самой справе не хвалюе. Гэта проста часовае. Да? 

АЎДЫТОРЫЯ: [неразборліва] Неелі MEHTA: Як ўспышка карта, як вы можаце бачыць бок пытанне або збоку адказ? 

АЎДЫТОРЫЯ: ОК. 

Неелі MEHTA: Як і двухбаковы флэш-карту, праўда? Так, так што вы хочаце, каб ёсць гэтая ідэя ў цяперашні час У мяне ёсць ўласцівасці, якія, як ўваходы, але дзяржава, якое з'яўляецца часовым, э-э, дзе вы знаходзіцеся на старонцы, праўда? Зноў жа, я сказаў у Facebook Пасланец, у мяне ёсць, як чалавек, які Вы праглядаеце Facebook ці хто профіль, праўда? 

Гэта толькі часова. Важна, каб паказаць карыстачу тое, што адбываецца, але абновіце старонку. Гэта сапраўды не мае значэння. Так што гэта часовае стан, так што мы ўсё гэта дзяржава. 

Так, зноў жа, ёсць дзяржава і рэквізіт. Рэквізіт з'яўляецца ўвод улічваючы з крыніцы дадзеных. Дзяржава, як па змаўчанні. Гэта проста, як рэчы, якія робіць рэч інтэрактыўным. 

Такім чынам, у нашым CardView-- давайце наш CardView-- так што было прыемна. Тое, што мы збіраемся зрабіць тут, мы збіраемся закрануць CardView і толькі CardView. І так мой сябар, які атрымаў гэта, яны не заўважыце ніякай розніцы. Яны не давядзецца мяняць любы з іх уласнага кода, але яны убачыць іх CardView атрымаў новаспечаным да. Гэта добры частка аб кампанентах. 

Такім чынам, у нашым CardView, давайце паспрабуем адсочваць Ці мы паступова да або асобай ўніз. У Рэагаваць мы робім гэта спачатку заданні пачатковага стану. Дзе карта пачаць? 

Так што функцыя пад назвай getInitialState функцыянаваць, і мы вяртаем аб'ект. Гэты аб'ект змяшчае некаторы стан, і стан гэта проста пара ключ-значэнне. Як і ў настаўляць вас ёсць ключ і Значэнне, вы павінны, як клічуць радок. 

У гэтым выпадку, скажам, фронт праўда. Гэта сведчыць, што ў нас ёсць дзяржава. Адным з кампанентаў дзяржавы з'яўляецца атрыбутам называецца пярэдняй. [Неразборліва], так што па змаўчанні, мы ў пярэдняй частцы карты, і мы можам змяніць гэта як мы фліп карты. Зрабіце пачуццё? 

Такім чынам, у візуалізацыі, прама зараз, мы паказваючы пытанне і адказ. Цяпер тое, што мы павінны зрабіць, з'яўляецца паказаць пытанне калі мы на адным баку карты, так адказ на адваротным баку карты. Вось чаму вы ўсё робяць карта інтэрактыўная. Так давайце паспрабуем і гэта тут. Ну, па-першае проста зрабіць зменную. Мы можам папрасіць Цяпер this.state.front. Мы звяртаемся да канстатаваць ж мы рэквізіт доступу, так this.state.front. 

Калі мы спераду, то тэкст гэта this.props.card.question. Калі мы на пярэдняй часткі карта, мы збіраемся, каб паспрабаваць захапіць і пытанне з карты. У адваротным выпадку, калі мы на спіне карты, што мы робім? 

Аўдыторыя: адказ? 

Неелі MEHTA: Так, так тэкст роўная this.props.card.answer. Але калі вы заўважылі, мы выкарыстоўваем дзяржава, каб прыняць рашэнне Таму што цяпер кампанента будзе адрознівацца заснаваныя ад, як яны ўзаемадзейнічаюць з ім. Такім чынам, замест раздрукоўкі гэтага, мы проста раздрукаваць тэкст. Крута, так што зараз, як бачыце, мы бачым толькі пытанне. І калі я змяніць стан тут ўручную каб фронт фальшывага мы атрымліваем 42 таму. 

Так, зноў жа, гэты кампанент мае сваё ўласнае дзяржава. Як кнопка, ці ведае гэта была націснутая або няма, гэтая рэч ведае, што на пярэднія або на спіне. Па змаўчанні, гэта на фронце. І потым, калі ён знаходзіцца на фронце, мы раздрукаваць гэтае пытанне. Калі гэта на спіне, мы будзем раздрукаваць адказ. Так, зноў жа, інфармацыя улічваючы тое ж самае. Гэта проста выглядае інакш на аснове, як вы программируете яго. Так, напрыклад, Facebook Messenger, нават калі вы атрымаеце той жа крыніца дадзеных, гэта можа выглядаць па-рознаму таму што дзяржава адрозніваецца. Вы глядзіце на Паведамленне розныя чалавекі. 

ОК, так што гэта ўсё добра і добра, але цяпер, што на самой справе робяць нас у стане змяніць, будзь наша карта спераду або ззаду. Мы можам зрабіць гэта, дадаўшы фліп Кнопка, кнопка на карту, што пстрыкне карту, калі гэта [неразборліва]. Так давайце дадамо кнопку тут, гэта Кнопка і гэтая кнопка будзе сказаць, фліп. 

І так зараз, гэта нічога не рабіць. Гэта проста выглядае прыгожа. Што мы можам зрабіць, гэта мы можам дадаць пстрычка апрацоўшчык, OnClick роўная this.flip, і мы вызначым фліп пазней. Але ў прынцыпе, OnClick гэта функцыя, якая выклікаецца, калі карыстальнік націскае яе. 

Такім чынам, кнопка ведаць калі гэта была націснутая. Пайшоў ён быў пстрыкнулі, ён будзе перавярнуць карты. Гэта свайго роду, як вашыя дастаўка піцы. Ты як, усё ў парадку, калі хто-то называе мяне, я буду пастаўляць піцу, праўда? 

Вы рэгіструеце гэты прыёмнік. Вы прыслухайцеся да падзеі. Вы датэлефанаваліся, і калі Падзея адбываецца, вы нешта. Вы піцу. У гэтым выпадку, калі вы націснуў, вы перавярнуць карты. 

І таму мы павінны вызначыць функцыя, якая будзе перавярнуць карты, такім чынам, мы напішам гэта права тут, фліп функцыі. І так, што вы думаеце, фліп будзе рабіць? Зноў жа, гэта выклікаецца пры мы націсніце кнопку фліп. Што функцыя сальта рабіць? 

АЎДЫТОРЫЯ: Змяніць this.state.front ад праўдзівага на ілжывае, ілжывае да ісціны. 

Неелі MEHTA: Так, так узяць усё, што this.front is-- пярэдняя дзяржава. Вазьміце пярэднюю стан, калі гэта праўда, зрабіць гэта хлусня. Калі яно ілжыва, зрабіць гэта праўда, праўда? Так давайце паспрабуем гэта. 

Вы не можаце змяніць стан проста рабіць this.state. Вы не можаце зрабіць гэта. Вы не можаце гэтага зрабіць. Вы павінны выкарыстоўваць функцыю называецца this.setState. 

Такім чынам, вы можаце сказаць, this.setState пярэдняя тоўстай кішкі, дзе гэта, зноў жа, ўсклік Кропка азначае адваротнае. Я думаю, калі гэта. state.front Праўда, гэта будзе ператварыць хлусня. Такім чынам, мы ўсталяваць стан ад праўдзівага на ілжывае. Калі яно ілжыва, мы будзем ўсталяваць яго фальшывага на сапраўднае. 

Проста звярніце ўвагу, што мы ўсталёўваем і атрымаць трохі па-рознаму, і таму давайце паспрабуем гэта. Бада Бінг, паглядзіце на гэта. Кнопка фліп цяпер будзе пераключыць спераду назад дзяржавай. 

І так вось дзе вы бачыце трохі магіі React. Як мы ніколі не казалі гэта, каб гэта зноў вынесці. Мы ніколі не казалі, што гэта перамаляваць нічога. Калі вы робіце гэта без Рэагаваць, вы б ўжо, мэтай якіх любяць, калі іх фліп кнопка націснутая, Вы павінны былі б сказаць яму, каб ўручную паўторна вынесці, ці не так? 

Рэагаваць на самай справе халаднавата, што калі вы даць яму пэўны стан і ўласцівасці, яна заўсёды будзе аказваць дакладна такая ж рэч. І таму, калі мы калі-небудзь мы мяняем стан і ўласцівасці, рэагаваць проста паўторна робіць усё гэта. Ён ведае, што ёсць дакладнае адпаведнасць паміж дзяржавай і параметру і HTML. Таму, калі любы з гэтых змены па праз ўключаным стане, яна будзе мяняцца, як заработная плата паўторна вынесена. І так у асноўным, як рэагаваць чакае вас, каб змяніцца. 

Кожны раз, калі сёе-тое мяняе, гэта будзе паўторна вынесці ўсю старонку. І калі гэта гучыць неэфектыўна, гэта таму, што гэта было б, але рэагаваць выкарыстоўвае рэч называецца Shadow DOM. Замест таго каб маляваць старонку наўпрост, гэта трымае віртуальны HTML дрэва ў памяці. 

Вы ведаеце, HTML, як дрэва, як іерархічную структуру дадзеных. Яна захоўвае падробленыя дрэва ў памяці, і кожны раз, калі вы абновіце старонку, гэта будзе зрабіць яшчэ адзін фальшывы дрэва, і ён будзе вылічыць тое, што змяніць яго трэба зрабіць Старонка зрабіць два дрэва роўныя. Таму ў асноўным, гэта практычна Re-аказвае шмат. А потым толькі хацеў мяняецца старонка маленькіх хітрыкаў пры неабходнасці, так што гэта вельмі, вельмі, вельмі эфектыўным. 

Так у асноўным Рэагаваць будзе калі вы нешта змяніць, гэта будзе паўторна адлюстраваць старонку віртуальна. Гэта будзе высветліць, што мне трэба, каб змяніць, каб зрабіць рэальны старонка адлюстроўваюць віртуальны старонка, і ён будзе рабіць гэта. Гэта віртуальны дом. Гэта адзін з найбуйнейшых асаблівасці React. 

Ці мае гэта сэнс? Любыя пытанні? Да? 

АЎДЫТОРЫЯ: Як параўнаць яшчэ для MVC што мы гаварылі пра Перад як рэсурсаў. 

Неелі MEHTA: Так, пытанне як яна суадносіцца з MVC? Вы спыталі пра рэсурсы. Ну, давайце пагаворым пра тое, як ён функцыянуе. 

У MVC, вы абнавіць мадэль. У гэтым выпадку мы маем мадэль карты. Выгляд б мець фліп кнопку, і кантроль будзе мець функцыю Flip. Такім чынам, выгляд будзе расказаць Кантролер перавярнуць сальта. Фліп б расказаць Мадэль змяніць, праўда? 

І таму, калі вы робіце MVC, вам слухаць мадэль, каб змяніць, і вы паўторна вынесці меркаванне адпаведна. Ці вы проста павінны любіць ёсць кантролер. Пачакайце, мадэль змяніць, а затым выбіраць частка як рэч змяніць. Тут мы маем адно, але ў вялікай дадатку, Вы павінны памятаць, што падабаецца змяненне ў кожным адным месцы, так што гэта крыху раздражняе. І так прыемна Рэагаваць таму што ён мае Shadow Dom. Гэта можа дазволіць сабе толькі перапісаць усю рэч. Вы не павінны выбарачна як адгадаць, што трэба абнавіць. 

На Facebook, калі вам падабаецца атрымаць новае паведамленне, у MVC, вам давядзецца запомніць, ОК, змяніць тое, што у верхняй частцы старонка, значок паведамлення. Таксама поп новае акно ў ніжняй часткі. Таксама зрабіць новую рэч у гэтым акне. Акрамя таго, гуляць гук. 

Гэта шмат рэчаў выходзячы пры гэтым. І так, калі вы не ёсць цень Dom, вы б павінны зрабіць гэта ўручную, таму што Вы не можаце пазбавіцца ад усёй старонкі. Вы не можаце дазволіць сабе, так што вы павінны змяніць кожную рэч ўручную, што сапраўды раздражняе ў MVC. 

Таму для таго, каб быць ашчадны, яны выбарча абнавіць старонку, якая эфектыўнасць, але і раздражняе. У Рэагаваць, з-за цені Дом, вы атрымліваеце абедзве рэчы бясплатна. Гэта эфектыўна, таму што Ценявога Dom. Вузкім месцам абнаўляе старонку. Гэта не робіць маніпуляцыю дрэва. Вы атрымліваеце эфектыўнасць. Вы таксама атрымліваеце зручнасць выкарыстання, таму што калі вы проста перапісаць усю старонку, але вы проста ведаю, усё ў парадку, то, будуць на старонцы дзе-небудзь. Гэта можа быць у іншым месцы, але гэта будзе на старонцы, праўда? Такім чынам, вы проста паўторна вынесена уся рэч практычна, і вы маглі б зрабіць пару змены ў самой старонцы. 

Так, зноў жа, у MVC вас прыйдзецца выбіраць паміж прастатой выкарыстання і эфектыўнасці, і рэагаваць, вы атрымліваеце абодвух. Так што лепш. Зрабіце пачуццё? Цвёрдае рэчыва. 

Такім чынам, давайце паглядзім, давайце пагаворым трохі пра крок 4, як мы можам ўстаўляць кампаненты. Такім чынам, мы маем гэта цяпер. У нас ёсць трохі прахалоднай кнопку. Мы можам перавярнуць яго назад і наперад, і гэта ўсё, што ён робіць. Скажам, мы хочам, каб ёсць яшчэ адзін кампанент. Скажам, наша флэш прыкладанне павінна змяшчаць спіс усіх карт што ў вас ёсць, так што азначае, што мы павінны мець іншы кампанент. Ну, можа быць, назваць яе ў выглядзе спісу. Давайце зробім выгляд, што ліст суіснуе з CardView, і гэтая кропка гледжання пералік і CardView спадабаецца працаваць разам. І вы можаце камбінаваць іх каб наша дадатак для вас. 

Такім чынам, спачатку давайце зробім яшчэ пару карт правільна. Давайце казаць, якія карты? І толькі таму я не прыйдзецца стамляць вас набраўшы яго, Я проста хачу, каб скапіяваць яго адсюль. І таму я буду ня даць яму толькі адну карту. Я збіраюся даць яму масіў карт. Таму спачатку прыкладання зломіць цяпер. Добра, так што мы збіраемся зрабіць гэта магчымасць працаваць з некалькімі картамі. Такім чынам, спачатку мы збіраемся даць яго, ня толькі адна карта, але масіў карт, як спіс карт. І ў гэтым выпадку, у нас ёсць тры з іх. 

Добра, так так прыкладанне збіраецца атрымаць спіс карт, і гэта будзе вырашыць, які адзін, каб паказаць на CardView. CardView можа толькі аказаць адну карту, але прыкладанне атрымлівае спіс усіх карт, праўда? 

Такім чынам, калі вы высветліць адну карта, каб даць CardView, як бы вы думаю, вы маглі б прыняць рашэнне аб тым, якія карты паказаць? Каб даць вам падказку, гэта часова Вы будзеце праглядаць пэўны карту. Калі вы абновіце старонку, вы будзеце проста вярнуцца да першай мапе. Гэта нармальна, таму што гэта часова. Якую тэхніку мы маглі б выкарыстоўваць? 

АЎДЫТОРЫЯ: Вы маглі б зрабіць зменную гэтак жа, як вы былі фронт. Гэта праўда, ты мог ёсць бягучая карта роўная 1? 

Неелі MEHTA: Так, таму мы хочуць мець дзяржава, праўда? Вы павінны выкарыстоўваць стан у Кампанент, каб высветліць, якая карта мы хочам атрымаць. Як у нас ёсць спіс усе карты, мы будзем выкарыстоўваць стан, каб высветліць, адзін з першай карты, Другая карта, трэцяя карта, і гэтак далей. 

Так што прыкладанне, такім чынам прыкладанне атрымае маюць функцыю getInitialState, getInitialState функцыя вяртання. І мы проста сказаць activeIndex 0. Так што цяпер наша дадатак мае свой уласны стан. 

І вось зараз на рэндэру, каб высветліць, карта, давайце проста пайсці ў масіў і захапіць рэч у гэтым індэксе. Выберыце карты роўных this.props.cards this.state.activeIndex. Такім чынам, як вы бачыце тут, рэквізіт і дзяржава фактычна працаваць разам. Так што цяпер у нас ёсць activeCard, мы будзем называць яго activeCard, і давайце паглядзім, калі гэта працуе. [Неразборліва] 

О, гэта было тэкст памылкі. Ах. 

Крута, ды, так што зараз мы вярнуліся туды, дзе мы былі раней, ці не так? Усё тая ж старая праграма, акрамя Цяпер мы можам падтрымаць спіс карт, а не толькі адна карта. А цяпер, зноў жа, калі мы змяніць activeIndex, мы можам перайсці ад 0 да 1, і цяпер, калі другая карта, і затым мы пайшлі ў 0. Дык вось новы фарсіраваным версіі нашага. 

ОК, так што зараз давайце выгляд спісу, які паказвае ўсе карты ў вашай праграме, такім чынам, мы будзем рабіць новы кампанент, званы ListView. Хай ListView роўная react.createClass. Таму мы хочам, каб зрабіць неўпарадкаваных спіс з элементам спісу для кожнай карты. І так у нас ёсць куча карт. Мы хочам, каб адзін элемент спісу для кожнай карты, праўда? Мы маглі б зрабіць для цыкла або то, каб зрабіць новы элемент спісу. Але, як вы робіце гэта ў Рэагаваць, выкарыстоўваць тое, што называецца карту. Карта з'яўляецца інструментам або функцыя выкарыстоўваецца што для кожнага элемента, праходзіць некаторую функцыю, прымае вяртаецца значэнне, і дае вам, што назад. 

Так як, напрыклад, у нас ёсць масіў 1, 2, 3.map function-- і гэта з'яўляецца скарачэннем для function-- х стрэлкамі х раз х. Гэта кажа, для кожнага колькасці у 1, 2, 3, прыняць яго. Square, і вярнуць яго назад. Так што вы думаеце 1, 2, 3.map х ідзе х раз х дае вам назад дадзена што гэтая функцыя запусціць на кожным элеменце гэтага масіва. 

АЎДЫТОРЫЯ: 1, 4 вер? 

Неелі MEHTA: Так, 1, 4, 9 таму што вы 1 раз 1. Гэта дае вам адзін. Гэта першы элемент. 

2 раз 4 лютага. Гэта другі элемент. 3 разоў 3 верасень. Гэта трэці элемент. Зрабіце пачуццё? Так на карце ёсць тэхніка, якую вы выкарыстоўваць у функцыянальных праграмістаў, новы стыль праграмаванне зрабіць нешта да кожнага элементу ў вашым спісе. І так гэта гучыць знаёма. У нас ёсць спіс карт. Мы хочам, каб элемент спісу для кожнага Адзін з іх, так што мы будзем выкарыстоўваць толькі карту тут. Мы скажам, хай спіс роўных this.props, карты, карты. 

І так далі карту, мы будзе генераваць элемент спісу з утрыманнем боку гэтай карты ад яго. Давайце проста скажам, мы хочам, каб выдаваць карты пытанне так card.question. Так гэты спіс змяшчае Масіў Лі або элементаў спісу дзе ёсць адзін спіс пункт для кожнай карты, і які змяшчае карты пытанне. Зрабіце пачуццё? 

Крута, так што зараз давайце на самай справе, што з друку. Так што мы будзем вяртаць вул. Унутры гэтага неўпарадкаванай спісу, мы проста прытрымлівацца ўвесь спіс што яны далі нам. Прахладны. 

Добра, так што зараз гэта Від работы спіс проста знайсці. Любыя пытанні аб прадстаўленні спісу? Вы павінны кучу карт. Вы робіце элемент спісу для кожнай карты. І вы змясціць іх у неўпарадкаванай Спіс, і вы даць яго назад. Так што цяпер давайце дзейнічаць так, мы ўкладваем гэта ўнутры нашага прыкладання, так што мы можам зрабіць гэта, прадстаўленне спісу. Якія аргументы мы прайсці яго ў спіс? Якія ўласцівасці нам гэта дасць? Памятаеце, што калі вы даяце гэта куча карт, гэта зробіць спіс глядзець на тых картах. Так, што б мы праходзім тут у якасці аргументу? АЎДЫТОРЫЯ: Спіс карт? Неелі MEHTA: Так, так картак роўная this.props.cards, праўда? І таму толькі праблема з'яўляецца тое, што вы можаце толькі Аказалася, адзін элемент верхняга ўзроўню ў візуалізацыі, так што вы павінны абгарнуць яго ў дзіў. Гэта дзіўна. Такім чынам, давайце паглядзім калі што. Ці значыць гэта, працаваць? 

Так, там вы ідзяце. Так што цяпер у нас ёсць спіс карт у ніжняй часткі, і тады мы маем нашу CardView сябе на вяршыні, і што будзе перамыкацца паміж два бакі карты. Зараз жа ў гэтым сэнс, як я гэта зрабіў? Так, гэта зноў, у нас ёсць дзве складнікі. Першы кампанент друкуе з кожная карта ў спісе. Гэта прадстаўленне спісу. І другі кампанент друкуе толькі гэтую карту. Калі вы даеце яму пэўную карту, то гэта раздрукаваць інфармацыю аб тым, што карты і хай вы пстрыкае назад і наперад. 

Так што, калі мы хочам, мы можам паспрабаваць і казаць Дадаўшы новыя магчымасці для гэтага. У адваротным выпадку мы можам гаварыць трохі больш аб хуткасці рэактара, або мы можам адказаць пытанні, вы, магчыма, прыйдзецца таму што гэта ўсё асноўныя часткі таго, каб рэагаваць, што я хачу пагаварыць. Мы можам ісці наперад. Мы можам адказаць на пытанні. Што б вы хацелі. 

АЎДЫТОРЫЯ: Ці можаце вы выкарыстоўваць JSX ў нармальным JavaScript? Ці гэта нешта, што прыйшоў з [неразборліва]? 

Неелі MEHTA: Пытанне ў тым, Вы карыстаецеся JSX з нармальнай JavaScript? Адказ: так. JSX гэта проста спосаб яго прымае вашы JavaScript, які мае HTML ўнутры яго, і кампілюе ў JavaScript, што ня HTML ўнутры яго. Так заўважыць that-- так заўважыце тут. Гэта выглядае, як у вас, як DIV і ў вас ёсць рэчы ўнутры яго. 

Гэта кампілюе-код, які як генеруе тое ж самае. Я думаю, што я хачу сказаць, што JSX проста сінтаксічная, як гэта препроцессор для JavaScript значна як PHP препроцессор для HTML. ААТ препроцессор для JavaScript, што дазваляе Вы змяшчаеце HTML ўнутры вашай JavaScript. І таму, калі ў вас ёсць права трансфарматар якая з'яўляецца тое, што называецца [неразборліва], які будзе трансфармавацца. Права препроцессор, гэта будзе дазволіць вам зрабіць гэта. 

АЎДЫТОРЫЯ: [неразборліва] Неелі MEHTA: Звычайна вам не трэба пакласці HTML ўнутры JavaScript калі ваш рабіць не рэагаваць. Але вы можаце зрабіць гэта ў любым выпадку. Да? 

АЎДЫТОРЫЯ: Я думаю, што вы апісаў Рэагаваць як функцыянальны мова праграмавання. Мы вучыліся ў C CS50. Хіба З таксама функцыянальны мову? Неелі MEHTA: Такім чынам, пытанне аб функцыянальнай у параўнанні з другога, што называецца неабходна ці працэдурнага праграмавання. Там дзве відаў праграм папулярных. Адзін называецца працэсуальная, што ўсё пра як робяць каманд, і адзін функцыянальны, які з'яўляецца ўсім пра тое, функцыі і якія маюць ўваход і выхад з іх. Рэагаваць з'яўляецца функцыянальным парадыгма. З вельмі працэсуальнага парадыгма. 

І ў якасці прыкладу, З напрыклад, Вы не робіце гэта дэкларатыўны спосаб зрабіць праграму, праўда? Вы павінны сказаць, раздрукуйце гэты. Змяніць гэтую структуру дадзеных. Раздрукаваць гэтую. Гэта ўсё пра каманды. 

У Рэагаваць, няма што многія каманды. Гэта ўсё пра тое, кампаненты, разам узятыя. Яны, як функцый. Вы павінны як функцыі называецца CardView, якая з'яўляецца функцыяй які мае ўваход, выхад, і так Рэагаваць ўсе аб гэтай філасофіі нам з having-- ў вас ёсць дадзеныя. Вы праходзіце праз гэта Алгарытм, і гэта выхад HTML, што вам проста надрукаваныя старонку, і таму вы павінны пабудаваць яго па частках. 

Такім чынам, каб зрабіць тое, што метафара Я ўжо казаў, вы ведаеце, як на Facebook, калі вы атрымліваеце паведамленне, і вы выбіраеце, якія часткі, каб абнавіць, гэта працэдурны характар. Гэта неабходна, правільна? ОК, я атрымаў паведамленне. Давайце зменім там акаўнт. 

Давайце поп акно тут. Давайце зменім там акаўнт. Давайце маляваць гэта тут. Гэта працэдурны падыход. 

Вось якія рэчы, як вуглавыя, Boost, Магістральная, іншыя механізмы выкарыстоўваць. Рэагаваць функцыянальна. Гэта вельмі адрозніваецца спосаб думаць пра рэчы. Яна займае гэтую ідэю давайце функцыі або алгарытмы, якія будуць вам даць яму дадзеныя. Гэта будзе пляваць, што гэта павінна быць, і кампутар будзе клапаціцца аб узважванні. Вы не справіцца з гэтым самастойна. Гэта робіць трохі сэнсу? Да? 

АЎДЫТОРЫЯ: У функцыянальным мове, ўсё адбываецца адначасова? 

Неелі MEHTA: Не, рэчы ў парадку. Як тут усё яшчэ замовіць, але гэта не адбудзецца ў парадку, як ацэньваем, каманда, каманды. Гэта адбываецца ў парадку функцыя дае Вам выхад. Пакладзем, што ў іншай функцыі. Пакладзем, што ў іншай Функцыя, іншая функцыя. 

Калі вы CS51, вы будзеце даведацца функцыянальныя праграмы трохі выходзіць за рамкі гэтага. Але ў прынцыпе, тое, што робіць Рэагаваць выдатна не толькі струмень дадзеных у адзін бок і віртуальны дом, але таксама гэтая ідэя функцыянальнае праграмаванне. І функцыянальнае праграмаванне вельмі лёгка складаць і зрабіць халаднаватае рэчы з, і гэта вельмі лёгка думаць аб і разважаць пра. Так што гэта яшчэ адзін добры розыгрыш React. Ёсць яшчэ пытанні? Да? 

АЎДЫТОРЫЯ: Хм, чаму б вам выкарыстоўваць хай, у адрозненне ад вар? 

Неелі MEHTA: Такім чынам, пытанне чаму вы карыстаецеся хай замест вар? Гэта тое, што называецца ES6 або ECMAScript 6. Гэта новая версія JavaScript. Там куча тэхнічных прычынах, але няхай гэта лепш версія вар. 

Гэта, як вы абвясціць зменныя. Вы можаце выкарыстоўваць хай. Вы можаце выкарыстоўваць вар. Хай мае кучу тэхнічных reasons-- вы можаце паглядзець іх да later-- чаму гэта лепш. У прынцыпе, ES6 мае некаторыя прыемна Новы сінтаксіс, некаторыя новыя функцыі на вяршыні старой JavaScript. 

Такім чынам, мы маем, як пяць хвілін. Я проста хацеў пагаварыць пра яшчэ адна рэч, вельмі хутка. Калі ў Вас паўсталі пытанні, давайце пагаворым пра гэта пасля таго, як гэта. Але проста так гэта атрымлівае злоўлены на камеру, я проста хачу крыху пагаварыць пра тое, як на самай справе выкарыстаць Рэагаваць ў вашых прыкладаннях. 

Калі вы ідзяце сюды, Facebook.GitHub.IO/react, гэта хатняя старонка Рэагаваць, і ён пакажа вам, як вы на самой справе выкарыстаць Рэагаваць на вашых старонках. У прынцыпе, гэта трохі складаны спробе ўсталяваць React. Гэта не так проста, як вы проста перацягнуць і падзенне JavaScript ў там. 

Вы павінны мець свой трансфарматар наладзіць, што будзе, як і раней, ператварыць ваш JSX ў нармальны JavaScript. Вы павінны будзеце, што рэч кампіляцыі вы ES6 ў нармальнае рэчышча. JavaScript ёсць шмат якія рухаюцца частцы вы павінны зрабіць, так ёсць, што называецца Йомен, Yeoman.io. І гэта інструмент каманднага радка, які будзе дапамагчы вам эшафот свой Рэагаваць праекты лёгка. 

Такім чынам, вы можаце прачытаць пра гэта пазней, але ёсць некаторыя інструменты што старшына прапануе. Яны дазваляюць стварыць Рэагаваць Дадатак ўсім пабудаваны ў. Як гэта будзе пабудавалі у, кампанентаў, пабудаваны ў. Гэта будзе ваш трансфарматар пабудаваны ў. Яны маюць шмат халаднавата матэрыял пабудаваны аўтаматычна выкарыстоўваючы гэтыя рэчы, званыя генератарамі. 

Так што чытайце пра гэта, калі вам падабаецца. Проста зайдзіце на Yeoman, Y-E-O-М-А-Н, і вы можаце знайсці, як гэтыя генератары. І з генератарамі, як гэта, вы проста хацелі адзін гэта каманды каманднага радка пара. Гэта будзе эшафот з Уся Рэагаваць прыкладанне для вас. Гэта будзе атрымаць усю ручную труб, і цяжкую працу зрабіў для вас, і менавіта таму вы проста засяродзіцца на проста пісаць у React. 

Так у асноўным пабудовы Рэагаваць прыкладанне нетрывіяльна. Гэта правадной разам, але інструменты, якія зраблю гэта для вас. Так што, калі вы хочаце, каб зрабіць Рэагаваць Дадатак, паспрабуйце рабіць гэта такім чынам. Калі вы проста хочаце паэксперыментаваць, Вы можаце паспрабаваць выкарыстаць гэты CodePen таму што гэта мае CodePen усе рэагуюць праводку. Я зрабіў усю працу за вас ужо. 

Так што, калі вы хочаце, каб падобна Вытворчасць выпусціць Рэагаваць прыкладанне, паспрабуйце адзін з гэтых генератараў. Калі вы проста хочаце, каб гуляць вакол, гэта часта варта проста як паспрабаваць гуляць вакол на CodePen тут. Гук добры? Прахладны. 

Так што ўсё ў мяне ёсць. Зноў жа, увесь код і прыклады будзе на гэтым сайце тут. Так, зноў жа, мы не казалі пра многае сінтаксіс Рэагаваць, але, каб знайсці ўсіх тых, маленькія дэталі, сінтаксічныя усё гэта будзе даступна на гэтым сайце тут. 

Так што я б рэкамендаваў, як першы крок. Пакладзеце яго ў свой CodePen. Паспрабуйце працуюць над стварэннем гэта другі стадыі. Там гэта чацвёрты крок, і толькі ўбачыць, дзе вы атрымаеце ад гэтага. 

Любыя іншыя пытанні, праверыць з гэтай старонцы або па электроннай пошце мне. Вось мой электронны. Але я хацеў бы дапамагчы вам з любой пытанні, вы, магчыма, аб React. Так, так, гэта ўсё, што ў мяне ёсць. Дзякуй усім вялікі за глядзець ці за ўдзел. І я буду прымаць якія-небудзь пытанні Вы маглі б мець пасля гэтага ў цяперашні час. Так што дзякуй вам усім за прагляд.