1 00:00:00,000 --> 00:00:02,910 >> [Mūzikas atskaņošanai] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> Neel MEHTA: Šeit tā iet. 4 00:00:07,275 --> 00:00:11,070 >> Nu, visi, laipni aicināti tīmeklī progr nākotnē ar reaģēt. 5 00:00:11,070 --> 00:00:11,870 Tas ir CS50. 6 00:00:11,870 --> 00:00:12,930 Mans vārds ir Neel. 7 00:00:12,930 --> 00:00:17,689 Es esmu TA CS50 un otrā kursa students Hārvarda koledžā un ļoti, ļoti 8 00:00:17,689 --> 00:00:18,730 kaislīgi web izstrādātājs. 9 00:00:18,730 --> 00:00:20,730 Tāpēc es esmu ļoti aizraujoši būt šodien runā ar jums, 10 00:00:20,730 --> 00:00:24,550 vai jūs esat šeit, vai mājās skatoties, par to atbildēt, kas ir, atkal 11 00:00:24,550 --> 00:00:27,270 kā jau teicu, nākotne tīmekļa progr. 12 00:00:27,270 --> 00:00:29,055 >> Tātad React ir web sistēmu. 13 00:00:29,055 --> 00:00:30,930 Un kā es esmu stāsta dažiem cilvēkiem šeit, 14 00:00:30,930 --> 00:00:33,400 sistēma ir tikai rīku komplekts, jūs varat izmantot 15 00:00:33,400 --> 00:00:35,770 strukturēt un veidot savu tīmekļa lietotni. 16 00:00:35,770 --> 00:00:39,010 Un tīmekļa lietotnes ir, atkal, mājas lapas kas ir interaktīvs, piemēram, Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, neatkarīgi. 18 00:00:42,330 --> 00:00:45,590 >> Tātad Facebook ir web sistēmu kas tika izstrādāta ar Facebook 19 00:00:45,590 --> 00:00:48,060 pāris gadus back-- REACT ir. 20 00:00:48,060 --> 00:00:50,830 Tas jo ir izmantoti Facebook uz savu mobilo progr 21 00:00:50,830 --> 00:00:52,460 un web app, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy ir vēl viens ievērojama agri pielietotājam reaģēt. 23 00:00:56,350 --> 00:00:58,630 >> Tas tiešām bija iegūt ļoti populāri. 24 00:00:58,630 --> 00:01:03,420 Ja jūs kādreiz izmantot lietas, piemēram Stūra vai Pamats, tas ir no tās pašas saimes, 25 00:01:03,420 --> 00:01:05,830 bet tā ir, jo šim pārspēj savu popularitāti. 26 00:01:05,830 --> 00:01:06,890 Tas ir karsts jauna lieta. 27 00:01:06,890 --> 00:01:09,590 Tas ir ļoti, ļoti liels. 28 00:01:09,590 --> 00:01:13,470 >> Un tā React ir laba, ne tikai kā web regulējums ēku saskarnes. 29 00:01:13,470 --> 00:01:16,020 Tas ir labi, lai izveidotu tīmekļa saskarnes. 30 00:01:16,020 --> 00:01:18,350 Pastāv arī lieta sauc React Native kas 31 00:01:18,350 --> 00:01:22,200 ļauj jums veidot saskarnes Android un iOS 32 00:01:22,200 --> 00:01:26,390 un varbūt citas platformas nākotnē izmantojot tikai vienu un to pašu JavaScript kodu. 33 00:01:26,390 --> 00:01:31,130 Jūs varētu izmantot tieši tādu pašu JavaScript kodu, lai padarītu mājas lapas, 34 00:01:31,130 --> 00:01:33,040 padarīt Android lietotnes un iOS progr. 35 00:01:33,040 --> 00:01:35,000 >> Tas ir ļoti, ļoti aizraujošs laiks. 36 00:01:35,000 --> 00:01:37,070 Tas ir ļoti, ļoti foršs iespēja. 37 00:01:37,070 --> 00:01:42,020 Tas ir patiešām universāls web interfeiss attīstības instrumentu, 38 00:01:42,020 --> 00:01:44,420 tāpēc tas ir ļoti, ļoti Svarīgi zināt. 39 00:01:44,420 --> 00:01:46,949 Un, jo man bija spēcīgi cilvēki pirms, tas, es domāju, 40 00:01:46,949 --> 00:01:48,990 gatavojas mainīt to, kā mēs veidot tīmekļa lietotnes uz visiem laikiem. 41 00:01:48,990 --> 00:01:55,820 Tātad, tas ir varbūt mazliet hiperbola, bet es domāju, ka tas ir diezgan laba lieta zināt. 42 00:01:55,820 --> 00:01:57,580 >> Labi, lai to, kas ir reaģēt? 43 00:01:57,580 --> 00:02:01,020 Reaģēt ir pamats jūs varat izmantot ēku saskarnes. 44 00:02:01,020 --> 00:02:03,240 Saskarne ir, atkal, mājas lapa, vai ne? 45 00:02:03,240 --> 00:02:06,340 Tātad, šeit ir Instagram.com, lietojumi reaģēt. 46 00:02:06,340 --> 00:02:08,740 >> Reaģēt ir veidota uz Ideja par sastāvdaļām. 47 00:02:08,740 --> 00:02:11,900 Komponents ir HTML elements par steroīdi, 48 00:02:11,900 --> 00:02:14,470 tāpēc HTML elements ir kā pogas. 49 00:02:14,470 --> 00:02:15,250 Tas ir punkts. 50 00:02:15,250 --> 00:02:17,500 Tas ir header, vai ne? 51 00:02:17,500 --> 00:02:22,740 Un Instagram izmantos šos, bet tas izmantos arī komponentus reaģēt. 52 00:02:22,740 --> 00:02:25,740 >> React sastāvdaļas ir souped-up HTML elementi 53 00:02:25,740 --> 00:02:28,100 ka ir savas uzvedības kuros iekļauta. 54 00:02:28,100 --> 00:02:31,800 Tātad, kā, piemēram, mēs varētu būt laika elements, laiks komponents, 55 00:02:31,800 --> 00:02:34,095 kas satur, piemēram, laika zīmogs, jūs zināt, 56 00:02:34,095 --> 00:02:37,170 profils komponents, kas saturēs profila attēlu 57 00:02:37,170 --> 00:02:38,820 un personas vārds. 58 00:02:38,820 --> 00:02:42,930 Tas var būt, piemēram, counter, kas var rēķināties tāpat skaita patīk, 59 00:02:42,930 --> 00:02:45,610 un, ja jūs noklikšķiniet uz to, tas būs skaita pieaugumu patīk. 60 00:02:45,610 --> 00:02:48,200 Komponents ir tikai ķekars HTML kodu, kas 61 00:02:48,200 --> 00:02:50,520 ir dažas funkcionalitāti ietin iekšpusē no tā. 62 00:02:50,520 --> 00:02:53,770 Tātad, tas ir tāpat kā HTML elements par steroīdi, kā es teicu iepriekš. 63 00:02:53,770 --> 00:02:56,270 Jūs varat lietot šos komponentus, un jūs varat nodot tos kopā 64 00:02:56,270 --> 00:02:59,060 veikt jaunus komponentus, it Šajā gadījumā, pēc sastāvdaļa, 65 00:02:59,060 --> 00:03:00,505 kas satur visu šo stuff. 66 00:03:00,505 --> 00:03:04,050 Tas satur laiks, profils, LikeCounter, varbūt komentārs 67 00:03:04,050 --> 00:03:06,100 un varbūt attēla pati. 68 00:03:06,100 --> 00:03:10,810 Un tā tīmekļa lietotnes ir tikko uzcelta, ņemot detaļas un liekot tos kopā. 69 00:03:10,810 --> 00:03:15,620 Instagram barība ir nekas vairāk kā ķekars amata viens pēc otra, 70 00:03:15,620 --> 00:03:19,032 katrā post satur, piemēram, Time, Profils, LikeCounter, un tā tālāk. 71 00:03:19,032 --> 00:03:20,490 Tas ir veids, kā ēka māju. 72 00:03:20,490 --> 00:03:22,660 Jums nav būvēt māja no augšas uz leju. 73 00:03:22,660 --> 00:03:24,960 Tu ņem components-- tevi veikt, piemēram, vannas istabā. 74 00:03:24,960 --> 00:03:28,320 Tu ņem bedroom-- jūs stick tos kopā, un jums ir jauna sastāvdaļa. 75 00:03:28,320 --> 00:03:29,760 Jums ir jauna daļa no mājas. 76 00:03:29,760 --> 00:03:32,860 >> Tātad reaģēt ir visi pamatā Šī ideja par sastāvdaļām, kas 77 00:03:32,860 --> 00:03:36,600 ir interaktīva, ka ir deklaratīvi. 78 00:03:36,600 --> 00:03:39,650 Tāpat kā jūs vienkārši pateikt to, ko profils ir, un tas padara to. 79 00:03:39,650 --> 00:03:40,600 Tie ir saliktas. 80 00:03:40,600 --> 00:03:43,880 Jūs varat veikt laiku un profilu, ielieciet viņiem kopā, lai kaut ko labāku. 81 00:03:43,880 --> 00:03:47,770 Un viņi atkārtoti, tādēļ, ja jūs ir pirmkods amatu, 82 00:03:47,770 --> 00:03:49,440 jūs varētu iegult šo jebkur. 83 00:03:49,440 --> 00:03:53,160 >> Jūs varat iegult Instagram lieta, par jūsu pašu mājas lapā. 84 00:03:53,160 --> 00:03:56,830 Jūs varat iegult Facebook, piemēram, tik ilgi, kamēr tā izmanto React kā labi. 85 00:03:56,830 --> 00:04:00,360 Tātad sastāvdaļas ir tiešām, tiešām, tiešām spēcīgi celtniecības bloki tīmeklī 86 00:04:00,360 --> 00:04:04,180 kas var tikt izmantoti jebkurā vietā un salikt kopā, lai padarītu jaunus celtniecības blokus. 87 00:04:04,180 --> 00:04:07,159 Tas ir ļoti, ļoti augsta līmeņa pārskats. 88 00:04:07,159 --> 00:04:09,200 Tātad, atkal, ja jums ir kādi jautājumi jebkurā vietā 89 00:04:09,200 --> 00:04:14,470 par filozofiju reaktora, ka kodēšana, lai apturētu mani, un ļaujiet man zināt. 90 00:04:14,470 --> 00:04:18,420 >> Labi, tā reaģēt ir forši, jo tā ir cits veids, kā meklēt 91 00:04:18,420 --> 00:04:19,870 pie kā jūs veidot tīmekļa lietotnes. 92 00:04:19,870 --> 00:04:23,620 Jūs droši vien esat dzirdējuši par MVC A modelis jums kontrolēt ar CS50 vai kāds 93 00:04:23,620 --> 00:04:25,940 cits zondēšana nodarbības jūs izmantojat. 94 00:04:25,940 --> 00:04:29,000 Un lielākā daļa sistēmas ir uzcelta ap ideju MVC. 95 00:04:29,000 --> 00:04:30,410 Reaģē nav. 96 00:04:30,410 --> 00:04:32,980 Reaģēt ir veidota ap ideja no vienvirziena datu plūsmas 97 00:04:32,980 --> 00:04:36,510 kā redzams šajā diagrammā vai grafiku šeit. 98 00:04:36,510 --> 00:04:38,260 >> Būtībā, jums ir datu avotu. 99 00:04:38,260 --> 00:04:42,380 Un datu avots izlems Kā nolikt dažus komponentus. 100 00:04:42,380 --> 00:04:45,452 Un komponenti tad, kad tie mainās, 101 00:04:45,452 --> 00:04:47,160 viņi pateiks datu avots, lai mainītu. 102 00:04:47,160 --> 00:04:49,350 >> Lai izmantotu Instagram Piemēram, jūs varētu būt 103 00:04:49,350 --> 00:04:52,050 sarakstu post objektus, piemēram, datubāzē vai kaut ko. 104 00:04:52,050 --> 00:04:53,310 Ka datiem. 105 00:04:53,310 --> 00:04:57,600 Un tad mūsu post sastāvdaļas prasīs, ka dati, 106 00:04:57,600 --> 00:05:01,830 un izmantot šo informāciju, lai padarītu lieta uz ekrāna. 107 00:05:01,830 --> 00:05:04,300 Tas ir tas, ko arrow no datu komponents ir, 108 00:05:04,300 --> 00:05:07,930 un tad, ka paši dati tiek izmantoti padarīt ķekars sastāvdaļu. 109 00:05:07,930 --> 00:05:10,290 >> Facebook Messenger, lai Piemēram, kas ir reaģēt, 110 00:05:10,290 --> 00:05:13,410 Jums varētu būt sarakstu ziņojumus kā datu avota. 111 00:05:13,410 --> 00:05:15,927 Un kas varētu apgrūtināt tikai saraksts ziņu 112 00:05:15,927 --> 00:05:17,510 bet arī saraksts draugu jums ir. 113 00:05:17,510 --> 00:05:19,200 Jums ir nelasītas skaitu. 114 00:05:19,200 --> 00:05:23,330 Varbūt arī padarīt Facebook lieta kas ir apakšā Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Tas pats dati ir vienots avots patiesības 116 00:05:25,610 --> 00:05:28,290 un kas rada daudz sastāvdaļas, kas padarīts. 117 00:05:28,290 --> 00:05:30,290 Un kad viens no tiem, sastāvdaļas tiek mainīts, 118 00:05:30,290 --> 00:05:32,320 tas iet atpakaļ un izmaiņas datu avotu. 119 00:05:32,320 --> 00:05:33,460 >> Jūs nosūtīt īsziņu, vai ne? 120 00:05:33,460 --> 00:05:34,780 Kas maina datu avotu. 121 00:05:34,780 --> 00:05:39,490 Tu lasīt savas ziņas, tāpēc jums noteikti nelasītu līdz 0. 122 00:05:39,490 --> 00:05:41,136 Kas maina datu avotu. 123 00:05:41,136 --> 00:05:44,010 Un paziņojums, ka visi šie viens arrow iet atpakaļ uz to pašu datiem 124 00:05:44,010 --> 00:05:47,662 avotu, lai jūs zināt, dota noteiktu datu kopu, 125 00:05:47,662 --> 00:05:49,870 jūs zināt, tieši to, ko lapa ir gatavojas izskatās. 126 00:05:49,870 --> 00:05:50,700 Tas ir determinēti. 127 00:05:50,700 --> 00:05:53,451 Jūs zināt, ņemot vērā konkrētus datus, ko lapa ir gatavojas izskatās. 128 00:05:53,451 --> 00:05:56,158 Jūs varat paredzēt, kā tas notiek, lai uzvesties un kā lietas notiek 129 00:05:56,158 --> 00:05:57,650 strādāt, kad viņi kopā. 130 00:05:57,650 --> 00:06:00,410 >> Un, ja man būtu miljons sastāvdaļas šeit, tas uzvedas pats, vai ne? 131 00:06:00,410 --> 00:06:02,290 Jums nebūtu kāds dīvaini starpsavienojumi. 132 00:06:02,290 --> 00:06:04,120 Viens dati padarīti miljons komponentus. 133 00:06:04,120 --> 00:06:06,879 Miljons sastāvdaļas varētu doties atpakaļ un rediģēt datus. 134 00:06:06,879 --> 00:06:07,920 Un tāpēc tas ir ļoti jauki. 135 00:06:07,920 --> 00:06:10,870 Mēs esam celtniecības saliktas, viegli mērogojams tīmekļa lietotnes. 136 00:06:10,870 --> 00:06:13,150 >> Jums ir viena datu avota, avots patiesības. 137 00:06:13,150 --> 00:06:15,790 Tas stāsta savus komponentus Kā nolikt lapu, 138 00:06:15,790 --> 00:06:18,190 un komponenti rokturis mijiedarbību. 139 00:06:18,190 --> 00:06:20,150 Un, ja viņi vēlas, lai mainītu lietas, dodieties atpakaļ 140 00:06:20,150 --> 00:06:21,750 un pateikt datu avots mainīt. 141 00:06:21,750 --> 00:06:22,850 Jēga? 142 00:06:22,850 --> 00:06:26,010 Tātad React ir visu par sapratni kā veidot sastāvdaļu 143 00:06:26,010 --> 00:06:29,540 un to, kā padarīt savu komponents mijiedarboties ar ārpasauli. 144 00:06:29,540 --> 00:06:31,850 >> Making detaļas INTERACT ar ārpasauli 145 00:06:31,850 --> 00:06:34,490 izmanto citu tehnoloģiju sauc Flux, kas 146 00:06:34,490 --> 00:06:36,872 ir sistēma, kas ir pievieno uz React. 147 00:06:36,872 --> 00:06:38,330 Mēs nebrauksim, lai runātu par to. 148 00:06:38,330 --> 00:06:42,990 Mēs ejam runāt vairāk par, ņemot vērā, dati, kā jūs varat padarīt sastāvdaļa? 149 00:06:42,990 --> 00:06:47,010 >> Un tā reaģēt, ir tiešām foršs, jo jums var izmantot ar jebkuru atpakaļ beigās vēlaties. 150 00:06:47,010 --> 00:06:50,480 Ja jums ir, piemēram, Python atpakaļ beigām, Ja jūsu Python var izspļaut dažus datus, 151 00:06:50,480 --> 00:06:51,610 Reaģēt var padarīt to. 152 00:06:51,610 --> 00:06:54,700 Ja Jums nav JS rezultāti Datu, React padara to. 153 00:06:54,700 --> 00:06:56,890 Ruby sliedes līdzi dati, React padara to. 154 00:06:56,890 --> 00:07:01,860 >> Tātad React pamatā ir web view-- priekšgala ar komponentiem 155 00:07:01,860 --> 00:07:03,910 jebkura datu avota whatsoever. 156 00:07:03,910 --> 00:07:07,145 Un tā iet no datu avota līdz reaģēt sastāvdaļas ir diezgan viegli. 157 00:07:07,145 --> 00:07:08,770 Iet citu ceļu, ir nedaudz grūtāk. 158 00:07:08,770 --> 00:07:10,462 Kas izmanto plūsmu, kā jau minēju iepriekš. 159 00:07:10,462 --> 00:07:11,420 Mēs nav iekļuvuši, ka. 160 00:07:11,420 --> 00:07:13,740 Mēs vairāk koncentrēties uz datu, lai komponenta pusē. 161 00:07:13,740 --> 00:07:15,880 Tādā veidā jūs varat veikt atdzist, jautri tīmekļa lietotnes. 162 00:07:15,880 --> 00:07:19,870 Tas neietekmēs ārpasauli tagad, bet tas ir cits stāsts. 163 00:07:19,870 --> 00:07:22,210 >> Labi, tāpēc, ja jūs bijāt šeit mana pēdējā seminārā 164 00:07:22,210 --> 00:07:26,610 jūs zināt, ka visas kodu Šodienas diskusija būs par šo URL 165 00:07:26,610 --> 00:07:29,320 šeit, sorry, šis URL šeit. 166 00:07:29,320 --> 00:07:32,730 Un būtībā mēs ejam, lai iet caur četriem soļiem, varbūt pieci, 167 00:07:32,730 --> 00:07:33,510 iespējams, ne pieci. 168 00:07:33,510 --> 00:07:37,300 Mēs pārvietoties pa četriem soļiem ēkas paraugu React app. 169 00:07:37,300 --> 00:07:39,550 Un tā visu pirmkodu par katru solis ceļu 170 00:07:39,550 --> 00:07:42,216 būs tieši šeit, tāpēc, ja jūs pēc kopā mājās, 171 00:07:42,216 --> 00:07:43,991 justies brīvi iepazīties šo kodu. 172 00:07:43,991 --> 00:07:46,740 Ja jūs pēc kopā šeit, mēs būsim parādot to uz ekrāna, 173 00:07:46,740 --> 00:07:47,739 tāpēc nav jāuztraucas par to. 174 00:07:47,739 --> 00:07:50,930 Bet, ja jūs esat mājās, justies brīvi apmeklēt šo tīmekļa vietni. 175 00:07:50,930 --> 00:07:56,400 Un, jā, jums vajadzētu būt iespējai iegūt viss kods jūs kādreiz nepieciešams šeit. 176 00:07:56,400 --> 00:08:01,380 Tātad tā ir laba apkrāptu lapas, kā arī Jūsu nākotnes piedzīvojumiem ar reaģēt. 177 00:08:01,380 --> 00:08:04,490 Atdzesē, tāpēc, ja visi, kas ir šeit, un pat tad, ja esat mājās, 178 00:08:04,490 --> 00:08:11,580 uzvilkt šo tīmekļa vietni, is.gd/cs50react, nē kapitāls, ne pasvītrojums, nav nekas. 179 00:08:11,580 --> 00:08:15,849 >> Jūs redzēsiet lapu, kas izskatās mazliet kā šis. 180 00:08:15,849 --> 00:08:17,140 Šī ir lieta, ko sauc CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen ir sadarbības kodēšanas vide 182 00:08:20,030 --> 00:08:23,364 ar kuru es varu rakstīt kodu šeit, un tas būs automātiski nosūtīts uz jums. 183 00:08:23,364 --> 00:08:24,780 Un, lai šādā veidā, es varētu rakstīt kodu. 184 00:08:24,780 --> 00:08:26,920 Es varu palaist kodu šeit. 185 00:08:26,920 --> 00:08:33,470 >> Par example-- un ja tas reloads-- redzēt, Es skrienu JavaScript kodu lapā 186 00:08:33,470 --> 00:08:36,390 tieši šeit, un tas būs automātiski padarīt mājas lapu 187 00:08:36,390 --> 00:08:37,980 ar šo JavaScript kodu. 188 00:08:37,980 --> 00:08:40,039 Un tā tas ir veids, lai mēs varētu izmēģināt kodu 189 00:08:40,039 --> 00:08:43,089 tiešām ātri, neizmantojot Mūsu ID vai izmantot mūsu vietējo mašīna 190 00:08:43,089 --> 00:08:44,290 vai neatkarīgi. 191 00:08:44,290 --> 00:08:47,670 Tas ir ļoti ātrs veids, lai jūs varētu maketu un izmēģināt dažāda veida kodu. 192 00:08:47,670 --> 00:08:50,560 >> Tāpēc es esmu gatavojas veikt piemērs kods, liekot to šeit. 193 00:08:50,560 --> 00:08:52,374 Mēs ejam, lai tiktu strādāt caur to. 194 00:08:52,374 --> 00:08:54,540 Un, ja jūs esat mājās, jūs var pull šo augšu, kā labi. 195 00:08:54,540 --> 00:08:57,530 Un es esmu jau uzstādītas Reaģēt šeit, lai jūs varētu vienkārši 196 00:08:57,530 --> 00:09:00,770 rakstīt savu kodu šeit, un mēģināt to kā savu rotaļlaukums. 197 00:09:00,770 --> 00:09:04,940 >> Jā, ja ikvienam atvērt šo saiti šeit. 198 00:09:04,940 --> 00:09:08,080 Lūdzu, iedodiet man thumbs up, kad esat to atvērtu. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Cool, cool cool. 201 00:09:13,770 --> 00:09:16,914 Nav nekas šeit tagad, bet mēs mainīsies, ka ļoti drīz. 202 00:09:16,914 --> 00:09:21,250 >> Labi, tāpēc React ir JavaScript bibliotēka, un kā tāds, 203 00:09:21,250 --> 00:09:24,480 prasa zināšanas par JavaScript, kas ir web programmēšanas valoda. 204 00:09:24,480 --> 00:09:27,660 Un tas tiek izmantots citām lietām Tagad pārāk, bet galvenokārt web attīstīt 205 00:09:27,660 --> 00:09:32,040 valoda, tādēļ, ja jums ir svešs ar ka, lasot vietu sauc JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 Tas ir brīnišķīgi. 207 00:09:32,700 --> 00:09:34,240 Jūs varat uzzināt JavaScript pusstundas. 208 00:09:34,240 --> 00:09:34,990 Tas ir neticami. 209 00:09:34,990 --> 00:09:36,420 >> Tātad to lasīt. 210 00:09:36,420 --> 00:09:39,960 Mēs arī ir daudz HTML šeit, jo mēs esam projektēšana interneta lapas, protams. 211 00:09:39,960 --> 00:09:43,890 Tātad, ja jums nav pazīstami ar HTML, izbraukšana HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Es domāju, ka mācīšanās React ir miljons reižu vieglāk, ja jums jau ir 213 00:09:46,520 --> 00:09:47,892 zināt celtniecības blokus. 214 00:09:47,892 --> 00:09:50,600 Ja jums ir sastāvdaļas, tas ir viegli izdarīt lielāku sastāvdaļa. 215 00:09:50,600 --> 00:09:51,860 Tas ir React valodu jums. 216 00:09:51,860 --> 00:09:54,270 >> Tik iet uz priekšu un dot šīs lietas, lasīt. 217 00:09:54,270 --> 00:09:55,070 Apturēt šo video. 218 00:09:55,070 --> 00:09:57,440 Dodiet tai lasīt, ja esat mājās, ja jūs neesat 219 00:09:57,440 --> 00:10:00,794 pazīstami ar HTML vai JavaScript 220 00:10:00,794 --> 00:10:02,960 Labi, lai to, ko mēs gatavojamies darīt, ir, mēs ejam, lai padarītu 221 00:10:02,960 --> 00:10:06,470 ļoti vienkāršas flashcard app izmantojot reaģēt. 222 00:10:06,470 --> 00:10:08,210 Mēs ejam, lai būtu flashcard. 223 00:10:08,210 --> 00:10:09,880 Jūs varat uzsist karti uz priekšu un atpakaļ. 224 00:10:09,880 --> 00:10:12,399 Un mēs arī sarakstu visas kārtis, kas mums ir, 225 00:10:12,399 --> 00:10:14,190 un, ja mēs esam sajūta ambiciozs, mēs varētu būt 226 00:10:14,190 --> 00:10:17,060 iespēja pārslēgties starp automašīnas, klikšķinot uz tām. 227 00:10:17,060 --> 00:10:20,360 >> Bet tas ir, no jūsu tukša kauli, ļoti vienkāršs React lietotni. 228 00:10:20,360 --> 00:10:22,560 Un tā tas ir patiesībā nav triviāla īstenot, 229 00:10:22,560 --> 00:10:26,030 bet mēs ejam, lai pierādītu, ka, ja jūs Tas, tas ir ļoti, ļoti viegli to pagarināt 230 00:10:26,030 --> 00:10:27,680 ja citi cilvēki jums palīdzēt ar to. 231 00:10:27,680 --> 00:10:33,750 Tātad mēs ejam, lai iet caur četriem soļiem sākot no nulles, lai izveidotu šo. 232 00:10:33,750 --> 00:10:36,740 >> Labi, tā četri soļi, mēs sākt ar pirmo soli. 233 00:10:36,740 --> 00:10:39,790 Pirmais solis būs veidojot savu pirmo komponentu. 234 00:10:39,790 --> 00:10:44,830 Kā jau teicu iepriekš, komponents React ir tikai HTML elements par steroīdi. 235 00:10:44,830 --> 00:10:49,660 Tas precizē HTML un daži uzvedību, un tas 236 00:10:49,660 --> 00:10:52,600 norādīs, kā cilvēki var mijiedarboties ar to how 237 00:10:52,600 --> 00:10:54,270 tas būtu iekšējo stāvokli. 238 00:10:54,270 --> 00:10:57,630 Tāpat poga zinās, piemēram, cik daudz reizes tas ir bijis noklikšķinājis piemēram, 239 00:10:57,630 --> 00:11:01,010 un tas zinās, kā likt sevi out. 240 00:11:01,010 --> 00:11:04,430 >> So iesim uz priekšu un veidot mūsu Pirmais komponents izmantojot JavaScript. 241 00:11:04,430 --> 00:11:09,711 Tātad, ja sintakse izskatās dīvaini, tas ir tāpēc, ka tā veida ir. 242 00:11:09,711 --> 00:11:11,710 Tātad, atkal, mēs ejam veikt mainīgo sauc 243 00:11:11,710 --> 00:11:14,580 app izmantojot atslēgvārdu pieņemsim, kas padara mainīgo, 244 00:11:14,580 --> 00:11:18,210 ļaujiet App vienlīdzīgu React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> Reaģēt ir bibliotēka un ir Izveidot klases funkciju. 246 00:11:22,609 --> 00:11:24,400 Un šī funkcija ir mazliet kodu, kas jums 247 00:11:24,400 --> 00:11:29,090 var izmantot, lai izveidotu jaunu no React komponentu veids. 248 00:11:29,090 --> 00:11:32,780 Un tā React.createClass padara komponentu, 249 00:11:32,780 --> 00:11:35,270 un šis komponents varētu darīt lietas. 250 00:11:35,270 --> 00:11:40,460 Galvenais, to var darīt, ir padarīt kaut kas, padarīt kā funkcija. 251 00:11:40,460 --> 00:11:44,500 >> Atkal, ja šis rādītājs nav skaidrs jums, es ieteiktu jums iet uz JS kaķiem 252 00:11:44,500 --> 00:11:45,682 un to pārbaudīt out. 253 00:11:45,682 --> 00:11:47,710 Vai tas pietuvināto pietiekami labi? 254 00:11:47,710 --> 00:11:48,490 Cool. 255 00:11:48,490 --> 00:11:50,670 >> Tātad katrs komponents vajadzībām lai būtu padarīt funkciju. 256 00:11:50,670 --> 00:11:53,010 Apmetums funkcija saka, Ko es varu izdrukāt uz ekrāna? 257 00:11:53,010 --> 00:11:54,760 Bet komponents ir bezjēdzīgi, ja tas nav 258 00:11:54,760 --> 00:11:58,060 Zināt, ko drukāt uz ekrāna, lai Jums ir nepieciešams, lai būtu padarīt funkciju. 259 00:11:58,060 --> 00:12:01,904 >> Tātad apmetumu lieta, jums vienkārši nepieciešams, lai atgrieztos kādu HTML. 260 00:12:01,904 --> 00:12:03,820 Un, kas ir foršs ir tas, ka tur ir lieta, ko sauc 261 00:12:03,820 --> 00:12:08,660 JSX, kas ir no paplašinājums JavaScript, kas tiek izmantots ar reaģēt. 262 00:12:08,660 --> 00:12:11,845 Tā pieņemsim jūs rakstīt HTML iekšā Jūsu JavaScript, kas 263 00:12:11,845 --> 00:12:13,970 izklausās veida dīvaini, kad Jums vispirms domā par to, 264 00:12:13,970 --> 00:12:15,553 bet tas padara daudz nozīmē pēc tam. 265 00:12:15,553 --> 00:12:17,430 Tātad, mēs varam izdarīt. 266 00:12:17,430 --> 00:12:21,360 Ja Jūs esat iepazinušies ar HTML, es zinu mums ir div ar vispārējo mērķi 267 00:12:21,360 --> 00:12:22,790 konteineris sīkumi. 268 00:12:22,790 --> 00:12:26,380 Mēs varam atgriezties div, un iekšā tas div, mēs varam nodot sīkumi. 269 00:12:26,380 --> 00:12:32,390 >> Tātad pieņemsim, ka mēs gribam padarīt tikai taisni-up flashcard tagad. 270 00:12:32,390 --> 00:12:34,890 Flashcard, es teiktu, būs jautājumu un atbilžu. 271 00:12:34,890 --> 00:12:37,530 Tātad iekšā šo div, pieņemsim izdrukāt punkts 272 00:12:37,530 --> 00:12:42,155 ka saka question-- Kas ir galīgā atbilde uz dzīvi, Visumu? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 Un tad atbilde ir būs, protams, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Tas nenāca klajā labi vispār. 277 00:12:59,730 --> 00:13:04,164 Jā, tā būtībā jūs varat patiešām rakstīt HTML iekšpusē JavaScript. 278 00:13:04,164 --> 00:13:06,330 Un tas būs izdrukāt uz ekrāna. 279 00:13:06,330 --> 00:13:08,250 Tātad, pieņemsim to izmēģinātu. 280 00:13:08,250 --> 00:13:09,520 >> Tāpēc mums ir mūsu sastāvdaļa. 281 00:13:09,520 --> 00:13:12,210 Mums ir nepieciešams, lai pastāstītu reaģēt likt komponents uz ekrāna 282 00:13:12,210 --> 00:13:18,990 tik React.render, tāpēc paziņojums, ka mēs ārstēt lietotni kā jebkuru citu elementu. 283 00:13:18,990 --> 00:13:21,010 Mēs rakstīt tā, kā tas bija HTML elements. 284 00:13:21,010 --> 00:13:25,100 Tāpat tā vietā, lai sakot, piemēram, img par attēlu vai P punktu, 285 00:13:25,100 --> 00:13:28,120 jūs rakstīt App, tāpēc App ir rīkojas tāpat kā HTML elements. 286 00:13:28,120 --> 00:13:30,380 Kā jau teicu iepriekš, tas ir elements par steroīdi. 287 00:13:30,380 --> 00:13:32,870 >> Tātad jūs padarīt app, un jūs to vietu, lai to. 288 00:13:32,870 --> 00:13:37,170 Un tas ir, kā jūs varat pateikt to, kur likt to. 289 00:13:37,170 --> 00:13:46,200 Man ir izveidojuši vienkāršu div Gluži lapa sauc ar ID lapas, 290 00:13:46,200 --> 00:13:48,300 un tas ir, ja elements ir gatavojas iet. 291 00:13:48,300 --> 00:13:49,841 >> Un mēs nebrauksim, lai palaistu ar HTML. 292 00:13:49,841 --> 00:13:53,145 Būtībā tas ir gatavojas iegūt likt iekšā Šīs lapas elementa 293 00:13:53,145 --> 00:13:54,270 ka mums ir uz ekrāna. 294 00:13:54,270 --> 00:13:59,210 Tātad tas darbojas šo kodu, un tā vērš šo lieta uz ekrāna, tāpēc šeit mēs esam. 295 00:13:59,210 --> 00:14:01,770 Mēs esam panākuši savu pirmo reaģēt sastāvdaļa. 296 00:14:01,770 --> 00:14:08,000 >> Tik vienkārši kā Atgādinājums, mēs maigi izgatavoti jauna veida sastāvdaļu, vai ne? 297 00:14:08,000 --> 00:14:10,145 Tas ir tas, ko React.createClass. 298 00:14:10,145 --> 00:14:12,680 Un to, ka komponents, mēs stāstīja to, kas tas būtu jādara. 299 00:14:12,680 --> 00:14:15,590 Ikreiz, kad šī sastāvdaļa ir uzdrukā uz ekrāna, 300 00:14:15,590 --> 00:14:19,300 tas būs izdrukāt div ar divi punkti iekšpusē no tā. 301 00:14:19,300 --> 00:14:24,460 >> Un ko mēs darījām, mēs, jaunu lietotni izmantojot leņķa kronšteins app notācija. 302 00:14:24,460 --> 00:14:27,160 Mums teica, tā, lai to iekšpusē lapas elementu. 303 00:14:27,160 --> 00:14:29,867 Un tā, ko es darīju, tas radīja jaunu app no ​​šīs veidnes. 304 00:14:29,867 --> 00:14:31,200 Un tad es teicu, lai padarītu to. 305 00:14:31,200 --> 00:14:33,680 Tātad tā teica, OK, app, ko man vajadzētu izdrukāt? 306 00:14:33,680 --> 00:14:36,970 App saka, iet izdrukāt div ar diviem punktiem iekšpusē no tā. 307 00:14:36,970 --> 00:14:40,420 Un voila, tur ir mūsu div ar divi punkti iekšpusē no tā. 308 00:14:40,420 --> 00:14:43,180 Jēga tik tālu? 309 00:14:43,180 --> 00:14:46,690 >> Tātad, atkal, viss izaicinājums reaģēt ir tikai zinot, kā padarīt komponentus. 310 00:14:46,690 --> 00:14:48,500 Kā padarīt sastāvdaļas strādāt kopā. 311 00:14:48,500 --> 00:14:51,780 Tagad, kad mēs esam padarījuši mūsu pirmā komponents, iesim atpakaļ 312 00:14:51,780 --> 00:14:54,284 un padarīt sastāvdaļas pielāgojama. 313 00:14:54,284 --> 00:14:56,700 Tātad, jūs zināt, kā HTML jums var sniegt jūsu pogas nodarbības? 314 00:14:56,700 --> 00:14:59,146 Jūs varat dot savu enkuri href. 315 00:14:59,146 --> 00:15:00,770 Jūs varat dot savu ieejas tipu, vai ne? 316 00:15:00,770 --> 00:15:04,740 Jūs varat dot lielāku pasūtījuma īpašības uz visiem jūsu elementiem 317 00:15:04,740 --> 00:15:06,490 lai padarītu to interesantāku. 318 00:15:06,490 --> 00:15:09,030 Un mēs tiešām varam darīt tieši tas pats. 319 00:15:09,030 --> 00:15:17,500 >> Tātad pieņemsim, ka mēs vēlamies, lai mūsu app iet padarīt jebkuru karti. 320 00:15:17,500 --> 00:15:19,630 Tieši tagad mēs vienkārši sniegusi hardcoded karti. 321 00:15:19,630 --> 00:15:22,530 Mēs zinām, tur ir tikai viens karti tā var darīt, tāpēc mēs esam 322 00:15:22,530 --> 00:15:25,960 gatavojas izmēģināt un mainīt šo tagad tik ka mēs varam Dāvini kādu karti. 323 00:15:25,960 --> 00:15:27,410 Tas būs izdrukāt karti. 324 00:15:27,410 --> 00:15:29,380 >> Jums vajadzētu mēģināt un darīt savu sastāvdaļas ļoti standarta. 325 00:15:29,380 --> 00:15:31,654 Tātad šādā veidā es varētu e-pastu šis mans draugs, un būt, piemēram, 326 00:15:31,654 --> 00:15:33,820 kāds flashcard jums ir, tikai pabarotu to šeit, 327 00:15:33,820 --> 00:15:35,290 un tas būs darīt to pats. 328 00:15:35,290 --> 00:15:37,650 Jums var likt otrai lietas savā app. 329 00:15:37,650 --> 00:15:40,600 >> Bet vispirms, pieņemsim lauzt šo augšup diviem komponentiem, 330 00:15:40,600 --> 00:15:44,500 bet mēs gribam, lai atdalītu karti drukāšanas daļa no faktiskās app daļu. 331 00:15:44,500 --> 00:15:46,660 Tātad, ko mēs varam darīt, ir mums var mainīt no App 332 00:15:46,660 --> 00:15:51,300 līdz CardView, tikai jauns nosaukums app, 333 00:15:51,300 --> 00:15:54,450 un mēs varam veikt jaunu komponents sauc App, 334 00:15:54,450 --> 00:15:56,336 nedrīkst jaukt ar veco App. 335 00:15:56,336 --> 00:16:00,730 Mēs esam ieguvuši createClass, un tāpat kā HTML, 336 00:16:00,730 --> 00:16:03,590 Jūs varat nest React sastāvdaļas iekšpusē viens no otra. 337 00:16:03,590 --> 00:16:16,430 >> Tātad šajā padarīt funkciju, funkcija atgriešanās CardView, 338 00:16:16,430 --> 00:16:18,234 un tas ir tieši tas pats. 339 00:16:18,234 --> 00:16:19,400 Redzēt, kāpēc tas ir viens un tas pats? 340 00:16:19,400 --> 00:16:22,590 Tā vietā, padarot tikai app, kas ir div un pārī iekšpusē no tā, 341 00:16:22,590 --> 00:16:26,194 app padara CardView, un CardView padara div un punktu. 342 00:16:26,194 --> 00:16:29,110 Tātad šis ir mūsu pirmais piemērs ligzdošanas elementi iekšpusē viens otru. 343 00:16:29,110 --> 00:16:32,177 Vai tas ir jēga? 344 00:16:32,177 --> 00:16:33,760 Tātad, atkal, mums ir CardView elements. 345 00:16:33,760 --> 00:16:37,250 Mums ir app elementi ka tas ir lielāks nekā. 346 00:16:37,250 --> 00:16:40,990 >> Labi, tāpēc mēs vēlamies, lai mūsu CardView-- ja jums dot labu CardView noteiktu karti, 347 00:16:40,990 --> 00:16:43,370 tas būs izdrukāt jums, vai ne? 348 00:16:43,370 --> 00:16:48,050 Tātad, pirmkārt, mums ir nepieciešams, lai padarītu karti, tāpēc pieņemsim veikt karšu objektu. 349 00:16:48,050 --> 00:17:02,930 So let manu karti equal-- ja jūs visi pazīstami, 350 00:17:02,930 --> 00:17:05,260 tas ir tikai apzīmējums pieņemšana iebilst JavaScript. 351 00:17:05,260 --> 00:17:09,280 Tas ir veids, kā struct C, lai mēs, karti, 352 00:17:09,280 --> 00:17:15,920 un tāpēc tagad mēs varam nodot šo karti kā īpašumā vai kā atribūtu HTML 353 00:17:15,920 --> 00:17:17,290 terminoloģija uz mūsu app. 354 00:17:17,290 --> 00:17:20,210 Tātad, mēs varam darīt, App card vienāds myCard. 355 00:17:20,210 --> 00:17:23,200 >> Jūs zināt, kā ieeju, jums ievades veids ir vienāds ar tekstu vai pogu 356 00:17:23,200 --> 00:17:25,240 klase vienāds BTN par bootstrap ,? 357 00:17:25,240 --> 00:17:29,500 Pati ideja, App karte equals-- tev likt breketes here-- 358 00:17:29,500 --> 00:17:33,830 App karte vienāds myCard, tāpēc šis saka mums ir šī karte objektu. 359 00:17:33,830 --> 00:17:39,149 Es esmu gatavojas nodot to kā īpašums pie app sastāvdaļu. 360 00:17:39,149 --> 00:17:41,440 Un šī app komponents jābūt iespējai piekļūt un darīt 361 00:17:41,440 --> 00:17:43,580 interesanti sīkumi ar to. 362 00:17:43,580 --> 00:17:47,650 >> Tātad mūsu app būs dota karte, tāpēc tagad, 363 00:17:47,650 --> 00:17:49,980 pieņemsim ir app tikai dot karte ar CardView 364 00:17:49,980 --> 00:17:53,110 sevi, jo, piemēram, app nav gatavojas zināt, ko darīt ar to, 365 00:17:53,110 --> 00:17:54,850 tāpēc mēs vienkārši dot to CardView. 366 00:17:54,850 --> 00:18:00,050 Tātad mēs nodot to uz tāpat, karte ir vienāds, 367 00:18:00,050 --> 00:18:05,426 un tāpēc katrs komponents var piekļūt lietas, kas ir dota, lai to. 368 00:18:05,426 --> 00:18:07,800 Viņi var piekļūt īpašības kas ir dota, lai to 369 00:18:07,800 --> 00:18:09,470 izmantojot šo sintaksi, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Tātad, kas notiek šeit Jums ir myCard objektu. 372 00:18:14,920 --> 00:18:18,250 Jūs nodot to app izmantojot App karti vienāds myCard. 373 00:18:18,250 --> 00:18:21,420 Šo karti objekts tiek dota jūsu app. 374 00:18:21,420 --> 00:18:24,400 App var piekļūt kā this.props.card. 375 00:18:24,400 --> 00:18:28,780 Tas ir veids kā attēlu zina, kas tas ir avots ir. 376 00:18:28,780 --> 00:18:31,972 >> Šī app zina, kas tas ir karte ir, un to var darīt lietas ar to. 377 00:18:31,972 --> 00:18:32,930 To var izdarīt aprēķinus. 378 00:18:32,930 --> 00:18:35,290 Tā var pieņemt lēmumus, pamatojoties off no tā. 379 00:18:35,290 --> 00:18:39,950 >> Tagad, es biju gatavojas pāriet this.props.card uz CardView. 380 00:18:39,950 --> 00:18:43,420 Jēga tik tālu? 381 00:18:43,420 --> 00:18:45,210 Tas būs daudz lietderīgāk tagad. 382 00:18:45,210 --> 00:18:46,990 >> Labi, tāpēc tagad mēs esam pie CardView. 383 00:18:46,990 --> 00:18:51,719 Mūsu CardView, ņemot karti, būtu izdrukāt savu jautājumu un atbildi. 384 00:18:51,719 --> 00:18:54,510 Tieši tagad mēs vienkārši izdrukāt dažas Hardcoded jautājumi un atbildes. 385 00:18:54,510 --> 00:18:57,720 Mums ir nepieciešams, lai noskaidrotu out-- mums vajag lūgt karti, ka viņi deva mums 386 00:18:57,720 --> 00:19:01,360 kāda ir jautājumu un atbilžu, un tad izdrukāt šo ārā no ekrāna. 387 00:19:01,360 --> 00:19:02,470 >> Tātad, mēs varam izdarīt šeit. 388 00:19:02,470 --> 00:19:06,135 In padarīt begin-- vispirms darīt vienāds. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Tātad, ko mēs darām šeit ir, mēs zinām, ka kartes ir dota mums uz īpašumu, 391 00:19:13,050 --> 00:19:13,580 labi? 392 00:19:13,580 --> 00:19:15,930 Tas ir dots mums kā izejvielu. 393 00:19:15,930 --> 00:19:19,440 Tāpat kā tas ir gandrīz kā argumenti uz funkciju. 394 00:19:19,440 --> 00:19:22,810 Šī karte ir arguments gandrīz līdz šim CardView. 395 00:19:22,810 --> 00:19:25,239 >> Mēs ekstrakts, ka, un nodot tas uz mainīgo jautājumu. 396 00:19:25,239 --> 00:19:27,280 Pārliecinieties, ka atbilde gāja uz mainīgas atbildi. 397 00:19:27,280 --> 00:19:31,130 Liek ka karte atbildēt. 398 00:19:31,130 --> 00:19:35,072 Un tagad, ka mēs esam tie, tā vietā, izdrukāt šo tekstu, 399 00:19:35,072 --> 00:19:37,030 mēs ejam, lai izdrukātu neatkarīgi viņi deva mums. 400 00:19:37,030 --> 00:19:43,580 >> Tātad šis stuff-- tāpēc mēs ejam izbāzt jautājumu. 401 00:19:43,580 --> 00:19:46,380 Let 's redzēt, ja tas darbojas. 402 00:19:46,380 --> 00:19:52,800 Atdzesē, tāpēc pieņemsim soli caur to vēl vienu reizi tikai, lai pārliecinātos. 403 00:19:52,800 --> 00:20:00,470 >> Tātad mana karte ir karte objekts, un mēs dodam šo karti app. 404 00:20:00,470 --> 00:20:04,790 Un app ir gatavojas veikt karti un dot to uz CardView. 405 00:20:04,790 --> 00:20:09,190 Un tas CardView saka, ja jums iedodiet man jebkuru flashcard objektu, 406 00:20:09,190 --> 00:20:11,920 Es izdrukāt savu jautājumu un tā atbilde, vai ne? 407 00:20:11,920 --> 00:20:14,590 >> Tātad, ko es varētu darīt, ir varu nosūtīt šo kodu, pirmais 408 00:20:14,590 --> 00:20:16,580 piemēram, 10 rindiņas manu kodu, lai mans draugs. 409 00:20:16,580 --> 00:20:18,820 Viņš varētu iegult to savu pieteikumu. 410 00:20:18,820 --> 00:20:27,200 Un tik ilgi, kamēr viņš bija tas pats, tāpat CardView karte vienāds tas, 411 00:20:27,200 --> 00:20:30,580 tik ilgi, kamēr viņš radīja CardView un deva to pareizo informāciju, 412 00:20:30,580 --> 00:20:31,987 viņš varētu padarīt savu karti. 413 00:20:31,987 --> 00:20:34,320 Un tā šādā veidā, tas ir patiešām foršs veids, lai jūs varētu veidot 414 00:20:34,320 --> 00:20:35,906 sastāvdaļas, kas izmanto viens otru, vai ne? 415 00:20:35,906 --> 00:20:38,280 Šī karte, es varētu publicēt šis CardView internetā, 416 00:20:38,280 --> 00:20:39,790 un cilvēki varētu to izmantot. 417 00:20:39,790 --> 00:20:45,070 Vārdu sakot, tas ir tāpat kā viens no standarta funkcijas C bibliotēkā. 418 00:20:45,070 --> 00:20:47,280 >> Tā ir funkcija, kur kāds ir uzrakstījis to. 419 00:20:47,280 --> 00:20:48,419 Tu dod zināmu ieguldījumu. 420 00:20:48,419 --> 00:20:49,710 Tas būs ražot noteiktu produkciju. 421 00:20:49,710 --> 00:20:50,890 Jums nav vienalga, kā tā darbojas iekšēji. 422 00:20:50,890 --> 00:20:53,790 Tik ilgi, kamēr jūs to tiesības ievadi, tas būs izdarīt pareizo izeju. 423 00:20:53,790 --> 00:20:57,850 >> Un komponents var būt doma no tādā pašā veidā. 424 00:20:57,850 --> 00:21:00,280 Tas CardView ir līdzīgs bibliotēka funkcija. 425 00:21:00,280 --> 00:21:03,400 Ja jūs tā kādu karti kā īpašuma, tā būs 426 00:21:03,400 --> 00:21:05,095 izdrukāt saturu šīs kartes. 427 00:21:05,095 --> 00:21:16,820 Tāpat kā, ja es varu mainīt savu karti nevis būt, piemēram, to, kas ir 5 plus 37, 428 00:21:16,820 --> 00:21:19,210 tā tiks atjaunināta atbilstoši. 429 00:21:19,210 --> 00:21:21,955 Tik vienkārši mainot ievadi, tas saņem noteiktu produkciju. 430 00:21:21,955 --> 00:21:24,830 Tātad jūs varat iedomāties komponentu gandrīz kā funkcijas šādā veidā, kas 431 00:21:24,830 --> 00:21:25,920 jums var likt kopā. 432 00:21:25,920 --> 00:21:29,440 Jūs saņemsiet ievadi, piemēram, šo CardView kā ieejas, jūs saņemsiet produkciju. 433 00:21:29,440 --> 00:21:31,900 Šajā gadījumā, produkcija ir HTML. 434 00:21:31,900 --> 00:21:34,404 Jēga tik tālu? 435 00:21:34,404 --> 00:21:36,890 Atdzesē, tāpēc atkal, īpašības ir kā jūs varat nodot informāciju 436 00:21:36,890 --> 00:21:40,900 uz un no komponentiem. 437 00:21:40,900 --> 00:21:42,740 >> Labi, tāpēc pieņemsim padarīt šo lieta interaktīvs. 438 00:21:42,740 --> 00:21:44,450 Tieši tagad tas ir sava veida garlaicīgi. 439 00:21:44,450 --> 00:21:45,520 Kas ir [dzirdams]? 440 00:21:45,520 --> 00:21:48,210 Jūs varat izdrukāt dažas out, bet tas ir viss, tā var darīt. 441 00:21:48,210 --> 00:21:51,550 >> So iesim atpakaļ uz vecais jautājums tikai tagad. 442 00:21:51,550 --> 00:21:54,405 Labi, tā jau tagad šie komponenti ir garlaicīgi, jo visi tie, 443 00:21:54,405 --> 00:21:55,030 viņiem ievadi. 444 00:21:55,030 --> 00:21:56,100 Tās padara produkciju, vai ne? 445 00:21:56,100 --> 00:21:57,049 Tas ir sava veida garlaicīgi. 446 00:21:57,049 --> 00:21:59,090 Mēs vēlamies, lai mūsu komponenti, lai varētu būt 447 00:21:59,090 --> 00:22:02,150 sava veida iekšējā stāvokļa, tāpat atcerēties kaut ko. 448 00:22:02,150 --> 00:22:05,320 >> Par flashcard, lai Piemēram, kāda veida valsts 449 00:22:05,320 --> 00:22:07,550 jūs varētu vēlēties, lai atcerēties par flashcard? 450 00:22:07,550 --> 00:22:09,740 Kas pagaidu statusu jūs varētu vēlēties, lai atcerēties 451 00:22:09,740 --> 00:22:12,491 par flashcard kādā flashcard app? 452 00:22:12,491 --> 00:22:13,990 Mērķauditorija: Vai tas ir bijis Pagriezts? 453 00:22:13,990 --> 00:22:14,990 Neel MEHTA: Jā, taisnība. 454 00:22:14,990 --> 00:22:17,665 Tātad jūs varētu vēlēties, lai saglabātu līdzi ir jums stāties pretī vai ir 455 00:22:17,665 --> 00:22:19,100 jūs sejas uz leju uz kartes. 456 00:22:19,100 --> 00:22:23,420 Par Facebook, piemēram, jūs vēlas atcerēties, kur ziņu barībā 457 00:22:23,420 --> 00:22:25,870 tu esi vai gribētu kurš profilu jūs darāt tieši tagad. 458 00:22:25,870 --> 00:22:30,127 >> Par Messenger, patīk tas, ko jūs teksts ierakstiet ievades lodziņā, vai ne? 459 00:22:30,127 --> 00:22:31,710 Ja jūs atsvaidzināt lapu, tas iet prom. 460 00:22:31,710 --> 00:22:32,793 Bet jums nav īsti aprūpi. 461 00:22:32,793 --> 00:22:33,770 Tas ir tikai īslaicīgs. 462 00:22:33,770 --> 00:22:34,548 Yeah? 463 00:22:34,548 --> 00:22:36,152 >> Mērķauditorija: [dzirdams] 464 00:22:36,152 --> 00:22:38,360 Neel MEHTA: Like zibspuldzi karti, kā jūs varat redzēt 465 00:22:38,360 --> 00:22:40,290 jautājums pusē vai atbilde pusē? 466 00:22:40,290 --> 00:22:41,070 >> Mērķauditorija: OK. 467 00:22:41,070 --> 00:22:43,270 >> Neel MEHTA: Like divpusējas flashcard, vai ne? 468 00:22:43,270 --> 00:22:46,370 Jā, lai jūs vēlaties ir šī ideja par šobrīd 469 00:22:46,370 --> 00:22:50,370 Man ir īpašības, kas ir kā izejvielas, bet valsts, kas ir īslaicīgs, uh, 470 00:22:50,370 --> 00:22:51,839 kur jums ir uz lapas, vai ne? 471 00:22:51,839 --> 00:22:54,380 Atkal, es teicu Facebook Messenger, man patīk, kurā persona 472 00:22:54,380 --> 00:22:56,550 skatāt Facebook vai kas ir profils, vai ne? 473 00:22:56,550 --> 00:22:58,030 >> Tas ir tikai īslaicīgs. 474 00:22:58,030 --> 00:23:01,200 Tas ir svarīgi, lai parādītu lietotājam kas notiek, bet atsvaidzināt lapu. 475 00:23:01,200 --> 00:23:02,250 Tas nav īsti jautājums. 476 00:23:02,250 --> 00:23:04,530 Tātad, tas ir pagaidu stāvoklis, lai mēs visi tā stāvoklis. 477 00:23:04,530 --> 00:23:06,250 >> Tātad, atkal, tur ir valsts un butaforijas. 478 00:23:06,250 --> 00:23:09,084 Balsti tiek dots ieguldījums no datu avota. 479 00:23:09,084 --> 00:23:10,250 Valsts ir tāpat kā nepildīšanu. 480 00:23:10,250 --> 00:23:13,700 Tas ir tāpat kā sīkumi, kas padara lieta interaktīvs. 481 00:23:13,700 --> 00:23:17,720 >> Tātad mūsu CardView-- pieņemsim ir Mūsu CardView-- tāpēc tas bija jauki. 482 00:23:17,720 --> 00:23:21,420 Ko mēs darīsim šeit, mēs ejam pieskarties CardView un tikai CardView. 483 00:23:21,420 --> 00:23:25,105 Un tāpēc mans draugs, kurš dabūja šo, viņi nebūtu nepamanīs atšķirību. 484 00:23:25,105 --> 00:23:27,230 Viņiem nebūtu jāmaina kāds no viņu pašu kodu, 485 00:23:27,230 --> 00:23:29,410 bet viņi gribētu redzēt viņu CardView got souped up. 486 00:23:29,410 --> 00:23:31,270 Tas ir jauki daļa par sastāvdaļām. 487 00:23:31,270 --> 00:23:35,290 >> Labi, tāpēc mūsu CardView, pamēģināsim un sekot līdzi, vai mēs esam pakāpeniski up 488 00:23:35,290 --> 00:23:36,560 vai seju uz leju. 489 00:23:36,560 --> 00:23:40,480 In React mēs to izdarītu, vispirms norādot sākotnējo stāvokli. 490 00:23:40,480 --> 00:23:42,070 Kur karte sākt? 491 00:23:42,070 --> 00:23:48,480 >> Tāpēc esiet funkciju sauc getInitialState darboties, un mēs atgriežamies objektu. 492 00:23:48,480 --> 00:23:53,310 Šis objekts ir daži stāvokli, un valsts ir tikai atslēgas vērtību pāri. 493 00:23:53,310 --> 00:23:56,950 Tāpat kā uzdot, jums ir svarīgs un vērtība, jums patīk vārds ir virkne. 494 00:23:56,950 --> 00:24:01,410 >> Šajā gadījumā, teiksim priekšā ir taisnība. 495 00:24:01,410 --> 00:24:03,760 Tas saka, ka mums ir valsts. 496 00:24:03,760 --> 00:24:06,570 Viens komponents valsts ir atribūts sauc priekšā. 497 00:24:06,570 --> 00:24:09,649 [Dzirdams], tā pēc noklusējuma, mēs esi kartes priekšpusē, 498 00:24:09,649 --> 00:24:11,440 un mēs varam mainīt kā mēs uzsist karti. 499 00:24:11,440 --> 00:24:13,380 Jēga? 500 00:24:13,380 --> 00:24:18,190 >> Labi, tāpēc padarīt, tieši tagad, mēs esam parādot jautājumu un atbildi. 501 00:24:18,190 --> 00:24:20,860 Tagad to, ko mums vajadzētu darīt ir parādīt jautājumu 502 00:24:20,860 --> 00:24:24,370 ja mēs esam uz kartes priekšpusē, lai atbilde ir par kartes aizmugurē. 503 00:24:24,370 --> 00:24:26,850 Tas ir iemesls, kāpēc jūs visi padarīt karte interaktīvs. 504 00:24:26,850 --> 00:24:28,100 Tātad pamēģināsim un tas šeit. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Nu, vispirms tikai veikt mainīgo. 507 00:24:33,620 --> 00:24:37,790 Mēs varam jautāt tagad this.state.front. 508 00:24:37,790 --> 00:24:42,010 Mēs piekļūt norādīt to pašu mēs piekļuves aksesuārus, tāpēc this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Ja mēs esam priekšā, tad teksts ir this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Ja mēs esam par priekšā card, mēs esam gatavojas izmēģināt un paķert 512 00:24:51,360 --> 00:24:52,485 jautājums no kartes. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 Pretējā gadījumā, ja mēs esam uz muguras karti, ko mēs darām? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> Mērķauditorija: Atbilde? 517 00:25:02,750 --> 00:25:05,041 >> Neel MEHTA: Yep, tā teksts vienāds this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Bet, ja jūs pamanāt, mēs izmantojam valstij pieņemt lēmumu 520 00:25:10,930 --> 00:25:14,420 jo tagad komponenta izskatīsies atšķirīgs 521 00:25:14,420 --> 00:25:16,710 pamatojoties off, kā tie mijiedarbojas ar to. 522 00:25:16,710 --> 00:25:20,355 Tā vietā, izdrukāt to, mēs vienkārši izdrukāt tekstu. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Atdzesē, tāpēc tagad, kā jūs redzat, mēs redzam tikai šo jautājumu. 525 00:25:28,650 --> 00:25:37,720 Un, ja es mainītu valsts šeit manuāli uz priekšējā ir nepatiesa mēs iegūstam 42 atpakaļ. 526 00:25:37,720 --> 00:25:39,720 >> Tātad, atkal, šis komponents ir sava valsts. 527 00:25:39,720 --> 00:25:43,440 Tāpat poga zina, vai tas ir bijis nospiests, vai ne, 528 00:25:43,440 --> 00:25:46,080 šī lieta zina, kas ir par priekšā vai aizmugurē. 529 00:25:46,080 --> 00:25:48,320 Pēc noklusējuma tas ir uz priekšu. 530 00:25:48,320 --> 00:25:50,840 Un tad, ja tas ir uz priekšu, mēs izdrukāt šo jautājumu. 531 00:25:50,840 --> 00:25:53,106 Ja tas ir uz muguras, mēs izdrukāt atbildi. 532 00:25:53,106 --> 00:25:54,980 Tātad, atkal, informācija ņemot vērā, ir tas pats. 533 00:25:54,980 --> 00:25:59,090 Tā tikai izskatās citādi pamatojoties uz to, kā jūs programma to. 534 00:25:59,090 --> 00:26:02,670 Tā, piemēram, Facebook Messenger, pat tad, ja jūs saņemsiet to pašu datu avotu, 535 00:26:02,670 --> 00:26:05,170 tas varētu izskatīties dažādi jo valsts ir atšķirīgs. 536 00:26:05,170 --> 00:26:08,421 Jūs esat meklē dažādas personas vēstījums. 537 00:26:08,421 --> 00:26:10,930 >> Labi, tāpēc tas viss ir labi un labs, bet tagad to, kas patiesībā 538 00:26:10,930 --> 00:26:15,940 padara mūs spēj mainīties, vai Mūsu karte ir priekšā vai aizmugurē. 539 00:26:15,940 --> 00:26:19,010 Mēs varam izdarīt, pievienojot uzsist poga, poga ar karti, kas 540 00:26:19,010 --> 00:26:22,950 uzsist karti, ja tas ir [nedzirdama]. 541 00:26:22,950 --> 00:26:31,770 Tātad pieņemsim pievienotu pogu šeit, tas pogu, un šī poga teiks uzsist. 542 00:26:31,770 --> 00:26:35,650 >> Un tāpēc tagad, to nedara neko. 543 00:26:35,650 --> 00:26:37,075 Tā tikai izskatās jauki. 544 00:26:37,075 --> 00:26:43,650 Ko mēs varam darīt, ir, mēs varam pievienot klikšķi apdarinātājs, onClick vienāds this.flip, 545 00:26:43,650 --> 00:26:44,820 un mēs vēlāk definēt uzsist. 546 00:26:44,820 --> 00:26:47,120 Bet būtībā, onClick ir funkcija, kas 547 00:26:47,120 --> 00:26:48,675 izpaužas izsaukta, kad lietotājs noklikšķina uz tās. 548 00:26:48,675 --> 00:26:52,330 >> Tātad poga zinās kad tas ir bijis uzklikšķināt. 549 00:26:52,330 --> 00:26:54,750 Gāja tas ir bijis noklikšķinājis, tas tiks flip karti. 550 00:26:54,750 --> 00:26:58,382 Tas ir veids, kā jūsu picu piegāde puisis. 551 00:26:58,382 --> 00:27:01,590 Jūs, piemēram, labi, kad kāds aicina mani, es ņemšu piegādāt picu, vai ne? 552 00:27:01,590 --> 00:27:03,420 >> Jūs reģistrē šo klausītājs. 553 00:27:03,420 --> 00:27:04,530 Jūs klausīties notikumu. 554 00:27:04,530 --> 00:27:07,657 Tu call, un tad, kad Pasākums notiek, tu kaut ko darīt. 555 00:27:07,657 --> 00:27:08,240 Jūs saņemsiet picu. 556 00:27:08,240 --> 00:27:11,480 Šajā gadījumā, kad tu esi uzklikšķināt, jūs uzsist karti. 557 00:27:11,480 --> 00:27:14,560 >> Un tāpēc mums ir nepieciešams, lai noteiktu funkcija, kas uzsist karti, 558 00:27:14,560 --> 00:27:17,930 tāpēc mēs rakstīt, ka tiesības šeit, uzsist funkciju. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 Un tā, ko jūs domājat flip darīs? 561 00:27:23,680 --> 00:27:27,180 Atkal tas izpaužas sauc, kad mēs noklikšķiniet uz pogas Flip. 562 00:27:27,180 --> 00:27:29,406 Kas ir funkcija flip darīt? 563 00:27:29,406 --> 00:27:34,136 >> Mērķauditorija: Mainīt this.state.front no uzticīgi viltus, viltus taisnība. 564 00:27:34,136 --> 00:27:38,420 >> Neel MEHTA: Yep, tā veic visus this.front is-- priekšējā valsts ir. 565 00:27:38,420 --> 00:27:40,930 Veikt priekšējo stāvokli, ja tā ir taisnība, padarīt to nepatiesa. 566 00:27:40,930 --> 00:27:42,530 Ja tas ir viltus, padara tā ir taisnība, vai ne? 567 00:27:42,530 --> 00:27:45,330 Tātad pamēģināsim to. 568 00:27:45,330 --> 00:27:48,240 >> Jūs nevarat mainīt stāvokli vienkārši darot this.state. 569 00:27:48,240 --> 00:27:50,380 Jūs nevarat izdarīt. 570 00:27:50,380 --> 00:27:52,030 Jūs nevarat darīt. 571 00:27:52,030 --> 00:27:55,810 Jums ir izmantot funkciju sauc this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Tātad jūs varat teikt this.setState priekšējais Kols šī kur, atkal, izsaukuma 573 00:28:03,230 --> 00:28:04,330 punkts nozīmē pretējo. 574 00:28:04,330 --> 00:28:07,420 Es domāju, ja šis. state.front ir taisnība, tas būs savukārt nepatiesa. 575 00:28:07,420 --> 00:28:09,170 Tāpēc mēs noteikti valsti no taisnība nepatiess. 576 00:28:09,170 --> 00:28:11,430 Ja tas ir viltus, mēs noteikt to viltus patiess. 577 00:28:11,430 --> 00:28:17,210 >> Tikai paziņojums, ka mēs noteikti un saņemt nedaudz atšķirīgi, un tāpēc pamēģināsim šo. 578 00:28:17,210 --> 00:28:18,675 Bada Bing, apskatīt šo. 579 00:28:18,675 --> 00:28:21,810 Flip poga tagad pārslēgt priekšas uz aizmuguri stāvoklī. 580 00:28:21,810 --> 00:28:24,990 >> Un tāpēc šeit ir, ja jūs redzat Mazliet burvju reaģēt. 581 00:28:24,990 --> 00:28:28,420 Tāpat mēs nekad teicis to, ka tā ir jauna padarīt. 582 00:28:28,420 --> 00:28:30,910 Mums nekad nav teicis, ka ievilktu neko. 583 00:28:30,910 --> 00:28:32,630 Ja jūs darāt šo bez reaģēt, jūs 584 00:28:32,630 --> 00:28:34,588 ir kuri paredzēti, piemēram, kad uzsist poga ir noklikšķinājuši, 585 00:28:34,588 --> 00:28:37,290 jūs ir pateikt to manuāli atkārtoti apmetuma, vai ne? 586 00:28:37,290 --> 00:28:43,050 >> Reaģēt ir patiešām atdzist, ka, ja jums to zināmu stāvokli un īpašības, 587 00:28:43,050 --> 00:28:45,760 tas vienmēr padara tieši tas pats. 588 00:28:45,760 --> 00:28:48,690 Un tad, kad mēs kādreiz mēs mainīt valsts un īpašībām, 589 00:28:48,690 --> 00:28:50,819 reaģēt tikko atkal padara visu lieta. 590 00:28:50,819 --> 00:28:52,860 Tā zina, ka tur ir viens pret vienu atbilstība 591 00:28:52,860 --> 00:28:57,270 starp valsti un parametru un HTML. 592 00:28:57,270 --> 00:29:00,110 Tātad, ja kāds no tiem mainās par caur noteiktu valsti, 593 00:29:00,110 --> 00:29:03,750 tas mainīsies, kā pay atkārtoti padarīti. 594 00:29:03,750 --> 00:29:06,650 Un tā būtībā React ir kā gaida, lai jūs varētu mainīt. 595 00:29:06,650 --> 00:29:09,870 >> Ikreiz, kad tā mainās kaut, tas būs atkal padarīt visu lapu. 596 00:29:09,870 --> 00:29:12,480 Un, ja tas izklausās neefektīvi, tas ir tāpēc, ka tas būtu, 597 00:29:12,480 --> 00:29:15,050 bet reaģēt izmanto lieta sauc Shadow DOM. 598 00:29:15,050 --> 00:29:19,950 Tā vietā, lai zīmēšanas lapas tieši, to uztur virtuālo HTML koku atmiņā. 599 00:29:19,950 --> 00:29:23,620 >> Ziniet, HTML ir kā koks, kā hierarhisku datu struktūru. 600 00:29:23,620 --> 00:29:28,990 Tas tur viltus koku atmiņā, un, kad jūs atjaunināt lapu, 601 00:29:28,990 --> 00:29:31,940 tas būs izdarīt vēl vienu viltus koks, un tas būs aprēķināt 602 00:29:31,940 --> 00:29:35,120 ko mainīt tai nepieciešams, lai padarītu lapu, lai padarītu divi koki vienāds. 603 00:29:35,120 --> 00:29:38,540 Vārdu sakot, tas praktiski atkārtoti padara daudz. 604 00:29:38,540 --> 00:29:41,540 Un tad tas tikai patīk maina lapa maz tweaks, kā nepieciešams, 605 00:29:41,540 --> 00:29:44,240 tāpēc tas ir ļoti, ļoti, ļoti efektīva. 606 00:29:44,240 --> 00:29:46,970 >> Tātad būtībā React būs kad jūs kaut ko mainīt, 607 00:29:46,970 --> 00:29:49,010 tas būs atkal padarīt lapu virtuāli. 608 00:29:49,010 --> 00:29:52,830 Tas būs izdomāt, ko man vajag mainīt, lai reālā lapa atspoguļo 609 00:29:52,830 --> 00:29:55,602 virtuālā lapa, un tas būs darīt. 610 00:29:55,602 --> 00:29:56,560 Tas ir virtuāls DOM. 611 00:29:56,560 --> 00:29:59,350 Tā ir viena no lielākajām iezīmes reaģēt. 612 00:29:59,350 --> 00:30:00,880 >> Vai tas ir jēga? 613 00:30:00,880 --> 00:30:01,540 Kādi jautājumi? 614 00:30:01,540 --> 00:30:02,040 Yeah? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> Mērķauditorija: Kā salīdzināt vēl MVC 617 00:30:08,969 --> 00:30:10,760 ka mēs runājām par Pirms piemēram resursiem. 618 00:30:10,760 --> 00:30:13,527 >> Neel MEHTA: Jā, jautājums ir, kā tas salīdzināt ar MVC? 619 00:30:13,527 --> 00:30:14,610 Jūs jautājāt par resursiem. 620 00:30:14,610 --> 00:30:16,445 Nu, parunāsim par to, kā tā darbojas. 621 00:30:16,445 --> 00:30:18,190 >> In MVC, jūs atjaunināt modeli. 622 00:30:18,190 --> 00:30:20,560 Šajā gadījumā mēs gribētu būt kartes paraugs. 623 00:30:20,560 --> 00:30:24,540 Skats veidotājiem būs flip pogu, un kontroles 624 00:30:24,540 --> 00:30:26,310 būtu Flip funkciju. 625 00:30:26,310 --> 00:30:28,450 Tātad skats varētu pateikt kontrolieris uzsist uzsist. 626 00:30:28,450 --> 00:30:30,370 Flip varētu pateikt modelis, lai mainītu, vai ne? 627 00:30:30,370 --> 00:30:33,915 >> Un tad, kad jūs darīt MVC, jums klausīties modeli mainīt, 628 00:30:33,915 --> 00:30:37,150 un tu atkal padarīt viedokli atbilstoši. 629 00:30:37,150 --> 00:30:39,210 Vai jums vienkārši ir, piemēram, ir kontrolieris. 630 00:30:39,210 --> 00:30:42,418 Sagaidiet modeli mainīt, un pēc tam arī izvēlēties daļu no kā lieta 631 00:30:42,418 --> 00:30:44,032 Mainīt. 632 00:30:44,032 --> 00:30:45,740 Šeit mums ir viena lieta, bet liels app, 633 00:30:45,740 --> 00:30:48,510 Jums patīk atcerēties to, kas izmaiņas katrā atsevišķā vietā, 634 00:30:48,510 --> 00:30:50,290 tāpēc tas ir mazliet kaitinošas. 635 00:30:50,290 --> 00:30:53,670 Un tā React ir jauki jo tā ir ēna Dom. 636 00:30:53,670 --> 00:30:56,040 To var atļauties tikai pārrakstīt visa lieta. 637 00:30:56,040 --> 00:30:58,680 Jums nav, lai selektīvi patīk uzminēt, ko atjaunināt. 638 00:30:58,680 --> 00:31:02,186 >> Facebook, ja jums patīk iegūt jaunu ziņu, kas MVC, 639 00:31:02,186 --> 00:31:04,060 jūs ir jāatceras, OK, mainīt lietas 640 00:31:04,060 --> 00:31:06,260 pie augšpusē lapa, ziņu ikona. 641 00:31:06,260 --> 00:31:08,290 Arī pop jaunu logu apakšā. 642 00:31:08,290 --> 00:31:10,070 Arī veikt jaunu lieta šajā logā. 643 00:31:10,070 --> 00:31:11,060 Arī atskaņot skaņu. 644 00:31:11,060 --> 00:31:13,150 >> Tas ir daudz sīkumi iet vienā un tajā pašā laikā. 645 00:31:13,150 --> 00:31:15,320 Un tāpēc, ja jums nav ir Shadow Dom, jūs 646 00:31:15,320 --> 00:31:18,740 ir to darīt manuāli, jo jūs nevarat atbrīvoties no visu lapu. 647 00:31:18,740 --> 00:31:21,430 Jūs nevarat atļauties, tāpēc jums ir mainīt katru lieta manuāli, 648 00:31:21,430 --> 00:31:23,990 kas ir tiešām kaitinošas, jo MVC. 649 00:31:23,990 --> 00:31:27,640 >> Tā, lai tā būtu taupīgs, tie selektīvi 650 00:31:27,640 --> 00:31:30,750 atjaunināt lapu, kas ir efektīva, bet arī kaitinošas. 651 00:31:30,750 --> 00:31:34,002 In reaģēt, jo ēna Dom, jūs saņemsiet abas lietas par brīvu. 652 00:31:34,002 --> 00:31:35,710 Tas ir efektīvs, jo no Ēnu Dom. 653 00:31:35,710 --> 00:31:37,210 Sašaurinājums atjaunina lapu. 654 00:31:37,210 --> 00:31:40,292 Tas nedara koku manipulācijas. 655 00:31:40,292 --> 00:31:41,250 Jūs saņemsiet efektivitāti. 656 00:31:41,250 --> 00:31:45,420 Jūs arī saņemsiet lietošanas ērtumu, jo ja jūs vienkārši pārrakstīt visu lapu, 657 00:31:45,420 --> 00:31:48,970 bet jūs tikai zināt, viss ir labi, lietas gribam būt lapā kaut kur. 658 00:31:48,970 --> 00:31:51,180 Tas var būt citā vietā, bet tas būs lapā, vai ne? 659 00:31:51,180 --> 00:31:52,860 Tātad jūs tikko atkal padarīts visa lieta praktiski, 660 00:31:52,860 --> 00:31:55,540 un jūs varētu veikt pāris izmaiņas pašas lapas. 661 00:31:55,540 --> 00:31:57,850 >> Tātad, atkal, MVC jums būtu jāizvēlas 662 00:31:57,850 --> 00:32:01,840 starp lietošanas ērtumu un efektivitāti, un reaģēt, jums abiem. 663 00:32:01,840 --> 00:32:04,020 Tātad, tas ir labāk. 664 00:32:04,020 --> 00:32:05,220 Jēga? 665 00:32:05,220 --> 00:32:06,676 Solid. 666 00:32:06,676 --> 00:32:12,080 >> Labi, tāpēc pieņemsim redzēt parunāsim mazliet par 4 soli, 667 00:32:12,080 --> 00:32:14,740 Kā mēs varam iestrādāt komponentus. 668 00:32:14,740 --> 00:32:16,260 Tāpēc mums ir šīs tiesības tagad. 669 00:32:16,260 --> 00:32:19,420 Mums ir mūsu atdzist maz pogu. 670 00:32:19,420 --> 00:32:23,157 Mēs varam uzsist to atpakaļ un tālāk, un tas ir viss, tā dara. 671 00:32:23,157 --> 00:32:24,990 Teiksim, mēs vēlamies, lai ir cits komponents. 672 00:32:24,990 --> 00:32:28,730 Teiksim mūsu flashcard app vajadzētu satur sarakstu ar visiem kartes 673 00:32:28,730 --> 00:32:31,520 ka jums ir tā, ka nozīmē, ka mēs būtu cits komponents. 674 00:32:31,520 --> 00:32:32,970 Nu, varbūt to sauc par saraksta skata. 675 00:32:32,970 --> 00:32:36,200 Veidosim saraksta skatu, ka sadzīvo ar CardView, 676 00:32:36,200 --> 00:32:39,680 un šis saraksts skats un CardView patiks strādāt kopā. 677 00:32:39,680 --> 00:32:43,190 Un jūs varat apvienot tos lai padarītu mūsu app jums. 678 00:32:43,190 --> 00:32:45,160 >> Tātad, pirmkārt, pieņemsim veikt pāris vairāk kartes taisnība. 679 00:32:45,160 --> 00:32:46,370 Teiksim, ko kārtis? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 Un tieši tāpēc man nav nesa jūs ar ierakstot to, 682 00:32:51,910 --> 00:32:53,410 Es esmu tikai gatavojas kopēt to no šeit. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 Un tāpēc es esmu gatavojas ne to tikai vienu karti. 685 00:33:03,580 --> 00:33:06,910 Es esmu gatavojas sniegt tai masīvu kartes. 686 00:33:06,910 --> 00:33:10,240 Tātad vispirms progr gatavojas lauzt tagad. 687 00:33:10,240 --> 00:33:14,717 Labi, tāpēc mēs ejam, lai padarītu Tas spēj apstrādāt vairākas kartes. 688 00:33:14,717 --> 00:33:17,800 Tātad, pirmkārt, mēs ejam uz to, kas nav tikai vienu karti, bet masīvs kartēm, 689 00:33:17,800 --> 00:33:18,700 kā sarakstu kartēm. 690 00:33:18,700 --> 00:33:20,980 Un šajā gadījumā, mums ir trīs no tiem. 691 00:33:20,980 --> 00:33:27,280 >> Labi, tik tik app ir gatavojas saņemt sarakstu kārtis, 692 00:33:27,280 --> 00:33:29,870 un tas notiek, lai izlemtu, kura viens parādīt uz CardView. 693 00:33:29,870 --> 00:33:33,740 CardView var tikai padarīt vienu karti, bet app 694 00:33:33,740 --> 00:33:37,610 saņem sarakstu ar visām kartēm, vai ne? 695 00:33:37,610 --> 00:33:40,820 >> Tātad, kad jūs izrēķināt vienu card dot CardView, 696 00:33:40,820 --> 00:33:44,660 kā tu domāju, jūs varētu būt iespēja pieņemt lēmumu par to, kura karte 697 00:33:44,660 --> 00:33:47,064 Parādīt? 698 00:33:47,064 --> 00:33:49,980 Lai dotu jums mājienu, tas ir uz laiku Jums tiks skatāties noteiktu karti. 699 00:33:49,980 --> 00:33:53,260 Ja jūs atsvaidzināt lapu, jūs vienkārši doties atpakaļ uz pirmo karti. 700 00:33:53,260 --> 00:33:55,464 Tas ir OK, jo tas ir īslaicīgs. 701 00:33:55,464 --> 00:33:56,630 Ko paņēmiens varētu mēs izmantojam? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> Mērķauditorija: Jūs varētu veikt mainīgo tāpēc tāpat kā jums bija priekšā. 704 00:34:08,760 --> 00:34:11,989 Vai tas ir taisnība, jūs varētu ir pašreizējais card ir vienāds ar 1? 705 00:34:11,989 --> 00:34:14,150 >> Neel MEHTA: Jā, tāpēc mēs vēlas, lai būtu valsts, vai ne? 706 00:34:14,150 --> 00:34:16,080 Jūs varētu izmantot stāvoklī, komponents, lai noskaidrotu 707 00:34:16,080 --> 00:34:17,288 kura karte mēs vēlamies iegūt. 708 00:34:17,288 --> 00:34:19,290 Tāpat mums ir saraksts visas kārtis, mēs 709 00:34:19,290 --> 00:34:21,630 izmantot valsts, lai noskaidrotu viens no pirmās kartes, 710 00:34:21,630 --> 00:34:23,710 otrkārt karte, trešais karte, un tā tālāk. 711 00:34:23,710 --> 00:34:28,760 >> Tātad app tik lietotne saņems ir getInitialState funkciju, 712 00:34:28,760 --> 00:34:35,020 getInitialState funkcija atgriešanās. 713 00:34:35,020 --> 00:34:39,929 Un mēs tikai teikt activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Tātad tagad mūsu app ir tā paša valsti. 715 00:34:42,889 --> 00:34:47,179 >> Un tāpēc tagad uz apmetuma, lai noskaidrotu karte, pieņemsim tikai iet uz masīva 716 00:34:47,179 --> 00:34:49,969 un paķert lieta pie šī indeksa. 717 00:34:49,969 --> 00:34:53,580 Select karšu vienādas this.props.cards this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 Tātad, kā jūs redzēt šeit, tad aksesuārus un Valsts faktiski strādā kopā. 720 00:35:00,162 --> 00:35:08,990 Tāpēc tagad, ka mums ir mūsu activeCard, mēs to saucam activeCard, 721 00:35:08,990 --> 00:35:10,470 un pieņemsim redzēt, ja tas darbojas. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [Dzirdams] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Ak, tas bija teksts kļūda. 726 00:35:44,900 --> 00:35:45,400 Ah. 727 00:35:45,400 --> 00:35:51,420 728 00:35:51,420 --> 00:35:54,840 >> Atdzesē, Yep, tāpēc tagad mēs bijām atpakaļ lai kur mēs bijām pirms, vai ne? 729 00:35:54,840 --> 00:35:57,100 Pats vecais programma izņemot Tagad mēs varam atbalstīt 730 00:35:57,100 --> 00:35:59,390 saraksts kartēm, ne tikai vienu karti. 731 00:35:59,390 --> 00:36:04,130 Un tagad, atkal, ja mēs mainīt activeIndex, mēs var iet no 0 līdz 1, 732 00:36:04,130 --> 00:36:07,330 un tagad, otrkārt karte, un tad mēs devāmies uz 0. 733 00:36:07,330 --> 00:36:10,390 Tātad, šeit ir jauns souped-up versija mūsu. 734 00:36:10,390 --> 00:36:16,000 >> Labi, tāpēc tagad pieņemsim ir saraksta skatu, ka parāda visas kārtis savu programmu, 735 00:36:16,000 --> 00:36:19,980 tāpēc mēs veiksim jauna sastāvdaļa sauc ListView. 736 00:36:19,980 --> 00:36:22,155 Ļaujiet ListView vienāds react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Tāpēc mēs vēlamies, lai tas padara Nekārtots sarakstu ar objekta sarakstā par katru karti. 739 00:36:38,800 --> 00:36:41,490 Un tāpēc mums ir ķekars kartes. 740 00:36:41,490 --> 00:36:44,990 Mēs vēlamies vienu saraksta elementu par katru karti, labi? 741 00:36:44,990 --> 00:36:47,490 Mēs varētu darīt, lai cilpu vai kaut lai izveidotu jaunu saraksta elementu. 742 00:36:47,490 --> 00:36:50,522 Bet kā jūs darīt to Reaģēt, izmantojiet lieta, ko sauc karte. 743 00:36:50,522 --> 00:36:57,150 Karte ir rīks vai funkcija lietojat ka par katru posteni, darbojas dažas funkcijas, 744 00:36:57,150 --> 00:36:59,510 notiek atgriešanās vērtību, un dod jums, ka atpakaļ. 745 00:36:59,510 --> 00:37:06,310 >> Tā kā, piemēram, mums ir masīvs 1, 2, 3.map function-- un šī 746 00:37:06,310 --> 00:37:12,120 ir saīsinājums priekšlikums function-- x arrow x reizes x. 747 00:37:12,120 --> 00:37:16,110 Tas stāsta par katru numuru 1., 2., 3., ņemt to. 748 00:37:16,110 --> 00:37:17,800 Kvadrātveida, un dot to atpakaļ. 749 00:37:17,800 --> 00:37:22,090 Tātad, ko jūs domājat 1, 2, 3.map x iet uz x reizes 750 00:37:22,090 --> 00:37:25,480 x dod jums atpakaļ dota ka šī funkcija ir 751 00:37:25,480 --> 00:37:27,680 palaist uz katru šī masīva elementa. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> Mērķauditorija: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> Neel Mehta: Yep, 1, 4, 9 jo jums 1 reizes 1. 755 00:37:35,709 --> 00:37:36,500 Tas dod jums vienu. 756 00:37:36,500 --> 00:37:37,690 Tas ir pirmais elements. 757 00:37:37,690 --> 00:37:38,530 >> 2 reizes 2 ir 4. 758 00:37:38,530 --> 00:37:39,570 Tas ir otrs elements. 759 00:37:39,570 --> 00:37:40,310 3 reizes 3 ir 9. 760 00:37:40,310 --> 00:37:41,540 Tas ir trešais elements. 761 00:37:41,540 --> 00:37:42,640 Jēga? 762 00:37:42,640 --> 00:37:45,015 Tātad karte ir Tehnika jums izmantot funkcionālās programmētājiem, 763 00:37:45,015 --> 00:37:48,090 jaunais stils programmēšana kaut ko darīt 764 00:37:48,090 --> 00:37:50,500 katram elementam savā sarakstā. 765 00:37:50,500 --> 00:37:51,970 Un tā tas izklausās pazīstami. 766 00:37:51,970 --> 00:37:53,370 Mums ir karšu sarakstu. 767 00:37:53,370 --> 00:37:56,860 Mēs vēlamies, lai iegūtu sarakstu postenis ik viens, tāpēc mēs tikai izmantot karti šeit. 768 00:37:56,860 --> 00:38:00,250 Mēs sakām, ļaujiet saraksts vienāds this.props, kartes, karte. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> Un tāpēc, karti, mēs esam gatavojas radīt saraksta elementu 771 00:38:15,070 --> 00:38:17,580 ar šīs kartes saturu pusi no tā. 772 00:38:17,580 --> 00:38:20,660 Pieņemsim tikai teikt, ka mēs vēlamies dot no kārtis jautājums, tāpēc card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Tātad šis saraksts ir kopējais masīvs LI ir vai saraksta elementus 775 00:38:30,649 --> 00:38:32,440 ja tur ir viens saraksts postenis katrai kartei, 776 00:38:32,440 --> 00:38:35,150 un kas satur kartēm jautājumu. 777 00:38:35,150 --> 00:38:37,640 Jēga? 778 00:38:37,640 --> 00:38:39,450 >> Atdzesē, tāpēc tagad pieņemsim faktiski drukāt ka out. 779 00:38:39,450 --> 00:38:46,521 Tātad mums atgriezīs ul. 780 00:38:46,521 --> 00:38:49,020 Inside šo Nekārtots sarakstā, mēs tikai stick visu sarakstu 781 00:38:49,020 --> 00:38:49,890 ka viņi deva mums. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Cool. 784 00:38:53,350 --> 00:38:56,060 >> Labi, tāpēc tagad šis saraksts skats strādā tikai atrast. 785 00:38:56,060 --> 00:38:59,842 Visus jautājumus par saraksta skatā? 786 00:38:59,842 --> 00:39:01,270 Jums ir ķekars kartes. 787 00:39:01,270 --> 00:39:02,800 Jūs veicat saraksta elementu par katru karti. 788 00:39:02,800 --> 00:39:05,466 Un jūs viņus iekšā Nekārtots sarakstu, un jūs arī tā atpakaļ. 789 00:39:05,466 --> 00:39:09,410 Tāpēc tagad pieņemsim lēmumu, lai mēs embed šis iekšpusē mūsu app, 790 00:39:09,410 --> 00:39:14,310 tāpēc mēs varam darīt, saraksta skatu. 791 00:39:14,310 --> 00:39:17,070 Ko arguments mēs pāriet uz sarakstu viedokli? 792 00:39:17,070 --> 00:39:18,320 Ko īpašības mēs arī tā? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Atcerieties, ja jūs piešķirat tas ķekars kartēm, 795 00:39:26,860 --> 00:39:29,590 tas būs padarīt sarakstu skatītos uz šīm kārtīm. 796 00:39:29,590 --> 00:39:32,267 Tātad, kas būtu mums iet šeit kā argumentu? 797 00:39:32,267 --> 00:39:33,350 Mērķauditorija: saraksts kartēm? 798 00:39:33,350 --> 00:39:37,130 Neel MEHTA: Jā, tā kartēm vienāds this.props.cards, vai ne? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 Un tāpēc vienīgais problēma ir tas, ka jūs varat tikai 801 00:39:44,370 --> 00:39:48,600 Izrādījās vienu augstākā līmeņa elements padarīt, tāpēc tev ietiniet to div. 802 00:39:48,600 --> 00:39:49,100 Tas ir dīvaini. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Tātad, pieņemsim redzēt, ja kas. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Vai tas darbojas? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Yep, tur jums iet. 809 00:40:31,030 --> 00:40:33,700 Tāpēc tagad mums ir saraksts kartīšu apakšā, 810 00:40:33,700 --> 00:40:36,180 un tad mums ir mūsu CardView sevi uz augšu, 811 00:40:36,180 --> 00:40:40,486 un kas būs uzsist starp abas puses uz kartes. 812 00:40:40,486 --> 00:40:42,610 Tagad tas, ka jēga, kā es to izdarīju? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 Jā, tā atkal, mums ir divi komponenti. 815 00:40:46,790 --> 00:40:49,666 Pirmais komponents izdrukas ārā katru karti sarakstā. 816 00:40:49,666 --> 00:40:50,540 Tas ir saraksts skats. 817 00:40:50,540 --> 00:40:54,770 Un otrais komponents izdrukā tikai šo karti. 818 00:40:54,770 --> 00:40:58,840 Ja jūs to zināmu karti, tas būs izdrukāt informāciju par šo karti 819 00:40:58,840 --> 00:41:01,870 un ļauj uzsist uz priekšu un atpakaļ. 820 00:41:01,870 --> 00:41:05,850 >> Tātad, ja mēs gribam, mēs varam mēģināt runāt par pievienojot dažas jaunas funkcijas, lai šo. 821 00:41:05,850 --> 00:41:09,482 Pretējā gadījumā mēs varam runāt mazliet vairāk aptuveni no ātruma reaktora, 822 00:41:09,482 --> 00:41:11,190 vai arī mēs varam atbildēt jautājumi jums varētu būt 823 00:41:11,190 --> 00:41:15,050 jo tie visi ir no galvenajām daļām no reaģēt, ka es gribu runāt. 824 00:41:15,050 --> 00:41:16,540 Mēs varam iet uz priekšu. 825 00:41:16,540 --> 00:41:17,590 Mēs varam atbildēt uz jautājumiem. 826 00:41:17,590 --> 00:41:18,560 Ko vien tu vēlies. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> Mērķauditorija: Vai jūs izmantojat JSX normālā JavaScript? 829 00:41:24,205 --> 00:41:27,150 Vai ir tā, ka kaut kas nāca ar [dzirdams]? 830 00:41:27,150 --> 00:41:30,760 >> Neel MEHTA: Jautājums ir CAN Jūs lietojat JSX ar normālu JavaScript? 831 00:41:30,760 --> 00:41:32,620 Atbilde ir jā. 832 00:41:32,620 --> 00:41:41,070 JSX ir tikai veids, kā to ņem savu JavaScript ka ir HTML iekšpusē no tā, 833 00:41:41,070 --> 00:41:44,215 un tas apkopo vērā JavaScript ka nav HTML iekšpusē no tā. 834 00:41:44,215 --> 00:41:47,880 Tātad paziņojums that-- tik pamanīt šeit. 835 00:41:47,880 --> 00:41:50,820 Tas izskatās, ka jums ir, piemēram, div un jums ir sīkumi iekšpusē no tā. 836 00:41:50,820 --> 00:41:54,970 >> Tas apkopo JavaScript ka tāpat rada to pašu. 837 00:41:54,970 --> 00:41:59,590 Es domāju, ko es saku, ka JSX ir tikai sintaktisko, kā tas ir 838 00:41:59,590 --> 00:42:03,530 apstrādātāju JavaScript daudz piemēram, PHP ir apstrādātāju HTML. 839 00:42:03,530 --> 00:42:05,490 AS ir apstrādātāju JavaScript, kas ļauj 840 00:42:05,490 --> 00:42:12,970 jūs nodot HTML iekšpusē JavaScript. 841 00:42:12,970 --> 00:42:16,425 Un tādēļ, ja jums ir tiesības transformators kas ir lieta, ko sauc [nedzirdama] 842 00:42:16,425 --> 00:42:17,300 kas būs pārveidot. 843 00:42:17,300 --> 00:42:19,360 Tiesības apstrādātāju, tas būs jums darīt. 844 00:42:19,360 --> 00:42:20,235 >> Mērķauditorija: [dzirdams] 845 00:42:20,235 --> 00:42:23,026 Neel MEHTA: Parasti nav nepieciešams likt HTML iekšpusē JavaScript 846 00:42:23,026 --> 00:42:24,110 ja vien jūsu dara reaģēt. 847 00:42:24,110 --> 00:42:27,146 Bet jūs varat darīt to anyway. 848 00:42:27,146 --> 00:42:27,645 Yep? 849 00:42:27,645 --> 00:42:29,353 >> Mērķauditorija: Es domāju, ka jūs bija aprakstīts React 850 00:42:29,353 --> 00:42:31,970 kā funkcionāla programing valodā. 851 00:42:31,970 --> 00:42:35,646 Mēs esam mācīšanās C in CS50. 852 00:42:35,646 --> 00:42:38,032 Vai C arī funkcionāla valoda? 853 00:42:38,032 --> 00:42:39,990 Neel MEHTA: Tātad jautājums ir par funkcionāls 854 00:42:39,990 --> 00:42:43,010 versus cita lieta, ko sauc par obligāti vai procesuālo programmēšana. 855 00:42:43,010 --> 00:42:44,820 Ir divu veidu programmas tautas. 856 00:42:44,820 --> 00:42:48,550 Viens sauc procesuālais, kas ir visu par, piemēram, dara komandas, 857 00:42:48,550 --> 00:42:51,510 un viens ir funkcionāla, kas ir visi par kuru funkcijas un kam 858 00:42:51,510 --> 00:42:52,930 ieejas un izejas no tiem. 859 00:42:52,930 --> 00:42:55,930 Reaģēt ir funkcionāla paradigma. 860 00:42:55,930 --> 00:42:58,010 C ir ļoti procesuāls paradigma. 861 00:42:58,010 --> 00:43:02,360 >> Un kā piemēru, C piemēram, jums nav darīt šo deklaratīvs ceļu 862 00:43:02,360 --> 00:43:04,390 padarīt programmu, vai ne? 863 00:43:04,390 --> 00:43:06,826 Jums ir ko teikt, izdrukāt to. 864 00:43:06,826 --> 00:43:07,950 Mainīt šo datu struktūra. 865 00:43:07,950 --> 00:43:08,530 Izdrukāt šo. 866 00:43:08,530 --> 00:43:10,160 Tas viss ir par komandas. 867 00:43:10,160 --> 00:43:12,640 >> In React, tur nav ka daudzas komandas. 868 00:43:12,640 --> 00:43:15,145 Tas ir visu par ņemot sastāvdaļas jūs likts kopā. 869 00:43:15,145 --> 00:43:16,300 Viņi, piemēram, funkciju. 870 00:43:16,300 --> 00:43:26,360 Jums ir, piemēram, funkciju sauc CardView, 871 00:43:26,360 --> 00:43:28,680 kas ir funkcija kas ir ieejas, izejas, 872 00:43:28,680 --> 00:43:30,660 un tā React ir visi par šo filozofiju 873 00:43:30,660 --> 00:43:32,700 mums no having-- jums ir dati. 874 00:43:32,700 --> 00:43:34,910 Jums iet caur šo algoritms, un tas būs 875 00:43:34,910 --> 00:43:36,800 izejas HTML, ka jums tikko iespiests lapu, 876 00:43:36,800 --> 00:43:39,180 un tāpēc jums ir veidot to gabalu pa gabalu. 877 00:43:39,180 --> 00:43:42,800 >> Tātad, lai pievērstu metaforu tam, kas Es teicu, jūs zināt, cik 878 00:43:42,800 --> 00:43:47,050 Facebook, ja jums ir ziņa, un jūs izvēlēties, ko daļas atjaunināt, 879 00:43:47,050 --> 00:43:47,882 tas ir procesuāla. 880 00:43:47,882 --> 00:43:48,840 Tas ir svarīgi, vai ne? 881 00:43:48,840 --> 00:43:49,806 Labi, es saņēmu ziņu. 882 00:43:49,806 --> 00:43:50,930 Pieņemsim mainīt kontu tur. 883 00:43:50,930 --> 00:43:52,110 >> Pieņemsim pop logs šeit. 884 00:43:52,110 --> 00:43:52,780 Pieņemsim mainīt kontu tur. 885 00:43:52,780 --> 00:43:53,700 Pieņemsim izdarīt šo šeit. 886 00:43:53,700 --> 00:43:55,220 Tas ir procesuāls pieeja. 887 00:43:55,220 --> 00:44:00,240 >> Tas ir kādas lietas, piemēram, leņķa, Boost, Backbone, citas sistēmas izmantot. 888 00:44:00,240 --> 00:44:01,200 Reaģēt ir funkcionāls. 889 00:44:01,200 --> 00:44:03,324 Tas ir ļoti atšķirīgs veids domājot par lietām. 890 00:44:03,324 --> 00:44:07,950 Tas aizņem šo ideju par pieņemsim ir funkcijas vai algoritmi, kas jums 891 00:44:07,950 --> 00:44:08,800 arī tā datus. 892 00:44:08,800 --> 00:44:11,820 Tas būs izspļaut ko tas vajadzētu būt, un dators 893 00:44:11,820 --> 00:44:13,490 parūpēsies par svēršanas out. 894 00:44:13,490 --> 00:44:15,890 Jums nav galā pats. 895 00:44:15,890 --> 00:44:18,470 Vai, kas padara mazliet sajūtu? 896 00:44:18,470 --> 00:44:18,970 Yeah? 897 00:44:18,970 --> 00:44:24,180 >> Mērķauditorija: In funkcionālā valodā, viss notiek uzreiz? 898 00:44:24,180 --> 00:44:26,800 >> Neel MEHTA: Nē, lietas notiek kārtībā. 899 00:44:26,800 --> 00:44:29,320 Tāpat šeit tur ir vēl pasūtīt, bet tas nav 900 00:44:29,320 --> 00:44:32,390 jānotiek, lai līdzīgu lielīt, komanda, komandu. 901 00:44:32,390 --> 00:44:36,459 Tas notiek secībā funkcija dod jums produkciju. 902 00:44:36,459 --> 00:44:37,750 Put, ka uz citu funkciju. 903 00:44:37,750 --> 00:44:39,550 Put, ka uz citu funkcija, cita funkcija. 904 00:44:39,550 --> 00:44:41,470 >> Ja jūs CS51, jums mācīties funkcionālās programmas 905 00:44:41,470 --> 00:44:42,886 nedaudz no darbības jomas šis. 906 00:44:42,886 --> 00:44:45,090 Bet būtībā, kas padara Reaģē cool ir ne tikai 907 00:44:45,090 --> 00:44:46,840 vienvirziena datu plūsmas un virtuālā Dom, 908 00:44:46,840 --> 00:44:48,700 bet arī šī ideja funkcionālā programmēšana. 909 00:44:48,700 --> 00:44:51,720 Un funkcionālā programmēšana ir ļoti viegli sacerēt un padarīt cool stuff no, 910 00:44:51,720 --> 00:44:53,844 un tas ir ļoti viegli domāt par un iemesls apmēram. 911 00:44:53,844 --> 00:44:55,450 Tātad, tas ir vēl viens labs izloze reaģēt. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Kādi jautājumi? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Yeah? 916 00:45:03,150 --> 00:45:06,840 >> Mērķauditorija: Um, kāpēc jūs izmantot ļaujiet pretstatā Var? 917 00:45:06,840 --> 00:45:10,450 >> Neel MEHTA: Tātad jautājums ir kāpēc jūs izmantojat dariet nevis Var? 918 00:45:10,450 --> 00:45:13,220 Šī ir lieta, ko sauc ES6 vai ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 Tā ir jaunā versija JavaScript. 920 00:45:15,820 --> 00:45:19,050 Tur ir ķekars tehnisku iemeslu dēļ, bet pieņemsim, ir labāks variants var. 921 00:45:19,050 --> 00:45:20,724 >> Tas ir, kā jūs deklarēt mainīgos. 922 00:45:20,724 --> 00:45:21,390 Jūs varat izmantot ļaut. 923 00:45:21,390 --> 00:45:22,140 Jūs varat izmantot var. 924 00:45:22,140 --> 00:45:23,825 Ļaut ir ķekars tehnisko reasons-- jūs varat meklēt tos 925 00:45:23,825 --> 00:45:25,610 up later-- kāpēc tas ir labāk. 926 00:45:25,610 --> 00:45:28,780 Būtībā, ES6 ir daži jauki Jaunais sintakse, dažas jaunas funkcijas 927 00:45:28,780 --> 00:45:30,720 virsū veco JavaScript. 928 00:45:30,720 --> 00:45:32,782 >> Tāpēc mums ir līdzīgi piecas minūtes. 929 00:45:32,782 --> 00:45:34,990 Es tikai gribēju runāt par vēl viena lieta reālā ātri. 930 00:45:34,990 --> 00:45:36,450 Ja jums bija kādi jautājumi, parunāsim par to pēc tam. 931 00:45:36,450 --> 00:45:38,366 Bet tikai tāpēc tas izpaužas nozvejotas kameras, es tikko 932 00:45:38,366 --> 00:45:41,550 gribu runāt mazliet par to, kā jūs faktiski izmantot reaģēt jūsu progr. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Ja jūs iet šeit, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 tas ir mājas lapa reaģēt, un tas jums parādīs, kā jūs faktiski izmantot 936 00:46:03,320 --> 00:46:05,320 Reaģēt jūsu lapas. 937 00:46:05,320 --> 00:46:08,845 Būtībā, tas ir nedaudz sarežģīts mēģinot instalēt reaģēt. 938 00:46:08,845 --> 00:46:12,300 Tas nav tik vienkārši, kā jūs vienkārši velciet un piliens JavaScript tur. 939 00:46:12,300 --> 00:46:15,890 >> Jums ir jābūt jūsu transformators izveidots, kas, kā tas bija agrāk, 940 00:46:15,890 --> 00:46:18,120 savukārt jūsu JSX vērā normālā JavaScript. 941 00:46:18,120 --> 00:46:21,030 Jums ir lieta, kas būs sastādīt jūs ES6 normāli. 942 00:46:21,030 --> 00:46:24,720 JavaScript tur ir daudz kustīgu daļas, kas Jums jādara, tāpēc tur ir lieta 943 00:46:24,720 --> 00:46:27,200 sauc Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 Un tas ir komandrindas rīks, kas būs palīdzēs jums Sastatņu savu React 945 00:46:31,110 --> 00:46:32,380 projekti viegli. 946 00:46:32,380 --> 00:46:38,660 >> Tātad jūs varat lasīt par šo vēlāk, bet ir daži instrumenti 947 00:46:38,660 --> 00:46:40,160 ka Yeoman piedāvā. 948 00:46:40,160 --> 00:46:43,280 Tie būs jums izveidot React app ar visu uzcelta. 949 00:46:43,280 --> 00:46:46,030 Tāpat tas būs esam izveidojuši in, sastāvdaļām celta. 950 00:46:46,030 --> 00:46:47,880 Tas būs jūsu transformators uzcelta. 951 00:46:47,880 --> 00:46:50,699 Viņiem ir daudz atdzist sīkumi uzcelta automātiski 952 00:46:50,699 --> 00:46:52,240 izmantojot šīs lietas sauc ģeneratori. 953 00:46:52,240 --> 00:46:54,620 >> Tātad, lasīt par to, ja vēlaties. 954 00:46:54,620 --> 00:46:59,110 Tikai iet uz sīkmuižnieks, Y-E-O-M-A-N, un Jūs varat atrast ģeneratoriem, piemēram, šo. 955 00:46:59,110 --> 00:47:01,263 Un ar ģeneratoriem, piemēram, šiem, jūs vienkārši patīk viens 956 00:47:01,263 --> 00:47:03,010 ir pāris komandrindas komandas. 957 00:47:03,010 --> 00:47:05,530 Tas būs Sastatņu veic kādu Visa React app jums. 958 00:47:05,530 --> 00:47:10,470 Tā saņemsiet visu manuālo cauruļvadus, un grunt darbs jums, 959 00:47:10,470 --> 00:47:13,010 un tas ir iemesls, kāpēc jūs tikai koncentrēties par tikai rakstiski reaģēt. 960 00:47:13,010 --> 00:47:16,739 >> Tātad būtībā ēka Reaģēt app ir netriviāls. 961 00:47:16,739 --> 00:47:19,530 Tas vadu viss kopā, bet tur ir instrumenti, kas būs darīt to you. 962 00:47:19,530 --> 00:47:23,070 Tātad, ja jūs vēlaties, lai padarītu React app, mēģiniet darīt to, ka veidā. 963 00:47:23,070 --> 00:47:26,360 Ja jūs vienkārši vēlaties eksperimentēt, Jūs varat mēģināt izmantot šo CodePen 964 00:47:26,360 --> 00:47:28,550 jo tas ir CodePen visi reaģē vadu. 965 00:47:28,550 --> 00:47:30,240 Es esmu darījusi visu darbu jums jau. 966 00:47:30,240 --> 00:47:34,610 >> Tātad, ja jūs vēlaties, lai Like ražošana atbrīvot React app, 967 00:47:34,610 --> 00:47:37,220 izmēģināt vienu no šiem ģeneratoriem. 968 00:47:37,220 --> 00:47:40,240 Ja jūs vienkārši vēlaties spēlēt apkārt, tas bieži vien ir vērts tikai 969 00:47:40,240 --> 00:47:44,490 tāpat kā mēģināt spēlēšanās uz CodePen šeit. 970 00:47:44,490 --> 00:47:45,470 Skaņa laba? 971 00:47:45,470 --> 00:47:45,970 Cool. 972 00:47:45,970 --> 00:47:47,890 >> Tātad tas ir viss, kas man ir. 973 00:47:47,890 --> 00:47:52,470 Atkal visi kodu un piemēri ir būs šajā tīmekļa vietnē šeit. 974 00:47:52,470 --> 00:47:55,509 Tātad, atkal, mēs nerunāja par daudz sintaksi React, 975 00:47:55,509 --> 00:47:57,550 bet, lai atrastu visiem tiem maz sintaktiskās detaļas, 976 00:47:57,550 --> 00:48:00,320 tas viss būs pieejams šajā mājas lapā šeit. 977 00:48:00,320 --> 00:48:02,660 >> Tāpēc es gribētu ieteikt, piemēram, spert pirmo soli. 978 00:48:02,660 --> 00:48:06,277 Ielieciet to savā CodePen. 979 00:48:06,277 --> 00:48:08,110 Mēģiniet strādā, lai padarītu tā uz otro soli. 980 00:48:08,110 --> 00:48:11,310 Tur ir Ceturtais solis, un tikai redzēt, kur jūs saņemsiet no tā. 981 00:48:11,310 --> 00:48:14,840 >> Kādi jautājumi, pārbaudiet out šajā lapā vai e-pastu man. 982 00:48:14,840 --> 00:48:16,490 Tas ir mans e-pasts. 983 00:48:16,490 --> 00:48:19,885 Bet es labprāt palīdzētu jums ar jebkuru jautājumi jums varētu būt par reaģēt. 984 00:48:19,885 --> 00:48:21,010 Tātad, Yep, tas ir viss, kas man ir. 985 00:48:21,010 --> 00:48:23,410 Paldies jums visiem ir ļoti daudz skatoties vai apmeklēšanai. 986 00:48:23,410 --> 00:48:26,820 Un es ņemšu kādi jautājumi Jums varētu būt pēc šo tagad. 987 00:48:26,820 --> 00:48:29,140 Tātad paldies visiem, skatoties. 988 00:48:29,140 --> 00:48:31,270