[MÜZİK OYUN] 

NEEL MEHTA: İşte gidiyor. 

Eh, herkes, web hoşgeldiniz ile geleceğin uygulamalar tepki. Bu CS50 olduğunu. Benim adım Neel olduğunu. Ben CS50 ve bir ikinci bir ta değilim Harvard Koleji ve çok, çok az tutkulu bir web geliştirici. Yani çok heyecanlı değilim Bugün size konuşuyor, Burada ya da evde olsanız izlerken, yaklaşık yine hangi tepki Ben web uygulamaları, gelecekte dediği gibi. 

Yani tepki bir web çatısıdır. Ben oldum Ve söylüyorum Burada bazı insanlar, Bir çerçeve bir olduğunu kullanabileceğiniz araçları seti yapısı ve web uygulaması oluşturmak için. Ve web uygulamaları, yine web siteleri Facebook gibi interaktif yönündedir, Twitter.com, Instagram.com, ne olursa olsun. 

Yani Facebook bir web çerçevesi Bu Facebook tarafından geliştirilen tepki back-- birkaç yıldır. O zamandan beri kullanılan oldu Mobil uygulamalar Facebook ve web uygulaması, Instagram. Khan Academy başka bir şeydir tepki belirgin erken benimseyen. 

Gerçekten alıyorum oldu son derece popüler. Hiç Köşeli veya benzeri şeyler kullanıyorsanız Omurga, bu ailenin özel bir, ama o zamandan beri çok var Onların popülerlik geçmek. Bu sıcak yeni bir şey. O gerçekten çok büyük. 

Ve böylece tepki bir şekilde değil, sadece iyi Bina arabirimleri için web framework. Bu web arayüzleri oluşturmak için iyi. Bir şey de var denilen Yerli tepki hangi Eğer arabirimleri oluşturmak sağlar Android ve iOS için Gelecekte belki diğer platformlarda sadece aynı JavaScript kodunu kullanarak. Sen aynı kullanabilirsiniz JavaScript kodu, web siteleri oluşturmak için Android uygulamaları ve iOS uygulamaları işlemek için. 

Bu çok, çok heyecan verici bir zaman. Bu gerçekten, gerçekten harika bir fırsat. Gerçekten evrensel bir web bulunuyor arayüz geliştirme aracı, bu yüzden, bir çok, çok var: Önemli olan bilmek. Ve, ben insanlara anlatmaya gibi daha önce, bu, bence, biz nasıl değişecek sonsuza web uygulamaları oluşturmak. Bu yüzden belki biraz abartma, ama ben bunu bilmek için oldukça iyi bir şey olduğunu düşünüyorum. 

Tamam, bu yüzden tepki nedir? Tepki bir çerçeve yapabilirsiniz olduğunu arabirimleri oluşturmak için kullanabilirsiniz. Bir arayüz, yine, Sağ bir web sayfası? Yani burada Instagram.com var, kullanır tepki. 

Üzerine inşa edilmiştir tepki bileşenlerin fikir. Bir bileşen, bir HTML Steroid eleman, böylece bir HTML elemanı bir düğmeye gibidir. Bu bir paragraf var. Bu bir başlık değil mi? Ve Instagram bu kullanmak, ancak bu olacak Ayrıca tepki bileşenlerini kullanacağız. 

Bileşenleridir React souped-up HTML öğeleri kendi davranışlarını var içlerindeki. Yani, bir örnek olarak, biz olabilir Zaman elemanı, bir zaman bileşeni, bu gibi maddeleri de ihtiva edecektir Zaman damgası, bilirsin bir profil bileşeni, profil görüntüsünü içerecektir ve kişinin adı. Bu gibi sayaç var hangi sever sayısı gibi sayabilir, bunu tıklarsanız ve bu olacak sever sayısını artırmak. Bir bileşen bir olduğunu HTML kodu demet o bazı işlevler vardır bunun içinde tamamladı. Yani bir HTML elemanı gibi steroid, ben daha önce de söylediğim gibi. Bu bileşenleri alabilir, ve onları bir araya koyabilirsiniz olarak, yeni bileşenler yapmak Bu durumda, bir post bileşeni, hangi tüm bu şeyler içerir. Bu, Profil Zaman içerecektir, LikeCounter, belki açıklama ve belki de görüntü kendisi. Ve böylece web uygulamaları sadece alınarak inşa edilir bileşenleri ve onları bir araya koyarak. Bir Instagram yem başka bir şey daha mesajların bir grup birbiri ardına, Her mesaj, Zaman gibi içerdiği Böylece, LikeCounter Profil ve. Bu tür bir ev inşa gibi. Sen inşa yok yukarıdan aşağıya ev. Seni components-- almak banyo gibi alır. Sen onları sopa bedroom-- almak Birlikte ve yeni bir bileşeni var. Evin yeni bir parçası var. 

Böylece tüm etrafında inşa edilmiştir React bileşenlerinin bu fikir bildirime ki, interaktif. Ne sadece söylemek gibi profil, ve bu işler. Onlar composable vardır. Bir zaman ve bir profil alabilir, koymak onları bir arada, daha iyi bir şey yapmak. Ve onlar eğer öyleyse, yeniden konum sen Bir yazı için kaynak koduna sahip, O hiçbir yerinde embed olabilir. 

Bir Instagram gömebilirsiniz Kendi web sitesinde bir şey. Facebook gömebilirsiniz, örneğin, sürece kullandığı yanı sıra tepki. Yani bileşenler gerçekten, gerçekten, gerçekten web güçlü yapı taşları Bu her yerde kullanılabilir ve konabilir Birlikte yeni yapı taşlarını yapmak. Bu çok, çok var üst düzey bakış. Yani, yine, varsa herhangi bir noktada herhangi bir soru reaktörün, felsefesi hakkında kodlama, beni durduramaz, ve bana bildirin. 

Tamam, bu yüzden dolayı serin tepki olduğunu seyir için farklı bir yol vardır Web uygulamaları oluşturmak nasıl. Muhtemelen MVC, a duydum modeli CS50 veya ne olursa olsun kontrol Kullanmak sondalama sınıfların diğer. Ve en çerçeveler vardır MVC fikri etrafında inşa. React değildir. Fikri etrafında inşa edilmiştir tepki tek yönlü veri akışı Burada bu grafik veya grafik tarafından görüldüğü gibi. 

Temelde, bir veri kaynağı var. Ve veri kaynağı karar verecek nasıl bazı bileşenleri düzenlemek için. Ve bileşenler olacak Sonra onlar değiştirdiğinizde, onlar söyleyecektir Veri kaynağı değiştirmek için. 

Instagram kullanmak için örnek aklınıza gelebilecek gibi yazılan nesnelerin bir listesi Bir veritabanı veya bir şey. Veri That. Ve sonra bizim post bileşenleri Bu verileri alacak, ve işlemek için bu verileri kullanmak Ekranda bir şey. İşte ne ok , bileşen veriden ve o aynı veri kullanılmıştır parçalarını bir araya işlemek için. 

Facebook Messenger'da için React olan örnek, Eğer bir liste olabilir veri kaynağı olarak mesajlar. Ve bu değil kılacak mesajlarının yalnızca liste ama aynı zamanda arkadaş listesi var. Sen okunmamış sayısını var. Belki de Facebook şeyi işlemek Bu Facebook.com dibinde. Aynı veriler olan bir Gerçeğin tek kaynak ve bir sürü neden olur bileşenleri işlenecek. Ve ne zaman onlardan biri bileşenleri değiştirilir geri gider ve veri kaynağını değiştirir. 

Haklısınız, bir mesaj göndermek? Bu veri kaynağını değiştirir. Sen mesajları okumak, böylece 0 okunmamış ayarlayın. Bu veri kaynağını değiştirir. Ve birinin bu olduğunu hiç fark ok Aynı verilere geri dönüyor Kaynak, bilirsin, bu yüzden Belirli bir veri seti göz önüne alındığında, Eğer tam olarak ne sayfa gibi bakmaya gidiyor. Bu deterministik değil. Sen, verilen belirli verileri biliyorum ne sayfa gibi bakmaya gidiyor. Bunu gidiyor nasıl tahmin edebilirsiniz davranması ve nasıl gidiyor Onlar bir araya olduğunuzda çalışmak. 

Ve ben bir milyon bileşenleri olsaydı Burada, doğru, aynı davranırdı? Eğer herhangi olmazdı Garip bağlantıları. Bir veri milyon bileşenlerini render. Bir milyon bileşenleri olabilir Geri dönüp verileri düzenleyin. Ve böylece bu çok güzel. Biz, composable inşa ediyoruz Kolayca ölçeklenebilir web uygulamaları. 

Sen bir veri kaynağı, Gerçeğin kaynağı. Bu sizin bileşenleri anlatır nasıl sayfasını düzenlemek için, ve bileşenler olacak etkileşim anlaştım. Ve onlar değiştirmek isterseniz şeyler, sadece geri dönmek ve veri kaynağı değiştirmek için söyle. Mantıklı? Yani tepki tüm anlayışı hakkında nasıl bir bileşen oluşturmak için ve bileşen nasıl dış dünya ile etkileşim. 

Bileşen etkileşim yapma dış dünya ile Başka bir teknolojiyi kullanır adı Akı, burada bir çerçevedir React üzerine ilave edildi. Biz bu konuda konuşmak için gitmiyoruz. Biz verilen hakkında daha fazla konuşacağız Veri, nasıl bir bileşeni hale getirebilir? 

Ve böylece çünkü sen gerçekten iyidir tepki İstediğiniz arka uç ile kullanabilirsiniz. Bir Python arka uç gibi varsa, Python bazı verileri tükürmek eğer, Bunu hale getirebilir tepki. Hiç JS çıkışları ise Verilerin, React sayılmaktadır. Ruby ile raylar Veri, React sayılmaktadır. 

Yani tepki temelde bir web bileşenleri ile bir ön uç view-- herhangi bir veri kaynağı için. Ve böylece veri kaynağından gidiyor bileşenleri tepki oldukça kolaydır. Başka bir yol gidiyor biraz daha zordur. Daha önce de bahsettiğim gibi bu Flux kullanır. Biz içine almazsınız. Biz daha fazla odaklanmak gerekir veri için bileşenli tarafı. Yapabileceğiniz Bu şekilde Serin, eğlenceli web uygulamaları. Bu dış dünyayı etkilemez Şimdilik, ama bu başka bir hikaye. 

Tamam, eğer öyleyse burada olduğunu benim son seminer için sizin için kod tüm bileceksiniz Bugünün tartışma bu URL'de olacak Burada, üzgünüm, burada bu URL. Ve temelde biz gitmek için gidiyoruz belki dört adımda, beş aracılığıyla, Muhtemelen değil beş. Biz dört adımlarında hareket edeceğiz Bir örnek bina app tepki. Ve böylece tüm kaynak kodu yolun her adımı için eğer öyleyse, burada olacak Eğer evde birlikte takip ediyorsanız Bu kodu incelemek için çekinmeyin. Burada birlikte aşağıdaki ediyorsanız, biz ekranda gösteriyor olacak yani bu konuda endişelenmeyin. Ama evde iseniz, hissediyorum Bu web sitesini ziyaret etmek için ücretsiz. Ve, evet, sen almak gerekir Hiç burada ihtiyacım olacağını tüm kodu. Bu yüzden iyi bir hile sac yanı var ile gelecekteki macera için tepki. Serin, eğer öyleyse burada herkes, ve evde olsanız bile, is.gd/cs50react, bu web sitesini yukarı çekin, sermaye yok, çizgi, hiçbir şey. 

Sen görünen bir sayfa görürsünüz Böyle biraz. Bu CodePen adında bir şeydir. CodePen işbirlikçi olduğunu kodlama ortamı hangi ile ben burada kod yazmak ve olabilir o size otomatik olarak gönderilir. Ve bu şekilde, ben kod yazabilirsiniz. Burada kod çalıştırabilir. 

Example-- için ve görmek reloads-- eğer, Ben sayfada JavaScript kodunu koşuyorum Burada, ve olacak otomatik olarak bir web sayfasını oluşturmak Bu JavaScript kodu ile. Ve böylece bu bir yoldur Bize kodu denemek için kullanmak zorunda kalmadan gerçekten hızlı Bizim kimlik veya yerel makine kullanmak ya da her neyse. Bu mockup için çok hızlı bir yoldur ve kod farklı test. 

Yani alarak gidiyorum Örnek kod, burada koyarak. Biz bunun üzerinden çalışan için gidiyoruz. Ve evde iseniz, hem de bu kadar indirebiliriz. Ve ben zaten yükledim Burada tepki böylece sadece can Buraya kendi kod yazmak ve Kendi oyun alanı olarak deneyin. 

Evet, herkes eğer Burada bu bağlantıyı açın. Bana bir başparmak verin Eğer açık bir kez yukarı. Serin serin serin. Hiçbir şey, şimdi burada var ama biz çok yakında değişecek. 

Tamam, bir JavaScript tepki Kütüphane, ve bu şekilde, , JavaScript bilgi gerektirir hangi web programlama dilidir. Ve diğer şeyler için kullanılan ediliyor Artık çok ama öncelikle web geliştirme dil, sen Bilmediğiniz eğer öyleyse bu, JSforCats.com adında bir site okuyun. Bu harika. Siz JavaScript öğrenebilirsiniz yarım saat içinde. Bu inanılmaz. 

Yani bunu bir okuma verir. Biz de burada nedeniyle HTML bir sürü Biz tabii ki web sayfalarını tasarlarken ediyoruz. Eğer aşina iseniz Yani HTML, HTMLdog.com check out. Ben tepki bir olduğunu öğrenmek düşünüyorum milyon kez daha kolay zaten eğer yapı taşlarını biliyorum. Eğer bileşenler varsa, bu kadar kolay daha büyük bir bileşeni yapmak. Senin dilini tepki var. 

Şimdi git ve vermek bunlar bir okuma. Bu videoyu duraklatma. Iseniz oa okuma ver evde değilseniz HTML veya JavaScript aşina Tamam, bu yüzden biz gidiyoruz yapmak, biz yapmak için gidiyoruz olduğunu tepki kullanarak çok temel bir Flashcard uygulaması. Biz bir flashcard için gidiyoruz. Sen ileri ve geri kart çevirebilirsiniz. Ve biz de bir liste olacak Elimizdeki tüm kartlar, ve biz hissettiğiniz hırslı, biz olabilir arasında geçiş yapabiliyor üzerine tıklayarak arabalar. 

Ama bu çıplak olduğunu kemikler, çok basit bir uygulama tepki. Ve böylece bu aslında uygulamak için önemsiz değil, ama biz bunu yaparsanız, o göstermek için gidiyoruz Bu, onu genişletmek için çok, çok kolay diğer insanlar size yardımcı olursa. Bu yüzden dört adım adım gidiyoruz Sıfırdan başlayarak bu inşa etmek. 

Tamam, bu yüzden dört adım, yaparız ilk adımla başlamak. İlk adım olacak İlk bileşen bina. Daha önce de söylediğim gibi, bir bileşeni tepki steroidler, sadece bir HTML öğesidir. Bu HTML belirtir ve bazı davranış ve insanlar nasıl belirleyecek Bunun nasıl iletişim kurabilirim iç devleti olurdu. Bir düğme kaç gibi bilecek gibi Zaman örneğin tıklandığında oldu, ve kendisini nasıl düzenleneceğini bilecek. 

O yüzden go ahead ve oluşsun bizim JavaScript kullanarak birinci bileşen. Sözdizimi garip görünüyor Yani, bu tür çünkü bu. Yani, yine, biz gidiyoruz adı verilen bir değişken yapmak Uygulamaya kelime izin kullanarak, hangi bir değişken yapar, App eşit React.createClass edelim. 

Tepki bir kütüphane vardır ve sınıf işlevi oluşturun. Bu işlevi kod biraz size Yeni oluşturmak için kullanabilirsiniz bileşeni tepki türü. Ve böylece React.createClass Bir bileşen yapar ve bu bileşen olacak şeyler yapmak mümkün. Yapabildiği en önemli şey olduğunu kılmak bir şey, bir fonksiyon olarak işlemek. 

Yine, bu endeks için açık değilse , seni Kediler için JS gitmek öneririz ve check it out. Yeterince iyi yakınlaştırıldığında? Güzel. 

Böylece her bileşen ihtiyacı render işlevi var. Hale işlevi diyor Ekranda ne yazdırırım? Ama bileşen bunları yapmazsa işe yaramaz bu yüzden, ekranda ne yazdırmak için biliyorum Eğer bir hale işlevi olması gerekir. 

Size bir şey vermek Yani Sadece bazı HTML dönmek gerekiyor. Ve serin olduğunu denen bir şey var Bir uzantısı JSX, Tarafından kullanılan JavaScript tepki. Bu içeride HTML yazmak diyelim senin JavaScript, hangi zaman garip tür sesler İlk düşün, ama sonradan anlamda bir çok yapar. Yani biz bunu yapabilirsiniz. HTML aşina iseniz, biliyorum Biz genel amaç bir div var şeyler için kap. Biz içeride bir div dönmek edebilirsiniz Bu div, biz bir şeyler koyabilirsiniz. 

Yani biz sadece işlemek istiyoruz diyelim Şimdilik düz-up flashcard. Flashcard, ben söyleyebilirim Bir soru-cevap olacaktır. Yani bu div içinde, diyelim bir paragraf çıktı Bu nedir sorum diyor yaşam için nihai bir cevap, evren? Ve sonra cevap 42, tabii ki, olacak. 

Bu hiç de iyi gelmedi. Evet, temelde gerçekten can senin JavaScript içinde HTML yazmak. Ve bu olacak Ekranın içine basılmış. Öyleyse bunu deneyelim. 

Bu yüzden bizim bileşeni var. Biz koymak React söylemek gerekir Ekranda bileşeni Böylece React.render, bu fark, biz Başka eleman gibi app davranın. Bir HTML öğesi olarak biz bunu yazmak. Yerine img gibi söyleyerek gibi Paragraf görüntü veya p, App yüzden, App bilgileri HTML elemanı gibi muamele. Daha önce söylediğim gibi, bu kadar steroid bir eleman. 

Yani App işlemek ve bunu koymak için bir yer verir. Ve bu nasıl yapabilirsiniz olduğunu nereye koymak için bunu söylemek. Ben basit bir div oluşturduk Sayfanın bir kimlikle denilen sayfa, ve bu nerede eleman gidecek. 

Ve biz HTML ile çalıştırmak için gitmiyoruz. Temelde bu almak için gidiyor Bu sayfa öğesinin içine koymak Biz ekranda olması. Yani bu kod çalışır ve bu çizer Ekranda bir şey, bu yüzden buradayız. Biz bizim ilk tepki bileşen yaptık. 

Yani sadece bir recap olarak, biz nazikçe yapılan bileşeninin yeni bir tür, değil mi? Bu ne React.createClass var. Ve bu bileşende, biz o ne yapması gerektiğini söyledim. Her bu bileşen için ekrana basılacak, o div ile yazdırılır bunun içinde iki paragraf. 

Ve ne yaptığını, biz yeni bir uygulama yapılmış açılı ayraç app gösterimi kullanılarak. Biz bunu koymak için söyledim sayfa öğesi içinde. Ve bu yüzden ben ne yaptım, yarattığı Bu şablondan yeni bir uygulama. Ve sonra ben bunu işlemek için söyledim. Bu yüzden, söz konusu tamam, uygulama, Ne çıktı ki? App, bir div çıktı gidip diyor bunun içinde iki paragraf ile. Ve işte, bizim div var bunun içinde iki paragraf. Şimdiye kadar mantıklı? 

Yani, yine, bütün meydan tepki Sadece bileşenlerin nasıl bilmektir. Nasıl yapılır bileşenler birlikte çalışır. Şimdi ilk yaptık bileşeni, geri dönelim ve bileşenler özelleştirilebilir olun. Yani HTML nasıl biliyorum senin düğmeleri sınıfları verebilir? Sen çapa href verebilir. Haklısınız, sizin girişleri bir tür verebilir? Daha özel verebilir senin elemanların tüm özellikleri daha ilginç hale getirmek için. Ve biz aslında yapabiliriz aynı şey. 

Yani istediğimiz diyelim bizim app herhangi bir kart hale gitmek için. Şu anda biz sadece kodlanmış kart render. Biz sadece bir tane var biliyorum Kart yapabilirim, bu yüzden sen Deneyin ve şimdi bu değişecek Biz sadece bazı kart verebilir. Bu kartı basalım. 

Denemek ve yapmak gerektiğini sizin bileşenleri çok genel amaçlı. Yani bu şekilde ben e-posta olabilir Bu benim arkadaşım ve gibi olmak, Eğer varsa ne flashcard, Sadece burada içine yem, ve kendisi bunu yapacağız. Diğer koyabilirsiniz Kendi app şeyler. 

Ama önce, bu yıkalım iki bileşenden içine, ama biz Kartı ayırmak istiyoruz Gerçek uygulama kısmından baskı parçası. Yani biz yapabiliriz ne olduğunu App değiştirebilirsiniz CardView için bir uygulaması için yeni isim, ve yeni bir yapabilirsiniz bileşeni, App denilen Eski App ile karıştırılmamalıdır. Biz createClass var, ve HTML gibi, Eğer yuva bileşenlerini tepki olabilir birbirlerinin içine. 

Bu hale işlevinde Yani işlev dönüş CardView, ve bu aynı şeydir. Aynı şey neden görüyor musun? Bunun yerine sadece app render ki , bunun içinde div ve eşleştirme vardır App CardView işler ve CardView div ve paragraf vermektedir. Yani bu bizim ilk örneğidir birbirinden içindeki geçme elemanlarının. bu mantıklı mı? Yani, yine, bir CardView öğesi var. Biz app öğeleri o daha büyük olduğunu. 

Tamam, bu yüzden istediğimiz bizim CardView-- eğer İyi bir CardView belli kartı vermek, Doğru, sizin için basalım? Yani ilk, biz bir kart yapmak gerekir, bu yüzden bir kart nesne yapalım. Yani kartımı izin equal-- Eğer tüm tanıdık iseniz, Bu sadece gösterim yapma olduğunu JavaScript nesne. Bu bir yapı gibi bir şey C, bu yüzden, bir kart yaptı ve şimdi biz bu kartı iletebilirsiniz Bir mal veya HTML bir nitelik olarak Bizim app terminoloji. Yani biz bu App yapabilirsiniz Kart MyCard eşittir. 

Siz giriş yapmanız biliyorum Giriş tipi metin veya düğme eşittir sınıf bootstrap için btn eşittir ,? Aynı fikir App kart equals-- Diş teli koymak zorundasın var-- Uygulama kartı MyCard eşittir, bu nedenle bu Biz bu kart nesne var diyor. Ben olarak geçmek için gidiyorum Uygulamaya bileşeni özelliği. Ve bu uygulama bileşeni olacak erişmek mümkün olacak ve do onunla ilginç şeyler. 

Yani bizim app olacak Bir kart verilir, şimdi bu yüzden, Sadece vermek en app atalım CardView kart kendisi uygulama değildir çünkü gibi onunla ne yapacağını bilecek, böylece biz sadece CardView veririm. Yani biz bunu geçmek olacak Aynı şekilde, kart, eşittir ve böylece her bir bileşen erişebilirsiniz kendisine verilmiştir şeyler. Onlar özelliklerine erişebilirsiniz bunun için verilmiştir this.props.card, bu sözdizimini kullanarak. 

Peki burada olduğunu olmuyor Eğer MyCard nesnesi var. Sen app içine geçmesi App kartı kullanarak MyCard eşittir. Bu kart nesnesi app verilir. App erişebilirsiniz this.props.card olarak. Bir görüntünün gibi bir şey 's kaynak ne olduğunu bilir. 

Bu uygulama bu kart ne bilir olduğunu ve onunla bir şeyler yapabilirsiniz. Bu hesaplamalar yapabilir. O kapalı dayalı kararlar verebilirsiniz. 

Şimdilik, ben geçmek gidiyordu CardView üzerine this.props.card. Şimdiye kadar mantıklı? Şimdi daha mantıklı olacak. 

Tamam, şimdi biz CardView konum. Kart verilir Bizim CardView, gerektiği onun soru-cevap çıktı. Şu anda biz sadece dışarı basılmış bazı kodlanmış soruları ve cevapları. Biz ihtiyacımız konrtol anlamaya ihtiyacımız var Onlar bize verdi kartı sormak için Ne soru ve cevap ve sonra ekranın içine bu çıktı. 

Yani biz burada yapabiliriz. İlk eşit yapmak begin-- kılıyor. Peki biz burada yapıyoruz biz biliyorum kartları, bir özellik bize verilen sağ? Bir girdi olarak bize verdi. Neredeyse gibi gibi bir işleve argümanlar. Kart bir argümandır Neredeyse bu CardView için. 

Biz ayıklamak ve koyacağım değişken soru. Emin olun gitti cevap Değişken cevap. Kart cevap olduğunu sorar. Ve şimdi bu var, bunun yerine metni baskı, Biz yazdırmak için gidiyoruz ne olursa olsun onlar bize verdi. 

Yani bu yüzden gidiyoruz stuff-- Soru Cevap söndürmek için. Bu işe yararsa görelim. Serin, bu yüzden bu kadar çekilsin bir kez daha emin olmak için. 

Yani benim kartı kartı nesnedir ve biz app bu kartı veriyoruz. Ve uygulaması sürecekse Kart ve CardView vermek. Ve bu CardView eğer diyor Bana herhangi bir flashcard nesnesini vermek Ben onun soru çıktısını edeceğiz ve cevap, değil mi? 

Yani ne yapabilirim ben yapabilirsiniz olduğunu İlk bu kodu göndermek Arkadaşıma kodumu 10 hatları gibi. Onu gömmek olabilir Kendi uygulama. Ve yine aynı şeyi yaptı sürece, , CardView kartı bu eşittir gibi O CardView yarattığı sürece ve ona doğru bilgi verdi, kendi kartını hale getirebilir. Ve böylece bu şekilde, o gerçekten var inşa etmek için serin bir yol Doğru, birbirini kullanımı bileşenler? Bu kart, ben yayınlamak olabilir internette bu CardView, ve insanlar bunu kullanmak mümkün olacaktır. Yani temelde, bu biri gibi C kütüphanesinde standart fonksiyonlar. 

Bu bir fonksiyon nerede birisi onu yazmıştır. Belirli bir giriş vermek. Belli bir çıktı üretmek gerekir. Bunu nasıl çalıştığı hakkında umurumda değil. Sürece bunu hakkı vermek gibi girişi, doğru çıktı yapacağız. 

Ve bileşeni olabilir Aynı şekilde düşündüm. Bu CardView gibi Bir kütüphane fonksiyonu. Bunu biraz kart verirseniz bir özellik olarak, bu olacak Bu kartın içeriğini yazdırabilirsiniz. Ben kartımı değiştirirsem gibi Bunun yerine 5 artı 37 ne gibi, buna göre güncellenir. Dolayısıyla, sadece giriş değiştirerek, belli bir çıkış olur. Yani neredeyse bileşenlerin aklınıza gelebilecek bu şekilde fonksiyonları gibi olduğu Birlikte koyabilirsiniz. Bu CardView gibi girdi olsun girdi olarak, çıktıyı olsun. Bu durumda, çıkış HTML. Şimdiye kadar mantıklı? Serin, bu yüzden daha özelliklerdir Eğer bilgi aktarmak nasıl içine ve bileşenleri dışında. 

Tamam, bu yüzden bu yapalım şey interaktif. Şu anda bu sıkıcı tür. [Inaudible] nedir? Sen, bazı yazdırabilirsiniz ama bu yapabileceğimiz tek şey. 

Yani en geri dönelim Şimdilik sadece eski bir soru. Tamam, şimdi bu bileşenler hepsi çünkü sıkıcı, onlar girdi olsun. Onlar çıkış tamam mı? Bu sıkıcı türüdür. Bizim sahip olmak istiyorum bileşenleri için mümkün İç devletinin bir çeşit gibi bir şey hatırlıyorum. 

Bir flashcard için için Devletin örneği ne tür Eğer isteyebilirsiniz Bir flashcard için hatırlıyor musun? Ne geçici statü hatırlamak isteyebilirsiniz Bir Flashcard app bir flashcard için? HEDEF KİTLE: Bu çevirdi oldu İster? NEEL MEHTA: sağ, evet. Yani tutmak isteyebilirsiniz iz yukarı yüz veya are Eğer kartta yüz aşağı. Facebook, örneğin, sen-cekti news feed nerede hatırlamak istediğiniz Sizi ya da profil kim ister Şu anda yapıyoruz. 

Messenger, On ne metin sizi gibi Doğru, giriş kutusuna yazın? Sayfayı yenilemeniz, o gider. Ama gerçekten umrumda değil. Bu sadece geçici. Evet? 

HEDEF KİTLE: [duyulamaz] NEEL MEHTA: bir flaş gibi Kart, gördüğünüz olabilir gibi Soru tarafı veya cevap tarafı? 

HEDEF KİTLE: Tamam. 

NEEL MEHTA: Like a Doğru, flashcard iki taraflı? Evet, bu yüzden istediğiniz şimdi bu fikrim yok Ben, girişler gibi olan özelliklere sahip ama ah, geçici devlet, sayfada nerede, değil mi? Yine, ben Facebook dedi Messenger, hangi kişinin gibi var Eğer Facebook inceliyorsunuz ya da kim haklı, profil değil mi? 

Bu geçicidir. Bu kullanıcıyı göstermek önemlidir neler oluyor, ancak sayfayı yenileyin oluyor. Bu gerçekten önemli değil. Bu yüzden, geçici devlet var bu yüzden hepimiz devlet. 

Yani, yine, devlet ve sahne var. Dikmeler giriş yapılırsa veri kaynağından. Devlet sadece varsayılan gibidir. Sadece şeyler gibi olduğunu şey interaktif hale getirir. 

Yani bizim CardView-- en atalım Bizim CardView-- güzel oldu. Burada yapacağımız şey, biz gidiyoruz CardView ve sadece CardView dokunun. Ve böylece arkadaşım bu onlar kim var herhangi bir fark olmaz. Onlar değiştirmek zorunda olmazdı kendi kodunu herhangi ama onlar görmek istiyorum onların CardView kadar souped var. Bu bileşenler hakkında güzel bir parçası. 

Tamam, bizim CardView yüzden, deneyelim ve biz aşamalı konum olsun takip veya yüz aşağı. Tepki biz öncelikle bunu İlk devlet belirterek. Nerede kart başlıyor? 

Yani getInitialState adında bir işlevi olabilir işlev ve biz bir nesne döndürür. Bu nesne, bazı devlet içerir ve Bir devlet, sadece bir anahtar-değer çifti. Kullanabilmesidir gibi, bir anahtar ve bir var adı bir dize gibi değeri var. 

Bu durumda, ön doğrudur diyelim. Bu bir devlet olduğunu söylüyor. Devletin bir bileşeni Ön adı verilen bir niteliktir. [Duyulamaz], varsayılan olarak bu yüzden, Biz kartın ön konum, ve biz bunu değiştirebilirsiniz biz kartı çevirin. Mantıklı? 

Tamam, şu anda, biz konum hale soru-cevap gösteren. Şimdi ne yapmalıyım soru göstermek olduğunu Biz kartın ön iseniz yani Cevap kartın arkasında içindir. Tüm yapmak yüzden Kart interaktif. Yani bu burada deneyelim. Peki, ilk sadece bir değişken yapın. Biz this.state.front Şimdi sorabilirsiniz. Aynı biz devlet erişmek erişim sahne, yani this.state.front. 

Biz ön iseniz, sonra metin this.props.card.question olduğunu. Biz önündeki iseniz Kart, biz denemek ve kapmak için gidiyoruz Karttan bir soru. Aksi takdirde, arka yüzünde iseniz Kartın, biz ne yapacağız? 

HEDEF KİTLE: Cevap? 

NEEL MEHTA: Evet, böylece metin this.props.card.answer eşittir. Eğer dikkat ederseniz Ama biz kullanıyoruz Devlet bir karar Şimdi bileşeni nedeniyle farklı görünecektir Bu onunla nasıl etkileşimde kapalı tabanlı. Bunun yerine, bu yazdırmanın Biz sadece metin yazdırmak olacak. Serin, şimdi çok, gördüğünüz gibi, biz sadece soruya bakınız. Ve ben burada manuel durumunu değiştirmek durumunda Ön yanlıştır biz 42 geri almak. 

Yani, yine, bu bileşen kendi devletini vardır. Bir düğme olmadığını bilir gibi o, basılı veya oldu bu şey ne olduğunu bilir ön ya da arka yüzünde. Varsayılan olarak, ön yüzünde bulunuyor. Ve sonra önünde ise, Biz soruyu basalım. O arka yüzünde ise, biz olacak cevabı çıktı. Yani, yine, bilgi verilen ile aynıdır. Sadece farklı görünüyor Eğer programlamak nasıl dayalı. Yani, örneğin, Facebook Messenger, Aynı veri kaynağını almak bile, farklı görünebilir Devlet farklı olduğu için. Bir bakıyoruz Farklı kişinin mesajı. 

Tamam, bu nedenle bu tüm iyi ve iyi, ama şimdi ne aslında olsun, değiştirmek bize mümkün yapmak bizim kart ön ya da geri döndü. Biz bir flip ekleyerek yapabilirsiniz düğmesine karta bir düğme o o [duyulamaz] eğer kart çevirmek olacaktır. Yani burada, bu bir düğme ekleyelim düğme ve bu düğme çevirme diyecekler. 

Ve böylece şimdi, o hiçbir şey yapmaz. Sadece güzel görünüyor. Ne yapabiliriz biz bir tık ekleyebilirsiniz olduğunu işleyici, onClick, this.flip eşittir ve daha sonra kapağı tanımlamak gerekir. Ama temelde, onClick bir fonksiyonu olduğunu Kullanıcı tıklattığında çağrılır. 

Yani düğme bilecek o tıklandığında ne zaman. O tıklandığında oldu gitti, o kart çevirmek olacaktır. Bu sizin gibi bir tür pizza dağıtım adam. Sen gibi tüm haklısın zaman birileri Birazdan, pizza teslim edeceğiz, beni çağırıyor? 

Bu dinleyici kayıt. Sen bir olayı dinlemek. Sen denir ve ne zaman olsun Olay bir şeyler olur. Pizza olsun. Bu durumda, ne zaman sen tıklandığında, kartın çevirin. 

Ve böylece biz tanımlamanız gerekir kart çevirmek olacak fonksiyonu, bu yüzden biz bu hakkı yazacağım Burada, fonksiyonu çevirin. Ve böylece çevirme ne yapacak sizce? Yine bu zaman çağrılan biz flip düğmesini tıklatın. Fonksiyon çevirme ne yapmalıyım? 

HEDEF KİTLE: Değişim this.state.front true gelen true false false. 

NEEL MEHTA: Evet, bu yüzden ne olursa olsun almak this.front ön devlettir bu--. Eğer ön devleti alın o yanlış yapmak, doğru. False ise, sağ, doğru yapmak? Yani o deneyelim. 

Sen devlet değiştiremezsiniz Sadece this.state yaparak. Bunu yapamazsın. Bunu yapamazsın. Sen bir işlevi kullanmak zorunda this.setState denir. 

Yani this.setState ön söyleyebiliriz Kolon Bu yerde, yine, ünlem nokta tersi anlamına gelir. Ben eğer bu sanırım. state.front doğrudur, yanlış döneceğiz. Bu yüzden devlet olarak atayacağız true gelen false. False ise, biz olacak true false olarak ayarlayın. 

Sadece biz kurmak ve biraz olsun fark farklı ve bu yüzden bunu deneyelim. Bada bing, şuna bak. Flip düğmesi artık olacak devlet önden arkaya geçin. 

Eğer gördüğünüz Ve böylece burada tepki ve büyü biraz. Biz söylemedi gibi yeniden işlemek için. Biz bir şey yeniden çizmek söylemedim. Bunu yapıyorsanız Tepki vermeden, şimdi etsen ne zaman aşağıdaki amaçlara gibi var çevirme düğmesi tıklandığında Eğer bunu söylemek zorundayız El Sağ, re-render? 

Gerçekten serin olduğunu tepki olduğunu eğer oa belli devlet ve özellikleri vermek, her zaman verecek aynı şey. Ve böylece biz hiç değiştirdiğinizde Devlet ve özellikleri, tepki, sadece her şeyi yeniden oluşturur. Bu bir var olduğunu bilir Bire bir yazışma devlet ve parametre ve HTML arasındadır. Peki ne zaman bu ya Bir dizi devlet aracılığıyla tarafından değişiklikler o nasıl değişeceğini ödeme yeniden oluşturulur. Ve böylece temelde tepki gibi Değiştirmek için bekliyorum. 

Ne zaman bir şey değiştirir, o sayfanın tamamını re-render edeceğiz. Ve verimsiz sesler ise, olurdu, çünkü var ama tepki bir şey kullanır Bir Gölge DOM denir. Bunun yerine, doğrudan sayfa çizim, onu bellekte sanal HTML ağacı tutar. 

Biliyor musun, HTML bir ağaç gibidir, hiyerarşik bir veri yapısı gibi. Bu, bellekte sahte ağaç tutar ve sayfayı güncellemek zaman, Başka bir sahte çekersiniz ağaç ve hesaplarız ne yapmak gerekiyor değiştirmek sayfa iki ağaç eşit hale getirmek için. Yani temelde, neredeyse Çok yeniden oluşturur. Ve sonra sadece gibi değişiklikleri küçük tweaks sayfa gerektiği gibi, bu yüzden çok, çok, çok etkili. 

Yani temelde tepki olacak ne zaman bir şey değiştirmek, o yeniden işlemek neredeyse sayfa olacak. Ben ne ihtiyacım var anlamaya edeceğiz Gerçek sayfa yansıtacak yapmak için değiştirmek Sanal sayfa ve o yapacağız. Bu sanal DOM var. En büyük biri özellikleri React. 

bu mantıklı mı? Sorusu olan? Evet? 

HEDEF KİTLE: Nasıl MVC hala karşılaştırmak Konuştuğumuz o gibi kaynakların daha önce. 

NEEL MEHTA: Evet, soru o MVC farkı nedir nasıl? Sen kaynaklar hakkında sordu. Peki, bunun nasıl işlediğini bahsedelim. 

MVC, modeli güncellemek istiyorum. Bu durumda biz bir kart modeli olurdu. Görünüm olurdu çevirme düğmesi ve kontrol Flip işleve sahip olacaktır. Yani görünümü söylerdim Kontrolör çevirme çevirmek için. Kapak söylerdim değiştirmek için model değil mi? 

Ve böylece bir MVC sen, ne zaman Model değiştirmek için dinlemek, ve re-render buna görünümü. Ya da sadece beğenmek zorunda denetleyicisi vardır. Daha sonra modeli değiştirmek için bekleyin ve almak ve bir şey gibi bir kısmını seçmek değişmek. Burada bir şey var, ama büyük bir app, Ne hatırlamak beğenmek zorunda her yerde değişim, bu yüzden biraz sinir bozucu. Ve çok güzel tepki Bir Gölge Dom çünkü. Sadece gelemez tüm şey yeniden. Sen seçici zorunda değilsiniz gibi güncellemek için sanırım. 

Facebook isterseniz MVC, yeni bir mesaj almak, Eğer hatırlamak zorundayız Tamam, bir şeyleri değiştirmek üstündeki sayfa, mesaj simgesi. Ayrıca altta yeni bir pencere açılır. Ayrıca bu pencerede yeni bir şey yapmak. Ayrıca bir ses. 

O bir sürü şey var Aynı anda dışarı gidiyor. Ve değil mi eğer öyleyse Bir Gölge Dom var, şimdi etsen Bu elle çünkü yapmak zorunda Eğer bütün sayfanın kurtulmak olamaz. Sen göze alamaz, bu yüzden var elle her şeyi değiştirmek için, hangi MVC gerçekten can sıkıcı bir durum. 

Yani sipariş olmak tutumlu selektif olan sayfasını güncellemek verimli, ama aynı zamanda sinir bozucu. Çünkü Gölge, React Dom, ücretsiz hem de bir şeyler olsun. Bu verimli çünkü Gölge Dom. Darboğaz sayfasını güncelliyor. Bu ağaç işleme yapmıyor. Sen verim almak. Ayrıca kullanım kolaylığı nedeniyle olsun Sadece sayfanın tamamını yeniden eğer, ama sadece, tamam, şeyleri biliyorum yerde sayfada olacak. Bu farklı bir yerde olabilir, ama doğru, sayfada olacak? Yani sadece re-render Tüm şey neredeyse, ve bir çift yapmak olabilir Sayfanın kendisi değişir. 

Yani, yine, MVC sen seçmek zorunda kalacak Kullanım ve verimlilik kolaylığı arasında, ve her ikisi de olsun, tepki. Yani daha iyi. Mantıklı? Katı. 

Tamam, öyleyse konuşalım bakalım 4. adımda hakkında biraz, nasıl bileşenleri gömebilirsiniz. Yani biz şimdi bu hakka sahiptir. Biz bizim serin küçük düğme var. Onu geri çevirebilirsiniz ve ileri ve bu öyle hepsi bu. En biz istiyoruz diyelim Başka bir bileşeni var. En bizim Flashcard uygulaması gerekir diyelim tüm kartların listesini içerir Eğer varsa, böylece biz anlamı Başka bir bileşen olmalıdır. Eh, belki liste görünümü diyoruz. En bir liste görünümü yapalım o CardView coexists, ve bu liste görünümü ve CardView Birlikte çalışmayı gibi olacak. Ve bunları birleştirebilirsiniz Sizin için, bizim uygulama yapmak. 

Yani ilk, en bir yapalım Birkaç kart daha doğru. Diyelim ki, neyi kartlar? Ve sadece bu yüzden gerek yok Bunu yazarak ile delik size, Ben sadece buradan kopyalamak için gidiyorum. Ve bu yüzden değil gidiyorum o sadece bir kart verir. Ben o kartların bir dizi vereceğim. Bu yüzden ilk uygulamalar Şimdilik kıracağız. Pekala, biz yapmak için gidiyoruz Bu mümkün birden fazla kart işlemek için. Yani ilk, biz bunu vermek değil gidiyoruz Sadece bir kart ama kartların bir dizi, kartların bir listesi gibi. Ve bu durumda, biz üçü var. 

Pekala, app öylesine Bir liste kartlarını almak için gidiyoruz, ve karar için gidiyor hangi tek CardView göstermek için. CardView can sadece bir kart, ancak uygulamayı işlemek Tamam, kartların bir listesini alır? 

Yani bir anlamaya zaman Kart, CardView vermek Eğer mümkün olabilir tahmin ediyorum nasıl Bir karar vermek hangi kartı hakkında göstermek için? Size bir ipucu vermek gerekirse, geçici değil Belirli bir kart inceleyen olacak. Sayfayı yenilemeniz ederseniz, olacak sadece geri ilk kartı gidin. Geçici çünkü Tamam. Ne tekniği kullanabilir? 

HEDEF KİTLE: Bir değişken yapabilirdiniz böylece ön vardı gibi. Bu doğru mudur, sen-ebil Geçerli kart 1 eşittir var? 

NEEL MEHTA: Evet, biz bu yüzden Doğru, devlet olmasını istiyor musunuz? Siz devleti kullanmak istiyorsunuz bileşen anlamaya hangi kartı biz almak istiyoruz. Gibi biz bir listesi var Tüm kartlar, yaparız anlamaya devleti kullanın İlk kartın bir, böylece ikinci kart, üçüncü kart ve. 

Yani bir uygulama böylece app alacak , getInitialState işlevi vardır getInitialState fonksiyon dönüş. Ve biz sadece activeIndex 0 söylerim. Yani şimdi bizim app o kendi devlet vardır. 

Ve böylece şimdi anlamaya render Bir kart, Sadece diziye gidelim ve bu endeks de bir şey kapmak. Seç kart eşit this.props.cards this.state.activeIndex. Burada gördüğünüz gibi Yani, sahne ve Devlet aslında birlikte çalışır. Yani şimdi bizim activeCard var, Biz bunu activeCard arayacağım ve bu işler bakalım. [Duyulamaz] 

Oh, bu metin hata oldu. Ah. 

Serin, evet, şimdi biz geri olduğumuzu Daha önce nerede kalmıştık, doğru mu? Dışında aynı eski program şimdi biz destek olabilir kartların bir listesini değil, sadece bir kart. Ve şimdi, yine, biz değiştirirseniz activeIndex, biz 0'dan 1'e gidebilirsiniz ve şimdi ikinci kart, ve sonra 0'a gittik. Yani burada bir yeni fişekler kızımız sürümü. 

Tamam, şimdi en liste görünümü var izin vermenizi , programınızda tüm kartları gösterir bu yüzden yeni yapacağız bileşeni ListView denir. Liste görünümü react.createClass eşittir olsun. Bu yüzden sırasız işlemek istiyorum Her kart için bir liste öğesinin ile liste. Ve böylece biz kartların bir grup var. Biz bir liste öğesi istiyorum Her kart için, değil mi? Biz döngü için yapabileceği veya bir şey, yeni bir liste öğesi yapmak. Ama yolu bunu yapmak Tepki harita denen bir şey kullanın. Harita bir araç veya kullandığınız bir işlevdir her madde için, bazı fonksiyon çalışır, dönüş değeri alır ve Sana bu geri verir. 

Örnek olarak, biz dizi var So 1, 2, 3.Map function-- ve Bir için steno olan function-- x ok x kez x. Bu, her numara için diyor 1, 2, 3, al. Bunu kare ve onu geri ver. Yani 1 sizce, 2, 3.Map x x kere geçer x geri verilir verir Bu fonksiyonu olduğunu Bu dizinin her eleman çalıştırmak. 

İZLEYİCİ: 1, 4 9? 

NEEL MEHTA: Evet, 1, 4, 9 Eğer 1 kez 1 çünkü. Bu size bir tane verir. Bu ilk unsur var. 

2 kez 2 4'tür. Bu, ikinci bir unsur var. 3 kez 3 9. Bu üçüncü unsur var. Mantıklı? Yani harita bir teknik size sahip Fonksiyonel programcılar kullanmak, yeni stil bir şeyler yapmak için programlama listenizde her elemana. Ve böylece bu tanıdık geliyor. Biz kartların bir listesi var. Her bir liste öğesini almak istiyorum biri, böylece biz sadece burada haritayı kullanacağız. Biz liste eşittir izin söyleyeceğim this.props, kartları, harita. 

Ve böylece biz konum, bir kart verilir Bir liste öğesini oluşturmak için gidiyor Bunun o kartın içeriğini tarafı. Sadece biz vermek istiyoruz diyelim Kartlar yüzden card.question soru. Yani bu liste içeren bir LI ya da Liste Öğeler dizisi Nerede bir tane liste var Her kart için kalemi, ve bu kartlar soruyu içerir. Mantıklı? 

Serin, şimdi atalım aslında bu çıktı. Yani biz bir ul dönecektir. Bu sırasız listeye içinde, biz sadece tüm listeyi sopa Onlar bize verdi. Güzel. 

Pekâlâ, şimdi bu Liste görünümü sadece bulmak çalışır. Liste görünümü hakkında herhangi bir sorunuz? Sen kartların bir grup var. Her kart için bir liste öğesi yapmak. Ve sırasız içine koydu Liste ve bunu geri vermek. Yani şimdi o kadar biz gömmek hareket edelim Bizim app bu iç, bu yüzden, liste görünümü yapabilirsiniz. Ne argüman biz görünümü listelemek için geçmek? Ne özellikleri bunu veriyorsunuz? Eğer verirsen Unutmayın bu kartların bir demet bu liste yapacağız Bu kartları için görüntüleyin. Peki ne biz geçerdi Burada argüman olarak? HEDEF KİTLE: kartların listesi? NEEL MEHTA: Evet, kart yüzden Doğru, this.props.cards eşittir? Ve böylece tek sorun Bu sadece can olduğunu render bir üst düzey elemanı döndü böylece bir div kaydırmak için var. Bu garip. Yani eğer görelim. Bu çalışıyor mu? 

Evet, oraya gitmek. Yani şimdi bir liste var altındaki kart, ve sonra bizim var Üst kendini CardView, ve bu arasındaki çevirmek olacaktır Kartın iki taraf. Şimdi bunu nasıl yaptığını o mantıklı mı? Evet, bu yüzden yine biz iki bileşeni vardır. Birinci bileşen baskılar dışarı listedeki her kart. Bu liste görünümü var. Ve ikinci bileşen, sadece bu kart yazdırır. Bunu belli bir kart verirseniz, o olacak bu kart hakkında bilgi yazdırmak ve ileri ve geri çevirmek edelim. 

İstersek biz denemek ve tartışma böylece Bu bazı yeni özellikler ekleme hakkında. Aksi takdirde biz biraz daha konuşabiliriz reaktörün hızının yaklaşık, ya da biz cevap verebilir sorular aklınıza gelebilecek Çünkü bu çekirdek parçaları tümü ben hakkında konuşmak istiyorum tepki. Biz devam edebilir. Biz sorulara cevap verebilir. Ne istersen. 

HEDEF KİTLE: Eğer kullanabilir miyim Normal JavaScript JSX? Ya da bu bir şey olduğunu [duyulamaz] ile geldi? 

NEEL MEHTA: Soru kutu olduğunu Normal JavaScript JSX kullanabilir miyim? Cevabı evet. JSX sadece bir yolu sizin yanınızdaki sürer Bunun içinde HTML sahiptir JavaScript, ve JavaScript içine derler bunun içinde HTML yoktur. Yani bu yüzden burada dikkat ki- dikkat edin. Eğer div gibi var gibi görünüyor bu ve bunun içinde şeyler var. 

Bu JavaScript derler gibi aynı şeyi üretir. Ben ne söylüyorum olduğunu tahmin Bu gibi JSX, sadece sözdizimsel olduğunu JavaScript için bir önişlemci çok PHP gibi HTML bir önişlemci olduğunu. JSC önişlemci olduğunu JavaScript bu sağlar Eğer JavaScript içine HTML koydu. Ve böylece doğru trafo varsa hangi [duyulamaz] adında bir şeydir, hangi dönüştürecek. Doğru önişlemci, Eğer bunu izin vereceğim. 

HEDEF KİTLE: [duyulamaz] NEEL MEHTA: Genellikle gerekmez JavaScript içine HTML koymak senin suçum sürece tepki. Ama yine de bunu yapabilirsiniz. Evet? 

İZLEYİCİ: Seni düşünüyorum tepki tarif etmişti fonksiyonel programlama dili olarak. Biz CS50 içinde C öğrenme oldum. C de işlevsel bir dil midir? NEEL MEHTA: Yani soru Fonksiyonel hakkında olarak adlandırılan başka bir şey karşısında zorunlu ya da prosedürel programlama. Popüler programlar iki tür var. Bir usul denir ki Tüm yapıyor komutları gibi hakkında ve bir diğeri ise, tüm işlevsel, fonksiyonlara sahip ve sahip hakkında giriş ve bu çıkış. Tepki fonksiyonel paradigma. C derece usul paradigma. 

Ve bir örnek olarak, örneğin, Cı- Bu bildirime şekilde yapmazsanız program yapma, değil mi? Sen söylemek zorunda, bu yazdırın. Bu veri yapısını değiştirin. Bu yazdırın. Tüm komutlar hakkında. 

Tepki olarak, orada değil birçok komutlar. Bu sahip tüm hakkında bileşenleri bir araya koymak. Onlar fonksiyonları gibiler. Bir işlevi gibi var CardView denilen hangi bir fonksiyonudur Bu, giriş, çıkış vardır ve bu nedenle tepki hepsi Bu felsefe ile ilgili Eğer veri var having-- bize. Bunu geçirin Algoritma ve edeceğiz Çıktı HTML size Sadece sayfa basılmış, ve böylece var o parça parça inşa. 

Yani bir metafor çizmek ne Daha önce söylediğim, sen nasıl Facebook size bir ileti alırsanız ve güncellemek ne parçaları seçmek, Bu usul var. Bu doğru, zorunluluk değil mi? Tamam, ben bir mesaj aldım. Orada hesabını değiştirelim. 

Burada bir pencere açılır edelim. Orada hesabını değiştirelim. Burada bu çizelim. Bu bir usul yaklaşım. 

Yani, Eğik gibi ne şeyler var Boost, Omurga, diğer çerçeveler kullanın. Tepki işlevseldir. Bu çok farklı bir yolu bir şeyleri düşünüyordum. Bu en atalım bu fikri alır işlevleri veya olacak algoritmalar o veri vermek. O tükürmek ne yapacaksınız o Bilgisayar olmalı ve dışarı ağırlığında ilgilenir. Bunu kendiniz idare yoktur. Bu anlamda biraz yapar mı? Evet? 

HEDEF KİTLE: işlevsel bir dil olarak, Her şey bir kez olur? 

NEEL MEHTA: Hayır, işler sırayla olur. Burada gibi hala orada sipariş, ama öyle değil gibi sırayla gerçekleşmesi komut, komut övmek. Bu sırasına olur fonksiyonu çıkış verir. Başka bir işlevin içine koyun. Başka içine koy fonksiyonu, başka bir işlev. 

Eğer CS51 yaparsanız, olacak Fonksiyonel programları öğrenmek Bu kapsam biraz dışarı. Ama temelde ne yapar React serin değil sadece tek yönlü veri akışı ve sanal Dom, ancak, aynı zamanda, bu fikri fonksiyonel programlama. Ve fonksiyonel programlama çok kolay oluşturmak ve dışarı güzel şeyler yapmak için, ve düşünmek için çok kolay hakkında ve yaklaşık sebebi. Yani tepki başka iyi beraberlik var. Herhangi bir başka soru? Evet? 

HEDEF KİTLE: Um, neden olur var aksine izin kullanmak? 

NEEL MEHTA: Yani soru Neden var yerine izin kullanabilirim? Bu adında bir şeydir ES6 veya ECMAScript 6. Bu JavaScript yeni sürümü. Teknik nedenlerden bir grup var, ama let var daha iyi bir versiyonu. 

Eğer değişkenler bildirmek nasıl bu kadar. Siz izin kullanabilirsiniz. Sen var kullanmak olabilir. Let teknik bir grup var Onları bakabilirsiniz reasons-- daha iyi neden için later-- kadar. Temelde, ES6 bazı güzel vardır yeni sözdizimi, bazı yeni özellikler Eski JavaScript üstünde. 

Yani biz beş dakika gibi var. Ben sadece konuşmak istedim bir şey daha gerçek hızlı. Herhangi bir sorunuz olsaydı, Şimdi bu konuda daha sonra konuşalım. Ama sadece bu yüzden bu gets kameraya yakalandı, ben sadece Size nasıl hakkında biraz konuşmak istiyorum aslında apps tepki kullanın. 

Burada sen gitmek, Facebook.GitHub.IO/react, Bu tepki ana sayfası ve o aslında nasıl kullandığınızı size göstereceğim Sayfalarınıza tepki. Temelde, biraz var karmaşık Tepki yüklemeye çalışıyorum. Sadece sürüklerken O kadar kolay değil ve orada bir JavaScript bırakın. 

Sen trafo olması Daha önce olduğu gibi, hangi olacak kurmak, içine JSX çevirmek Normal JavaScript. Bunu edeceğiz şey var Eğer normal ES6 derlemek. Javascript hareketli bir sürü var parça yapmanız gereken, bu nedenle bir şey var Yeoman, Yeoman.io denir. Ve bu bir komut satırı aracı olduğunu edeceğiz olduğunu Eğer sizin yanınızdaki tepki dışarı scaffold yardım Kolayca projeler. 

Yani bu konuda okuyabilirsiniz Daha sonra, ancak bazı araçlar vardır Yeoman sunduğu. Onlar tepki oluşturmak izin vereceğim yerleşik her şeyi ile app. O inşa edeceğiz gibi bileşenleri içinde yerleşik. Bu sizin trafo inşa gerekecek. Serin bir şey var şeyler otomatik yerleşik jeneratörler denilen bu şeyleri kullanarak. 

İsterseniz Yani bu konuda okumak. Sadece Yeoman, Y-E-O-M-A-N, ve gitmek Bu gibi jeneratörleri bulabilirsiniz. Ve benzeri jeneratörler ile Bu, sadece bir tane ister Birkaç komut satırı komutları olduğunu. Bir dışarı scaffold edeceğiz Tüm sizin için app tepki. Tüm manuel borulama alırsınız, ve homurtu iş, sizin için yapılır ve bu sadece odak neden sadece yazmaya tepki. 

Yani temelde bina Uygulamaya nontrivial tepki. Bu arada kablolu, ama var orada Senin için yapacağım araçlardır. Eğer yapmak istiyorsanız bir tepki Yani app, bu şekilde yapmaya çalışın. Eğer sadece deney yapmak isterseniz, Bu CodePen kullanmayı da deneyebilirsiniz Bu CodePen çünkü tüm kablolama tepki. Ben zaten sizin için tüm çalışmaları yaptık. 

Eğer böyle yapmak istiyorsanız Yani Üretim uygulaması tepki serbest bırakmak için, Bu jeneratörlerin birini deneyin. Sadece oynamak istiyorsanız etrafında, çoğu zaman sadece değer Burada CodePen etrafında oynamaya çalışın. Kulağa hoş gelmek? Güzel. 

Yani ben hepsi bu. Yine, tüm kod ve örnekler Burada bu web sitesinde olacak. Yani, yine, biz konuşmadık yaklaşık tepki çok sözdizimi, ancak tüm bu bulmak için Biraz sözdizimsel ayrıntılar, tüm mevcut olacak Burada bu sitede. 

Yani böyle tavsiye ederim ilk adımı atmak. Senin CodePen koydu. Yapmaya çalışıyor deneyin ikinci adıma. Orada dördüncü adım, sadece Bunu elde nerede görmek. 

Herhangi bir başka soru, çek ya bu sayfada dışarı bana e-posta. O benim e-posta var. Ama herhangi size yardım etmek isterdim hakkında olabilir sorular tepki. Yani, evet, ben var hepsi bu. Çok için teşekkür ederiz izlerken ya da katılıyor için. Ve ben herhangi bir soru alacağım Şimdi bundan sonra olabilir. Yani izlemek için hepinize teşekkür ederim.