[CHWARAE CERDDORIAETH] 

Neel Mehta: Yma mae'n mynd. 

Wel, mae pawb, croeso i we apps ar gyfer y dyfodol gyda React. Mae hyn yn CS50. Fy enw i yw Neel. Rwy'n TA am CS50 a sophomore yng Ngholeg Harvard ac yn iawn, iawn datblygwr y we angerddol. Felly rwy'n gyffrous iawn i yn siarad â chi heddiw, p'un a ydych yma neu yn y cartref gwylio, tua React, sydd, unwaith eto fel y dywedais, dyfodol apps we. 

Felly React yn fframwaith y we. Ac fel dw i wedi bod yn dweud wrth i rai pobl yma, fframwaith yn unig yw set o offer y gallwch eu defnyddio i strwythuro ac adeiladu eich app we. A apps we, unwaith eto, gwefannau sydd yn rhyngweithiol fel Facebook, Twitter.com, Instagram.com, beth bynnag. 

Felly Facebook yn fframwaith y we a ddatblygwyd gan Facebook cwpl o flynyddoedd back-- React yw. Gan ei fod wedi cael ei ddefnyddio mewn Facebook ar eu apps symudol ac mae'r app we, Instagram. Academi Khan yn un arall mabwysiadu cynnar amlwg o React. 

Mae wedi bod yn wir yn mynd hynod boblogaidd. Os ydych chi erioed wedi defnyddio pethau fel onglog neu Asgwrn cefn, mae hyn yn yr un teulu, ond mae wedi ers hynny bell fwy na'r eu poblogrwydd. Mae'n y peth newydd poeth. Mae'n iawn, iawn enfawr. 

Ac felly React yn dda, nid yn unig fel fframwaith we ar gyfer rhyngwynebau adeiladu. Mae'n dda ar gyfer adeiladu rhyngwynebau we. Mae hefyd yn beth Gelwir React brodorol sy'n yn gadael i chi adeiladu rhyngwynebau ar gyfer Android a iOS a llwyfannau efallai eraill yn y dyfodol gan ddefnyddio dim ond un cod JavaScript. Gallech ddefnyddio'r union un fath Cod JavaScript i rendro gwefannau, i rendro apps Android a iOS apps. 

Mae'n gyfnod hynod, yn gyffrous iawn. Mae'n gyfle 'n sylweddol,' n sylweddol oera. Mae'n wir yn we cyffredinol offeryn datblygu rhyngwyneb, felly mae'n iawn, iawn peth pwysig i'w gofio. Ac, fel yr oeddwn yn dweud wrth bobl o'r blaen, mae hyn, yr wyf yn meddwl, yn mynd i newid sut yr ydym adeiladu apps ar y we am byth. Felly mae'n efallai braidd yn gormodiaith, ond yr wyf yn yn meddwl ei fod yn beth 'n bert da i wybod. 

Iawn, felly beth yw ReAct? React yn fframwaith y gallwch defnyddio ar gyfer rhyngwynebau adeiladu. Mae rhyngwyneb yn, unwaith eto, tudalen ar y we, dde? Felly dyma Instagram.com, defnyddiau React. 

React wedi ei adeiladu ar y syniad o gydrannau. Un elfen yn HTML Elfen ar steroidau, felly yn elfen HTML yn debyg i fotwm. Mae'n paragraff. Mae'n pennawd, dde? A bydd Instagram defnyddio'r rhain, ond mae'n Bydd hefyd yn defnyddio cydrannau React. 

React cydrannau yn elfennau HTML souped-up sydd wedi eu hymddygiad eu hunain sydd ynddynt. Felly, fel enghraifft, gallem fod wedi elfen amser, cydran amser, a fydd yn cynnwys fel y stamp amser, chi'n gwybod, elfen proffil sy'n bydd yn cynnwys y ddelwedd proffil ac enw'r person. Gall gael cownter tebyg, a oedd yn gallu cyfrif fel y nifer o hoff bethau, ac os ydych yn cliciwch arno, mae'n chi helpu cynyddu nifer y bobl fel. Un elfen yn unig yw criw o HTML cod sy'n Mae gan rai functionality wedi'i lapio tu mewn iddo. Felly mae fel elfen HTML ar steroidau, fel y dywedais o'r blaen. Gallwch gymryd elfennau hyn, a gallwch eu rhoi at ei gilydd i wneud cydrannau newydd, yn yr achos hwn, yn elfen bost, sy'n cynnwys yr holl bethau hyn. Byddai'n cynnwys Time, Proffil, LikeCounter, efallai y sylw ac efallai y ddelwedd ei hun. Ac felly apps ar y we yn unig a adeiladwyd gan gymryd cydrannau a rhoi at ei gilydd. Porthiant Instagram yn ddim mwy na criw o swyddi un ar ôl y llall, pob swydd yn cynnwys fel y Time, Proffil, LikeCounter, ac yn y blaen. Mae'n fath o fel adeiladu tŷ. Nid ydych yn adeiladu'r tŷ o'r brig i lawr. Byddwch yn cymryd components-- chi cymryd fel yr ystafell ymolchi. Rydych yn cymryd y bedroom-- i chi eu cadw gyda'i gilydd, ac mae gennych elfen newydd. Mae gennych ran newydd o'r tŷ. 

Felly Mae ReAct yn adeiladu o amgylch syniad hwn o gydrannau sy'n yn rhyngweithiol, sy'n cael eu declarative. Fel chi jyst dweud beth mae proffil yn, ac mae'n peri ei fod. Maent yn composable. Gallwch gymryd amser a phroffil, rhowch gyda'i gilydd, yn gwneud rhywbeth yn well. Ac maen nhw'n gellir eu hailddefnyddio, felly os ydych yn cael y cod ffynhonnell ar gyfer swydd, gallech ymgorffori hynny yn unrhyw le. 

Gallwch fewnosod yn Instagram beth ar eich gwefan eich hun. Gallwch fewnosod yn Facebook, er enghraifft, ar yr amod ei fod yn defnyddio React hefyd. Felly cydrannau yn iawn, iawn, iawn blociau adeiladu pwerus y we y gellir eu defnyddio yn unrhyw le ac yn rhoi gyda'i gilydd i wneud blociau adeiladu newydd. Dyna'r iawn, iawn trosolwg lefel uchel. Felly, unwaith eto, os oes gennych unrhyw gwestiynau ar unrhyw adeg am athroniaeth adweithydd, y codio, i roi'r gorau i mi, a gadewch i mi wybod. 

Iawn, felly ymateb yn cŵl am ei fod yn Mae ffordd wahanol o edrych ar sut yr ydych yn adeiladu apps ar y we. Mae'n debyg eich bod wedi clywed am MVC, mae model chi reoli mewn CS50 neu beth bynnag dosbarthiadau treiddgar i chi ddefnyddio eraill. Ac yn y rhan fwyaf o fframweithiau'n adeiladu o amgylch y syniad o MVC. React Nid yw. Yn ymateb yn cael ei adeiladu ar y syniad llif data Uncyfeiriad fel y gwelir gan y siart hwn neu graffig yma. 

Yn y bôn, mae gennych ffynhonnell ddata. A bydd y ffynhonnell ddata yn penderfynu sut i osod allan rai cydrannau. A fydd y cydrannau Yna, pan fyddant yn newid, byddant yn dweud y ffynhonnell ddata i newid. 

I ddefnyddio'r Instagram enghraifft, efallai fod gennych rhestr o wrthrychau swydd fel mewn cronfa ddata neu rywbeth. Bod y data. Ac yna mae ein cydrannau post yn cymryd y data hwnnw, a defnyddio'r data hwnnw i rendro yn beth ar y sgrin. Dyna beth y saeth o ddata i gydran yw, ac yna bod un data yn cael ei ddefnyddio i rendro bagad o gydrannau. 

Yn Facebook Messenger, am enghraifft, sydd yn React, efallai y bydd gennych restr o negeseuon fel eich ffynhonnell ddata. A fyddai nid yn gwneud dim ond y rhestr o negesau ond hefyd y rhestr o ffrindiau sydd gennych. Mae gennych y cyfrif heb eu darllen. Efallai hefyd olygu bod y peth Facebook dyna ar waelod Facebook.com. Mae'r un data yn un ffynhonnell o wirionedd ac sy'n achosi llawer o cydrannau gael eu rendro. A phryd bynnag un o'r rhai cydrannau ei newid, mae'n mynd yn ôl ac yn newid y ffynhonnell ddata. 

Rydych yn anfon neges, dde? Sy'n newid y ffynhonnell ddata. Rydych yn darllen eich negeseuon, fel eich bod yn gosod heb eu darllen i 0. Sy'n newid y ffynhonnell ddata. Ac yn sylwi bod pob un o'r rhain o un arrow mynd yn ôl at yr un data ffynhonnell, felly eich bod yn gwybod, Rhoddir set ddata benodol, eich bod yn gwybod yn union yr hyn y mae'r dudalen yn mynd i edrych fel. Mae'n benderfynedig. Rydych yn gwybod, o ystyried data penodol, beth mae'r dudalen yn mynd i edrych fel. Gallwch rhagweld sut mae'n mynd i ymddwyn a sut mae pethau'n mynd i weithio pan fyddant yn rhoi at ei gilydd. 

Ac os oedd gen miliwn o gydrannau yma, byddai'n ymddwyn yr un fath, dde? Ni fyddai'n rhaid i unrhyw Chi rhyng-gysylltiadau 'n annaearol. Rendro un data miliwn o gydrannau. Mae miliwn o cydrannau gallai ewch yn ôl a golygu data. Ac felly mae hyn yn iawn 'n glws. Rydym yn adeiladu composable, apps we scalable yn hawdd. 

Mae gennych un ffynhonnell ddata, ffynhonnell o wirionedd. Sy'n dweud wrth eich cydrannau sut i osod allan y dudalen, a bydd y cydrannau trin rhyngweithio. Ac os bydd am newid pethau, dim ond yn mynd yn ôl a dweud wrth y ffynhonnell ddata i newid. Gwneud synnwyr? Felly React yn ymwneud â dealltwriaeth sut i adeiladu cydran a sut i wneud eich cydran ryngweithio â'r byd y tu allan. 

Gwneud y gydran rhyngweithio gyda'r byd y tu allan defnyddio technoleg arall Gelwir Flux, a oedd yn yn fframwaith sy'n Ychwanegodd ar ben React. Nid ydym yn mynd i siarad am hynny. Rydym yn mynd i siarad mwy am, o ystyried data, sut y gallwch rendro gydran? 

Ac felly React yn wirioneddol cŵl oherwydd eich bod Gall ei ddefnyddio gydag unrhyw ben yn ôl ydych ei eisiau. Os oes gennych chi fel pen ôl Python, os gall eich Python boeri allan rhywfaint o ddata, React gall ei gwneud yn. Os ydych yn unrhyw allbynnau JS o ddata, React peri ei fod. Ruby rheiliau i fyny gyda data, React peri ei fod. 

Felly React yn y bôn yn we view-- pen blaen gyda chydrannau ar gyfer unrhyw ffynhonnell ddata o gwbl. Ac felly yn mynd o ffynhonnell ddata i ymateb cydrannau yn eithaf hawdd. Mynd y ffordd arall yn ychydig yn galetach. Sy'n defnyddio Flux fel y soniais o'r blaen. Ni fyddwn yn mynd i mewn i hynny. Byddwn yn canolbwyntio mwy ar y data-i-gydran ochr. Fel hyn, gallwch wneud , apps we hwyl oer. Ni fydd yn effeithio ar y byd y tu allan am y tro, ond mae hynny'n stori arall. 

Iawn, felly os oeddech yma ar gyfer fy seminar diwethaf byddwch yn gwybod bod pob un o'r cod ar gyfer Sgwrs heddiw yn mynd i fod yn y URL yma yma, mae'n ddrwg gennyf, URL hwn yma. Ac yn y bôn rydym yn mynd i fynd drwy pedwar cam, efallai pump, Mae'n debyg na phump. Byddwn yn symud drwy'r pedwar cam o adeiladu sampl React app. Ac felly yr holl cod ffynhonnell ar gyfer pob cam o'r ffordd yn mynd i fod yn iawn yma, felly os eich bod yn dilyn ar hyd yn y cartref, croeso i ddarllen y cod hwn. Os ydych yn dilyn ar hyd yma, byddwn yn dangos ar y sgrin, felly peidiwch â phoeni am y peth. Ond os ydych chi gartref, yn teimlo rhad ac am ddim i ymweld â'r wefan hon. Ac, Yeah, dylech allu cael yr holl cod byddech byth angen i chi yma. Felly mae'n taflen twyllo da yn ogystal ar gyfer eich anturiaethau yn y dyfodol gyda ReAct. Cool, felly os bawb sydd sydd yma, a hyd yn oed os ydych chi gartref, tynnu i fyny y wefan hon, is.gd/cs50react, dim cyfalaf, dim tanlinellu, dim dim. 

Byddwch yn gweld tudalen sy'n edrych ychydig bach fel hyn. Mae hyn yn beth a elwir yn CodePen. CodePen yn gydweithredol amgylchedd codio Gallaf ysgrifennu cod yma â hwy, a bydd yn cael ei hanfon atoch yn awtomatig. Ac i hyn, gall yr wyf yn ysgrifennu cod. Gallaf redeg cod yma. 

Ar gyfer example-- ac os yw'n gweld reloads--, Im 'yn rhedeg cod JavaScript ar y dudalen i'r dde yma, ac mae'n chi helpu rendr tudalen ar y we yn awtomatig gyda hyn cod JavaScript. Ac felly mae hyn yn ffordd i ni roi cynnig ar cod 'n sylweddol yn gyflym heb orfod defnyddio ein ID neu ddefnyddio ein peiriant lleol neu beth bynnag. Mae'n ffordd gyflym iawn i chi mockup ac yn profi gwahanol fathau o god. 

Felly dw i'n mynd i fod yn cymryd Enghraifft cod, ei roi yma. Rydym yn mynd i fod yn gweithio drwyddo. Ac os ydych chi gartref, byddwch yn Gall dynnu hyn i fyny hefyd. Ac yr wyf eisoes wedi gosod React yma, felly gallwch yn unig ysgrifennu eich cod hunain yma, a roi cynnig arni fel eich iard chwarae eich hun. 

Yeah, os yw pawb i agor y ddolen yma. Os gwelwch yn dda roi sêl bendith i mi i fyny ar ôl i chi wedi ei agor. Cool oer, oer. Does dim byd yma am y tro, ond byddwn yn newid yn fuan iawn. 

Iawn, felly React yw JavaScript llyfrgell, ac fel y cyfryw, gofyn am wybodaeth am JavaScript, sef y iaith raglennu we. Ac mae'n cael ei ddefnyddio ar gyfer pethau eraill bellach yn rhy ond yn bennaf y we yn datblygu iaith, felly os ydych yn gyfarwydd â hynny, darllenwch safle o'r enw JSforCats.com. Mae'n wych. Gallwch ddysgu JavaScript mewn hanner awr. Mae'n anhygoel. 

Felly rhowch gynnig ddarllen. Rydym hefyd yn llawer o HTML yma oherwydd rydym yn dylunio tudalennau gwe wrth gwrs. Felly os ydych yn anghyfarwydd â HTML, atalfa i maes HTMLdog.com. Rwy'n credu ddysgu React yw miliwn gwaith yn haws os ydych eisoes gwybod blociau adeiladu. Os oes gennych y cydrannau, 'i' hawdd i wneud cydran fwy. Dyna React iaith ar eich cyfer chi. 

Felly mynd yn ei flaen ac yn rhoi pethau hyn yn darllen. Saib y fideo. Rhowch gynnig darllen os ydych yn gartref os nad ydych yn gyfarwydd â HTML neu JavaScript Iawn, felly beth rydyn ni'n mynd i wneud yw ein bod yn mynd i wneud app cerdyn fflach sylfaenol iawn gan ddefnyddio React. Rydym yn mynd i gael cerdyn fflach. Gallwch troi cerdyn yn ôl ac ymlaen. A byddwn gennym hefyd restr o yr holl gardiau sydd gennym, ac os ydym yn teimlo'n uchelgeisiol, efallai y byddwn yn gallu i newid rhwng ceir trwy glicio arnynt. 

Ond mae hyn yn, eich foel esgyrn, React yn syml iawn app. Ac felly mae hyn mewn gwirionedd Nid dibwys i'w gweithredu, ond rydym yn mynd i ddangos bod, os ydych yn gwneud hyn, mae'n iawn, yn hawdd iawn i'w ymestyn os bydd pobl eraill eich helpu ag ef. Felly rydym yn mynd i fynd drwy bedwar cam dechrau o'r dechrau i adeiladu hyn. 

OK, felly mae'r pedwar cam, yr ydym chi helpu dechrau gyda'r cam cyntaf. Y cam cyntaf yn mynd i fod adeiladu eich elfen gyntaf. Fel y dywedais o'r blaen, yn elfen mewn React yn unig yw elfen HTML ar steroidau. Mae'n pennu'r HTML a rhywfaint o ymddygiad, ac mae'n Bydd yn nodi sut mae pobl Gall rhyngweithio ag ef sut byddai ganddo cyflwr mewnol. Fel y bydd botwm yn gwybod fel faint o Amseroedd mae wedi cael ei glicio er enghraifft, a bydd yn gwybod sut i osod ei hun allan. 

Felly gadewch i ni fynd yn ei flaen ac yn adeiladu ein elfen gyntaf gan ddefnyddio JavaScript. Felly, os y gystrawen yn edrych yn rhyfedd, mae hynny oherwydd ei fod yn fath o. Felly, unwaith eto, rydym yn mynd i wneud newidyn enw app ddefnyddio'r allweddair osod, sy'n gwneud newidyn, gadewch App React.createClass gyfartal. 

React yn llyfrgell ac mae ganddo y creu swyddogaeth dosbarth. Ac mae swyddogaeth hon yw ychydig o cod sy'n chi Gall eu defnyddio i greu newydd math o React gydran. Ac felly React.createClass yn gwneud gydran, a bydd y gydran hon yn gallu gwneud pethau. Y prif beth y gall ei wneud yw gwneud rhywbeth, rendro fel swyddogaeth. 

Unwaith eto, os nad yw mynegai yw hyn yn amlwg i chi, yr wyf yn argymell eich bod yn mynd ar JS gyfer cathod ac edrych arni. A yw bod chwyddo i mewn yn ddigon da? Cool. 

Felly pob anghenion cydran i gael swyddogaeth rendr. Mae'r swyddogaeth rendr yn dweud, beth ddylwn i ei argraffu ar y sgrin? Ond mae'r gydran yn ddiwerth os nad yw'n gwneud gwybod beth i'w argraffu ar y sgrin, felly mae angen i chi fod â swyddogaeth rendr. 

Felly, yn y peth rendr, chi 'Ch jyst angen i ddychwelyd rhywfaint o HTML. A beth cŵl yw bod mae 'na beth a elwir yn JSX, sydd yn ymestyn JavaScript a ddefnyddir gan ymateb. Mae'n gadewch i chi ysgrifennu HTML y tu mewn eich JavaScript, a oedd yn synau fath o 'n annaearol pan ydych yn meddwl yn gyntaf am y peth, ond mae'n gwneud llawer o synnwyr wedi hynny. Felly, gallwn wneud hyn. Os ydych yn gyfarwydd â HTML, rwy'n gwybod mae gennym div gyda diben cyffredinol cynhwysydd ar gyfer stwff. Gallwn dychwelyd div, ac y tu mewn div hwn, gallwn roi pethau. 

Felly, gadewch i ni ddweud ein bod am i rendro yn unig mae cerdyn fflach yn syth i fyny am y tro. Mae'r cerdyn fflach, byddwn yn dweud, Bydd yn rhaid i holi ac ateb. Felly, y tu mewn div hwn, gadewch i ni argraffu paragraff sy'n dweud question-- Beth yw'r ateb yn y pen draw i fywyd, y bydysawd? Ac yna yr ateb yw mynd i fod, wrth gwrs, 42. 

Nad oedd yn dod i fyny yn dda o gwbl. Yeah, felly y bôn y gallwch mewn gwirionedd ysgrifennu HTML tu mewn eich JavaScript. Ac mae hyn yn mynd i fod hargraffu allan i'r sgrin. Felly gadewch i ni roi cynnig arni. 

Felly, rydym wedi ein cydran. Mae angen i ni ddweud wrth React i roi y gydran ar y sgrin felly React.render, felly yn sylwi ein bod yn trin app fel unrhyw elfen arall. Rydym yn ysgrifennu am ei fod yn elfen HTML. Fel yn lle dweud fel img am ddelwedd neu p paragraff, chi ysgrifennu App, felly App yn trin fel elfen HTML. Fel y dywedais o'r blaen, 'i' elfen ar steroidau. 

Felly rydych rendr App, a ydych roi cynnig lle i'w roi iddo. A dyma sut y gallwch yn dweud ei fod lle i'w roi. Rwyf wedi creu div syml ar y dudalen a elwir gyda ID y dudalen, a dyna lle mae'r elfen yn mynd i fynd. 

Ac nid ydym yn mynd i redeg gyda HTML. Yn y bôn mae hyn yn mynd i gael rhoi tu mewn yr elfen hon dudalen sydd gennym ar y sgrin. Felly mae'n rhedeg, cod hwn ac mae'n tynnu hyn beth ar y sgrin, felly dyma ni. Rydym wedi gwneud ein cydran React cyntaf. 

Felly, yn union fel ailadrodd, rydym yn gwneud yn ysgafn math newydd o gydran, dde? Dyna beth mae'r React.createClass. Ac yn y gydran honno, rydym yn Dywedodd ei fod yr hyn y dylai ei wneud. Pryd bynnag y gydran hon yw yn cael ei argraffu ar y sgrin, bydd yn argraffu'r div gyda y ddau baragraff tu mewn iddo. 

A beth a wnaethom, gwnaethom app newydd gan ddefnyddio'r nodiant braced ongl app. Rydym yn dweud hi i roi y tu mewn i'r elfen dudalen. Ac felly yr hyn a wnaeth i mi, mae'n creu app newydd gan y templed. Ac yna yr wyf yn dweud ei fod i'w wneud yn. Felly mae'n dweud, iawn, app, beth ddylwn i argraffu? App yn dweud, ewch argraffu div gyda dau baragraff tu mewn iddo. Ac voila, mae ein div gyda ddau baragraff tu mewn iddo. Gwneud synnwyr hyd yn hyn? 

Felly, unwaith eto, yr her cyfan o React yw dim ond gwybod sut i wneud cydrannau. Sut i wneud y cydrannau yn gweithio gyda'i gilydd. Nawr ein bod yn wedi gwneud ein cyntaf gydran, gadewch i ni fynd yn ôl ac yn gwneud cydrannau customizable. Felly rydych yn gwybod sut yr ydych yn HTML Gall roi eich dosbarthiadau botymau? Gallwch roi y href eich angorau. Gallwch roi eich math mewnbynnau, dde? Gallwch roi mwy o arfer eiddo i bob un o'ch elfennau i'w wneud yn fwy diddorol. Ac rydym mewn gwirionedd yn gallu ei wneud yr un peth yn union. 

Felly, gadewch i ni ddweud ein bod am i'n app i fynd rendr unrhyw gerdyn. Ar hyn o bryd rydym yn unig rendro cerdyn hardcoded. Rydym yn gwybod dim ond un cerdyn y gall ei wneud, felly rydym yn mynd i geisio newid hyn nawr felly ein bod yn gallu jyst roi rhywfaint o gerdyn. Bydd yn argraffu'r cerdyn. 

Dylech geisio gwneud eich cydrannau diben cyffredinol iawn. Felly, y ffordd hon gallwn i anfon e-bost mae hyn fy ffrind a bod fel, beth bynnag cerdyn fflach sydd gennych, dim ond yn bwydo i mewn i fan hyn, a bydd yn gwneud hynny drwy ei hun. Gallwch roi eraill pethau yn eich app eich hun. 

Ond yn gyntaf, gadewch i ni dorri'r hwn hyd yn ddwy gydran, ond rydym am i wahanu'r cerdyn argraffu rhan o'r gwir ran app. Felly, yr hyn y gallwn ei wneud yw ein bod Gall newid hyn o App i CardView, dim ond enw newydd ar gyfer y app, a gallwn wneud newydd a elwir yn gydran App, ni ddylid ei gymysgu gyda'r hen App. Rydym wedi cael y createClass, ac fel yn HTML, gallwch nyth React cydrannau y tu mewn i'w gilydd. 

Felly, yn y swyddogaeth rendro, swyddogaeth CardView ddychwelyd, ac mae hyn yn yr un peth yn union. Gweler pam ei fod yn yr un peth? Yn hytrach na rendro dim ond y app sy'n mae gan y div a paru tu mewn iddo, y app yn gwneud yr CardView, a'r CardView renders y div a pharagraff. Felly, mae hyn yn ein enghraifft gyntaf o elfennau nythu y tu mewn i'w gilydd. A yw hynny'n gwneud synnwyr? Felly, unwaith eto, mae gennym elfen CardView. Mae gennym elfennau app ei fod yn fwy na. 

Iawn, felly rydym am i'n CardView-- os ydych rhoi cerdyn penodol yn CardView da, bydd yn argraffu allan i chi, dde? Felly yn gyntaf, mae angen i ni wneud cerdyn, felly gadewch i ni wneud gwrthrych cerdyn. Felly, gadewch i fy ngherdyn equal-- os ydych i gyd yn gyfarwydd, mae hyn yn unig yw gwneud nodiant yn gwrthwynebu yn JavaScript. Mae'n fath o fel struct yn C, felly rydym yn gwneud cerdyn, ac felly nawr gallwn drosglwyddo cerdyn hwn fel eiddo neu fel priodoledd yn HTML terminoleg at ein app. Felly, gallwn wneud hyn, App cerdyn hafal myCard. 

Rydych yn gwybod sut i mewnbwn, byddwch yn gwneud Math o fewnbwn hafal testun neu fotwm dosbarth Equals BTN gyfer bootstrap ,? Un syniad, equals-- cerdyn App mae'n rhaid i chi roi braces Yma-- Cerdyn App hafal myCard, felly mae hyn Dywed gennym y gwrthrych cerdyn. Rydw i'n mynd i basio fel eiddo i'r gydran app. Ac mae hyn yn elfen app bydd yn gallu cael mynediad iddo ac yn ei wneud stwff diddorol ag ef. 

Felly mae ein app yn mynd i fod cael cerdyn, felly am y tro, gadewch i ni gael y app dim ond rhoi y cerdyn at y CardView ei hun, oherwydd fel nad yw'r app yn mynd i wybod beth i'w wneud ag ef, felly byddwn yn jyst roi i'r CardView. Felly byddwn yn ei throsglwyddo i'r un ffordd, cerdyn hafal, ac felly gall pob cydran gael mynediad i'r pethau sydd wedi cael ei roi iddo. Maent yn gallu cael mynediad i'r eiddo a roddwyd iddo ddefnyddio cystrawen hwn, this.props.card. 

Felly beth sy'n digwydd yma yw mae gennych y gwrthrych myCard. Byddwch yn mynd heibio i mewn i'r app gan ddefnyddio cerdyn App hafal myCard. Bod cerdyn gwrthrych yn cael ei roi at eich app. Gall y app mynediad iddo fel this.props.card. Mae'n fath o fel ddelwedd yn gwybod yr hyn y mae'n ei ffynhonnell yn. 

Mae hyn yn app yn gwybod beth 'i' cerdyn yw, a gall wneud pethau ag ef. Gall wneud cyfrifiannau. Gall wneud penderfyniadau yn seiliedig i ffwrdd ohono. 

Am y tro, yr oeddwn yn mynd i basio this.props.card ar y CardView. Gwneud synnwyr hyd yn hyn? Bydd yn gwneud mwy o synnwyr yn awr. 

Iawn, felly erbyn hyn rydym yn yn CardView. Mae ein CardView, o ystyried y cerdyn, dylai argraffu ei holi ac ateb. Ar hyn o bryd rydym yn unig argraffu rhai cwestiynau ac atebion hardcoded. Mae angen i chyfrif out-- mae angen i ofyn i'r cerdyn y maent yn rhoi i ni beth yw'r cwestiwn ac ateb, a Yna argraffu hwn allan i'r sgrin. 

Felly, gallwn wneud hyn yma. Yn rendrad begin-- gyntaf yn ei wneud yn gyfartal. Felly, yr hyn yr ydym yn ei wneud yma yw ein bod yn gwybod bod y cardiau yn cael eu rhoi i ni i eiddo, iawn? Mae wedi rhoi i ni fel mewnbwn. Fel 'i' bron fel dadleuon i swyddogaeth. Mae'r cerdyn yn ddadl bron i CardView hwn. 

Byddwn yn tynnu hynny, ac yn rhoi i mewn i'r cwestiwn amrywiol. Gwnewch yn siwr bod yr ateb at yr ateb amrywiol. Awgrymiadau bod gerdyn i'w ateb. Ac yn awr ein bod yn cael y rhain, yn lle argraffu allan y testun, rydym yn mynd i'w hargraffu beth bynnag y maent yn rhoi i ni. 

Felly, mae hyn stuff-- felly rydym yn mynd i ddiffodd Cwestiwn Ateb. Gadewch i ni weld a yw hyn yn gweithio. Cool, felly gadewch i ni gamu trwyddo un mwy o amser yn unig i fod yn sicr. 

Felly fy ngherdyn yn wrthrych cerdyn, ac yr ydym yn yn rhoi y cerdyn at y app. Ac mae'r app yn mynd i gymryd y cerdyn ac yn ei roi i'r CardView. Ac mae CardView hwn yn dweud, os ydych rhoi unrhyw wrthrych flashcard mi, 'N annhymerus' argraffu ei gwestiwn ac mae ei ateb, dde? 

Felly, beth y gallwn ei wneud yw y gallaf anfon y cod hwn, y cyntaf fel 10 llinell o fy cod, i fy ffrind. Gallai ymgorffori mewn ei gais ei hun. Ac ar yr amod ei fod yn gwneud yr un peth, fel cerdyn CardView hafal hyn, ar yr amod ei fod yn greodd y CardView ac a'i rhoddes yr wybodaeth gywir, gallai olygu ei gerdyn ei hun. Ac felly y modd hwn, mae'n wir yn ffordd oera i chi adeiladu cydrannau sy'n defnyddio ei gilydd, dde? Mae'r cerdyn hwn, gallwn i gyhoeddi CardView hon ar y rhyngrwyd, a byddai pobl yn gallu ei ddefnyddio. Felly y bôn, mae o fel un o'r swyddogaethau safonol yn y llyfrgell C. 

Mae'n swyddogaeth lle rhywun wedi ei ysgrifennu. Rydych yn rhoi mewnbwn penodol. Bydd yn cynhyrchu allbwn penodol. Nid ydych yn poeni sut y mae'n gweithio yn fewnol. Cyn belled ag y byddwch yn rhoi hawl mewnbwn, bydd yn gwneud y cynnyrch cywir. 

A gall cydran fod yn meddwl am yr un ffordd. Mae'r CardView yn debyg swyddogaeth llyfrgell. Os byddwch yn rhoi rhywfaint o gerdyn fel eiddo, mae'n chi helpu argraffwch cynnwys y cerdyn. Fel os byddaf yn newid fy ngherdyn i yn lle hynny fod fel yr hyn sy'n 5 ynghyd â 37, bydd yn rhoi'r wybodaeth ddiweddaraf yn unol â hynny. Felly, dim ond drwy newid y mewnbwn, mae'n mynd allbwn penodol. Felly, gallwch chi feddwl am gydrannau bron fel swyddogaethau yn y modd hwn, a oedd yn gallwch roi at ei gilydd. Byddwch yn cael mewnbwn, fel CardView hon fel mewnbwn, byddwch yn cael allbwn. Yn yr achos hwn, allbwn yn y HTML. Gwneud synnwyr hyd yn hyn? Cool, felly unwaith eto, eiddo sut y gallwch chi drosglwyddo gwybodaeth i mewn ac allan o gydrannau. 

Iawn, felly gadewch i ni wneud hyn beth rhyngweithiol. Ar hyn o bryd mae'n fath o ddiflas. Beth yw [Anghlywadwy]? Gallwch argraffu rhai allan, ond dyna i gyd y gall ei wneud. 

Felly gadewch i ni fynd yn ôl at y hen gwestiwn yn unig am y tro. Iawn, felly ar hyn o bryd cydrannau hyn yn ddiflas gan fod yr holl maent yn ei wneud, eu bod yn cael mewnbwn. Maent yn gwneud cynnyrch, dde? Dyna fath o ddiflas. Rydym am gael ein cydrannau i allu cael rhyw fath o gyflwr mewnol, fel cofio rhywbeth. 

Ar gyfer cerdyn fflach, ar gyfer enghraifft, pa fath o wladwriaeth efallai y byddwch am i cofiwch am cerdyn fflach? Beth statws dros dro efallai y byddwch am gofio ar gyfer cerdyn fflach mewn app cerdyn fflach? GYNULLEIDFA: Boed yn cael ei flipped? Neel Mehta: Yeah, ar y dde. Felly efallai y byddwch am gadw golwg ar a ydych yn wynebu i fyny neu maent byddwch yn eu hwynebu i lawr ar y cerdyn. Ar Facebook, er enghraifft, byddech eisiau cofio ble yn y porthiant newyddion ydych chi neu hoffech pwy sydd proffil ydych chi'n ei wneud ar hyn o bryd. 

Ar Messenger, fel beth destun yr ydych teipiwch yn y blwch mewnbynnu, dde? Os byddwch yn adnewyddu'r dudalen, bydd yn mynd i ffwrdd. Ond nid ydych yn wir yn poeni. Dim ond dros dro. Yeah? 

GYNULLEIDFA: [Anghlywadwy] Neel Mehta: Fel fflach cerdyn, fel y gallwch fod yn gweld yr ochr cwestiwn neu ochr ateb? 

GYNULLEIDFA: OK. 

Neel Mehta: Fel dwy-ochrog cerdyn fflach, dde? Yeah, felly rydych am ei cael syniad hwn o nawr Mae gen i briodweddau, sydd fel mewnbwn, ond wladwriaeth, sy'n yn un dros dro, UH, ble ydych ar y dudalen, dde? Unwaith eto, yr wyf yn dweud yn Facebook Cennad, yr wyf wedi hoffi pa berson ydych yn edrych ar Facebook neu pwy yw proffil, dde? 

Mae hyn yn dim ond dros dro. Mae'n bwysig i ddangos y defnyddiwr beth sy'n digwydd, ond adnewyddu'r dudalen. Nid oes llawer o bwys. Felly mae'n gyflwr dros dro, felly rydym i gyd yn ei wladwriaeth. 

Felly, unwaith eto, mae wladwriaeth a phropiau. Propiau yn mewnbwn a roddir oddi wrth eich ffynhonnell ddata. Wladwriaeth yn union fel ddiffygion. Mae'n union fel pethau sy'n yn gwneud y peth rhyngweithiol. 

Felly, yn ein CardView-- gadewch i ni gael ein CardView-- felly roedd yn braf. Yr hyn yr ydym yn mynd i wneud yma, rydym yn mynd i gyffwrdd CardView a dim ond CardView. Ac felly fy ffrind a gafodd hyn, maent yn Ni fyddai sylwi ar unrhyw wahaniaeth. Ni fyddai'n rhaid iddynt newid unrhyw un eu cod eu hunain, ond byddent yn gweld eu CardView got souped i fyny. Mae hynny'n rhan neis am gydrannau. 

Iawn, felly yn ein CardView, gadewch i ni geisio a cadw golwg ar a ydym ni'n raddol i fyny neu wyneb i lawr. Yn React rydym yn gwneud hyn drwy yn gyntaf gan nodi'r wladwriaeth cychwynnol. O ble y cerdyn yn dechrau? 

Felly fod yn swyddogaeth o'r enw getInitialState weithredu, ac yn dychwelyd gwrthrych. Mae'r gwrthrych yn cynnwys rhywfaint o wladwriaeth, a cyflwr yn unig yw pâr-werth allweddol. Fel yn cyfarwyddo, mae gennych allwedd a gwerth, mae gennych fel enw i yw llinyn. 

Yn yr achos hwn, gadewch i ni ddweud blaen yn wir. Mae hyn yn dweud bod gennym wladwriaeth. Un elfen o'r wladwriaeth yn nodwedd o'r enw flaen. [Anghlywadwy], felly yn ddiofyn, rydym yn yn y flaen y cerdyn, a gallwn newid hyn wrth i ni troi y cerdyn. Gwneud synnwyr? 

Iawn, felly yn rendro, ar hyn o bryd, rydym yn gan ddangos y cwestiwn a'r ateb. Nawr beth ddylem ei wneud yn dangos y cwestiwn os ydym ar flaen y cerdyn, felly yr ateb yw i gefn y cerdyn. Dyna pam eich bod i gyd yn gwneud y cerdyn rhyngweithiol. Felly gadewch i ni geisio ac i hyn yma. Wel, yn gyntaf dim ond yn gwneud amrywiol. Gallwn ofyn yn awr this.state.front. Rydym yn cael mynediad datgan yr un yr ydym yn propiau mynediad, felly this.state.front. 

Os ydym yn blaen, yna testun yw this.props.card.question. Os ein bod ar flaen y cerdyn, rydyn ni'n mynd i geisio chrafangia y cwestiwn oddi wrth y cerdyn. Fel arall, os ydym ar y cefn y cerdyn, beth ydym yn ei wneud? 

GYNULLEIDFA: Yr ateb? 

Neel Mehta: Yep, felly destun yn dychwelyd this.props.card.answer. Ond os byddwch yn sylwi, rydym yn defnyddio y wladwriaeth i wneud penderfyniad oherwydd erbyn hyn y gydran Bydd yn edrych yn wahanol seiliedig oddi sut mae'r rhain yn rhyngweithio ag ef. Felly, yn lle argraffu hwn, byddwn yn jyst argraffwch y testun. Cool, felly, yn awr, fel y gwelwch, rydym yn gweld dim ond y cwestiwn. Ac os byddaf yn newid y cyflwr yma â llaw i flaen yn ffug rydym yn cael 42 yn ôl. 

Felly, unwaith eto, yr elfen hon Mae ei gyflwr ei hun. Fel botwm yn gwybod a yw mae wedi cael ei wasgu neu beidio, y peth hyn yn gwybod beth sydd ar y blaen neu ar y cefn. Yn ddiofyn, 'i' ar y tu blaen. Ac yna os yw'n ar y tu blaen, byddwn yn argraffu'r cwestiwn. Os yw'n ar y cefn, yr ydym chi helpu argraffu'r yr ateb. Felly, unwaith eto, mae'r wybodaeth o ystyried yr un fath. 'I jyst yn edrych yn wahanol yn seiliedig ar sut yr ydych rhaglennu hynny. Felly, er enghraifft, Facebook Messenger, hyd yn oed os ydych yn cael yr un ffynhonnell data, gallai edrych yn wahanol oherwydd bod y cyflwr yn wahanol. Rydych yn edrych ar Neges person gwahanol yn. 

Iawn, felly mae hyn i gyd yn dda ac da, ond yn awr yr hyn sydd mewn gwirionedd yn ein gwneud yn gallu newid, boed ein cerdyn yn blaen neu gefn. Gallwn wneud hyn drwy ychwanegu fflip botwm, botwm i'r cerdyn sy'n Bydd troi y cerdyn os yw'n [Anghlywadwy]. Felly gadewch i ni ychwanegu botwm yma, mae hyn yn Bydd botwm, a botwm hwn yn dweud troi. 

Ac felly ar hyn o bryd, mae'n nid yw'n gwneud unrhyw beth. 'I jyst yn edrych yn neis. Yr hyn y gallwn ei wneud yw y gallwn ychwanegu clic triniwr, onClick hafal this.flip, a byddwn yn diffinio fflip yn nes ymlaen. Ond yn y bôn, onClick yn swyddogaeth sy'n cael ei alw pan fydd y defnyddiwr yn clicio arno. 

Felly, bydd y botwm yn gwybod pan mae wedi cael ei glicio. Mynd mae wedi cael ei glicio, bydd yn troi y cerdyn. Mae'n fath o fel eich guy darparu pizza. Ydych chi fel, iawn, pryd bynnag y bydd rhywun yn galw i mi, 'n annhymerus' yn cyflwyno pizza, dde? 

Rydych yn cofrestru gwrandäwr hwn. Rydych yn gwrando ar gyfer digwyddiad. Rydych yn cael eu galw, a phan fydd y digwyddiad yn digwydd, byddwch yn gwneud rhywbeth. Byddwch yn cael pizza. Yn yr achos hwn, pan fyddwch yn glicio, byddwch yn troi y cerdyn. 

Ac felly mae angen i ni ddiffinio swyddogaeth a fydd yn troi y cerdyn, felly byddwn yn ysgrifennu bod hawl yma, troi swyddogaeth. Ac felly beth ydych chi'n meddwl y bydd troi yn ei wneud? Unwaith eto mae hyn a elwir yn cael pryd rydym yn cliciwch y botwm troi. Beth ddylai'r fflip swyddogaeth yn ei wneud? 

GYNULLEIDFA: Newid this.state.front o yn wir i ffug, ffug i'r gwir. 

Neel Mehta: Yep, felly cymerwch beth bynnag this.front yw-- y cyflwr blaen yn. Cymerwch y wladwriaeth blaen, os mae'n wir, yn ei gwneud yn ffug. Os yw'n anwir, yn ei gwneud yn wir, dde? Felly gadewch i ni geisio hynny. 

Ni allwch newid wladwriaeth dim ond drwy wneud this.state. Ni allwch wneud hyn. Ni allwch wneud hynny. Rhaid i chi ddefnyddio swyddogaeth Gelwir this.setState. 

Felly, gallwch ddweud this.setState blaen colon lle mae hyn, unwaith eto, mae'r ebychnod pwynt yn golygu y gwrthwyneb. Amcana os yw hyn. state.front yn wir, bydd yn troi ffug. Felly byddwn yn gosod y wladwriaeth o wir at anwir. Os yw'n anwir, yr ydym chi helpu ei osod yn anghywir i gwir. 

Dim ond yn sylwi ein bod yn gosod ac yn cael ychydig yn yn wahanol, ac felly gadewch i ni geisio hyn. Bada Bing, edrych ar hyn. Mae'r botwm troi yn awr yn newid y blaen i'r cefn wladwriaeth. 

Ac felly dyma ble byddwch yn gweld ychydig bach o hud React. Fel yr ydym byth yn dweud ei fod i ail-rendro. Rydym byth yn dweud ei ail-lunio unrhyw beth. Os ydych chi'n gwneud hyn heb React, byddech yn wedi canlynol-- hoffi pan fydd y botwm troi ei glicio, byddai'n rhaid i chi roi gwybod i llaw ail-rendro, dde? 

React yn wir yn oeri mewn, os ydych roi cynnig wladwriaeth ac eiddo penodol, bydd bob amser rendrad yr un peth yn union. Ac felly pan fyddwn byth ein bod yn newid y wladwriaeth a'r eiddo, adweithio newydd ail-gwneud yr holl beth. Mae'n gwybod bod yna un-i-un ohebiaeth rhwng wladwriaeth a paramedr a HTML. Felly, pryd bynnag y naill neu'r llall o'r rhai a newidiadau erbyn trwy wladwriaeth set, bydd yn newid sut y mae'r cyflog yn cael ei ail-rendro. Ac felly y bôn React yn debyg aros i chi i newid. 

Pryd bynnag y mae'n newid rhywbeth, bydd yn ail-wneud y dudalen gyfan. Ac os yw'n swnio'n aneffeithlon, 'i' oherwydd byddai'n, ond yn ymateb yn defnyddio beth a elwir yn DOM Cysgodol. Yn hytrach na darlunio y dudalen yn uniongyrchol, mae'n cadw'r goeden HTML rhithwir yn y cof. 

Rydych yn gwybod, HTML yn debyg i goeden, fel strwythur data hierarchaidd. Mae'n cadw goeden ffug mewn cof, a pryd bynnag y byddwch yn diweddaru'r dudalen, bydd yn tynnu ffug arall coed, a bydd yn cyfrifo'r beth yn newid mae angen iddo wneud y dudalen i wneud y ddwy goeden cyfartal. Felly y bôn, mae'n fwy neu lai ail-renders llawer. Ac yna dim ond yn hoffi newid y dudalen yn tweaks bach yn ôl yr angen, felly mae'n iawn, iawn, yn effeithlon iawn. 

Felly y bôn React bydd pryd bynnag y byddwch yn newid rhywbeth, bydd yn ail-wneud y dudalen bron. Bydd yn chyfrif i maes beth sydd angen iddynt i mi newid i wneud y dudalen go iawn yn adlewyrchu y dudalen rhithwir, a bydd yn gwneud hynny. Dyna'r DOM rhithwir. Mae'n un o'r mwyaf nodweddion React. 

A yw hynny'n gwneud synnwyr? Unrhyw gwestiynau? Yeah? 

GYNULLEIDFA: Sut mae cymharu o hyd i'r MVC ein bod yn siarad am cyn i adnoddau tebyg. 

Neel Mehta: Yeah, y cwestiwn yw sut mae'n cymharu â MVC? Gofynasoch am adnoddau. Wel, gadewch i ni siarad am y ffordd y mae'n gweithredu. 

Yn MVC, byddech yn diweddaru'r model. Yn yr achos hwn byddai gennym fodel cerdyn. Byddai'r olygfa yn cael y botwm troi, a rheoli byddai'n rhaid i'r swyddogaeth troi. Felly byddai'r olygfa yn dweud wrth y rheolwr i troi troi. Byddai Flip dweud wrth y model i newid, dde? 

Ac felly pan fyddwch yn gwneud MVC, chi gwrando am y model i newid, ac yr ydych yn ail-wneud y farn yn unol â hynny. Neu oes gen ti i yn hoffi yn cael y rheolwr. Arhoswch i'r model i newid, ac yna dewis a dethol yn rhan o fel peth i newid. Yma, mae gennym un peth, ond mewn app mawr, mae'n rhaid i chi ei hoffi gofio beth y newid ym mhob un lle, felly mae'n ychydig yn blino. Ac felly React yn braf oherwydd ei fod wedi Dom Cysgodol. Gall fforddio yn unig ailysgrifennu'r y peth cyfan. Nid oes rhaid i Chi ddetholus fel dyfalu beth i ddiweddaru. 

Ar Facebook os ydych yn hoffi cael neges newydd, yn MVC, byddai'n rhaid i chi gofio, OK, yn newid y pethau ar frig y tudalen, yr eicon neges. Hefyd pop ffenestr newydd ar y gwaelod. Hefyd, gwnewch yn beth newydd yn y ffenestr. Hefyd yn chwarae sain. 

Mae hynny'n llawer o bethau mynd allan ar yr un pryd. Ac felly os nad ydych yn ei wneud fod â Dom Cysgodol, byddech yn rhaid i ni wneud hynny â llaw oherwydd bod nad ydych yn gallu cael gwared ar y dudalen gyfan. Ni allwch fforddio, felly mae gennych i newid pob peth â llaw, sydd mewn gwirionedd yn blino yn MVC. 

Felly, er mwyn bod yn ddarbodus, maent yn ddetholus diweddaru'r dudalen, sydd yn effeithlon, ond hefyd yn blino. Yn React, oherwydd y Cysgodol Dom, byddwch yn cael y ddau beth am ddim. Mae'n effeithlon oherwydd y Dom Cysgodol. Mae'r tagfeydd yn diweddaru'r dudalen. Dyw hi ddim yn gwneud y trin coed. Byddwch yn cael y effeithlonrwydd. Byddwch hefyd yn cael y rhwyddineb defnydd oherwydd os ydych yn unig ailysgrifennu'r dudalen gyfan, ond 'ch jyst yn gwybod, i gyd yn iawn, y pethau yn mynd i fod ar y dudalen rhywle. Gallai fod yn mewn lle gwahanol, ond mae'n mynd i fod ar y dudalen, dde? Felly, ydych newydd ei ail-rendro y peth cyfan bron, ac efallai y byddwch yn gwneud cwpl newidiadau i'r dudalen ei hun. 

Felly, unwaith eto, yn MVC chi Byddai'n rhaid i ddewis rhwng rhwyddineb defnydd ac effeithlonrwydd, a React, byddwch yn cael y ddau. Felly mae'n well. Gwneud synnwyr? Solid. 

Iawn, felly gadewch i ni weld beth am siarad ychydig am gam 4, sut y gallwn ymgorffori cydrannau. Felly, mae gennym hon ar hyn o bryd. Rydym wedi ein Ychydig botwm oer. Gallwn troi yn ôl a allan, a dyna'r cyfan mae'n ei wneud. Lets 'ddeud rydym am cael gydran arall. Lets 'ddeud dylai ein app cerdyn fflach yn cynnwys rhestr o'r holl gardiau sydd gennych, felly mae hynny'n golygu ein bod Dylai fod elfen arall. Wel, efallai ei alw'n golwg rhestr. Gadewch i ni wneud barn rhestr sy'n cydfodoli gyda'r CardView, a rhestr hwn weld a CardView Bydd hoffi gweithio gyda'i gilydd. A gallwch eu cyfuno i wneud ein app ar eich cyfer. 

Felly yn gyntaf, gadewch i ni wneud cwpl mwy o gardiau cywir. Gadewch i ni yn dweud, pa gardiau? Ac yn union fel nad oes gennyf i diflasu gyda deipio i mewn, Im 'jyst yn mynd i gopïo o'r fan hon. Ac felly dwi'n mynd i beidio rhoi un cerdyn yn unig. Rydw i'n mynd i roi amrywiaeth o gardiau. Felly, yn gyntaf y apps mynd i dorri am y tro. Mae pob hawl, felly rydym yn mynd i wneud hyn yn gallu delio cardiau lluosog. Felly gyntaf, rydym yn mynd i roi, nid dim ond un cerdyn, ond amrywiaeth o gardiau, fel rhestr o gardiau. Ac yn yr achos hwn, mae gennym dri ohonynt. 

Mae pob hawl, felly felly app yn mynd i gael cardiau rhestr, ac mae'n mynd i benderfynu pa un i ddangos i'r CardView. Gall y CardView unig rendro un cerdyn, ond mae'r app yn cael rhestr o'r holl gardiau, dde? 

Felly, pan fyddwch yn chyfrif i maes un cerdyn i roi i CardView, sut y byddech yn dyfalu efallai y byddwch yn gallu i wneud penderfyniad ynghylch pa gerdyn i ddangos? Er mwyn rhoi awgrym i chi, 'i' dros dro Byddwch yn edrych ar gerdyn penodol. Os byddwch yn adnewyddu'r dudalen, wnewch chi helpu dim ond yn mynd yn ôl at y cerdyn cyntaf. Mae hynny'n iawn oherwydd ei fod yn dros dro. Pa dechneg gallem ddefnyddio? 

GYNULLEIDFA: Gallech wneud newidyn felly yn union fel chi wedi flaen. A yw hyn yn wir, gallech cael cerdyn cyfredol yn dychwelyd 1? 

Neel Mehta: Yeah, felly rydym yn am gael wladwriaeth, dde? Byddech yn defnyddio'r wladwriaeth yn y cydran at chyfrif i maes pa gerdyn ydym ni eisiau ei gael. Fel mae gennym restr o yr holl gardiau, rydym chi helpu Defnyddiwch wladwriaeth at chyfrif i maes un o'r cerdyn cyntaf, ail gerdyn, trydydd cerdyn, ac yn y blaen. 

Felly app felly bydd app yn cael yn cael y swyddogaeth getInitialState, dychwelyd swyddogaeth getInitialState. A byddwn yn jyst dweud activeIndex 0. Felly nawr mae ein app wedi ei gyflwr ei hun. 

Ac felly yn awr ar rendr, at chyfrif i maes cerdyn, gadewch i ni dim ond yn mynd i'r casgliad ac yn mynnu y peth ar y mynegai. Dewiswch gerdyn this.props.cards cyfartal this.state.activeIndex. Felly, fel y gwelwch yma, mae'r propiau a y wladwriaeth yn mewn gwirionedd yn gweithio gyda'i gilydd. Felly nawr ein bod wedi ein activeCard, byddwn yn ei alw'n activeCard, a gadewch i ni weld os yw hyn yn gweithio. [Anghlywadwy] 

O, a oedd yn gamgymeriad testun. Ah. 

Cool, yep, felly erbyn hyn roeddem yn ôl i lle'r oeddem o'r blaen, dde? Yr un hen raglen ar wahân Erbyn hyn gallwn gefnogi rhestr o gardiau, nid un cerdyn yn unig. Ac yn awr, unwaith eto, os byddwn yn newid y activeIndex, gallwn fynd 0-1, a nawr bod ail gerdyn, ac yna aethom i 0. Felly dyma newydd souped-up Fersiwn ein. 

Iawn, felly nawr gadewch i ni gael golwg rhestr sy'n dangos yr holl gardiau yn eich rhaglen, felly byddwn yn gwneud newydd Gelwir cydran listView. Gadewch listView hafal react.createClass. Felly rydym am i rendro gael di-drefn rhestru gydag eitem rhestr ar gyfer pob cerdyn. Ac felly mae gennym griw o gardiau. Rydym am un eitem rhestr ar gyfer pob cerdyn, dde? Gallem wneud ar gyfer dolen neu rhywbeth i wneud eitem rhestr newydd. Ond y ffordd yr ydych yn ei wneud yn React, defnyddiwch beth a elwir map. Map yn offeryn neu swyddogaeth a ddefnyddiwch hynny ar gyfer pob eitem, yn rhedeg rhywfaint o swyddogaeth, yn cymryd gwerth dychwelyd, ac rhoi i'r cefn i chi. 

Felly, fel enghraifft, mae gennym yr amrywiaeth 1, 2, function-- 3.map ac mae hyn yn llaw-fer ar gyfer function-- x arrow x amseroedd x. Mae hyn yn dweud, ar gyfer pob rhif yn 1, 2, 3, mynd ag ef. Cysoni hynny, ac yn rhoi yn ôl. Felly, beth yn eich barn 1, 2, 3.map x yn mynd i'r x amseroedd x yn rhoi i chi yn ôl o ystyried swyddogaeth honno hwn rhedeg ar bob elfen o'r rhesi. 

GYNULLEIDFA: 1, 4 9? 

Neel Mehta: Yep, 1, 4, 9 oherwydd eich bod yn ei wneud 1 gwaith yn 1. Mae hynny'n rhoi un i chi. Dyna'r elfen gyntaf. 

2 waith 2 yw 4. Dyna ail elfen. 3 gwaith 3 yw 9. Dyna un rhan o dair elfen. Gwneud synnwyr? Felly map Mae techneg chi defnyddio yn rhaglenwyr swyddogaethol, y math newydd o rhaglennu i wneud rhywbeth i bob elfen yn eich rhestr. Ac felly mae hyn yn swnio'n gyfarwydd. Mae gennym restr o gardiau. Rydym yn awyddus i gael eitem rhestr ar gyfer pob un, felly byddwn yn jyst arfer map yma. Byddwn yn dweud, gadewch hafal rhestr this.props, cardiau, map. 

Ac o ystyried cerdyn, felly, rydym yn mynd i gynhyrchu eitem rhestr gyda chynnwys ochr y cerdyn ohono. Gadewch i 'jyst dweud rydym am roi allan y cardiau cwestiynu hynny card.question. Felly rhestr hon yn cynnwys amrywiaeth o LI neu Restr Eitemau lle mae un rhestr eitem ar gyfer pob cerdyn, ac sy'n cynnwys y cwestiwn cardiau. Gwneud synnwyr? 

Cool, felly nawr gadewch i ni mewn gwirionedd print that allan. Felly, byddwn yn dychwelyd yn ul. Y tu mewn y rhestr di-drefn, byddwn yn jyst cadw y rhestr gyfan eu bod yn rhoi i ni. Cool. 

Mae pob hawl, felly, yn awr mae hyn Rhestr barn gwaith yn unig yn dod o hyd. Unrhyw gwestiynau am yr olwg rhestr? Mae gennych griw o gardiau. Yr ydych yn gwneud eitem rhestr ar gyfer pob cerdyn. A ydych yn eu rhoi y tu mewn di-drefn rhestr, ac yr ydych yn rhoi yn ôl. Felly nawr gadewch i ni weithredu felly rydym yn ymgorffori tu hon o'n app, fel y gallwn wneud hyn, rhestr olygfa. Pa ddadl yr ydym yn pasio restru barn chi? Pa eiddo ydym yn ei roi? Cofiwch, os byddwch yn rhoi ei fod criw o gardiau, bydd yn gwneud y rhestr gweld ar gyfer cardiau hynny. Felly beth y byddem yn pasio yma fel y ddadl? GYNULLEIDFA: Mae rhestr o gardiau? Neel Mehta: Yeah, felly cardiau hafal this.props.cards, dde? Ac felly yr unig broblem yw eich bod dim ond Trodd un elfen lefel uchaf yn rendr, felly mae'n rhaid i chi lapio mewn div. Mae'n rhyfedd. Felly, gadewch i ni weld os hynny. A yw hynny'n gweithio? 

Yep, dyna ni. Felly, erbyn hyn mae gennym restr o gardiau ar y gwaelod, ac yna rydym wedi ein CardView ei hun ar ei ben, a fydd yn troi rhwng y ddwy ochr y cerdyn. Nawr mae hynny'n gwneud synnwyr sut yr wyf yn gwneud hynny? Yeah, felly unwaith eto, mae gennym ddau cydrannau. Mae'r printiau elfen gyntaf allan bob cerdyn yn y rhestr. Dyna farn rhestr. A'r ail gydran brintiau allan yn union hynny cerdyn. Os byddwch yn rhoi cynnig cerdyn benodol, mae'n chi helpu argraffu'r wybodaeth am y cerdyn ac yn gadael i chi droi yn ôl ac ymlaen. 

Felly os ydym am, gallwn geisio sgwrs am ychwanegu rhai nodweddion newydd i hyn. Fel arall, gallwn ni siarad ychydig yn fwy am y cyflymder o adweithydd, neu gallwn ateb gwestiynau sydd gennych gan fod y rhain i gyd o rannau craidd o ymateb yr wyf am siarad am. Gallwn fynd yn ei flaen. Gallwn ateb cwestiynau. Beth bynnag yr ydych ei eisiau. 

GYNULLEIDFA: A allwch chi ddefnyddio JSX yn JavaScript normal? Neu a yw hynny'n rhywbeth y ddaeth gyda'r [Anghlywadwy]? 

Neel Mehta: Y cwestiwn yw y gall ydych yn defnyddio JSX gyda JavaScript normal? Mae'r ateb yn gadarnhaol. JSX yn unig yn ffordd o mae'n ei gymryd eich JavaScript sydd wedi HTML tu mewn iddo, ac mae'n casglu i mewn i JavaScript sy'n Nid oes gan HTML tu mewn iddo. Felly sylwi that-- felly sylwi yma. Mae hyn yn edrych fel chi wedi hoffi div a bod gennych bethau tu mewn iddo. 

Mae hynny'n llunio i JavaScript sy'n fel cynhyrchu yr un peth. Amcana hyn rwy'n ei ddweud yw bod JSX yn unig yw cystrawennol, fel ei fod yn yn Preprocessor ar gyfer JavaScript lawer fel PHP yn Preprocessor i HTML. JSC yn Preprocessor ar gyfer JavaScript sy'n gadael eich rhoi HTML tu mewn eich JavaScript. Ac felly os oes gennych y newidydd cywir sy'n beth o'r enw [Anghlywadwy], a fydd yn trawsnewid. Yr Preprocessor yn iawn, bydd yn gadael i chi wneud hynny. 

GYNULLEIDFA: [Anghlywadwy] Neel Mehta: Nid Fel arfer dim angen i chi i roi HTML tu mewn JavaScript oni bai fydd eich gwneud React. Ond gallwch chi ei wneud beth bynnag. Yep? 

GYNULLEIDFA: Yr wyf yn meddwl eich bod wedi disgrifio React fel iaith Programing swyddogaethol. Rydym wedi bod yn dysgu C yn CS50. A yw C hefyd yn iaith swyddogaethol? Neel Mehta: Felly, y cwestiwn yn ymwneud â swyddogaethol yn erbyn beth arall o'r enw rhaglennu hanfodol neu weithdrefnol. Mae dau fath o raglenni poblogaidd. Mae un ei alw gweithdrefnol, a oedd yn yn ymwneud fel gwneud gorchmynion, ac mae un yn swyddogaethol, sy'n gyd am gael swyddogaethau a chael mewnbwn ac allbwn o'r rheiny. React yn batrwm swyddogaethol. C yn batrwm trefniadol iawn. 

Ac fel enghraifft, C er enghraifft, nad ydych yn gwneud y ffordd hon declarative o wneud y rhaglen, dde? Mae'n rhaid i chi ddweud, argraffu hwn. Newid y strwythur data. Argraffu'r dudalen hon. Mae'n ymwneud â gorchmynion. 

Yn React, nid oes bod llawer o orchmynion. Mae hyn i gyd am gael cydrannau rydych roi at ei gilydd. Maent yn hoffi swyddogaethau. Mae gennych fel swyddogaeth Gelwir CardView, sydd yn swyddogaeth sydd â mewnbwn, allbwn, ac felly React i gyd am athroniaeth hon i ni am having-- gennych data. Byddwch yn mynd heibio iddo drwy hyn algorithm, ac mae'n fe HTML allbwn sy'n chi dim ond printiedig y dudalen, ac felly mae'n rhaid i chi adeiladu yn dipyn. 

Felly, i dynnu trosiad i'r hyn Dywedais o'r blaen, eich bod yn gwybod sut ar Facebook os ydych yn cael neges, a ydych yn dewis pa rannau i ddiweddaru, mae hynny'n trefniadol. Mae'n hanfodol, dde? OK, Cawn neges. Gadewch i ni newid cyfrif yno. 

Gadewch i pop ffenestr yma. Gadewch i ni newid cyfrif yno. Gadewch i ni tynnu hyn yma. Dyna ddull drefniadol. 

Dyna beth pethau fel onglog, Hwb, asgwrn cefn, fframweithiau eraill eu defnyddio. React yn swyddogaethol. Mae'n ffordd wahanol iawn o feddwl am bethau. Mae'n cymryd y syniad hwn o gadewch i ni gael swyddogaethau neu algorithmau a fydd chi rhoi data. Bydd yn boeri allan yr hyn y mae'n Dylai fod, ac mae'r cyfrifiadur Bydd yn gofalu am bwyso allan. Nid ydych yn trin eich hun. A yw hynny'n gwneud ychydig o synnwyr? Yeah? 

GYNULLEIDFA: Mewn iaith swyddogaethol, popeth yn digwydd ar yr un pryd? 

Neel Mehta: Na, mae pethau'n digwydd mewn trefn. Fel yma mae dal archebu, ond nid yw'n gwneud yn digwydd mewn trefn fel yn cymeradwyo, gorchymyn, gorchymyn. Mae'n digwydd yn nhrefn swyddogaeth yn rhoi allbwn chi. Rhoi hynny ar swyddogaeth arall. Rhoi hynny i mewn i un arall swyddogaeth, swyddogaeth arall. 

Os byddwch yn gwneud CS51, wnewch chi helpu dysgu rhaglenni swyddogaethol ychydig y tu allan i gwmpas hyn. Ond yn y bôn, yr hyn sy'n gwneud React oer yw nid yn unig unffordd llif data a'r Dom rhithwir, ond hefyd y syniad hwn o rhaglennu swyddogaethol. A rhaglennu swyddogaethol yn hawdd iawn i gyfansoddi a gwneud pethau oer y tu allan i, ac mae'n hawdd iawn i feddwl am a rheswm am. Felly mae'n tynnu da arall o React. Unrhyw mwy o gwestiynau? Yeah? 

GYNULLEIDFA: Um, pam y byddech defnyddio gadael yn hytrach na var? 

Neel Mehta: Felly, y cwestiwn yw pam ydych chi'n defnyddio gadael yn lle var? Mae hyn yn beth a elwir yn ES6 neu ECMAScript 6. Mae'n y fersiwn newydd o JavaScript. Mae criw o resymau technegol, ond osod yn fersiwn gwell o var. 

Mae'n sut yr ydych yn datgan newidynnau. Gallwch ddefnyddio adael. Gallwch ddefnyddio var. Gadewch Mae criw o technegol reasons-- gallwch eu edrych i fyny later-- am pam ei bod yn well. Yn y bôn, ES6 wedi rhai 'n glws cystrawen newydd, mae rhai nodweddion newydd ar ben yr hen JavaScript. 

Felly, rydym wedi hoffi bum munud. Fi jyst eisiau siarad am un peth yn fwy real gyflym. Os oedd gennych unrhyw gwestiynau, gadewch i ni siarad am y peth ar ôl hyn. Ond dim ond felly mae hyn yn cael dal ar gamera, Fi jyst am siarad ychydig am sut yr ydych yn yn ei ddefnyddio React yn eich apps. 

Os byddwch yn mynd yma, Facebook.GitHub.IO/react, dyma'r dudalen gartref ar gyfer ReAct, ac bydd yn dangos i chi sut yr ydych yn ei ddefnyddio Ymateb mewn eich tudalennau. Yn y bôn, mae'n ychydig yn gymhleth ceisio at gorsedda React. Dyw hi ddim mor hawdd ag y byddwch jyst ddragia ac yn gollwng JavaScript i mewn 'na. 

Mae'n rhaid i chi gael eich newidydd sefydlu, a fydd, fel y gwnaeth o'r blaen, droi eich JSX i mewn yr JavaScript arferol. Mae'n rhaid i chi beth y chi helpu llunio chi ES6 i normal. JavaScript mae llawer o symud rhannau rhaid i chi wneud, felly mae 'na beth Gelwir Yeoman, Yeoman.io. Ac mae hyn yn arf gorchymyn llinell y chi helpu eich helpu i sgaffaldio eich React prosiectau yn hawdd. 

Felly, gallwch ddarllen am hyn yn ddiweddarach, ond mae rhai offer bod Yeoman gynnig. Byddant yn gadael i chi greu React app gyda phopeth a adeiladwyd yn. Fel y bydd yn wedi adeiladu i mewn, cydrannau a adeiladwyd yn. Bydd yn cael eich newidydd a adeiladwyd yn. Mae ganddynt lawer o oer pethau a adeiladwyd yn awtomatig gan ddefnyddio y pethau hyn a elwir generaduron. 

Felly darllen am hyn os ydych yn dymuno. Dim ond yn mynd ar Yeoman, Y-E-O-M-A-N, a gallwch ddod o hyd generaduron fel y rhain. A gyda generaduron fel hyn, 'ch jyst yn hoffi un yn llinell orchymyn cwpl gorchmynion. Bydd yn sgaffaldio allan cyfan React app ar eich cyfer chi. Bydd yn cael yr holl pibellau â llaw, a gwaith grunt wneud i chi, a dyma pam yr ydych yn unig yn canolbwyntio ar ddim ond yn ysgrifennu yn React. 

Felly adeiladu bôn yn React app yn nontrivial. Mae wedi gwifrau i gyd gyda'i gilydd, ond mae yn arfau bydd yn gwneud hynny ar eich rhan. Felly, os ydych am wneud React app, ceisiwch wneud yn y ffordd honno. Os ydych chi eisiau i arbrofi, gallwch roi cynnig ar ddefnyddio'r CodePen hwn gan fod CodePen gan hyn yr holl ymateb gwifrau. Rydw i wedi gwneud yr holl waith i chi yn barod. 

Felly, os ydych am wneud fel cynhyrchu i ryddhau React app, roi cynnig ar un o'r generaduron hyn. Os ydych chi eisiau chwarae o gwmpas, mae'n aml yn werth ychydig fel ceisiwch chwarae o gwmpas ar CodePen yma. Swnio'n dda? Cool. 

Felly dyna i gyd gennyf. Unwaith eto, yr holl cod ac enghreifftiau yn mynd i fod ar y wefan hon fan hyn. Felly, unwaith eto, rydym yn nid oedd yn siarad golygu llawer cystrawen React, ond i ddod o hyd i bawb Ychydig o fanylion cystrawennol, mae'r cyfan yn mynd i fod ar gael ar y wefan hon fan hyn. 

Felly, byddwn i'n argymell hoffi gymryd y cam cyntaf. Rhowch ef mewn i'ch CodePen. Ceisiwch weithio ar wneud i'r ail gam. Mae pedwerydd cam, a dim ond gweld lle rydych yn cael o hynny. 

Unrhyw mwy o gwestiynau, edrychwch allan y dudalen neu e-bost ataf. Dyna fy e-bost. Ond Byddwn wrth fy modd i chi helpu gydag unrhyw gwestiynau sydd gennych am ReAct. Felly, yep, dyna i gyd gennyf. Diolch yn fawr iawn i chi i gyd gwylio neu am fynychu. A byddaf yn cymryd unrhyw gwestiynau allai fod gennych ar ôl hyn yn awr. Felly, diolch i chi gyd am wylio.