[Bermain muzik] 

NEEL MEHTA: Di sini ia pergi. 

Well, semua orang, selamat datang ke web aplikasi masa depan dengan Bertindak balas. Ini adalah CS50. Nama saya Neel. Saya adalah seorang TA untuk CS50 dan mahasiswa tingkat kedua di Harvard College dan yang sangat, sangat pemaju web ghairah. Jadi saya sangat menarik untuk berbincang dengan anda hari ini, sama ada anda berada di sini atau di rumah menonton, kira-kira Bertindak balas, yang, sekali lagi seperti yang saya katakan, masa depan aplikasi web. 

Jadi Bertindak balas adalah satu rangka kerja web. Dan seperti yang saya telah memberitahu kepada beberapa orang di sini, rangka kerja yang hanya set alat yang anda boleh menggunakan untuk menstruktur dan membina aplikasi web anda. Dan aplikasi web, sekali lagi, laman web yang interaktif seperti Facebook, Twitter.com, Instagram.com, apa sahaja. 

Jadi Facebook adalah satu rangka kerja web yang telah dibangunkan oleh Facebook beberapa tahun back-- Bertindak balas adalah. Ia pun digunakan dalam Facebook pada aplikasi mudah alih mereka dan aplikasi web, Instagram. Khan Academy adalah satu lagi pengguna awal menonjol Bertindak balas. 

Ia benar-benar telah mendapat sangat popular. Jika anda pernah menggunakan perkara-perkara seperti sudut atau Tulang belakang, ini adalah dari keluarga yang sama, tetapi ia mempunyai sejak jauh mendahului populariti mereka. Ia adalah perkara yang baru panas. Ia benar-benar, benar-benar besar. 

Dan sebagainya Bertindak balas yang baik bukan sahaja sebagai rangka kerja web untuk antara muka bangunan. Ia baik untuk membina antara muka web. Terdapat juga perkara yang dipanggil Bertindak balas asli yang membolehkan anda membina antara muka untuk Android dan IOS dan platform mungkin lain pada masa akan datang dengan hanya menggunakan kod JavaScript yang sama. Anda boleh menggunakan yang sama Kod JavaScript untuk menjadikan laman web, untuk menjadikan Android aplikasi dan IOS aplikasi. 

Ia adalah masa yang sangat, sangat menarik. Ia adalah peluang yang benar-benar, benar-benar sejuk. Ia merupakan satu web universal alat pembangunan antara muka, jadi ia adalah sangat, sangat Perkara penting yang perlu tahu. Dan, seperti yang saya telah memberitahu orang ramai sebelum ini, ini, saya fikir, akan menukar cara kita membina aplikasi web selama-lamanya. Jadi ia mungkin satu hiperbola sedikit, tetapi saya fikir ia adalah satu perkara yang cukup baik untuk mengetahui. 

OK, jadi apa yang Bertindak balas? Bertindak balas adalah rangka kerja yang anda boleh digunakan untuk membina antara muka. Antara muka, sekali lagi, laman web, bukan? Jadi di sini adalah Instagram.com, kegunaan Bertindak balas. 

Bertindak balas dibina di atas idea komponen. Komponen adalah HTML elemen pada steroid, supaya elemen HTML adalah seperti butang. Ia perenggan. Ia tandukan, bukan? Dan Instagram akan menggunakan ini, tetapi ia juga akan menggunakan komponen Bertindak balas. 

Bertindak balas komponen adalah souped-up elemen HTML yang mempunyai tingkah laku mereka sendiri yang terkandung dalam diri mereka. Jadi, sebagai contoh, kita boleh mempunyai elemen masa, komponen masa, yang akan mengandungi seperti setem masa, anda tahu, komponen profil yang akan mengandungi imej profil dan nama orang itu. Ia boleh mempunyai kaunter seperti yang boleh dikira seperti jumlah orang seperti, dan jika anda klik di atasnya, ia akan mempunyai meningkatkan bilangan orang seperti. Komponen adalah hanya satu sekumpulan kod HTML yang mempunyai beberapa fungsi dibalut di dalamnya. Jadi ia seperti elemen HTML pada steroid, seperti yang saya katakan sebelum ini. Anda boleh menggunakan komponen ini, dan anda boleh meletakkan mereka bersama-sama untuk membuat komponen baru, kes ini, komponen pos, yang mengandungi semua barangan ini. Ia akan mengandungi Masa, Profil, LikeCounter, mungkin komen dan mungkin imej itu sendiri. Dan sebagainya aplikasi web hanya dibina dengan mengambil komponen dan meletakkan mereka bersama-sama. Suapan Instagram adalah tidak lebih daripada sekumpulan jawatan satu demi satu, setiap pos mengandungi seperti Masa, Profil, LikeCounter, dan sebagainya. Ia adalah jenis seperti membina sebuah rumah. Anda tidak membina rumah dari atas ke bawah. Anda mengambil components-- anda mengambil seperti bilik mandi. Anda mengambil bedroom-- yang anda melekat mereka bersama-sama, dan anda mempunyai komponen baru. Anda mempunyai bahagian baru dari rumah. 

Jadi bertindak balas adalah semua yang dibina di sekitar idea ini komponen yang interaktif, yang perisytiharan. Seperti anda hanya mengatakan apa yang profil, dan ia menyebabkan ia. Mereka adalah composable. Anda boleh mengambil masa dan profil, meletakkan mereka bersama-sama, membuat sesuatu yang lebih baik. Dan mereka yang boleh digunakan semula, jadi jika anda mempunyai kod sumber untuk jawatan, anda boleh menanamkan di mana-mana. 

Anda boleh membenamkan Instagram Perkara di laman web anda sendiri. Anda boleh menanamkan di Facebook, sebagai contoh, selagi ia menggunakan Bertindak balas juga. Jadi komponen adalah benar-benar, benar-benar, benar-benar blok bangunan berkuasa web yang boleh digunakan di mana sahaja dan meletakkan bersama-sama untuk membuat blok bangunan baru. Itulah yang sangat, sangat gambaran keseluruhan tahap yang tinggi. Jadi, sekali lagi, jika anda mempunyai sebarang soalan pada bila-bila tentang falsafah reaktor, yang pengekodan, untuk menghentikan saya dan beritahu saya. 

OK, jadi bertindak balas adalah sejuk kerana ia mempunyai cara yang berbeza melihat bagaimana anda membina aplikasi web. Anda mungkin pernah mendengar tentang MVC, yang model anda mengawal dalam CS50 atau apa sahaja menyelesaikan sesuatu kelas anda menggunakan lain. Dan yang paling rangka kerja yang dibina di sekitar idea MVC. Bertindak balas tidak. Bertindak balas dibina di sekitar idea aliran data satu arah seperti yang dilihat oleh carta ini atau grafik di sini. 

Pada asasnya, anda mempunyai sumber data. Dan sumber data yang akan membuat keputusan bagaimana untuk meletakkan komponen tertentu. Dan komponen akan kemudian, apabila mereka berubah, mereka akan berkata kepada para sumber data kepada perubahan. 

Untuk menggunakan Instagram Sebagai contoh, anda mungkin mempunyai senarai objek jawatan seperti dalam pangkalan data atau sesuatu. Bahawa data. Dan kemudian komponen post kami akan mengambil data itu, dan menggunakan data itu untuk menjadikan satu perkara yang pada skrin. Itulah apa yang anak panah daripada data kepada komponen adalah, dan kemudian data yang sama digunakan untuk memberi sekumpulan komponen. 

Pada Facebook Messenger, untuk Sebagai contoh, yang merupakan Bertindak balas, anda mungkin mempunyai senarai mesej sebagai sumber data anda. Dan yang tidak akan menyebabkan hanya senarai mesej tetapi juga senarai rakan-rakan anda. Anda mempunyai kiraan yang belum dibaca. Mungkin juga menyebabkan perkara Facebook itulah di bahagian bawah Facebook.com. Data yang sama adalah sumber tunggal kebenaran dan yang menyebabkan banyak komponen yang akan diberikan. Dan apabila salah seorang daripada mereka Komponen berubah, ia kembali dan perubahan sumber data. 

Anda menghantar mesej, bukan? Yang mengubah sumber data. Anda membaca mesej anda, supaya anda menetapkan belum dibaca kepada 0. Yang mengubah sumber data. Dan perhatikan bahawa semua ini satu arrow kembali kepada data yang sama sumber, supaya anda tahu, diberikan satu set data tertentu, anda tahu apa yang halaman akan kelihatan seperti. Ia berketentuan. Anda tahu, data tertentu diberikan, apa laman web tersebut akan kelihatan seperti. Anda boleh meramalkan bagaimana ia akan berkelakuan dan bagaimana mereka akan berdepan untuk bekerja apabila mereka bersama. 

Dan jika saya mempunyai satu juta komponen sini, ia akan berkelakuan yang sama, bukan? Anda tidak akan mempunyai apa-apa saling hubungan pelik. Satu data yang diberikan satu juta komponen. Sejuta komponen boleh kembali dan mengedit data. Dan hal ini adalah sangat bagus. Kami membina composable, mudah aplikasi web berskala. 

Anda mempunyai satu sumber data, sumber kebenaran. Yang memberitahu komponen anda bagaimana untuk meletakkan keluar halaman, dan komponen akan mengendalikan interaksi. Dan jika mereka mahu berubah perkara, hanya kembali dan memberitahu sumber data untuk berubah. Masuk akal? Jadi Bertindak balas adalah tentang pemahaman bagaimana untuk membina komponen dan bagaimana untuk membuat komponen anda berinteraksi dengan dunia luar. 

Membuat berinteraksi komponen dengan dunia luar menggunakan teknologi lain dipanggil sentiasa berubah-ubah, yang adalah satu rangka kerja yang ditambah pada bahagian atas Bertindak balas. Kami tidak akan bercakap tentang itu. Kita akan bercakap lebih lanjut mengenai, memandangkan data, bagaimana anda boleh menyebabkan komponen? 

Dan sebagainya Bertindak balas adalah benar-benar sejuk kerana anda boleh menggunakannya dengan mana-mana akhir belakang yang anda mahu. Jika anda mempunyai seperti akhir belakang Python, jika Python anda boleh meludah keluar beberapa data, Bertindak balas boleh menyebabkan ia. Jika anda tidak output JS data, Bertindak balas menyebabkannya. Ruby rel dengan data, Bertindak balas menyebabkannya. 

Jadi Bertindak balas pada dasarnya web yang view-- akhir hadapan dengan komponen mana-mana sumber data sekalipun. Dan supaya pergi dari sumber data untuk bertindak balas komponen adalah agak mudah. Berlaku dengan cara yang lain adalah agak sukar. Yang menggunakan Flux seperti yang saya nyatakan sebelum ini. Kami tidak akan masuk ke dalam itu. Kami akan memberi tumpuan lebih kepada data-to-komponen sampingan. Dengan cara ini anda boleh membuat sejuk, aplikasi web menyeronokkan. Ia tidak akan memberi kesan kepada dunia luar buat masa ini, tetapi itu cerita lain. 

OK, jadi jika anda berada di sini untuk seminar terakhir saya anda akan tahu bahawa semua kod untuk ucapan hari ini akan menjadi pada URL ini di sini, maaf, URL ini di sini. Dan pada dasarnya kita akan pergi melalui empat langkah, mungkin lima, mungkin tidak lima. Kami akan bergerak melalui empat langkah membina sampel Bertindak balas app. Dan supaya semua kod sumber untuk setiap langkah perjalanan akan menjadi di sini, jadi jika anda ikuti bersama-sama di rumah, berasa bebas untuk membaca dengan teliti kod ini. Jika anda mengikuti bersama-sama di sini, kita akan menunjukkan ia pada skrin, jadi jangan bimbang mengenainya. Tetapi jika anda berada di rumah, berasa bebas untuk melawat laman web ini. Dan, Ya, anda akan dapat untuk mendapatkan semua kod yang anda akan merasa perlu sini. Jadi ia adalah lembaran menipu yang baik juga untuk pengembaraan masa depan anda dengan Bertindak balas. Sejuk, jadi jika semua orang yang di sini, dan walaupun anda berada di rumah, tarik ke atas laman web ini, is.gd/cs50react, tiada modal, tiada garis bawah, tidak ada apa-apa. 

Anda akan melihat halaman yang kelihatan sedikit seperti ini. Ini adalah perkara yang dipanggil CodePen. CodePen adalah kerjasama yang persekitaran pengekodan yang aku boleh menulis kod di sini, dan ia akan dihantar secara automatik kepada anda. Dan dengan cara ini, saya boleh menulis kod. Saya boleh menjalankan kod sini. 

Untuk example-- dan jika ia reloads-- lihat, Saya menjalankan kod JavaScript pada halaman di sini, dan IA AKAN secara automatik menjadikan halaman web dengan kod JavaScript ini. Dan sebagainya ini adalah cara yang untuk kita mencuba kod benar-benar cepat tanpa perlu menggunakan ID kami atau menggunakan mesin tempatan atau apa sahaja. Ia adalah satu cara yang sangat cepat untuk anda untuk mockup dan menguji pelbagai jenis kod. 

Jadi, saya akan mengambil kod contoh, meletakkan ia di sini. Kami akan bekerja melaluinya. Dan jika anda di rumah, anda boleh tarik sehingga ini juga. Dan saya telah memasang Bertindak balas di sini, jadi anda boleh hanya menulis kod anda sendiri di sini, dan mencubanya taman permainan anda sendiri. 

Ya, jika semua orang untuk membuka pautan ini di sini. Tolong beri aku ibu jari sekali anda mempunyai ia terbuka. Sejuk, sejuk sejuk. Tiada apa-apa di sini buat masa ini, tetapi kami akan mengubah itu tidak lama lagi. 

OK, jadi Bertindak balas ialah JavaScript perpustakaan, dan oleh itu, memerlukan pengetahuan JavaScript, yang merupakan bahasa pengaturcaraan web. Dan ia digunakan untuk perkara-perkara lain kini terlalu tetapi terutamanya web membangunkan bahasa, jadi jika anda tidak biasa dengan itu, membaca laman web yang dipanggil JSforCats.com. Ianya indah. Anda boleh belajar JavaScript dalam setengah jam. Ia adalah luar biasa. 

Jadi memberikan bacaan yang. Kami juga banyak HTML di sini kerana kami mereka bentuk laman web sudah tentu. Jadi, jika anda tidak biasa dengan HTML, lihat HTMLdog.com. Saya rasa pembelajaran Bertindak balas ialah juta kali lebih mudah jika anda sudah tahu blok bangunan. Jika anda mempunyai komponen, ia mudah untuk membuat komponen yang lebih besar. Itulah Bertindak balas bahasa untuk anda. 

Jadi teruskan dan memberi perkara-perkara ini membaca. Jeda video ini. Memberikan bacaan yang jika kamu di rumah jika anda tidak biasa dengan HTML atau JavaScript OK, jadi apa yang kita akan lakukan ialah kita akan membuat aplikasi Belakang sangat asas menggunakan Bertindak balas. Kami akan mempunyai Belakang a. Anda boleh flip kad dan ke belakang. Dan kita juga akan mempunyai senarai semua kad yang kita ada, dan jika kita rasa bercita-cita tinggi, kita mungkin dapat bertukar-tukar antara kereta dengan mengklik pada mereka. 

Tetapi ini adalah, yang terdedah anda tulang, yang sangat mudah Bertindak balas app. Dan sebagainya ini sebenarnya tidak remeh untuk melaksanakan, tetapi kita akan menunjukkan bahawa, jika anda melakukan ini, ia adalah sangat, sangat mudah untuk melanjutkan jika orang lain membantu anda dengan itu. Jadi, kita akan melalui empat langkah bermula dari awal untuk membina ini. 

OK, jadi empat langkah, kita akan bermula dengan langkah pertama. Langkah pertama akan menjadi membina komponen pertama anda. Seperti yang saya katakan sebelum ini, komponen dalam Bertindak balas hanya satu elemen HTML pada steroid. Ia menyatakan HTML dan beberapa tingkah laku, dan ia akan menentukan bagaimana orang boleh berinteraksi dengannya bagaimana ia akan mempunyai keadaan dalaman. Seperti butang yang akan tahu seperti berapa banyak kali ia telah diklik sebagai contoh, dan ia akan tahu bagaimana untuk meletakkan dirinya. 

Oleh itu, marilah kita pergi ke hadapan dan membina kami Komponen pertama menggunakan JavaScript. Jadi, jika sintaks yang kelihatan pelik, itu kerana ia jenis adalah. Jadi, sekali lagi, kita akan untuk membuat pembolehubah yang dipanggil aplikasi menggunakan kata kunci yang menyewakan, yang menjadikan pembolehubah, biarkan App sama React.createClass. 

Bertindak balas adalah perpustakaan dan mempunyai yang mewujudkan fungsi kelas. Dan fungsi ini adalah sedikit kod yang anda boleh gunakan untuk mewujudkan baru jenis Bertindak balas komponen. Dan sebagainya React.createClass menjadikan komponen, dan komponen ini akan dapat melakukan barangan. Perkara utama yang boleh dilakukan adalah menjadikan sesuatu, menjadikan sebagai fungsi. 

Sekali lagi, jika indeks ini tidak jelas kepada anda, saya cadangkan anda pergi JS untuk kucing website saya. Adakah itu dizum dalam cukup baik? Sejuk. 

Jadi setiap keperluan komponen mempunyai fungsi memberi. Yang menyebabkan fungsi berkata, apa yang saya mencetak pada skrin? Tetapi sistem tersebut adalah sia-sia jika tidak tahu apa yang perlu mencetak pada skrin, jadi anda perlu mempunyai fungsi memberi. 

Jadi dalam hal memberi, anda hanya perlu kembali beberapa HTML. Dan apa yang sejuk adalah bahawa ada perkara yang dipanggil Membutuhkan, yang merupakan lanjutan daripada JavaScript yang digunakan oleh bertindak balas. Ia membolehkan anda menulis HTML dalam daripada anda JavaScript, yang bunyi jenis pelik apabila anda mula berfikir tentang hal itu, tetapi ia membuat banyak akal selepas itu. Oleh itu, kita boleh melakukan ini. Jika anda biasa dengan HTML, saya tahu kita mempunyai div dengan tujuan umum bekas untuk barangan. Kita boleh kembali div, dan di dalam div ini, kita boleh meletakkan barangan. 

Katakan kita ingin menjadikan hanya yang Belakang lurus-up untuk sekarang. Belakang, saya akan berkata, akan mempunyai soalan dan jawapan. Jadi di dalam div ini, mari kita mencetak perenggan yang mengatakan question-- Apakah jawapan muktamad untuk hidup, alam semesta? Dan kemudian jawapannya adalah akan menjadi, sudah tentu, 42. 

Yang tidak pernah datang dengan baik sama sekali. Ya, jadi pada dasarnya anda boleh benar-benar menulis HTML dalam anda JavaScript. Dan ini akan menjadi dicetak ke dalam skrin. Jadi mari kita mencubanya. 

Oleh itu, kita mempunyai komponen kami. Kita perlu memberitahu Bertindak balas untuk meletakkan komponen pada skrin supaya React.render, jadi melihat bahawa kita merawat aplikasi seperti apa-apa unsur lain. Kami menulis kerana ia adalah elemen HTML. Seperti daripada berkata seperti img untuk imej atau p perenggan, anda menulis App, jadi App adalah dilayan seperti elemen HTML. Seperti yang saya katakan sebelum ini, ia elemen pada steroid. 

Jadi, anda boleh menjadikan App, dan anda memberikan tempat untuk meletakkannya. Dan ini adalah bagaimana anda boleh memberitahu ia di mana untuk meletakkan ia. Aku telah mendapat seorang div mudah pada Laman dipanggil dengan ID atas laman, dan di mana yang elemen akan pergi. 

Dan kami tidak akan berjalan dengan HTML. Pada dasarnya ini akan mendapat diletakkan di dalam elemen halaman ini yang kita ada pada skrin. Jadi ia berjalan kod ini, dan ia menarik ini perkara pada skrin, jadi di sini kita. Kami jadikan Bertindak balas komponen pertama kami. 

Jadi hanya sebagai recap, kita perlahan-lahan dibuat jenis baru komponen, bukan? Itulah yang React.createClass. Dan dalam komponen itu, kami diceritakannya apa yang perlu dilakukan. Apabila komponen ini adalah untuk dicetak ke skrin, ia akan mencetak div dengan dua perenggan di dalamnya. 

Dan apa yang kami lakukan, kami membuat aplikasi baru menggunakan notasi sudut aplikasi kurungan. Kami diberitahu ia meletakkannya dalam elemen halaman. Dan supaya apa yang saya lakukan, ia mewujudkan aplikasi baru dari template itu. Dan kemudian saya diberitahu ia untuk menjadikannya. Oleh itu, ia berkata, OK, aplikasi, apa yang perlu saya mencetak? App kata, pergi mencetak div a dengan dua perenggan di dalamnya. Dan Voilà, ada div kami dengan dua perenggan di dalamnya. Akal setakat ini? 

Jadi, sekali lagi, seluruh cabaran Bertindak balas hanya mengetahui bagaimana untuk membuat komponen. Bagaimana untuk membuat komponen bekerjasama. Sekarang kita telah dibuat pertama kami komponen, mari kita kembali dan membuat komponen disesuaikan. Jadi, anda tahu bagaimana dalam HTML anda boleh memberi kelas butang anda? Anda boleh memberi sauh anda href itu. Anda boleh memberi input anda jenis, bukan? Anda boleh memberi lebih adat hartanah untuk semua unsur-unsur anda untuk menjadikannya lebih menarik. Dan kita sebenarnya boleh melakukan perkara sama. 

Katakan kita mahu kami aplikasi untuk pergi menyebabkan sebarang kad. Pada masa ini kami hanya diberikan kad hardcoded. Kita tahu terdapat hanya satu kad ia boleh lakukan, jadi kami akan cuba menukar ini kini begitu bahawa kita hanya boleh memberikan beberapa kad. Ia akan mencetak kad. 

Anda patut mencuba dan membuat anda komponen tujuan yang sangat umum. Jadi cara ini saya boleh e-mel ini kawan saya dan menjadi seperti, apa Belakang anda mempunyai, hanya makan ke sini, dan ia akan melakukannya dengan sendirinya. Anda boleh meletakkan lain perkara dalam aplikasi anda sendiri. 

Tetapi pertama, mari kita memecahkan ini kepada dua komponen, tetapi kita mahu untuk memisahkan kad percetakan sebahagian dari bahagian aplikasi yang sebenar. Jadi apa yang boleh kita lakukan ialah kita boleh menukar ini dari App untuk CardView, hanya nama baru untuk aplikasi, dan kita boleh membuat yang baru komponen dipanggil App, tidak boleh dikelirukan dengan App lama. Kami telah mendapat createClass, dan seperti dalam HTML, anda boleh sarang Bertindak balas komponen dalam satu sama lain. 

Jadi dalam fungsi menyebabkan ini, fungsi pulangan CardView, dan ini adalah perkara yang sama. Lihat mengapa ia adalah perkara yang sama? Bukannya menjadikan hanya aplikasi yang mempunyai div dan berpasangan di dalamnya, aplikasi itu menyebabkan CardView, dan CardView telah menjadikan div dan ayat. Jadi ini adalah contoh pertama kami unsur-unsur yang bersarang di dalam satu sama lain. Adakah ini masuk akal? Jadi, sekali lagi, kita mempunyai unsur CardView. Kami mempunyai unsur-unsur aplikasi bahawa ia lebih besar daripada. 

OK, jadi kami mahu kami CardView-- jika anda memberikan CardView baik kad tertentu, ia akan mencetak untuk anda, bukan? Jadi pertama, kita perlu membuat kad, jadi mari kita membuat objek kad. Oleh itu, marilah kad saya equal-- jika anda semua biasa, ini hanya membuat notasi membantah dalam JavaScript. Ia adalah jenis seperti struct dalam C, jadi kami membuat kad, dan jadi sekarang kita boleh lulus kad ini sebagai harta atau sebagai sifat dalam HTML istilah untuk aplikasi kami. Oleh itu, kita boleh melakukan ini, App kad sama MyCard. 

Anda tahu bagaimana dalam input, yang anda lakukan jenis input teks sama atau butang kelas bersamaan btn untuk bootstrap ,? Idea yang sama, App kad equals-- anda perlu meletakkan pendakap sini-- Kad aplikasi sama MyCard, jadi ini mengatakan kita mempunyai objek kad ini. Saya akan lulus sebagai harta kepada komponen aplikasi. Dan komponen aplikasi ini akan boleh mengakses dan melakukan perkara yang menarik dengan. 

Jadi aplikasi kami akan menjadi diberikan kad, jadi buat masa ini, mari kita mempunyai aplikasi yang hanya memberikan kad untuk CardView yang sendiri kerana seperti aplikasi tidak akan tahu apa yang perlu dilakukan dengan ia, jadi kita hanya akan memberikan kepada CardView itu. Oleh itu, kita akan lulus ia yang Cara yang sama, kad sama, dan sebagainya setiap komponen boleh mengakses perkara-perkara yang telah diberikan kepadanya. Mereka boleh mengakses ciri-ciri yang telah diberikan kepadanya menggunakan sintaks ini, this.props.card. 

Jadi apa yang berlaku di sini adalah anda mempunyai objek MyCard itu. Anda lulus ke dalam aplikasi menggunakan App kad sama MyCard. Bahawa objek kad diberikan kepada aplikasi anda. Aplikasi ini boleh mengaksesnya sebagai this.props.card. Ia adalah jenis seperti imej mengetahui apa punca ia adalah. 

Aplikasi ini mengetahui apa yang ia kad adalah, dan ia boleh melakukan barangan dengannya. Ia boleh melakukan pengiraan. Ia boleh membuat keputusan berdasarkan jauh daripada itu. 

Buat masa ini, saya akan lulus this.props.card ke atas CardView. Akal setakat ini? Ia akan lebih masuk akal sekarang. 

OK, jadi sekarang kita berada di CardView. CardView kami, memandangkan kad, sekiranya mencetak soalan dan jawapan itu. Pada masa ini kami hanya dicetak beberapa soalan hardcoded jawab. Kita perlu memikirkan out-- kita perlu untuk meminta kad yang mereka memberi kami apakah soalan dan jawapan, dan kemudian mencetak ini keluar ke skrin. 

Oleh itu, kita boleh lakukan ini di sini. Dalam menjadikan begin-- pertama melakukan sama. Jadi apa yang kita lakukan di sini adalah kita tahu bahawa kad itu diberikan kepada kita untuk harta, bukan? Ia diberikan kepada kita sebagai input. Seperti ia hampir seperti hujah untuk fungsi. Kad ini adalah hujah hampir ke CardView ini. 

Kami akan mengeluarkan itu, dan meletakkan ia ke dalam soalan berubah-ubah. Pastikan jawapan yang pergi kepada jawapan yang berubah-ubah. Menggesa bahawa kad untuk menjawab. Dan sekarang yang kita ada ini, bukannya mencetak teks itu, kita akan mencetak apa sahaja yang mereka berikan kepada kami. 

Jadi ini stuff-- jadi kita akan untuk memadamkan Soalan Jawab. Mari kita lihat jika ia berfungsi. Sejuk, jadi mari kita melangkah melaluinya sekali lagi hanya untuk memastikan. 

Jadi kad saya adalah objek kad, dan kami memberikan kad ke aplikasi. Dan aplikasi yang akan mengambil kad dan memberikannya kepada orang CardView. Dan CardView ini mengatakan, jika anda memberi saya apa-apa objek Belakang, Saya akan mencetak soalan yang dan jawapannya, bukan? 

Jadi apa yang saya boleh lakukan adalah saya boleh menghantar kod ini, yang pertama seperti 10 baris kod saya, untuk kawan saya. Dia boleh menanamkan dalam permohonan sendiri. Dan selama ia melakukan perkara yang sama, seperti kad CardView sama ini, selama ia dicipta CardView yang dan memberikannya maklumat yang betul, dia boleh menyebabkan kad sendiri. Dan jadi cara ini, ia adalah yang benar-benar cara yang sejuk untuk anda untuk membina komponen yang digunakan antara satu sama lain, bukan? Kad ini, saya boleh menerbitkan CardView ini di internet, dan orang-orang akan dapat menggunakannya. Jadi, pada asasnya, ia seperti salah satu daripada fungsi standard di perpustakaan C. 

Ia adalah fungsi di mana seseorang telah menulis. Anda memberikan input tertentu. Ia akan menghasilkan output tertentu. Anda tidak peduli bagaimana ia berfungsi secara dalaman. Selama anda memberikan hak input, ia akan membuat output yang betul. 

Dan komponen yang boleh menjadi memikirkan cara yang sama. CardView ini adalah seperti fungsi perpustakaan. Jika anda memberikan beberapa kad sebagai harta, IA AKAN mencetak kandungan kad itu. Seperti jika saya menukar kad saya ke bukannya menjadi seperti apa yang 5 ditambah 37, ia akan mengemas kini dengan sewajarnya. Jadi hanya dengan menukar input, ia mendapat output tertentu. Jadi, anda boleh berfikir komponen hampir sebagai fungsi dengan cara ini, yang anda boleh meletakkan bersama-sama. Anda mendapatkan input, seperti CardView ini sebagai input, anda akan mendapat output. Dalam kes ini, output HTML. Akal setakat ini? Sejuk, jadi sekali lagi, harta adalah bagaimana anda boleh memberikan maklumat masuk dan keluar dari komponen. 

OK, jadi mari kita membuat ini Perkara yang interaktif. Buat masa ini ia adalah jenis membosankan. Apa yang [didengar]? Anda boleh mencetak beberapa di luar, tetapi itu semua ia boleh lakukan. 

Jadi mari kita kembali kepada soalan lama hanya untuk sekarang. OK, jadi sekarang komponen ini membosankan kerana semua yang mereka lakukan, mereka mendapat input. Mereka membuat output, bukan? Itulah jenis membosankan. Kami mahu kami komponen untuk dapat mempunyai beberapa jenis keadaan dalaman, seperti ingat sesuatu. 

Untuk Belakang, untuk Sebagai contoh, jenis menyatakan maksud mungkin anda mahu ingat untuk flashcard yang? Apa status sementara mungkin anda mahu ingat yang flashcard dalam aplikasi Belakang? PENONTON: Sama ada ia telah dibalik? NEEL MEHTA: Ya, betul. Jadi, anda mungkin mahu menyimpan mengesan adakah anda menghadapi atau tidak anda menghadap ke bawah pada kad. Di Facebook, sebagai contoh, anda akan mahu ingat di mana dalam suapan berita adakah anda suka atau siapa profil yang anda lakukan sekarang. 

Kepada Rasul, seperti apa yang teks anda menaip dalam kotak input, bukan? Jika anda memuat semula halaman, ia akan hilang. Tetapi anda tidak benar-benar peduli. Ia hanya sementara. Ya? 

PENONTON: [didengar] NEEL MEHTA: Seperti kilat kad, seperti anda boleh melihat sisi soalan atau bahagian jawapannya? 

PENONTON: OK. 

NEEL MEHTA: Seperti yang Belakang dua berat sebelah, bukan? Ya, jadi anda mahu mempunyai idea ini sekarang Saya mempunyai ciri-ciri, yang seperti input, tetapi negeri, yang sementara, uh, di mana anda berada di laman yang, bukan? Sekali lagi, saya katakan dalam Facebook Rasulullah, saya mempunyai seperti yang orang anda lihat Facebook atau siapa profil, bukan? 

Ini hanya sementara. Adalah penting untuk menunjukkan pengguna apa yang sedang berlaku, tetapi semula halaman. Ia tidak benar-benar perkara itu. Jadi ia adalah keadaan sementara, jadi kita semua ia negeri. 

Jadi, sekali lagi, ada negeri dan prop. Props adalah input yang diberikan dari sumber data anda. Negeri adalah sama seperti mungkir. Ia sama seperti barangan yang membuat perkara yang interaktif. 

Jadi dalam kita CardView-- mari kita CardView-- supaya kami ia adalah baik. Apa yang kita akan lakukan di sini, kita akan menyentuh CardView dan hanya CardView. Dan jadi kawan saya yang mendapat ini, mereka tidak akan melihat apa-apa perbezaan. Mereka tidak akan mempunyai untuk menukar mana-mana kod mereka sendiri, tetapi mereka akan melihat mereka CardView mendapat souped. Itulah sebahagian yang baik tentang komponen. 

OK, jadi dalam CardView kami, mari kita cuba dan mengesan sama ada kita fasa sehingga atau menghadap ke bawah. Dalam Bertindak balas kita melakukan ini dengan terlebih dahulu menyatakan keadaan awal. Di manakah kad bermula? 

Jadi fungsi yang dipanggil getInitialState berfungsi, dan kita kembali objek. Objek ini mengandungi beberapa negeri, dan keadaan hanyalah pasangan kunci-nilai. Seperti dalam mengarahkan, anda mempunyai kunci dan nilai, anda perlu seperti nama adalah rentetan. 

Dalam kes ini, katakan hadapan adalah benar. Ini mengatakan bahawa kita mempunyai sebuah negara. Salah satu komponen di negeri ini adalah sifat dipanggil depan. [Didengar], jadi secara lalai, kita berada di bahagian depan kad, dan kita boleh menukar ini seperti yang kita flip kad. Masuk akal? 

OK, jadi dalam memberi, sekarang, kita berada menunjukkan soal jawab. Sekarang apa yang patut kita buat adalah menunjukkan soalan jika kita berada di bahagian depan kad supaya jawapannya adalah untuk bahagian belakang kad. Itulah sebabnya anda semua membuat kad interaktif. Jadi mari kita cuba dan ini di sini. Well, pertama hanya membuat pembolehubah. Kita boleh bertanya sekarang this.state.front. Kami mengakses menyatakan kita yang sama prop akses, jadi this.state.front. 

Jika kita depan, ketika itu teks adalah this.props.card.question. Jika kita berada di hadapan kad, kita akan cuba merebut soalan dari kad. Jika tidak, jika kita berada di belakang kad, apa yang kita lakukan? 

PENONTON: Jawapannya? 

NEEL MEHTA: Ya, jadi teks sama this.props.card.answer. Tetapi jika anda perhatikan, kita menggunakan negeri untuk membuat keputusan kerana sekarang komponen akan kelihatan berbeza berdasarkan kira bagaimana berinteraksi dengannya. Jadi, daripada mencetak ini, kita hanya akan mencetak teks. Sejuk, jadi sekarang, seperti yang anda lihat, kita lihat sahaja soalan. Dan jika saya mengubah keadaan di sini secara manual ke hadapan adalah palsu kita akan mendapat 42 kembali. 

Jadi, sekali lagi, komponen ini mempunyai kerajaannya sendiri. Seperti butang yang tahu sama ada ia telah ditekan atau tidak, Perkara ini yang tahu apa yang ada di depan atau di belakang. Secara lalai, ia adalah di bahagian depan. Dan kemudian jika ia di bahagian depan, kami akan mencetak soalan. Jika ia di belakang, kita akan mencetak jawapannya. Jadi, sekali lagi, maklumat yang diberikan adalah sama. Ia hanya kelihatan berbeza berdasarkan bagaimana anda program itu. Jadi, sebagai contoh, Facebook Messenger, walaupun anda mendapatkan sumber data yang sama, ia mungkin kelihatan berbeza kerana negeri ini adalah berbeza. Anda sedang melihat mesej orang yang berbeza ini. 

OK, jadi ini adalah semua baik dan baik, tetapi kini apa yang sebenarnya menjadikan kita dapat berubah, sama ada kad kami adalah depan atau belakang. Kita boleh melakukan ini dengan menambah flip butang, butang untuk kad yang akan flip kad jika ia [didengar]. Jadi mari kita menambah butang di sini, ini butang, dan butang ini akan berkata flip. 

Dan sebagainya sekarang, ia tidak berbuat apa-apa. Ia hanya kelihatan bagus. Apa yang boleh kita lakukan ialah kita boleh menambah satu klik pengendali, onClick sama this.flip, dan kami akan menentukan flip kemudian. Tetapi pada dasarnya, onClick adalah fungsi yang mendapat dipanggil apabila pengguna klik ia. 

Jadi butang akan tahu apabila ia telah diklik. Pergi ia telah diklik, ia akan flip kad. Ia adalah jenis seperti anda penghantaran pizza lelaki. Anda seperti, baiklah, apabila seseorang memanggil saya, saya akan menyampaikan pizza, bukan? 

Anda mendaftar pendengar ini. Anda mendengar untuk peristiwa. Anda dapat dipanggil, dan apabila Sekiranya berlaku, anda melakukan sesuatu. Anda mendapatkan pizza. Dalam kes ini, apabila anda klik, anda flip kad. 

Dan dengan itu kita perlu menentukan fungsi yang akan flip kad, jadi kami akan menulis hak yang di sini, flip fungsi. Dan jadi apa yang anda fikir flip akan lakukan? Sekali lagi ini mendapat dipanggil apabila kita klik butang flip. Apakah yang perlu fungsi flip lakukan? 

PENONTON: Tukar this.state.front dari benar kepada palsu, palsu kepada benar. 

NEEL MEHTA: Ya, jadi mengambil apa sahaja this.front is-- negeri depan. Mengambil negeri depan, jika memang benar, membuat ia palsu. Jika ia palsu, yang benar, bukan? Jadi mari kita cuba itu. 

Anda tidak boleh mengubah keadaan hanya dengan melakukan this.state. Anda tidak boleh melakukan ini. Anda tidak boleh berbuat demikian. Anda perlu menggunakan fungsi dipanggil this.setState. 

Jadi, anda boleh mengatakan this.setState hadapan usus besar di mana ini, sekali lagi, seru titik bermakna sebaliknya. Saya rasa jika ini. state.front adalah benar, ia akan bertukar palsu. Oleh itu, kita akan menetapkan negeri dari benar palsu. Jika ia palsu, kita akan menetapkan ia palsu kepada benar. 

Hanya melihat bahawa kita menetapkan dan mendapat sedikit berbeza, dan jadi mari kita cuba ini. Bada bing, lihat ini. Butang flip akan kini menukar bahagian depan ke belakang negeri. 

Dan jadi di sini adalah di mana anda melihat sedikit sedikit keajaiban Bertindak balas. Seperti kita tidak pernah memberitahu ia ia untuk memberi semula. Kami tidak pernah diberitahu ia melukis semula apa-apa. Jika anda melakukan ini tanpa Bertindak balas, anda akan telah supaya- suka apabila butang flip diklik, anda akan perlu beritahu kepada secara manual semula menyebabkan, bukan? 

Bertindak balas adalah benar-benar sejuk di dalam bahawa jika anda memberikan keadaan tertentu dan hartanah, ia akan sentiasa memberi perkara sama. Dan setelah kita pernah kita berubah keadaan dan sifat-sifat, menjadikan semula bertindak balas hanya segala-galanya. Ia tahu bahawa ada satu-sama-satu-menyurat antara kerajaan negeri dan parameter dan HTML. Dan setiap kali apabila salah seorang daripada mereka perubahan dengan melalui keadaan yang ditetapkan, ia akan mengubah bagaimana gaji dituliskan semula. Dan jadi pada dasarnya Bertindak balas adalah seperti menunggu anda untuk berubah. 

Setiap kali ia mengubah sesuatu, ia akan menyebabkan semula keseluruhan halaman. Dan jika ia kedengaran tidak cekap, ia adalah kerana ia akan menjadi, tetapi bertindak balas menggunakan perkara yang dipanggil Shadow DOM. Daripada lukisan halaman secara langsung, ia menyimpan pokok HTML maya dalam ingatan. 

Anda tahu, HTML adalah seperti pokok, seperti struktur data hierarki. Ia menyimpan pokok palsu dalam ingatan, dan setiap kali anda mengemaskini halaman, ia akan menarik palsu lain pokok, dan ia akan mengira apa perubahan yang diperlukan untuk membuat halaman membuat dua pokok yang sama. Jadi, pada asasnya, ia hampir menjadikan semula banyak. Dan kemudian ia hanya suka mengubah halaman dalam tweak sedikit seperti yang diperlukan, sehingga sangat, sangat, sangat cekap. 

Jadi, pada asasnya Bertindak balas akan setiap kali anda menukar sesuatu, ia akan semula menyebabkan halaman yang hampir. Ia akan memikirkan apa yang perlu saya berubah untuk membuat laman sebenar mencerminkan halaman maya, dan ia akan berbuat demikian. Itulah DOM maya. Ia adalah salah satu yang terbesar ciri-ciri Bertindak balas. 

Adakah ini masuk akal? Ada soalan? Ya? 

PENONTON: Bagaimana membandingkan masih MVC yang kita bercakap tentang sebelum sumber seperti. 

NEEL MEHTA: Ya, soalan adalah bagaimana ia dibandingkan dengan MVC? Anda ditanya mengenai sumber. Nah, mari kita bercakap tentang bagaimana ia berfungsi. 

Dalam MVC, anda akan mengemas kini model. Dalam kes ini kita akan mempunyai model kad. Pandangan ini akan mempunyai butang flip, dan kawalan akan mempunyai fungsi flip. Jadi pandangan itu akan memberitahu pengawal untuk flip flip. Flip akan memberitahu model untuk berubah, bukan? 

Dan apabila anda melakukan MVC, anda mendengar untuk model untuk berubah, dan anda semula menyebabkan pandangan yang sewajarnya. Atau anda hanya perlu suka mempunyai pengawal. Tunggu model untuk berubah, dan kemudian memilih dan memilih sebahagian daripada seperti benda yang untuk mengubah. Di sini kita mempunyai satu perkara, tetapi dalam aplikasi besar, anda perlu suka ingat apa perubahan di setiap tempat tunggal, supaya ia sedikit menjengkelkan. Dan sebagainya Bertindak balas adalah baik kerana ia mempunyai Shadow Dom. Ia mampu untuk hanya menulis semula perkara keseluruhan. Anda tidak perlu untuk terpilih seperti meneka apa yang perlu dikemas kini. 

Di Facebook jika anda suka mendapat mesej baru, di MVC, anda akan perlu ingat, OK, mengubah perkara-perkara di bahagian atas halaman, ikon mesej. Juga pop tetingkap baru di bahagian bawah. Juga membuat perkara yang baru dalam tetingkap itu. Juga memainkan bunyi. 

Itulah banyak barangan keluar pada masa yang sama. Dan jadi jika anda tidak mempunyai Shadow Dom, anda akan perlu berbuat demikian secara manual kerana anda tidak boleh menghilangkan seluruh halaman. Anda tidak mampu, jadi anda perlu untuk menukar setiap perkara secara manual, yang benar-benar menjengkelkan dalam MVC. 

Jadi, untuk menjadi berjimat cermat, mereka terpilih mengemas kini halaman, iaitu cekap, tetapi juga menjengkelkan. Dalam Bertindak balas, kerana Shadow Dom, anda akan mendapat kedua-dua perkara secara percuma. Ia berkesan kerana daripada Shadow Dom. Kesesakan mengemaskini halaman. Ia tidak melakukan manipulasi pokok itu. Anda mendapatkan kecekapan. Anda juga mendapat kemudahan penggunaan kerana jika anda hanya menulis semula keseluruhan halaman, tetapi anda hanya tahu, faham, perkara-perkara akan berada di halaman yang di suatu tempat. Ia mungkin berada di tempat yang berbeza, tetapi ia akan berada di laman, kan? Jadi anda hanya diberikan semula perkara yang keseluruhan hampir, dan anda mungkin membuat pasangan perubahan ke halaman itu sendiri. 

Jadi, sekali lagi, dalam MVC anda perlu memilih antara kemudahan penggunaan dan kecekapan, dan Bertindak balas, anda akan mendapat kedua-duanya. Jadi ia adalah lebih baik. Masuk akal? Pepejal. 

OK, jadi mari kita lihat mari kita bercakap sedikit tentang langkah 4, bagaimana kita boleh menanamkan komponen. Oleh itu, kita mempunyai hak ini sekarang. Kami mempunyai butang sejuk kami sedikit. Kita boleh flip ia kembali dan sebagainya, dan itu sahaja yang dilakukan. Katakan kita mahu mempunyai komponen lain. Katakan aplikasi Belakang kami perlu mengandungi senarai semua kad yang anda ada, jadi ini bermakna kita harus mempunyai komponen lain. Yah, mungkin memanggilnya paparan senarai. Mari kita membuat paparan senarai yang wujud bersama dengan CardView, dan ini paparan senarai dan CardView akan suka kerja bersama-sama. Dan anda boleh menggabungkan mereka untuk membuat aplikasi kami untuk anda. 

Jadi pertama, mari kita membuat pasangan lebih kad betul. Katakan, apa kad? Dan hanya jadi saya tidak perlu melahirkan anda dengan menaip dalam, Saya hanya akan menyalin dari sini. Dan jadi saya akan tidak memberikan hanya satu kad. Saya akan memberikan pelbagai kad. Jadi pertama aplikasi akan memecahkan buat masa ini. Baiklah, jadi kita akan membuat ini mampu melakukan pelbagai kad. Jadi pertama, kita akan memberikan, tidak hanya satu kad tetapi pelbagai kad, seperti senarai kad. Dan dalam kes ini, kami mempunyai tiga daripada mereka. 

Baiklah, jadi jadi aplikasi adalah akan mendapat kad senarai, dan ia akan membuat keputusan yang satu untuk menunjukkan kepada CardView itu. The CardView hanya boleh menyebabkan satu kad, tetapi app mendapat senarai semua kad, bukan? 

Oleh itu, apabila anda memikirkan satu kad untuk diberikan kepada CardView, bagaimana anda akan rasa anda mungkin boleh untuk membuat keputusan yang tak kad untuk menunjukkan? Untuk memberi anda petunjuk, ia buat sementara waktu Anda akan melihat kad tertentu. Jika anda memuat semula halaman, anda akan hanya kembali kepada kad pertama. Itu OK kerana ia adalah sementara. Apa teknik yang boleh kita gunakan? 

PENONTON: Anda boleh membuat pembolehubah jadi sama seperti anda mempunyai depan. Adakah ini benar, anda boleh mempunyai kad semasa sama dengan 1? 

NEEL MEHTA: Ya, jadi kami mahu mempunyai negeri, bukan? Anda akan menggunakan negeri dalam komponen untuk memikirkan kad mana yang kita mahu untuk mendapatkan. Seperti kita mempunyai senarai semua kad, kami akan menggunakan keadaan untuk memikirkan salah satu kad yang pertama, kad kedua, kad ketiga, dan sebagainya. 

Jadi aplikasi supaya aplikasi akan mendapat mempunyai fungsi getInitialState itu, fungsi pulangan getInitialState. Dan kita hanya akan berkata activeIndex 0. Jadi sekarang aplikasi kami mempunyai negeri itu sendiri. 

Dan sekarang pada memberi, untuk memikirkan kad, mari kita pergi ke array dan merebut perkara yang pada indeks itu. Pilih kad this.props.cards sama this.state.activeIndex. Jadi seperti yang anda lihat di sini, prop dan negeri ini benar-benar bekerja bersama-sama. Jadi sekarang kita mempunyai activeCard kami, kita akan memanggilnya activeCard, dan mari kita lihat jika ia berfungsi. [Didengar] 

Oh, itu adalah satu kesilapan teks. Ah. 

Cool, yep, jadi sekarang kami kembali di mana kami sebelum ini, bukan? Program lama yang sama kecuali sekarang kita boleh menyokong senarai kad, bukan hanya satu kad. Dan kini, sekali lagi, jika kita mengubah activeIndex, kita boleh pergi dari 0 hingga 1, dan sekarang bahawa kad kedua, dan kemudian kami pergi ke 0. Jadi di sini adalah baru souped-up versi kami. 

OK, jadi sekarang mari kita paparan senarai yang menunjukkan semua kad dalam program anda, jadi kita akan membuat baru komponen dipanggil ListView. Mari ListView sama react.createClass. Oleh itu, kita ingin menjadikan yang tidak tertib senarai dengan item senarai untuk setiap kad. Dan dengan itu kita mempunyai sekumpulan kad. Kami mahu satu item senarai untuk setiap kad, bukan? Kita boleh lakukan untuk gelung atau sesuatu untuk membuat item senarai yang baru. Tetapi cara anda melakukannya dalam Bertindak balas, menggunakan perkara yang dipanggil peta. Peta adalah alat atau fungsi yang anda gunakan bahawa bagi setiap perkara, berjalan beberapa fungsi, mengambil nilai pulangan, dan memberikan anda kembali itu. 

Jadi sebagai contoh, kami mempunyai array 1, 2, 3.map function-- dan ini adalah singkatan untuk yang function-- x panah x masa x. Ini berkata, untuk setiap nombor dalam 1, 2, 3, mengambilnya. Persegi, dan memberikan kembali. Jadi, apa yang anda berfikir 1, 2, 3.map x pergi ke x kali x memberikan anda kembali diberikan fungsi ini dijalankan pada setiap elemen array itu. 

PENONTON: 1, 4 9? 

NEEL MEHTA: Ya, 1, 4, 9 kerana anda lakukan 1 kali 1. Yang memberikan anda satu. Itulah elemen pertama. 

2 kali 2 adalah 4. Itulah elemen kedua. 3 kali 3 adalah 9. Itulah elemen ketiga. Masuk akal? Jadi peta mempunyai teknik yang anda digunakan dalam pengaturcara berfungsi, gaya baru pengaturcaraan untuk melakukan sesuatu untuk setiap elemen dalam senarai anda. Dan sebagainya ini bunyi biasa. Kami mempunyai senarai kad. Kami ingin mendapatkan item senarai bagi tiap-tiap satu, jadi kita hanya akan menggunakan peta di sini. Kami akan berkata, mari setaraf senarai this.props, kad, peta. 

Dan supaya diberikan kad, kami akan menjana item senarai dengan kandungan sampingan yang kad itu. Mari kita hanya mengatakan bahawa kita mahu memberi kad mempersoalkan supaya card.question. Jadi senarai ini mengandungi pelbagai ini LI atau Perkara Senarai di mana ada satu senarai item untuk setiap kad, dan yang mengandungi soalan kad itu. Masuk akal? 

Sejuk, jadi sekarang mari kita sebenarnya mencetak yang keluar. Oleh itu, kita akan kembali ul a. Di dalam senarai yang tidak tertib, kita hanya akan melekat seluruh senarai yang mereka berikan kepada kami. Sejuk. 

Baiklah, jadi sekarang ini Paparan senarai kerja-kerja hanya mencari. Sebarang pertanyaan tentang pemandangan senarai? Anda mempunyai sekumpulan kad. Anda membuat item senarai bagi setiap kad. Dan anda memasukkannya ke dalam yang tidak tertib senarai, dan anda memberi kembali. Jadi sekarang mari kita bertindak supaya kita menanamkan dalam ini app kami, supaya kita boleh melakukan ini, paparan senarai. Apakah hujah yang kita lulus ke paparan senarai? Apakah sifat-sifat kita memberikan? Ingat, jika anda memberikan ia sekumpulan kad, ia akan membuat senarai melihat untuk mereka kad. Jadi apa yang kita akan lulus di sini sebagai hujah? PENONTON: Senarai kad? NEEL MEHTA: Ya, jadi kad sama this.props.cards, bukan? Dan jadi satu-satunya masalah adalah bahawa anda hanya boleh bertukar satu elemen tahap teratas dalam memberi, jadi anda perlu balut dalam div a. Itu pelik. Jadi mari kita lihat jika itu. Adakah ini berfungsi? 

Ya, di sana anda pergi. Jadi sekarang kita mempunyai senarai yang kad di bahagian bawah, dan kemudian kita mempunyai kami CardView dirinya di atas, dan yang akan flip antara kedua-dua belah kad. Sekarang adakah itu masuk akal bagaimana saya melakukannya? Ya, jadi sekali lagi, kita mempunyai dua komponen. Cetakan Komponen pertama keluar setiap kad dalam senarai. Itulah paparan senarai. Dan komponen kedua mencetak hanya kad tersebut. Jika anda memberikan kad tertentu, ia akan mempunyai mencetak maklumat mengenai kad yang dan membolehkan anda flip belakang dan sebagainya. 

Jadi, jika kita mahu, kita boleh cuba dan bercakap tentang menambah beberapa ciri-ciri baru ini. Jika tidak, kita boleh bercakap sedikit lebih tentang halaju reaktor, atau kita boleh menjawab soalan yang anda mungkin mempunyai kerana ini adalah semua bahagian teras daripada bertindak balas yang saya mahu bercakap tentang. Kita boleh pergi ke hadapan. Kita boleh menjawab soalan. Apa sahaja yang anda mahu. 

PENONTON: Bolehkah anda menggunakan Membutuhkan dalam biasa JavaScript? Atau adakah sesuatu yang yang datang dengan [didengar]? 

NEEL MEHTA: Soalan ini adalah boleh anda menggunakan membutuhkan dengan normal JavaScript? Jawapannya adalah ya. Membutuhkan hanya cara ia mengambil masa anda JavaScript yang mempunyai HTML di dalamnya, dan ia menyusun ke dalam JavaScript yang tidak mempunyai HTML di dalamnya. Jadi notis bahawa- jadi perhatikan di sini. Ini kelihatan seperti anda mempunyai seperti div dan anda mempunyai barangan di dalamnya. 

Yang menghimpunkan untuk JavaScript yang seperti menjana perkara yang sama. Saya rasa apa yang saya katakan ialah Membutuhkan hanya sintaktik, seperti ia yang prapemproses untuk JavaScript banyak seperti PHP adalah prapemproses untuk HTML. JSC adalah prapemproses yang untuk JavaScript yang membolehkan anda meletakkan HTML bahagian dalam anda JavaScript. Dan jadi jika anda mempunyai pengubah yang betul yang merupakan perkara yang dipanggil [didengar], yang akan mengubah. The prapemproses betul, ia akan membolehkan anda berbuat demikian. 

PENONTON: [didengar] NEEL MEHTA: biasanya anda tidak perlukan untuk meletakkan HTML dalam JavaScript melainkan jika perbuatan anda Bertindak balas. Tetapi anda boleh melakukannya juga. Yep? 

PENONTON: Saya rasa anda menyifatkan Bertindak balas sebagai bahasa programing berfungsi. Kami telah belajar C dalam CS50. Apakah C juga bahasa berfungsi? NEEL MEHTA: Jadi soalan adalah kira-kira berfungsi berbanding satu lagi perkara yang dipanggil program penting atau prosedur. Ada dua jenis program popular. Satu dipanggil prosedur, yang adalah tentang seperti arahan lakukan, dan satu berfungsi, yang semua tentang mempunyai fungsi dan mempunyai input dan output daripada mereka. Bertindak balas adalah paradigma berfungsi. C ialah paradigma sangat prosedur. 

Dan sebagai contoh, C sebagai contoh, anda tidak melakukan cara ini perisytiharan membuat program itu, bukan? Anda katakan, mencetak ini. Mengubah struktur data ini. Cetak halaman ini. Ia mengenai arahan. 

Dalam Bertindak balas, tidak ada bahawa banyak arahan. Ia mengenai mempunyai komponen yang anda meletakkan bersama-sama. Mereka seperti fungsi. Anda mempunyai seperti fungsi dipanggil CardView, yang merupakan fungsi yang mempunyai input, output, dan sebagainya Bertindak balas adalah semua tentang falsafah ini kami dari having-- anda mempunyai data. Anda lulus melalui ini algoritma, dan ia akan output HTML yang anda hanya dicetak halaman, dan jadi anda perlu untuk membinanya sekeping oleh sekeping. 

Jadi untuk menarik metafora dengan apa Saya katakan sebelum ini, anda tahu bagaimana di Facebook jika anda mendapat mesej, dan anda memilih apa bahagian untuk mengemas kini, itulah prosedur. Ia adalah penting, bukan? OK, saya mendapat mesej. Mari kita menukar akaun di sana. 

Mari kita pop tetingkap di sini. Mari kita menukar akaun di sana. Mari kita menarik ini di sini. Itulah pendekatan prosedur. 

Itulah yang perkara seperti sudut, Boost, Tulang Belakang, rangka kerja yang lain digunakan. Bertindak balas berfungsi. Ia adalah cara yang sangat berbeza berfikir tentang sesuatu. Ia mengambil idea ini mari kita fungsi atau algoritma yang akan anda memberikan data. Ia akan meludah keluar apa yang ia perlu, dan komputer akan menjaga berat keluar. Anda tidak mengendalikan sendiri. Adakah ini membuat sedikit rasa? Ya? 

PENONTON: Dalam bahasa berfungsi, semua yang berlaku pada satu masa? 

NEEL MEHTA: Tiada, perkara yang berlaku dalam perintah. Seperti di sini masih ada perintah, tetapi ia tidak berlaku dalam perintah seperti memuji, perintah, arahan. Ia berlaku dalam susunan fungsi memberikan anda output. Meletakkan ke dalam fungsi yang lain. Meletakkan bahawa kepada yang lain fungsi, fungsi yang lain. 

Jika anda melakukan CS51, anda akan belajar program berfungsi keluar sedikit skop ini. Tetapi pada dasarnya, apa yang membuat Bertindak balas sejuk adalah bukan sahaja aliran data sehala dan Dom maya, tetapi juga idea ini pengaturcaraan berfungsi. Manakala program berfungsi adalah sangat mudah untuk mengarang dan membuat barangan sejuk daripada, dan ia sangat mudah untuk berfikir kira-kira dan alasan tentang. Jadi ia adalah satu lagi cabutan yang baik Bertindak balas. Apa-apa soalan lagi? Ya? 

PENONTON: Um, mengapa anda menggunakan biarlah yang bertentangan dengan var? 

NEEL MEHTA: Jadi persoalannya ialah mengapa anda menggunakan biarkan bukannya var? Ini adalah perkara yang dipanggil ES6 atau ECMAScript 6. Ia adalah versi baru JavaScript. Ada sekumpulan sebab-sebab teknikal, tetapi let adalah versi yang lebih baik daripada var. 

Ia adalah bagaimana anda mengisytiharkan pembolehubah. Anda boleh menggunakan membiarkan. Anda boleh menggunakan var. Let mempunyai sekumpulan teknikal reasons-- anda boleh melihat mereka sehingga later-- mengapa ia adalah lebih baik. Pada asasnya, ES6 mempunyai beberapa nice sintaks baru, beberapa ciri-ciri baru di atas JavaScript lama. 

Oleh itu, kita mempunyai seperti lima minit. Saya hanya mahu bercakap tentang satu perkara yang lebih cepat nyata. Jika anda mempunyai sebarang pertanyaan, mari kita bercakap mengenainya selepas ini. Tetapi hanya jadi ini mendapat ditangkap pada kamera, saya hanya mahu bercakap sedikit tentang bagaimana anda benar-benar menggunakan Bertindak balas dalam aplikasi anda. 

Jika anda pergi di sini, Facebook.GitHub.IO/react, ini adalah halaman rumah untuk Bertindak balas, dan ia akan menunjukkan kepada anda bagaimana anda benar-benar menggunakan Bertindak balas dalam halaman anda. Pada asasnya, ia sedikit rumit cuba untuk memasang Bertindak balas. Ia bukan semudah yang anda hanya seret dan lepaskan JavaScript di sana. 

Anda perlu mempunyai pengubah anda ditubuhkan, yang akan, seperti yang berlaku sebelum ini, menghidupkan membutuhkan anda ke JavaScript normal. Anda perlu perkara yang akan mempunyai menyusun anda ES6 normal. JavaScript ada banyak bergerak bahagian yang anda perlu lakukan, jadi ada perkara yang dipanggil Yeoman, Yeoman.io. Dan ini adalah satu alat baris arahan yang boleh membantu anda scaffold keluar Bertindak balas anda projek dengan mudah. 

Jadi, anda boleh membaca tentang perkara ini kemudian, tetapi terdapat beberapa alat yang Yeoman ditawarkan. Mereka akan membolehkan anda membuat Bertindak balas yang aplikasi dengan segala-galanya yang dibina. Seperti ia akan telah membina dalam, komponen terbina dalam. Ia akan mempunyai pengubah anda terbina dalam. Mereka mempunyai banyak sejuk barangan yang dibina secara automatik menggunakan perkara-perkara ini dipanggil penjana. 

Jadi membaca tentang perkara ini jika anda mahu. Hanya pergi pada Yeoman, Y-E-O-M-A-N, dan anda boleh mencari penjana seperti ini. Dan dengan penjana seperti ini, anda hanya suka satu adalah perintah garis pasangan menyuruh. Ia akan scaffold menjalankan satu Bertindak balas keseluruhan aplikasi untuk anda. Ia akan mendapat semua paip manual, dan pekerjaan kasar dilakukan untuk anda, dan ini adalah mengapa anda hanya memberi tumpuan kepada hanya menulis dalam Bertindak balas. 

Jadi, pada asasnya membina Bertindak balas app adalah nontrivial. Ia berwayar semua bersama-sama, tetapi ada adalah alat yang akan melakukannya untuk anda. Jadi, jika anda ingin Bertindak balas yang aplikasi, cuba lakukan dengan cara itu. Jika anda hanya mahu mencuba, anda boleh cuba menggunakan CodePen ini kerana CodePen ini mempunyai semua bertindak balas pendawaian. Saya telah melakukan semua kerja untuk anda sudah. 

Jadi, jika anda ingin seperti pengeluaran untuk melepaskan Bertindak balas app, cuba salah satu penjana ini. Jika anda hanya mahu bermain sekitar, ia sering bernilai hanya seperti cuba bermain-main di CodePen sini. Bunyi yang baik? Sejuk. 

Jadi itu sahaja yang saya ada. Sekali lagi, semua kod dan contoh-contoh yang akan berada di laman web ini di sini. Jadi, sekali lagi, kita tidak bercakap tentang banyak sintaks Bertindak balas, tetapi untuk mencari semua orang-orang butir-butir kecil sintaksis, itu semua akan boleh didapati di laman web ini di sini. 

Jadi saya akan mengesyorkan seperti mengambil langkah pertama. Letakkanlah di dalam CodePen anda. Cuba berusaha untuk menjadikan kepada langkah kedua. Ada Langkah keempat, dan hanya melihat di mana anda dapat daripada itu. 

Lagi soalan, lihat di halaman itu atau e-mel saya. Itu e-mel saya. Tetapi saya suka untuk membantu anda dengan mana-mana soalan yang anda mungkin mempunyai kira-kira Bertindak balas. Jadi, yep, itu sahaja yang saya ada. Terima kasih semua kerana sudi menonton atau untuk hadir. Dan saya akan mengambil apa-apa soalan anda mungkin perlu selepas ini sekarang. Jadi terima kasih semua kerana menonton.