[MUSIC PLAYING] 

NEEL Mehta: Di sini ia pergi. 

Yah, semua orang, selamat datang untuk web aplikasi masa depan dengan Bereaksi. Ini adalah CS50. Nama saya Neel. Aku TA untuk CS50 dan mahasiswa tahun kedua di Harvard College dan sangat, sangat pengembang web bergairah. Jadi saya sangat menarik untuk berbicara kepada Anda hari ini, apakah Anda berada di sini atau di rumah menonton, sekitar Bereaksi, yang, lagi seperti yang saya katakan, masa depan aplikasi web. 

Jadi Bereaksi adalah kerangka web. Dan seperti yang saya sudah memberitahu untuk beberapa orang di sini, kerangka hanya set alat yang dapat digunakan struktur dan membangun aplikasi web Anda. Dan aplikasi web, sekali lagi, website yang interaktif seperti Facebook, Twitter.com, Instagram.com, apa pun. 

Jadi Facebook adalah kerangka web yang dikembangkan oleh Facebook beberapa tahun back-- Bereaksi adalah. Ini karena telah digunakan dalam Facebook pada aplikasi mobile mereka dan aplikasi web, Instagram. Khan Academy adalah lain adopter awal menonjol dari Bereaksi. 

Ini benar-benar telah mendapatkan sangat populer. Jika Anda pernah menggunakan hal-hal seperti sudut atau Backbone, ini adalah dari keluarga yang sama, tetapi sejak jauh melampaui popularitas mereka. Ini hal baru panas. Ini benar-benar, benar-benar besar. 

Dan Bereaksi baik bukan hanya sebagai kerangka web untuk antarmuka bangunan. Ini baik untuk membangun antarmuka web. Ada juga hal disebut Bereaksi asli yang memungkinkan Anda membangun interface untuk Android dan iOS dan platform mungkin lain di masa depan hanya menggunakan kode JavaScript yang sama. Anda bisa menggunakan yang sama persis Kode JavaScript untuk membuat website, untuk membuat aplikasi Android dan iOS apps. 

Ini waktu yang sangat, sangat menarik. Ini adalah kesempatan yang sangat, sangat keren. Ini benar-benar sebuah web yang universal alat pengembangan antarmuka, jadi itu adalah sangat, sangat Hal penting untuk mengetahui. Dan, seperti yang saya memberitahu orang-orang sebelumnya, ini, saya pikir, akan mengubah cara kita membangun aplikasi web selamanya. Jadi itu mungkin hiperbola sedikit, tapi aku pikir itu hal yang cukup baik untuk tahu. 

OK, jadi apa Bereaksi? Bereaksi adalah kerangka Anda dapat digunakan untuk membangun interface. Sebuah antarmuka adalah, sekali lagi, halaman web, kan? Jadi, inilah Instagram.com, penggunaan React. 

Bereaksi dibangun pada Ide komponen. Komponen adalah HTML elemen pada steroid, sehingga elemen HTML adalah seperti sebuah tombol. Ini sebuah paragraf. Ini header, kan? Dan Instagram akan menggunakan ini, tapi juga akan menggunakan komponen dari Bereaksi. 

Bereaksi komponen elemen HTML souped-up yang memiliki perilaku mereka sendiri terkandung di dalamnya. Jadi, sebagai contoh, kita bisa memiliki elemen waktu, komponen waktu, yang akan berisi seperti cap waktu, Anda tahu, komponen profil yang akan berisi gambar profil dan nama orang. Hal ini dapat memiliki counter seperti yang bisa menghitung seperti jumlah suka, dan jika Anda klik di atasnya, itu akan meningkatkan jumlah orang seperti. Komponen adalah hanya sekelompok kode HTML yang memiliki beberapa fungsi dibungkus di dalamnya. Jadi seperti elemen HTML pada steroid, seperti yang saya katakan sebelumnya. Anda dapat mengambil komponen-komponen ini, dan Anda dapat menempatkan mereka bersama-sama untuk membuat komponen baru, di kasus ini, komponen pos, yang berisi semua hal ini. Ini akan berisi Time, Profil, LikeCounter, mungkin komentar dan mungkin gambar itu sendiri. Dan aplikasi web hanya dibangun dengan mengambil komponen dan menempatkan mereka bersama-sama. Feed Instagram tidak lebih dari sekelompok posting satu demi satu, setiap posting berisi seperti Waktu, Profil, LikeCounter, dan sebagainya. Ini semacam seperti membangun rumah. Anda tidak membangun rumah dari atas ke bawah. Anda mengambil components-- Anda mengambil seperti kamar mandi. Anda mengambil bedroom-- Anda tetap mereka bersama-sama, dan Anda memiliki komponen baru. Anda memiliki bagian baru dari rumah. 

Jadi bereaksi adalah semua dibangun di sekitar ide ini komponen yang yang interaktif, yang deklaratif. Seperti Anda hanya mengatakan apa profil, dan itu menjadikan itu. Mereka composable. Anda dapat mengambil waktu dan profil, menempatkan mereka bersama-sama, membuat sesuatu yang lebih baik. Dan mereka dapat digunakan kembali, jadi jika Anda memiliki kode sumber untuk posting, Anda bisa menanamkan mana saja yang. 

Anda dapat menanamkan sebuah Instagram hal di situs Anda sendiri. Anda dapat menanamkan di Facebook, misalnya, asalkan menggunakan Bereaksi juga. Jadi komponen yang benar-benar, benar-benar, benar-benar blok bangunan yang kuat dari web yang dapat digunakan di mana saja dan menempatkan bersama-sama untuk membuat blok bangunan baru. Itu sangat, sangat gambaran tingkat tinggi. Jadi, sekali lagi, jika Anda memiliki pertanyaan pada setiap titik tentang filsafat reaktor, coding, untuk menghentikan saya, dan biarkan aku tahu. 

OK, jadi bereaksi dingin karena memiliki cara yang berbeda dalam memandang bagaimana Anda membangun aplikasi web. Anda mungkin pernah mendengar dari MVC, sebuah Model Anda kontrol di CS50 atau apa pun lainnya menyelidik kelas yang Anda gunakan. Dan paling kerangka yang dibangun di sekitar gagasan MVC. Bereaksi tidak. Bereaksi dibangun di sekitar gagasan aliran data searah seperti yang terlihat oleh grafik atau grafis di sini. 

Pada dasarnya, Anda memiliki sumber data. Dan sumber data akan memutuskan bagaimana lay out komponen-komponen tertentu. Dan komponen akan kemudian, ketika mereka berubah, mereka akan memberitahu sumber data untuk mengubah. 

Untuk menggunakan Instagram Misalnya, Anda mungkin memiliki daftar posting benda seperti dalam database atau sesuatu. Bahwa data. Dan kemudian komponen posting kami akan mengambil data itu, dan menggunakan data itu untuk membuat hal di layar. Itulah yang panah dari data ke komponen, dan kemudian data yang sama digunakan untuk membuat sekelompok komponen. 

Di Facebook Messenger, untuk Misalnya, yang Bereaksi, Anda mungkin memiliki daftar pesan sebagai sumber data Anda. Dan itu akan membuat tidak hanya daftar pesan tetapi juga daftar teman yang Anda miliki. Anda memiliki hitungan yang belum dibaca. Mungkin juga membuat hal Facebook itu di bagian bawah Facebook.com. Data yang sama adalah sumber tunggal kebenaran dan yang menyebabkan banyak komponen yang akan diberikan. Dan setiap kali salah satu dari mereka komponen berubah, itu akan kembali dan mengubah sumber data. 

Anda mengirim pesan, kan? Yang mengubah sumber data. Anda membaca pesan Anda, sehingga Anda mengatur belum dibaca dengan 0. Yang mengubah sumber data. Dan melihat bahwa semua ini dari satu panah akan kembali ke data yang sama sumber, sehingga Anda tahu, diberikan satu set data tertentu, Anda tahu persis apa yang Halaman ini akan terlihat seperti. Ini deterministik. Anda tahu, mengingat data tertentu, apa Halaman ini akan terlihat seperti. Anda dapat memprediksi bagaimana hal itu akan berperilaku dan bagaimana hal tersebut terjadi bekerja ketika mereka disatukan. 

Dan jika aku punya satu juta komponen di sini, itu akan berperilaku sama, kan? Anda tidak akan memiliki interkoneksi aneh. Salah satu data yang diberikan satu juta komponen. Satu juta komponen bisa kembali dan mengedit data. Dan jadi ini sangat bagus. Kami sedang membangun composable, mudah aplikasi web scalable. 

Anda memiliki satu sumber data, sumber kebenaran. Yang menceritakan komponen Anda bagaimana lay out halaman, dan komponen akan menangani interaksi. Dan jika mereka ingin mengubah hal, hanya kembali dan memberitahu sumber data untuk mengubah. Masuk akal? Jadi Bereaksi adalah semua tentang pemahaman bagaimana membangun komponen dan bagaimana membuat komponen Anda berinteraksi dengan dunia luar. 

Membuat komponen berinteraksi dengan dunia luar menggunakan teknologi lain disebut Flux, yang adalah kerangka yang ditambahkan di atas Bereaksi. Kami tidak akan berbicara tentang itu. Kita akan berbicara lebih banyak tentang, mengingat data, bagaimana Anda bisa membuat komponen? 

Dan Bereaksi benar-benar keren karena Anda dapat menggunakannya dengan ujung belakang yang Anda inginkan. Jika Anda memiliki seperti back end Python, jika Python Anda dapat meludahkan beberapa data, Bereaksi dapat membuat itu. Jika Anda tidak output JS data, React menjadikan itu. Ruby rel dengan data, React menjadikan itu. 

Jadi Bereaksi pada dasarnya adalah web view-- front end dengan komponen untuk setiap sumber data apapun. Dan pergi dari sumber data ke bereaksi komponen cukup mudah. Akan cara lain adalah sedikit lebih keras. Yang menggunakan Flux seperti yang saya sebutkan sebelumnya. Kami tidak akan masuk ke dalam itu. Kami akan lebih fokus pada Data-to-komponen sisi. Dengan cara ini Anda dapat membuat keren, aplikasi web menyenangkan. Ini tidak akan mempengaruhi dunia luar untuk saat ini, tapi itu cerita lain. 

OK, jadi jika Anda berada di sini untuk seminar terakhir saya Anda akan tahu bahwa semua kode untuk pembicaraan hari ini akan berada di 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 membangun sampel Bereaksi app. Dan sehingga semua kode sumber untuk setiap langkah dari jalan akan ada di sini, jadi jika Anda mengikuti bersama di rumah, merasa bebas untuk membaca dengan teliti kode ini. Jika Anda mengikuti bersama di sini, kita akan menunjukkan pada layar, jadi jangan khawatir tentang hal itu. Tetapi jika Anda berada di rumah, merasa bebas untuk mengunjungi website ini. Dan, Ya, Anda harus bisa mendapatkan semua kode Anda pernah butuhkan di sini. Jadi contekan baik juga untuk petualangan masa depan Anda dengan Bereaksi. Keren, jadi jika semua orang yang ada di sini, dan bahkan jika Anda di rumah, menarik website ini, is.gd/cs50react, tanpa modal, tidak ada garis bawah, tidak ada apa-apa. 

Anda akan melihat halaman yang terlihat sedikit seperti ini. Ini adalah hal yang disebut CodePen. CodePen adalah sebuah kolaborasi coding lingkungan dengan yang saya dapat menulis kode di sini, dan itu akan secara otomatis dikirimkan kepada Anda. Dan untuk cara ini, saya bisa menulis kode. Saya bisa menjalankan kode di sini. 

Untuk example-- dan jika reloads-- melihat, Saya menjalankan kode JavaScript pada halaman di sini, dan itu akan otomatis membuat halaman web dengan kode JavaScript ini. Dan jadi ini adalah cara bagi kita untuk mencoba kode benar-benar cepat tanpa harus menggunakan ID kami atau menggunakan mesin lokal kami atau apapun. Ini adalah cara yang sangat cepat bagi Anda untuk mockup dan menguji berbagai jenis kode. 

Jadi aku akan mengambil contoh kode, meletakkan di sini. Kami akan bekerja melalui itu. Dan jika Anda di rumah, Anda dapat melakukan ini sampai juga. Dan saya sudah diinstal Bereaksi sini, sehingga Anda bisa hanya menulis kode Anda sendiri di sini, dan mencobanya sebagai taman bermain sendiri. 

Ya, jika semua orang untuk membuka link ini di sini. Tolong beri saya jempol setelah Anda memilikinya terbuka. Keren, keren keren. Tidak ada di sini untuk saat ini, tapi kami akan mengubah itu segera. 

OK, jadi Bereaksi adalah JavaScript perpustakaan, dan karena itu, membutuhkan pengetahuan JavaScript, yang merupakan bahasa pemrograman web. Dan itu digunakan untuk hal-hal lain sekarang juga, tapi terutama web mengembangkan bahasa, jadi jika Anda tidak terbiasa dengan itu, membaca sebuah situs yang disebut JSforCats.com. Ini luar biasa. Anda dapat belajar JavaScript dalam waktu setengah jam. Itu luar biasa. 

Jadi memberikan read. Kami juga banyak HTML sini karena kita merancang halaman web tentu saja. Jadi jika Anda tidak terbiasa dengan HTML, periksa HTMLdog.com. Saya pikir belajar Bereaksi adalah mudah juta kali sudah jika Anda mengetahui blok bangunan. Jika Anda memiliki komponen, itu mudah untuk membuat komponen yang lebih besar. Itu Bereaksi bahasa untuk Anda. 

Jadi pergi ke depan dan memberikan hal-hal ini dibaca. Jeda video ini. Berikan dibaca jika Anda di rumah jika Anda tidak akrab dengan HTML atau JavaScript OK, jadi apa kita akan lakukan adalah kita akan membuat aplikasi flashcard sangat dasar menggunakan Bereaksi. Kita akan memiliki sebuah flashcard. Anda dapat flip kartu bolak-balik. Dan kami juga akan memiliki daftar semua kartu yang kita miliki, dan jika kita merasa ambisius, kita mungkin dapat beralih antara mobil dengan mengklik pada mereka. 

Tapi ini, dari telanjang tulang, sangat sederhana Bereaksi app. Dan jadi ini sebenarnya tidak sepele untuk melaksanakan, tapi kami akan menunjukkan bahwa, jika Anda melakukan ini, itu sangat, sangat mudah untuk memperpanjang jika orang lain membantu Anda dengan itu. Jadi kita akan pergi melalui empat langkah mulai dari awal untuk membangun ini. 

OK, jadi empat langkah, kita akan mulai dengan langkah pertama. Langkah pertama akan menjadi membangun komponen pertama Anda. Seperti yang saya katakan sebelumnya, komponen di Bereaksi hanya sebuah elemen HTML pada steroid. Ini menentukan HTML dan beberapa perilaku, dan akan menentukan bagaimana orang dapat berinteraksi dengan itu bagaimana itu akan memiliki keadaan internal. Seperti tombol akan tahu seperti berapa banyak kali itu sudah diklik misalnya, dan itu akan tahu bagaimana untuk meletakkan sendirinya. 

Jadi mari kita pergi ke depan dan membangun kami Komponen pertama menggunakan JavaScript. Jadi jika sintaks terlihat aneh, itu karena jenis ini. Jadi, sekali lagi, kita akan untuk membuat sebuah variabel yang disebut app menggunakan kata kunci biarkan, yang membuat variabel, biarkan App sama React.createClass. 

Bereaksi adalah perpustakaan dan memiliki yang membuat fungsi kelas. Dan fungsi ini sedikit kode yang Anda dapat digunakan untuk membuat baru jenis Bereaksi komponen. Dan React.createClass membuat komponen, dan komponen ini akan dapat melakukan hal-hal. Hal utama yang dapat dilakukan adalah membuat sesuatu, membuat sebagai fungsi. 

Sekali lagi, jika indeks ini tidak jelas untuk Anda, saya sarankan Anda pergi di JS untuk kucing dan check it out. Apakah itu diperbesar cukup baik? Keren. 

Jadi setiap kebutuhan komponen memiliki fungsi render. Render fungsi mengatakan, apa yang harus saya mencetak di layar? Tapi komponen adalah berguna jika tidak tahu apa yang harus mencetak pada layar, sehingga Anda harus memiliki fungsi render. 

Jadi dalam membuat hal, Anda hanya perlu kembali beberapa HTML. Dan apa yang keren adalah bahwa ada hal yang disebut BEJ, yang merupakan perluasan dari JavaScript yang digunakan oleh bereaksi. Ini memungkinkan anda menulis HTML dalam Anda JavaScript, yang Kedengarannya agak aneh ketika Anda pertama kali berpikir tentang hal ini, tapi itu membuat banyak akal sesudahnya. Jadi kita bisa melakukan ini. Jika Anda akrab dengan HTML, saya tahu kita memiliki div dengan tujuan umum wadah untuk hal-hal. Kita bisa kembali div, dan di dalam div ini, kita bisa meletakkan barang-barang. 

Jadi katakanlah kita ingin membuat hanya flashcard lurus-up untuk saat ini. Flashcard, saya akan mengatakan, akan memiliki pertanyaan dan jawaban. Jadi di dalam div ini, mari kita mencetak sebuah paragraf yang mengatakan question-- Apa jawaban utama untuk hidup, alam semesta? Dan maka jawabannya adalah akan, tentu saja, 42. 

Itu tidak datang sama sekali. Ya, jadi pada dasarnya Anda dapat benar-benar menulis HTML dalam JavaScript Anda. Dan ini akan menjadi dicetak ke layar. Jadi mari kita mencobanya. 

Jadi kita memiliki komponen kami. Kita perlu memberitahu Bereaksi untuk menempatkan komponen pada layar sehingga React.render, sehingga melihat bahwa kita memperlakukan aplikasi seperti unsur lainnya. Kami menulis seperti itu elemen HTML. Seperti bukannya mengatakan seperti img untuk gambar atau p untuk paragraf, Anda menulis App, sehingga App diperlakukan seperti elemen HTML. Seperti yang saya katakan sebelumnya, itu elemen pada steroid. 

Jadi Anda membuat App, dan Anda memberikan tempat untuk meletakkannya. Dan ini adalah bagaimana Anda dapat mengatakan itu di mana untuk meletakkannya. Saya telah menciptakan sebuah div sederhana pada Halaman disebut dengan ID halaman, dan di situlah elemen akan pergi. 

Dan kami tidak akan berjalan dengan HTML. Pada dasarnya ini akan mendapatkan menempatkan dalam elemen halaman yang kita miliki di layar. Sehingga berjalan kode ini, dan itu menarik ini Hal di layar, jadi di sini kita. Kami telah membuat pertama Bereaksi komponen kami. 

Jadi hanya sebagai rekap, kita lembut membuat tipe baru komponen, kan? Itulah yang React.createClass. Dan dalam komponen itu, kami diberitahu itu apa yang harus dilakukan. Setiap kali komponen ini adalah untuk dicetak ke layar, itu akan mencetak div dengan dua paragraf di dalamnya. 

Dan apa yang kami lakukan, kami membuat aplikasi baru menggunakan notasi sudut app braket. Kami diberitahu untuk meletakkannya dalam elemen halaman. Dan apa yang saya lakukan, itu diciptakan aplikasi baru dari template itu. Dan kemudian saya diberitahu itu untuk membuat itu. Jadi katanya, OK, aplikasi, apa yang harus saya mencetak? App mengatakan, pergi mencetak div dengan dua paragraf di dalamnya. Dan voila, ada div kami dengan dua paragraf di dalamnya. Masuk akal sejauh ini? 

Jadi, sekali lagi, seluruh tantangan Bereaksi hanya mengetahui bagaimana membuat komponen. Cara membuat komponen bekerja sama. Sekarang kita telah membuat kami pertama komponen, mari kita kembali dan membuat komponen disesuaikan. Jadi Anda tahu bagaimana dalam HTML Anda dapat memberikan kelas tombol Anda? Anda dapat memberikan jangkar Anda href. Anda dapat memberikan masukan Anda tipe, kan? Anda dapat memberikan lebih kustom properti untuk semua elemen Anda untuk membuatnya lebih menarik. Dan kita benar-benar bisa melakukan hal yang sama persis. 

Jadi katakanlah kita ingin kami app untuk pergi membuat kartu apapun. Saat ini kami hanya diberikan kartu hardcoded. Kita tahu hanya ada satu kartu yang dapat dilakukan, jadi kita akan mencoba dan mengubah ini sekarang jadi bahwa kita hanya dapat memberikan beberapa kartu. Ini akan mencetak kartu. 

Anda harus mencoba dan membuat Anda komponen tujuan yang sangat umum. Jadi cara ini saya bisa email ini teman saya dan menjadi seperti, flashcard apa pun yang Anda miliki, hanya memberi makan ke sini, dan akan melakukannya dengan sendirinya. Anda dapat menempatkan lainnya hal dalam aplikasi Anda sendiri. 

Tapi pertama-tama, mari kita istirahat ini menjadi dua komponen, tapi kami ingin memisahkan kartu pencetakan bagian dari bagian aplikasi yang sebenarnya. Jadi apa yang bisa kita lakukan adalah kita dapat mengubah ini dari App untuk CardView, hanya nama baru untuk aplikasi, dan kami dapat membuat baru komponen yang disebut App, tidak menjadi bingung dengan App tua. Kami punya createClass, dan seperti di HTML, Anda dapat sarang Bereaksi komponen dalam satu sama lain. 

Jadi dalam membuat fungsi ini, Fungsi CardView kembali, dan ini adalah hal yang sama. Melihat mengapa hal itu hal yang sama? Alih-alih render hanya aplikasi yang memiliki div dan pasangan di dalamnya, app merender CardView, dan CardView membuat div dan ayat. Jadi ini adalah contoh pertama kami elemen bersarang dalam satu sama lain. Apakah itu masuk akal? Jadi, sekali lagi, kita memiliki unsur CardView. Kami memiliki elemen app bahwa itu lebih besar dari. 

OK, jadi kami ingin kami CardView-- jika Anda memberikan kartu tertentu yang CardView baik, itu akan mencetak untuk Anda, kan? Jadi pertama, kita perlu membuat kartu, jadi mari kita membuat objek kartu. Jadi biarkan kartu saya equal-- jika Anda semua kenal, ini hanya notasi keputusan objek dalam JavaScript. Ini semacam seperti struct di C, jadi kami membuat kartu, dan jadi sekarang kita bisa lewat kartu ini sebagai properti atau sebagai atribut dalam HTML terminologi untuk aplikasi kita. Jadi kita bisa melakukan ini, App kartu sama Mycard. 

Anda tahu bagaimana input, Anda lakukan input type sama teks atau tombol kelas equals btn untuk bootstrap ,? Ide yang sama, kartu App equals-- Anda harus menempatkan kawat gigi sini- Kartu App sama Mycard, jadi ini mengatakan kita memiliki objek kartu ini. Aku akan lulus sebagai properti untuk komponen aplikasi. Dan komponen aplikasi ini akan dapat mengakses dan melakukan hal menarik dengan itu. 

Jadi aplikasi kita akan menjadi diberikan kartu, jadi untuk sekarang, mari kita aplikasi hanya memberikan kartu untuk CardView yang sendiri karena seperti app tidak akan tahu apa yang harus dilakukan dengan itu, jadi kami hanya akan memberikannya kepada CardView tersebut. Jadi kita akan lulus dalam cara yang sama, kartu sama, dan sehingga setiap komponen dapat mengakses hal-hal yang telah diberikan kepadanya. Mereka dapat mengakses properti yang telah diberikan untuk itu menggunakan sintaks ini, this.props.card. 

Jadi apa yang terjadi di sini adalah Anda memiliki objek Mycard. Anda lulus ke app menggunakan kartu App sama Mycard. Bahwa objek kartu diberikan kepada aplikasi Anda. Aplikasi ini dapat mengaksesnya sebagai this.props.card. Ini semacam seperti gambar tahu apa itu sumber. 

Aplikasi ini tahu apa itu kartu adalah, dan dapat melakukan hal-hal dengan itu. Hal ini dapat melakukan perhitungan. Hal ini dapat membuat keputusan berdasarkan dari itu. 

Untuk saat ini, aku akan lulus this.props.card ke CardView. Masuk akal sejauh ini? Itu akan lebih masuk akal sekarang. 

OK, jadi sekarang kita berada di CardView. CardView kami, mengingat kartu, harus mencetak pertanyaan dan jawaban. Saat ini kami hanya dicetak beberapa pertanyaan dan jawaban hardcoded. Kita perlu mencari out-- kita perlu untuk meminta kartu yang mereka memberi kami apa adalah pertanyaan dan jawaban, dan kemudian mencetak ini ke layar. 

Jadi kita bisa melakukan ini di sini. Dalam membuat begin-- pertama lakukan sama. Jadi apa yang kita lakukan di sini adalah kita tahu bahwa kartu diberikan kita untuk properti, kanan? Ini diberikan kepada kita sebagai masukan. Seperti itu hampir seperti argumen ke fungsi. Kartu ini argumen hampir CardView ini. 

Kami akan mengambil itu, dan menempatkan menjadi pertanyaan variabel. Pastikan jawabannya pergi untuk jawaban variabel. Anjuran kartu untuk menjawab. Dan sekarang kita memiliki ini, bukannya mencetak teks yang, kita akan mencetak apa pun yang mereka memberi kami. 

Jadi ini stuff-- sehingga kita akan untuk memadamkan Pertanyaan Jawaban. Mari kita lihat apakah ini bekerja. Keren, jadi mari kita melangkah melalui itu sekali lagi hanya untuk memastikan. 

Jadi kartu saya adalah objek kartu, dan kami memberikan kartu untuk app. Dan aplikasi akan mengambil kartu dan memberikannya kepada CardView. Dan CardView ini mengatakan, jika Anda memberi saya benda flashcard, Saya akan mencetak pertanyaan nya dan jawabannya, kan? 

Jadi apa yang bisa saya lakukan adalah saya bisa kirim kode ini, pertama seperti 10 baris kode saya, teman saya. Dia bisa menanamkan dalam aplikasi sendiri. Dan selama ia melakukan hal yang sama, seperti kartu CardView sama ini, selama ia menciptakan CardView yang dan memberikannya informasi yang tepat, dia bisa membuat kartu sendiri. Dan cara ini, itu benar-benar cara keren bagi Anda untuk membangun komponen yang digunakan satu sama lain, kan? Kartu ini, saya bisa menerbitkan CardView ini di internet, dan orang-orang akan dapat menggunakannya. Jadi pada dasarnya, ini seperti salah satu fungsi standar di perpustakaan C. 

Ini adalah fungsi di mana seseorang telah menulis itu. Anda memberikan masukan tertentu. Ini akan menghasilkan output tertentu. Anda tidak peduli bagaimana cara kerjanya secara internal. Selama Anda memberikan hak masukan, itu akan membuat output yang tepat. 

Dan komponen dapat memikirkan cara yang sama. CardView ini adalah seperti fungsi perpustakaan. Jika Anda memberikan beberapa kartu sebagai properti, itu akan mencetak isi dari kartu itu. Seperti jika saya mengganti kartu saya untuk bukannya menjadi seperti apa adalah 5 ditambah 37, itu akan memperbarui sesuai. Jadi hanya dengan mengubah input, mendapat output tertentu. Jadi Anda bisa memikirkan komponen hampir sebagai fungsi dengan cara ini, yang Anda dapat menempatkan bersama-sama. Anda mendapatkan masukan, seperti CardView ini sebagai masukan, Anda mendapatkan output. Dalam hal ini, output HTML. Masuk akal sejauh ini? Keren, jadi sekali lagi, sifat yang bagaimana Anda dapat menyampaikan informasi masuk dan keluar dari komponen. 

OK, jadi mari kita membuat ini Hal interaktif. Sekarang itu agak membosankan. Apa [tidak terdengar]? Anda dapat mencetak beberapa keluar, tapi itu semua yang dapat dilakukan. 

Jadi mari kita kembali ke pertanyaan lama hanya untuk saat ini. OK, jadi sekarang komponen ini membosankan karena semua yang mereka lakukan, mereka mendapatkan masukan. Mereka membuat output, kan? Itu agak membosankan. Kami ingin memiliki kita komponen untuk dapat memiliki semacam keadaan internal, seperti mengingat sesuatu. 

Untuk flashcard, karena Misalnya, seperti apa negara Anda mungkin ingin ingat untuk flashcard sebuah? Apa Status sementara Anda mungkin ingin mengingat untuk flashcard dalam aplikasi flashcard? AUDIENCE: Apakah itu sudah membalik? NEEL Mehta: Ya, benar. Jadi, Anda mungkin ingin menyimpan track yang Anda hadapi atau yang Anda menghadap ke bawah pada kartu. Di Facebook, misalnya, Anda akan ingin mengingat di mana di feed berita adalah Anda atau suka siapa profil yang Anda lakukan sekarang. 

Pada Messenger, seperti apa teks yang ketik di kotak input, kan? Jika Anda me-refresh halaman, itu pergi. Tapi Anda tidak benar-benar peduli. Ini hanya sementara. Ya? 

AUDIENCE: [tidak terdengar] NEEL Mehta: Seperti sekejap kartu, seperti Anda dapat melihat sisi pertanyaan atau sisi jawaban? 

AUDIENCE: OK. 

NEEL Mehta: Seperti dua sisi flashcard, kan? Ya, sehingga Anda ingin punya ide ini dari sekarang Saya memiliki sifat, yang seperti input, tapi negara, yang bersifat sementara, eh, di mana Anda berada pada halaman, kan? Sekali lagi, saya mengatakan di Facebook Messenger, saya harus seperti yang orang Anda lihat Facebook atau siapa profil, kan? 

Ini hanya sementara. Sangat penting untuk menunjukkan pengguna apa yang terjadi, tapi refresh halaman. Itu tidak terlalu penting. Jadi negara sementara, jadi kita semua negara itu. 

Jadi, sekali lagi, ada negara dan alat peraga. Props adalah masukan yang diberikan dari sumber data Anda. Negara adalah seperti default. Ini seperti hal-hal yang membuat hal interaktif. 

Jadi dalam kami CardView-- mari kita kami CardView-- jadi itu bagus. Apa yang akan kita lakukan di sini, kita akan menyentuh CardView dan hanya CardView. Dan jadi teman saya yang punya ini, mereka tidak akan melihat perbedaan. Mereka tidak akan harus mengubah setiap kode mereka sendiri, tapi mereka akan melihat mereka CardView mendapat souped. Itu bagian yang bagus tentang komponen. 

OK, jadi di CardView kami, mari kita coba dan melacak apakah kita fase up atau menghadap ke bawah. Dalam Bereaksi kita melakukan ini dengan pertama-tama menentukan keadaan awal. Mana kartu dimulai? 

Jadi fungsi yang disebut getInitialState berfungsi, dan kami kembali objek. Objek ini berisi beberapa negara, dan negara hanya sepasang kunci-nilai. Seperti di instruksikan, Anda memiliki kunci dan nilai, Anda memiliki seperti nama adalah sebuah string. 

Dalam hal ini, katakanlah depan benar. Ini mengatakan bahwa kita memiliki negara. Salah satu komponen dari negara adalah atribut yang disebut depan. [Tidak terdengar], sehingga secara default, kita berada di depan kartu, dan kita dapat mengubah ini seperti yang kita membalik kartu. Masuk akal? 

OK, jadi di render, sekarang, kami menampilkan pertanyaan dan jawaban. Sekarang apa yang harus kita lakukan adalah menunjukkan pertanyaan jika kita berada di bagian depan kartu sehingga jawabannya adalah untuk belakang kartu. Itulah mengapa Anda semua membuat kartu interaktif. Jadi mari kita coba dan untuk ini di sini. Yah, pertama hanya membuat variabel. Kita bisa meminta sekarang this.state.front. Kita mengakses menyatakan kita sama alat peraga akses, sehingga this.state.front. 

Jika kita depan, maka teks adalah this.props.card.question. Jika kita berada di depan kartu, kita akan mencoba dan ambil pertanyaan dari kartu. Jika tidak, jika kita berada di belakang kartu, apa yang kita lakukan? 

AUDIENCE: Jawabannya? 

NEEL Mehta: Yep, sehingga teks sama this.props.card.answer. Tetapi jika Anda perhatikan, kita menggunakan negara untuk membuat keputusan karena sekarang komponen akan terlihat berbeda didasarkan dari bagaimana berinteraksi dengan itu. Jadi, bukannya mencetak ini, kita hanya akan mencetak teks. Keren, jadi sekarang, seperti yang Anda lihat, kita hanya melihat pertanyaan. Dan jika saya mengubah keadaan di sini secara manual untuk depan adalah palsu kita mendapatkan 42 kembali. 

Jadi, sekali lagi, komponen ini memiliki negara sendiri. Seperti tombol yang tahu apakah itu sudah ditekan atau tidak, Hal ini tahu apa yang ada di depan atau di belakang. Secara default, itu di bagian depan. Dan kemudian jika itu di bagian depan, kami akan mencetak pertanyaan. Jika itu di belakang, kita akan mencetak jawabannya. Jadi, sekali lagi, informasi diberikan adalah sama. Itu hanya tampak berbeda didasarkan pada bagaimana Anda program ini. Jadi, misalnya, Facebook Messenger, bahkan jika Anda mendapatkan sumber data yang sama, mungkin terlihat berbeda karena negara berbeda. Anda sedang melihat sebuah Pesan orang yang berbeda. 

OK, jadi ini semua baik dan baik, tapi sekarang apa yang sebenarnya membuat kita mampu mengubah, apakah kartu kami adalah depan atau belakang. Kita dapat melakukan ini dengan menambahkan flip tombol, tombol untuk kartu yang akan flip kartu jika itu [tidak terdengar]. Jadi mari kita tambahkan sebuah tombol di sini, ini tombol, dan tombol ini akan mengatakan sandal. 

Dan sekarang, tidak melakukan apa-apa. Itu hanya terlihat bagus. Apa yang bisa kita lakukan adalah kita dapat menambahkan satu klik handler, onClick sama this.flip, dan kami akan menentukan sandal nanti. Tapi pada dasarnya, onClick adalah fungsi yang dipanggil ketika pengguna mengklik itu. 

Jadi tombol akan tahu ketika itu sudah diklik. Pergi itu sudah diklik, itu akan membalik kartu. Ini semacam seperti Anda Orang pengiriman pizza. Kau seperti, baiklah, setiap kali seseorang memanggil saya, saya akan memberikan pizza, kan? 

Anda mendaftar pendengar ini. Anda mendengarkan untuk sebuah event. Anda dipanggil, dan ketika Acara yang terjadi, Anda melakukan sesuatu. Anda mendapatkan pizza. Dalam hal ini, ketika Anda diklik, Anda flip kartu. 

Dan jadi kita perlu mendefinisikan fungsi yang akan membalik kartu, jadi kita akan menulis yang tepat yang di sini, flip fungsi. Dan apa yang Anda pikir sandal akan lakukan? Sekali lagi ini dipanggil ketika kita klik tombol sandal. Apa yang harus fungsi sandal lakukan? 

AUDIENCE: Ganti this.state.front dari benar menjadi false, false ke true. 

NEEL Mehta: Yep, sehingga mengambil apa pun this.front is-- negara depan. Ambil keadaan depan, jika itu benar, membuatnya palsu. Jika itu palsu, membuatnya benar, kan? Jadi mari kita coba itu. 

Anda tidak dapat mengubah keadaan hanya dengan melakukan this.state. Anda tidak bisa melakukan ini. Anda tidak bisa melakukan itu. Anda harus menggunakan fungsi disebut this.setState. 

Jadi Anda bisa mengatakan this.setState depan usus di mana ini, sekali lagi, seru Titik berarti sebaliknya. Saya kira jika ini. state.front benar, itu akan berubah palsu. Jadi kita akan mengatur negara dari benar menjadi false. Jika itu salah, kami akan set false ke true. 

Hanya melihat bahwa kami menetapkan dan mendapatkan sedikit berbeda, dan jadi mari kita coba ini. Bada bing, lihat ini. Tombol Flip sekarang akan mengganti depan ke belakang negara. 

Dan di sinilah Anda melihat sedikit dari keajaiban Bereaksi. Seperti kami tidak pernah diberitahu untuk membuat ulang. Kami tidak pernah diberitahu itu redraw apa-apa. Jika Anda melakukan ini tanpa Bereaksi, Anda akan telah to-- seperti ketika tombol sandal diklik, Anda harus memberitahu ke manual kembali membuat, kan? 

Bereaksi benar-benar dingin di bahwa jika Anda memberikan negara dan sifat tertentu, itu akan selalu membuat hal yang sama persis. Dan jadi ketika kita pernah kita mengubah negara dan properti, bereaksi hanya kembali membuat seluruh hal. Ia tahu bahwa ada satu-ke-satu korespondensi antara negara dan parameter dan HTML. Jadi, setiap kali salah satu dari mereka perubahan dengan melalui negara set, itu akan mengubah bagaimana pay diberikan-ulang. Dan jadi pada dasarnya Bereaksi seperti menunggu Anda untuk mengubah. 

Setiap kali perubahan sesuatu, itu akan membuat-ulang seluruh halaman. Dan jika kedengarannya tidak efisien, itu karena itu akan menjadi, tapi bereaksi menggunakan hal disebut Shadow DOM. Alih-alih menggambar halaman langsung, membuat pohon HTML virtual dalam memori. 

Anda tahu, HTML adalah seperti pohon, seperti struktur data hirarkis. Ini membuat pohon palsu di memori, dan setiap kali Anda memperbarui halaman, itu akan menarik palsu lain pohon, dan itu akan menghitung apa mengubahnya perlu membuat Halaman untuk membuat dua pohon yang sama. Jadi pada dasarnya, itu hampir re-membuat banyak. Dan kemudian hanya suka perubahan Halaman di tweak kecil yang diperlukan, sehingga sangat, sangat, sangat efisien. 

Jadi pada dasarnya Bereaksi akan setiap kali Anda mengubah sesuatu, itu akan kembali membuat halaman virtual. Ini akan mencari tahu apa yang harus saya mengubah untuk membuat halaman yang sebenarnya mencerminkan halaman virtual, dan akan melakukannya. Itulah DOM virtual. Ini salah satu yang terbesar fitur Bereaksi. 

Apakah itu masuk akal? Ada pertanyaan? Ya? 

AUDIENCE: Bagaimana membandingkan masih MVC yang kita bicarakan sebelum sumber daya seperti. 

NEEL Mehta: Ya, pertanyaan adalah bagaimana cara dibandingkan dengan MVC? Anda bertanya tentang sumber daya. Nah, mari kita bicara tentang bagaimana fungsinya. 

Dalam MVC, Anda akan memperbarui model. Dalam hal ini kita akan memiliki model kartu. Pandangan akan memiliki tombol lain, dan kontrol akan memiliki fungsi flip. Jadi pandangan akan memberitahu kontroler untuk flip sandal. Flip akan memberitahu Model untuk mengubah, kan? 

Dan ketika Anda melakukan MVC, Anda mendengarkan model untuk mengubah, dan Anda kembali membuat tampilan yang sesuai. Atau Anda hanya harus seperti memiliki controller. Tunggu model untuk mengubah, dan kemudian mengambil dan memilih bagian dari seperti hal Untuk mengganti. Di sini kita memiliki satu hal, tetapi dalam aplikasi besar, Anda harus seperti mengingat apa perubahan di setiap tempat tunggal, sehingga sedikit mengganggu. Dan Bereaksi bagus karena memiliki bayangan Dom. Hal mampu untuk hanya menulis ulang seluruh hal. Anda tidak harus selektif seperti menebak apa untuk memperbarui. 

Di Facebook jika Anda suka mendapatkan pesan baru, di MVC, Anda harus ingat, OK, mengubah hal-hal di atas Halaman, ikon pesan. Juga pop jendela baru di bagian bawah. Juga membuat hal baru di jendela itu. Juga memainkan suara. 

Itu banyak hal akan keluar pada waktu yang sama. Dan jadi jika Anda tidak memiliki Bayangan Dom, Anda akan harus melakukannya secara manual karena Anda tidak bisa menyingkirkan seluruh halaman. Anda tidak mampu untuk, sehingga Anda memiliki untuk mengubah setiap hal secara manual, yang benar-benar menjengkelkan di MVC. 

Jadi agar hemat, mereka selektif memperbarui halaman, yang efisien, tetapi juga mengganggu. Dalam Bereaksi, karena Shadow Dom, Anda mendapatkan kedua hal secara gratis. Ini efisien karena dari Shadow Dom. Kemacetan memperbarui halaman. Itu tidak melakukan manipulasi pohon. Anda mendapatkan efisiensi. Anda juga mendapatkan kemudahan penggunaan karena jika Anda hanya menulis ulang seluruh halaman, tapi Anda hanya tahu, apa-apa, hal akan berada di halaman suatu tempat. Mungkin di tempat yang berbeda, tapi itu akan berada di halaman, kan? Jadi Anda hanya kembali diberikan- seluruh hal hampir, dan Anda mungkin membuat beberapa perubahan pada halaman itu sendiri. 

Jadi, sekali lagi, di MVC Anda harus memilih antara kemudahan penggunaan dan efisiensi, dan Bereaksi, Anda mendapatkan keduanya. Jadi lebih baik. Masuk akal? Padat. 

OK, jadi mari kita lihat mari kita bicara sedikit tentang langkah 4, bagaimana kita bisa menanamkan komponen. Jadi kita memiliki hak ini sekarang. Kami memiliki tombol kecil yang dingin kami. Kami dapat flip kembali dan sebagainya, dan itu semua hal ini. Katakanlah kita ingin memiliki komponen lain. Katakanlah aplikasi flashcard kami harus berisi daftar semua kartu yang Anda miliki, sehingga berarti kita harus memiliki komponen lain. Yah, mungkin menyebutnya tampilan daftar. Mari kita membuat tampilan daftar yang berdampingan dengan CardView, dan ini tampilan daftar dan CardView akan seperti bekerja sama. Dan Anda dapat menggabungkan mereka untuk membuat aplikasi kami untuk Anda. 

Jadi pertama, mari kita membuat beberapa lebih kartu yang tepat. Mari mengatakan, apa kartu? Dan hanya jadi saya tidak perlu Anda bosan dengan mengetik di, Aku hanya akan menyalin dari sini. Dan aku akan tidak memberikan hanya satu kartu. Aku akan memberikan sebuah array kartu. Jadi pertama aplikasi akan mematahkan untuk saat ini. Baiklah, jadi kita akan membuat ini mampu menangani beberapa kartu. Jadi pertama, kita akan memberikan, tidak hanya satu kartu tetapi array kartu, seperti daftar kartu. Dan dalam hal ini, kami memiliki tiga dari mereka. 

Baiklah, jadi begitu aplikasi ini akan mendapatkan kartu daftar, dan itu akan menentukan satu untuk menunjukkan kepada CardView tersebut. The CardView hanya dapat membuat satu kartu, tapi app mendapat daftar semua kartu, kan? 

Jadi, ketika Anda mencari tahu satu kartu untuk diberikan kepada CardView, bagaimana Anda akan kira Anda mungkin dapat untuk membuat keputusan tentang yang kartu memperlihatkan? Untuk memberikan petunjuk, itu sementara Anda akan melihat kartu tertentu. Jika Anda me-refresh halaman, Anda akan hanya kembali ke kartu pertama. Itu OK karena itu sementara. Teknik apa yang kita gunakan? 

AUDIENCE: Anda bisa membuat sebuah variabel jadi hanya seperti Anda memiliki depan. Apakah ini benar, Anda bisa memiliki kartu saat sama dengan 1? 

NEEL Mehta: Ya, jadi kita ingin memiliki negara, kan? Anda akan menggunakan negara dalam komponen untuk mencari tahu yang kartu kita ingin mendapatkan. Seperti kita memiliki daftar semua kartu, kami akan menggunakan negara untuk mencari tahu salah satu kartu pertama, kartu kedua, kartu ketiga, dan seterusnya. 

Jadi sebuah aplikasi sehingga aplikasi akan mendapatkan memiliki fungsi getInitialState, Fungsi getInitialState kembali. Dan kita hanya akan mengatakan activeIndex 0. Jadi sekarang app kami memiliki itu negara sendiri. 

Dan sebagainya sekarang membuat, untuk mencari tahu kartu, mari kita pergi ke array dan ambil hal pada indeks itu. Pilih kartu this.props.cards sama this.state.activeIndex. Jadi seperti yang Anda lihat di sini, alat peraga dan negara benar-benar bekerja bersama-sama. Jadi sekarang kita memiliki activeCard kami, kita akan menyebutnya activeCard, dan mari kita lihat apakah ini bekerja. [Tidak terdengar] 

Oh, itu adalah kesalahan teks. Ah. 

Keren, ya, jadi sekarang kami kembali ke tempat kami sebelumnya, kan? Program lama yang sama kecuali sekarang kita dapat mendukung daftar kartu, bukan hanya satu kartu. Dan sekarang, sekali lagi, jika kita mengubah activeIndex, kita bisa pergi dari 0 ke 1, dan sekarang bahwa kartu kedua, dan kemudian kami pergi ke 0. Jadi, inilah yang baru souped-up versi kami. 

OK, jadi sekarang mari kita memiliki pandangan daftar yang menunjukkan semua kartu dalam program Anda, jadi kita akan membuat baru komponen yang disebut ListView. Biarkan ListView sama react.createClass. Jadi kita ingin membuat sebuah unordered daftar dengan item daftar untuk setiap kartu. Dan jadi kami memiliki banyak kartu. Kami ingin satu item daftar untuk setiap kartu, kan? Kita bisa melakukan untuk loop atau sesuatu untuk membuat daftar item baru. Tapi cara Anda melakukannya di Bereaksi, menggunakan sesuatu yang disebut peta. Peta merupakan alat atau fungsi yang Anda gunakan bahwa untuk setiap item, berjalan beberapa fungsi, mengambil nilai kembali, dan memberikan yang kembali. 

Jadi sebagai contoh, kita memiliki array 1, 2, 3.map function-- dan ini adalah istilah untuk function-- x panah x kali x. Ini mengatakan, untuk setiap nomor dalam 1, 2, 3, bawa. Persegi itu, dan mengembalikannya. Jadi apa yang Anda pikirkan 1, 2, 3.map x pergi ke x kali x memberi Anda kembali diberikan bahwa fungsi ini berjalan pada setiap elemen array itu. 

AUDIENCE: 1, 4 9? 

NEEL Mehta: Yep, 1, 4, 9 karena Anda lakukan 1 kali 1. Yang memberikan satu. Itulah elemen pertama. 

2 kali 2 adalah 4. Itu elemen kedua. 3 kali 3 adalah 9. Itu elemen ketiga. Masuk akal? Jadi peta memiliki teknik Anda gunakan dalam programmer fungsional, gaya baru pemrograman untuk melakukan sesuatu untuk setiap elemen dalam daftar Anda. Dan jadi ini terdengar akrab. Kami memiliki daftar kartu. Kami ingin mendapatkan item daftar untuk setiap satu, jadi kita akan hanya menggunakan peta di sini. Kita akan mengatakan, biarkan daftar equals this.props, kartu, peta. 

Dan diberikan kartu, kami akan menghasilkan daftar item dengan kartu isi sisi itu. Mari kita katakan kita ingin memberikan kartu mempertanyakan sehingga card.question. Jadi daftar ini berisi array LI atau Daftar Produk di mana ada satu daftar Item untuk setiap kartu, dan yang berisi pertanyaan kartu. Masuk akal? 

Keren, jadi sekarang mari kita benar-benar mencetak yang keluar. Jadi kita akan kembali ul a. Dalam yang daftar unordered, kita hanya akan tetap seluruh daftar bahwa mereka memberi kami. Keren. 

Baiklah, jadi sekarang ini tampilan daftar bekerja hanya menemukan. Pertanyaan tentang tampilan daftar? Anda memiliki banyak kartu. Anda membuat daftar item untuk setiap kartu. Dan Anda menempatkan mereka dalam sebuah unordered daftar, dan Anda memberikannya kembali. Jadi sekarang mari kita bertindak sehingga kita menanamkan dalam hal ini dari aplikasi kita, sehingga kami bisa melakukan ini, tampilan daftar. Apa argumen yang kita lolos ke tampilan daftar? Sifat apa yang kita berikan? Ingat, jika Anda memberikan itu sekelompok kartu, itu akan membuat daftar melihat untuk kartu-kartu. Jadi apa yang akan kita lulus di sini sebagai argumen? AUDIENCE: Sebuah daftar kartu? NEEL Mehta: Ya, jadi kartu sama this.props.cards, kan? Dan jadi satu-satunya masalah adalah bahwa Anda hanya dapat ternyata salah satu elemen tingkat atas di render, sehingga Anda harus membungkusnya di div. Itu aneh. Jadi mari kita lihat apakah itu. Apakah itu bekerja? 

Yap, di sana Anda pergi. Jadi sekarang kami memiliki daftar kartu di bagian bawah, dan kemudian kita memiliki kita CardView sendiri di atas, dan yang akan flip antara dua sisi kartu. Sekarang apakah itu masuk akal bagaimana saya melakukannya? Ya, jadi sekali lagi, kita memiliki dua komponen. Komponen pertama cetakan setiap kartu dalam daftar. Itulah tampilan daftar. Dan komponen kedua mencetak hanya kartu itu. Jika Anda memberikan kartu tertentu, itu akan mencetak informasi tentang kartu yang dan membiarkan Anda flip bolak-balik. 

Jadi jika kita ingin, kita dapat mencoba dan bicara tentang menambahkan beberapa fitur baru ini. Kalau tidak, kita bisa berbicara sedikit lebih tentang dari kecepatan reaktor, atau kita bisa menjawab pertanyaan yang mungkin Anda miliki karena ini adalah semua bagian inti dari bereaksi bahwa saya ingin berbicara tentang. Kita bisa pergi ke depan. Kita bisa menjawab pertanyaan-pertanyaan. Apapun yang kamu mau. 

AUDIENCE: Dapatkah Anda menggunakan BEJ di yang normal JavaScript? Atau sesuatu yang yang datang dengan [tak terdengar]? 

NEEL Mehta: Pertanyaannya adalah kaleng Anda menggunakan BEJ dengan yang normal JavaScript? Jawabannya adalah ya. BEJ adalah hanya cara yang dibutuhkan Anda JavaScript yang memiliki HTML di dalamnya, dan mengkompilasi ke JavaScript yang tidak memiliki HTML di dalamnya. Jadi melihat itu-- begitu melihat di sini. Ini tampak seperti Anda memiliki seperti div dan Anda memiliki barang-barang di dalamnya. 

Yang mengkompilasi ke JavaScript yang seperti menghasilkan hal yang sama. Saya kira apa yang saya katakan adalah bahwa BEJ hanya sintaksis, seperti itu preprocessor untuk JavaScript banyak seperti PHP adalah preprocessor untuk HTML. JSC adalah preprocessor untuk JavaScript yang memungkinkan Anda menempatkan HTML dalam Anda JavaScript. Dan jadi jika Anda memiliki transformator yang tepat yang merupakan hal yang disebut [tidak terdengar], yang akan mengubah. Preprocessor tepat, itu akan membiarkan Anda melakukan itu. 

AUDIENCE: [tidak terdengar] NEEL Mehta: Biasanya Anda tidak perlu untuk menempatkan HTML dalam JavaScript kecuali anda lakukan Bereaksi. Tapi Anda bisa melakukannya pula. Ya? 

AUDIENCE: Saya pikir Anda telah dijelaskan Bereaksi sebagai bahasa pemrograman fungsional. Kami telah belajar C di CS50. Apakah C juga bahasa fungsional? NEEL Mehta: Jadi pertanyaannya adalah tentang fungsional dibandingkan hal lain yang disebut imperatif atau prosedural pemrograman. Ada dua jenis program populer. Satu disebut prosedural, yang adalah semua tentang seperti melakukan perintah, dan satu fungsional, yang semua tentang memiliki fungsi dan memiliki input dan output dari mereka. Bereaksi adalah paradigma fungsional. C adalah paradigma yang sangat prosedural. 

Dan sebagai contoh, C misalnya, Anda tidak melakukan cara deklaratif ini pembuatan program, kan? Anda harus mengatakan, mencetak ini. Mengubah struktur data. Cetak ini. Ini semua tentang perintah. 

Dalam Bereaksi, tidak ada bahwa banyak perintah. Ini semua tentang memiliki komponen Anda menempatkan bersama-sama. Mereka seperti fungsi. Anda memiliki fungsi seperti disebut CardView, yang merupakan fungsi yang memiliki input, output, dan Bereaksi semua tentang filosofi ini kami dari having-- Anda memiliki data. Anda lulus melalui ini algoritma, dan itu akan Output HTML yang Anda hanya dicetak halaman, dan sehingga Anda harus membangunnya sepotong demi sepotong. 

Jadi untuk menarik sebuah metafora untuk apa Saya katakan sebelumnya, Anda tahu bagaimana di Facebook jika Anda mendapatkan pesan, dan Anda memilih bagian apa untuk memperbarui, itu prosedural. Ini penting, kan? OK, saya mendapat pesan. Mari kita mengubah account di sana. 

Mari pop jendela di sini. Mari kita mengubah account di sana. Mari kita menarik ini di sini. Itu pendekatan prosedural. 

Itulah hal-hal yang seperti sudut, Boost, Backbone, kerangka kerja lainnya digunakan. Bereaksi fungsional. Ini adalah cara yang sangat berbeda berpikir tentang hal-hal. Dibutuhkan ide ini mari kita fungsi atau algoritma yang akan Anda memberikan data. Ini akan memuntahkan apa seharusnya, dan komputer akan mengurus menimbang. Anda tidak menangani sendiri. Apakah yang membuat sedikit akal? Ya? 

AUDIENCE: Dalam bahasa fungsional, segala sesuatu yang terjadi sekaligus? 

NEEL Mehta: Tidak, hal-hal terjadi dalam urutan. Seperti di sini masih ada memesan, tapi tidak terjadi dalam urutan seperti memuji, perintah, perintah. Hal ini terjadi dalam urutan Fungsi memberikan output. Memasukkan ke dalam fungsi lain. Menempatkan bahwa ke lain fungsi, fungsi lain. 

Jika Anda melakukannya CS51, Anda akan belajar program fungsional keluar sedikit dari lingkup ini. Tapi pada dasarnya, apa yang membuat Bereaksi dingin tidak hanya aliran data satu arah dan virtual Dom, tetapi juga ini ide pemrograman fungsional. Dan pemrograman fungsional sangat mudah untuk menyusun dan membuat hal-hal keren dari, dan itu sangat mudah untuk berpikir tentang dan alasan tentang. Jadi imbang lagi baik dari Bereaksi. Ada pertanyaan lagi? Ya? 

AUDIENCE: Um, mengapa Anda menggunakan membiarkan sebagai lawan var? 

NEEL Mehta: Jadi pertanyaannya adalah mengapa Anda menggunakan biarkan bukannya var? Ini adalah hal yang disebut ES6 atau ECMAScript 6. Ini adalah versi baru dari JavaScript. Ada sekelompok alasan teknis, tapi membiarkan adalah versi yang lebih baik dari var. 

Ini adalah bagaimana Anda mendeklarasikan variabel. Anda dapat menggunakan membiarkan. Anda dapat menggunakan var. Let memiliki banyak teknis reasons-- dapat Anda melihat mereka up later-- mengapa lebih baik. Pada dasarnya, ES6 memiliki beberapa nice sintaks baru, beberapa fitur baru di atas JavaScript tua. 

Jadi kita harus seperti lima menit. Aku hanya ingin berbicara tentang satu hal lagi sangat cepat. Jika Anda memiliki pertanyaan, mari kita bicara tentang hal itu setelah ini. Tapi hanya jadi ini mendapat tertangkap kamera, saya hanya ingin berbicara sedikit tentang bagaimana Anda benar-benar menggunakan Bereaksi dalam aplikasi Anda. 

Jika Anda pergi di sini, Facebook.GitHub.IO/react, ini adalah halaman rumah untuk Bereaksi, dan itu akan menunjukkan bagaimana Anda benar-benar menggunakan Bereaksi halaman Anda. Pada dasarnya, itu sedikit rumit mencoba untuk menginstal Bereaksi. Ini tidak semudah yang Anda hanya drag dan menjatuhkan JavaScript di sana. 

Anda harus memiliki transformator Anda mengatur, yang akan, seperti yang terjadi sebelumnya, mengubah BEJ Anda ke JavaScript normal. Anda harus hal yang akan mengkompilasi Anda ES6 normal. JavaScript ada banyak bergerak bagian yang harus Anda lakukan, jadi ada hal disebut Yeoman, Yeoman.io. Dan ini adalah alat baris perintah yang akan membantu Anda keluar perancah Anda Bereaksi proyek dengan mudah. 

Sehingga Anda dapat membaca tentang ini kemudian, tetapi ada beberapa alat yang Yeoman menawarkan. Mereka akan membiarkan Anda membuat Bereaksi app dengan segala sesuatu yang dibangun di. Seperti itu akan telah membangun di, komponen dibangun di. Ini akan memiliki transformator Anda dibangun di. Mereka memiliki banyak keren hal dibangun secara otomatis menggunakan hal-hal ini disebut generator. 

Jadi membaca tentang ini jika Anda suka. Hanya pergi pada Yeoman, Y-E-O-M-A-N, dan Anda dapat menemukan generator seperti ini. Dan dengan generator seperti ini, Anda hanya ingin satu adalah baris perintah beberapa perintah. Ini akan perancah keluar Seluruh Bereaksi aplikasi untuk Anda. Ini akan mendapatkan semua pipa manual, dan pekerjaan kasar dilakukan untuk Anda, dan ini adalah mengapa Anda hanya fokus pada hanya menulis di Bereaksi. 

Jadi pada dasarnya membangun Bereaksi app adalah trivial. Ini kabel semua bersama-sama, tetapi ada adalah alat yang akan melakukannya untuk Anda. Jadi jika Anda ingin membuat Bereaksi app, cobalah melakukannya dengan cara itu. Jika Anda hanya ingin bereksperimen, Anda dapat mencoba menggunakan CodePen ini karena CodePen ini memiliki semua bereaksi kabel. Saya sudah melakukan semua pekerjaan untuk Anda sudah. 

Jadi jika Anda ingin membuat seperti produksi untuk melepaskan Bereaksi aplikasi, mencoba salah satu generator ini. Jika Anda hanya ingin bermain sekitar, hal ini sering layak hanya seperti mencoba bermain-main di CodePen sini. Kedengarannya bagus? Keren. 

Jadi itu yang saya miliki. Sekali lagi, semua kode dan contoh yang akan berada di situs ini di sini. Jadi, sekali lagi, kami tidak berbicara tentang banyak sintaks Bereaksi, tapi untuk menemukan semua orang sedikit rincian sintaksis, itu semua akan tersedia di website ini di sini. 

Jadi saya akan merekomendasikan seperti mengambil langkah pertama. Memasukkannya ke dalam CodePen Anda. Coba mengerjakan pembuatan untuk langkah kedua. Ada langkah keempat, dan hanya melihat di mana Anda dapatkan dari itu. 

Pertanyaan lagi, periksa halaman itu atau email saya. Itu email saya. Tapi saya akan senang untuk membantu Anda dengan pertanyaan yang mungkin Anda miliki tentang Bereaksi. Jadi, ya, itu yang saya miliki. Terima kasih banyak untuk menonton atau untuk menghadiri. Dan aku akan mengambil pertanyaan Anda mungkin memiliki setelah ini sekarang. Jadi terima kasih semua untuk menonton.