React Tutorial Bagian 1: Ikhtisar Kursus, React, ReactDOM, dan JSX Alasan untuk Popularitas

Kami menyajikan kepada Anda 5 pelajaran pertama dari kursus pelatihan pemula Bereaksi . Kursus bahasa Inggris asli, yang terdiri dari 48 pelajaran, diterbitkan di platform Scrimba.com. Kemampuan platform ini memungkinkan, saat mendengarkan presenter, kadang-kadang menghentikan pemutaran dan secara mandiri, di jendela yang sama di mana demonstrasi dilakukan, bereksperimen dengan kode. Kursus itu tampak menarik bagi kami, kami memutuskan untuk menerjemahkannya ke dalam bahasa Rusia dan mengubahnya menjadi format publikasi tradisional.



Kami percaya bahwa kursus ini akan bermanfaat bagi semua orang yang, seperti yang mereka katakan, "tidak tahu bagaimana harus Bereaksi", tetapi ingin belajar. Pada saat yang sama, dibutuhkan usaha dan waktu yang cukup untuk mengubah kursus ini menjadi publikasi reguler, oleh karena itu, sebelum membuat keputusan akhir tentang peluncuran proyek ini, kami mengundang semua orang untuk mengevaluasi kursus dan berpartisipasi dalam survei tentang kelayakan menerjemahkannya.

Pelajaran 1. Gambaran umum kursus dan rekomendasi untuk pengembangannya

→ Asli

Selamat datang di kursus Bereaksi Dasar. Nama saya Bob Zirol, saya akan memberi tahu Anda tentang cara membuat proyek front-end menggunakan salah satu kerangka kerja web paling populer di dunia. Saya telah bekerja di bidang pendidikan komputer selama bertahun-tahun, khususnya, sekarang saya bertanggung jawab atas organisasi proses pendidikan di V School .

▍Tentang proses pengembangan kursus

Selama bertahun-tahun mengembangkan kursus pelatihan yang bertujuan membantu semua orang yang ingin dengan cepat menguasai hal-hal kompleks, saya telah mengembangkan pendekatan saya sendiri untuk belajar, yang menurut saya akan berguna untuk dibicarakan.

Untuk memulainya, saya ingin mencatat bahwa cara termudah dan paling efektif untuk mempelajari sesuatu adalah dengan meluangkan waktu dan tenaga untuk berlatih. Jika Anda ingin mempelajari cara memprogram - semakin cepat Anda mulai melakukan sesuatu sendiri, dan semakin sering Anda melakukannya - semakin tinggi peluang keberhasilan Anda.

Biasanya, ketika saya memperkenalkan siswa Sekolah V, saya memberi mereka contoh berikut dari kehidupan saya sendiri. Baru-baru ini saya tertarik untuk bekerja dengan kayu. Saya membaca buku, menonton video yang tak terhitung jumlahnya di YouTube, memberi saya alat. Tetapi saya tidak bisa melakukan apa pun yang layak sampai saya mengambil alat di tangan saya. Hanya beberapa jam yang dihabiskan untuk bekerja dengan gergaji dan kertas amplas, menempelkan dan meniduri bagian memungkinkan saya untuk lebih dekat ke tujuan. Faktanya, pengembangan segalanya diatur dengan prinsip yang sama. Ingin belajar Bereaksi? Tulis kodenya.

Sebagian besar kelas dalam kursus ini berisi latihan. Diharapkan Anda akan mencoba melakukannya sendiri. Jika Anda, setelah membiasakan diri dengan tugas untuk pekerjaan mandiri, segera lanjutkan ke deskripsi solusinya, maka Anda, pada kenyataannya, akan memilih cara yang paling sulit untuk belajar Bereaksi. Selain itu, jangan menunggu sampai Anda ditawari untuk berlatih - ambil inisiatif dan coba semua yang Anda pelajari. Cobalah untuk bekerja dengan kode sendiri sebanyak mungkin. Khususnya, ketika Anda telah menguasai Bereaksi sedikit - buat sesuatu yang Anda minati, alami semua yang ingin Anda alami. Ini akan memungkinkan Anda untuk menghindari masalah seperti " tutorial neraka ".

Poin penting lain dari pendekatan saya adalah pelatihan interval dan pengulangan materi yang dibahas. Ini adalah hal terpenting yang memungkinkan Anda untuk benar-benar mengingat apa yang Anda pelajari. Tidak disarankan untuk terburu-buru dalam mempelajari kursus. Ini adalah jalan menuju "tutorial neraka" yang sangat itu. Dengan pendekatan ini, Anda merasa bahwa Anda benar-benar belajar sesuatu, tetapi dalam kenyataannya Anda tidak dapat mengingat apa yang Anda "pelajari".

Karena itu, bergerak melalui materi, sering istirahat. Ini bukan tentang istirahat berkala 5-10 menit, tetapi tentang sesuatu yang lebih ambisius. Pelajari beberapa prinsip, berlatihlah menggunakannya, dan kemudian istirahat selama sehari. Ketika Anda kembali ke kursus, akan sangat berguna untuk mengulang materi yang sudah dipelajari. Tentu saja, dengan pendekatan ini, akan dibutuhkan lebih banyak waktu untuk menguasai kursus, tetapi ini akan memiliki efek yang sangat bermanfaat pada pembelajaran Anda.
Sekarang mari kita bahas secara singkat apa yang Anda pelajari dengan menguasai kursus ini.

▍Struktur dan prasyarat

Berikut adalah daftar topik utama kursus:

• Komponen-komponennya. Berbicara tentang React, diskusi tentang konsep komponen tidak dapat dihindari. Komponen dalam Bereaksi adalah blok bangunan utama untuk membuat cuplikan HTML yang cocok untuk digunakan kembali. Dan hampir semua hal lain yang akan kita bicarakan berkaitan dengan bagaimana menggunakan komponen-komponen ini untuk membangun aplikasi web.
• BEJ. Ini adalah ekstensi sintaksis JavaScript yang memungkinkan Anda membuat komponen menggunakan kemampuan HTML dan JavaScript.
• Stilasi komponen. Styling memberi penampilan komponen yang menarik.
• Properti dan pertukaran data dalam aplikasi. Properti digunakan untuk mentransfer data antar komponen.
• Ketentuan Mekanisme status komponen digunakan untuk menyimpan dan mengelola data dalam suatu aplikasi.
• Penanganan acara. Acara memungkinkan Anda untuk menjalin hubungan interaktif dengan pengguna aplikasi.
• Metode siklus hidup komponen. Metode ini memungkinkan programmer untuk memengaruhi berbagai peristiwa yang terjadi dengan komponen.
• Unduh data dari API eksternal menggunakan protokol HTTP.
• Bekerja dengan formulir.

Agar produktif dalam kursus ini, Anda perlu mengetahui HTML, CSS dan JavaScript (ES6).

Pelajaran 2. Proyek pelatihan

→ Asli

Dalam proses menyelesaikan kursus ini, Anda akan mengembangkan proyek-proyek pendidikan. Lihatlah beberapa dari mereka.

Pengembangan pertama kami akan menjadi aplikasi TODO standar.


Aplikasi Todo

Ini mungkin terlihat sedikit membosankan, tetapi dalam perkembangannya banyak peluang akan terlibat, yang akan kita bicarakan dalam kursus. Anda dapat mengklik item dalam daftar yang harus dilakukan, menandainya selesai, dan melihat bagaimana penampilannya berubah.


Kasus yang ditandai dalam aplikasi TODO

Dan inilah proyek kursus kami - generator meme.


Generator Meme

Saat bekerja dengan aplikasi ini, teks dimasukkan ke bidang Top Text dan Bottom Text , yang masing-masing akan jatuh ke bagian atas dan bawah gambar. Dengan mengklik tombol Gen , program secara acak memilih gambar meme dari API yang sesuai dan menambahkan teks ke dalamnya. Berikut adalah contoh cara kerja aplikasi ini:


Meme siap

Pelajaran 3. Mengapa Bereaksi dan Mengapa Layak Belajar?

→ Asli

Mengapa menggunakan Bereaksi jika Anda dapat mengembangkan proyek web dalam JavaScript murni? Jika Anda tertarik pada pengembangan web, Anda mungkin pernah mendengar bahwa Bereaksi memungkinkan Anda untuk membuat aplikasi yang sangat cepat yang kinerjanya melebihi apa yang dapat dicapai hanya dengan menggunakan JavaScript. Ini dicapai dengan menggunakan teknologi dalam Bereaksi yang disebut Virtual DOM. Kami tidak akan membahas detail tentang Virtual DOM, jika Anda ingin mengenal teknologi ini dengan lebih baik, Anda dapat menonton video ini .

Untuk saat ini, cukup bagi kami untuk mengetahui bahwa Virtual DOM membantu aplikasi web berjalan lebih cepat daripada jika mereka menggunakan JS biasa. Manfaat lain yang sangat luar biasa yang diberikan React adalah kemampuan untuk membuat komponen web yang cocok untuk digunakan kembali. Pertimbangkan sebuah contoh.

Kami memiliki elemen navbar standar dari pustaka Bootstrap.


Bilah navigasi

Jika Anda belum pernah menggunakan Bootstrap sebelumnya, ketahuilah bahwa ini hanyalah pustaka CSS yang memberikan elemen web pengembang yang dirancang dengan indah. Ada sekitar empat lusin baris kode, semuanya terlihat agak rumit, menavigasi dalam kode semacam itu tidak mudah. Jika Anda memasukkan semua ini dalam halaman HTML, yang sudah memiliki banyak hal, kode halaman seperti itu hanya akan kelebihan beban dengan berbagai desain.

Bereaksi komponen web memungkinkan Anda untuk mengambil potongan kode HTML, mengaturnya sebagai komponen terpisah, dan, alih-alih menambahkan potongan ini ke halaman, sertakan sesuatu seperti tag HTML khusus dalam struktur halaman. Dalam kasus kami, alih-alih menambahkan empat puluh baris markup HTML ke halaman, itu sudah cukup untuk memasukkan komponen yang mengandung markup ini dalam komposisinya. Kami menyebutnya MySweetNavbar .


Pendekatan Komponen untuk Pembentukan Web

Anda dapat memberi nama komponen yang Anda inginkan. Seperti yang Anda lihat, tata letak halaman berbasis komponen jauh lebih mudah dibaca. Pengembang segera melihat struktur keseluruhan halaman tersebut. Dalam hal ini, seperti yang Anda lihat dari konten <body> , ada bilah navigasi ( MySweetNavbar ) di bagian atas halaman, konten utama ( MainContent ) di tengah, dan footer ( MySweetFooter ) di bagian bawah halaman.

Selain itu, komponen tidak hanya meningkatkan struktur kode halaman HTML. Mereka juga cocok untuk digunakan kembali. Bagaimana jika beberapa halaman memerlukan bilah navigasi yang sama? Bagaimana jika panel seperti itu pada halaman yang berbeda sedikit berbeda satu sama lain? Apa yang harus dilakukan jika semua panel yang sama digunakan pada banyak halaman, dan Anda perlu mengubahnya? Tanpa menggunakan pendekatan komponen, sulit untuk memberikan jawaban yang layak untuk ini dan banyak pertanyaan lainnya.

Alasan lain untuk popularitas Bereaksi dapat dianggap fakta bahwa Facebook sedang mengembangkan dan mendukung perpustakaan ini. Paling tidak, ini berarti bahwa Bereaksi terus-menerus ditangani oleh programmer yang berkualitas. Popularitas React, dan fakta bahwa proyek tersebut adalah open source, diterbitkan di GitHub, juga berarti bahwa banyak pengembang pihak ketiga berkontribusi pada proyek tersebut. Semua ini memungkinkan kita untuk mengatakan bahwa Bereaksi, di masa mendatang, akan hidup dan berkembang.

Berbicara tentang React, dan, khususnya, mengapa perpustakaan ini perlu ditelusuri, orang tidak dapat tidak mengingat pasar tenaga kerja besar yang terkait dengan perpustakaan ini. Hari ini, spesialis Bereaksi dalam permintaan stabil. Jika Anda belajar Bereaksi dengan tujuan mencari pekerjaan dalam pengembangan front-end, itu berarti Anda berada di jalur yang benar.

Pelajaran 4: Lingkungan Pengembangan, ReactDOM, dan BEJ

→ Asli

Di sini kita akan berbicara tentang cara membuat aplikasi Bereaksi sederhana menggunakan ReactDOM dan menyentuh beberapa poin penting tentang BEJ. Tapi, sebelum kita mulai bekerja dengan kode, mari kita bicara tentang di mana menjalankan kode ini.

▍ Lingkungan Pengembangan

Untuk bereksperimen dengan React-code, mungkin akan lebih baik untuk menggunakan lingkungan pengembangan lokal yang lengkap. Untuk melakukan ini, Anda dapat merujuk ke materi React.js yang baru-baru ini diterbitkan : panduan intuitif untuk pemula , khususnya, ke bagiannya React Application Development Practices. Yaitu, untuk memulai percobaan, Anda perlu membuat aplikasi baru menggunakan create-react-app , kemudian mulai server pengembangan lokal dan mulai mengedit kode. Jika kita berbicara tentang contoh paling sederhana, maka kode mereka dapat dimasukkan langsung ke file index.js standar, menghapus kode di dalamnya atau berkomentar.

Isi file index.html dalam proyek yang dibuat oleh create-react-app sesuai dengan isinya dalam contoh-contoh yang akan disediakan dalam kursus ini. Secara khusus, kita berbicara tentang keberadaan pada halaman elemen <div> dengan root pengidentifikasi.

Opsi lain yang biasanya cocok untuk beberapa percobaan yang sangat sederhana adalah dengan menggunakan platform online seperti codepen.io. Misalnya, berikut adalah proyek demo aplikasi Bereaksi Dan Abramov. Inti dari mempersiapkan proyek Codepen untuk eksperimen dengan Bereaksi adalah menghubungkan pustaka react dan react-dom kepadanya (ini dapat dilakukan dengan mengklik tombol Settings di bagian atas halaman, pergi ke bagian JavaScript di jendela yang muncul dan terhubung ke proyek, setelah menemukan mereka dengan menggunakan sistem pencarian built-in, perpustakaan yang diperlukan).

Ada kemungkinan bahwa Anda, untuk eksperimen, akan nyaman untuk menggunakan kemampuan Scrimba. Untuk melakukan ini, Anda cukup membuka halaman untuk pelajaran yang sesuai. Tautan ke halaman-halaman ini dapat ditemukan di bawah judul dengan angka dan nama pekerjaan.

Program Program pertama

Perlu dicatat bahwa dalam contoh kami, kami akan menggunakan kemampuan ES6 (ES2015), sehingga sangat disarankan bagi Anda untuk menavigasi mereka. Secara khusus, untuk mengimpor perpustakaan react ke proyek, konstruksi berikut digunakan:

 import React from "react" 

Dan agar Anda dapat mengimpor perpustakaan react-dom :

 import ReactDOM from "react-dom" 

Sekarang kita akan menggunakan render() ReactDOM untuk menampilkan sesuatu di layar:

 ReactDOM.render() 

Jika Anda memutuskan untuk menggunakan proyek yang dibuat oleh create-react-app untuk eksperimen, sekarang file index.js -nya (dibuka di VSCode) akan terlihat seperti yang ditunjukkan pada gambar berikut.


Memasukkan kode di index.js

Jika Anda memiliki server pengembangan yang berjalan dan browser membuka http://localhost:3000/ halaman, maka Anda akan menyimpan pesan kesalahan jika Anda menyimpan index.js . Ini, pada tahap kerja ini, benar-benar normal, karena kami belum memberi tahu sistem tentang apa dan di mana kami ingin menampilkan perintah render() .

Padahal, sekarang saatnya berurusan dengan kode yang baru saja kita tulis. Yaitu, di sini kami mengimpor React ke proyek, lalu - ReactDOM - sehingga kemampuan perpustakaan ini dapat digunakan untuk menampilkan sesuatu di layar.

Metode render() membutuhkan dua argumen. Yang pertama adalah apa yang ingin kita bawa keluar, dan yang kedua akan menjadi tempat di mana kita ingin mengeluarkan sesuatu. Jika ini ditulis dalam bentuk pseudo-code, berikut ini akan diperoleh:

 ReactDOM.render( ,  ) 

Apa yang ingin kita hasilkan harus dilampirkan entah bagaimana ke halaman HTML. Kode yang akan kita tulis akan diubah menjadi elemen HTML yang akan didapat di halaman.

Begini tampilan halaman ini.

 <html>   <head>       <link rel="stylesheet" href="style.css">   </head>   <body>       <div id="root"></div>       <script src="index.js"></script>   </body> </html> 

Ada semua elemen dasar halaman HTML, termasuk tag <link> dan tag <script> .

Jika Anda menggunakan create-react-app , maka halaman index.html akan terlihat sedikit berbeda. Secara khusus, dalam kodenya tidak ada index.js import index.js . Faktanya adalah ketika membangun sebuah proyek, koneksi antara index.html dan index.js dilakukan secara otomatis .

Perhatikan elemen <div> dengan pengidentifikasi root . Di antara tag pembuka dan penutup elemen ini, Bereaksi akan menempatkan semua yang kita buat. Elemen ini dapat dianggap sebagai wadah untuk seluruh aplikasi kita.

Jika sekarang kita kembali ke file index.js dan ke ReactDOM render() ReactDOM , argumen keduanya, tempat di mana data akan di-output, akan menjadi referensi ke elemen <div> dengan root pengidentifikasi. Di sini kita akan menggunakan JavaScript biasa, setelah itu argumen kedua dari metode Render akan terlihat seperti ini:

 ReactDOM.render( , document.getElementById("root")) 

Dengan pendekatan ini, metode render() mengambil argumen pertama dan menampilkan apa yang dijelaskan ke lokasi yang ditentukan. Sekarang mari kita beralih ke argumen pertama ini. Mari kita mulai dengan elemen <h1> sederhana. Dan, seperti biasanya ketika menulis program pertama, tambahkan teks Hello world! :

 ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root")) 

Jika sekarang Anda me-refresh halaman browser, maka itu akan menampilkan, sebagai judul tingkat pertama, teks yang ditentukan.


Hasil dari program pertama

Di sini Anda mungkin memiliki pertanyaan tentang mengapa kami menempatkan deskripsi elemen HTML di tempat di mana argumen dari metode JavaScript diharapkan. Lagipula, JavaScript, dihadapkan dengan sesuatu seperti <h1>Hello world!</h1> , mungkin akan memutuskan bahwa karakter pertama dari ungkapan ini adalah operator "kurang", maka, jelas, nama variabelnya menjadi yang berikutnya, kemudian operator perbandingan "lebih" ". JavaScript tidak mengenali elemen HTML dalam urutan karakter ini, dan seharusnya tidak.

Bereaksi pengembang telah membuat tidak hanya perpustakaan, tetapi juga bahasa khusus yang disebut JSX. JSX sangat mirip dengan variasi HTML. Lebih lanjut Anda akan melihat bahwa hampir semua kode JSX hampir sepenuhnya bertepatan dengan markup HTML yang dibentuk dengan bantuannya. Tentu saja ada perbedaan antara JSX dan HTML, dan kami secara bertahap akan membahasnya.

Kami memperkenalkan instruksi yang cukup sederhana dan singkat, tetapi di perut Bereaksi, ketika dieksekusi, banyak hal menarik terjadi. Jadi, instruksi ini dikonversi ke versi JavaScript-nya, kode HTML sedang dibuat, meskipun kami tidak masuk ke detail proses ini. Itulah sebabnya kita perlu mengimpor tidak hanya react-dom , tetapi juga react ke dalam proyek, karena perpustakaan React adalah apa yang memungkinkan kita untuk menggunakan JSX dan membuat konstruksi JSX berfungsi seperti yang diharapkan. Jika kami menghapus import React from "react" baris import React from "react" dari contoh kami, simpan file skrip dan segarkan halaman, pesan kesalahan akan ditampilkan. Khususnya, create-react-app akan memberi tahu kami bahwa Anda tidak dapat menggunakan JSX tanpa akses ke Bereaksi ( 'React' must be in scope when using JSX react/react-in-jsx-scope ).

Faktanya adalah bahwa meskipun Bereaksi tidak digunakan secara langsung dalam contoh kita, perpustakaan digunakan untuk bekerja dengan JSX.

Hal lain tentang bekerja dengan JSX yang saya ingin menarik perhatian Anda adalah bahwa Anda tidak dapat membuat elemen JSX yang mengikuti satu demi satu. Misalkan setelah elemen <h1> Anda perlu menampilkan elemen <p> . Mari kita coba gunakan desain ini:

 ReactDOM.render(<h1>Hello world!</h1><p>This is a paragraph</p>, document.getElementById("root")) // 

Jika setelah itu, segarkan halaman - pesan kesalahan akan ditampilkan (di create-react-app sepertinya Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag ). Inti dari kesalahan ini adalah bahwa elemen-elemen tersebut harus dibungkus dengan beberapa elemen lain. Apa yang akan muncul pada akhirnya akan terlihat seperti satu elemen dengan dua elemen yang bersarang di dalamnya.

Agar contoh kami berfungsi, kami membungkus <h1>Hello world!</h1><p>This is a paragraph</p> kode <h1>Hello world!</h1><p>This is a paragraph</p> dalam elemen <div> :

 ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root")) 

Jika sekarang Anda me-refresh halaman, maka semuanya akan terlihat seperti yang diharapkan.


Dua elemen HTML per halaman

Diperlukan waktu untuk membiasakan diri dengan JSX, tetapi setelah itu penggunaannya akan jauh lebih mudah dan nyaman daripada bekerja dengan elemen HTML menggunakan alat JavaScript standar. Misalnya, untuk menjelaskan elemen <p> dan mengonfigurasikan isinya menggunakan alat standar, Anda akan membutuhkan sesuatu seperti berikut:

 var myNewP = document.createElement("p") myNewP.innerHTML = "This is a paragraph." 

Maka Anda perlu menghubungkannya ke elemen yang sudah ada di halaman. Ini adalah contoh pemrograman imperatif, dan hal yang sama, berkat JSX, dapat dilakukan dalam gaya deklaratif.

Pelajaran 5. Workshop. ReactDOM dan JSX

→ Asli

Dalam pelajaran terakhir, Anda bertemu dengan ReactDOM dan JSX, dan sekarang saatnya untuk menerapkan pengetahuan ini.

Kami akan menyelesaikan semua tugas praktis sebagai berikut. Pertama, di bagian dengan Tugas kepala, tugas itu sendiri akan diberikan, dan, mungkin, di bagian Tips, rekomendasi singkat akan diberikan pada implementasinya. Maka bagian Solusi akan mengikuti. Dianjurkan agar Anda melakukan segala upaya untuk menyelesaikan tugas sendiri, dan kemudian berurusan dengan solusi yang diberikan.

Jika Anda merasa tidak berhasil, kembalilah ke pelajaran sebelumnya, ulangi materi yang sesuai dan coba lagi.

▍ pekerjaan

Tulis aplikasi Bereaksi yang menampilkan daftar berpoin ( <ul> ) di halaman. Daftar ini harus mengandung tiga elemen ( <li> ) dengan teks apa pun.

▍Tips

Pertama, Anda perlu mengimpor pustaka yang diperlukan ke proyek, dan kemudian menggunakan salah satunya untuk menampilkan elemen yang dihasilkan menggunakan beberapa kode JSX di halaman.

Ringkasan

Sekarang, setelah Anda membiasakan diri dengan pelajaran pertama dari kursus Bereaksi, kami meminta Anda untuk mengambil bagian dalam survei.

Terima kasih atas perhatian anda!



→ Bagian 1: ikhtisar kursus, alasan popularitas React, ReactDOM dan JSX
→ Bagian 2: komponen fungsional
→ Bagian 3: file komponen, struktur proyek
→ Bagian 4: komponen induk dan anak
→ Bagian 5: mulai bekerja pada aplikasi TODO, dasar-dasar gaya
→ Bagian 6: tentang beberapa fitur kursus, JSX dan JavaScript
→ Bagian 7: gaya inline
→ Bagian 8: terus bekerja pada aplikasi TODO, terbiasa dengan sifat-sifat komponen
→ Bagian 9: properti komponen
→ Bagian 10: Workshop bekerja dengan properti komponen dan gaya
→ Bagian 11: pembuatan markup dinamis dan metode susunan peta
→ Bagian 12: lokakarya, pekerjaan tahap ketiga pada aplikasi TODO
→ Bagian 13: komponen berbasis kelas
→ Bagian 14: lokakarya tentang komponen berbasis kelas, status komponen
→ Bagian 15: bengkel kesehatan komponen
→ Bagian 16: tahap keempat dari pengerjaan aplikasi TODO, penanganan acara
→ Bagian 17: tahap kelima bekerja pada aplikasi TODO, memodifikasi status komponen
→ Bagian 18: tahap keenam dari pengerjaan aplikasi TODO
→ Bagian 19: metode siklus hidup komponen
Bagian 20: pelajaran pertama dalam rendering bersyarat
→ Bagian 21: pelajaran kedua dan lokakarya tentang rendering bersyarat
→ Bagian 22: tahap ketujuh bekerja pada aplikasi TODO, mengunduh data dari sumber eksternal
→ Bagian 23: pelajaran pertama tentang bekerja dengan formulir
→ Bagian 24: Pelajaran Bentuk Kedua
→ Bagian 25: Workshop bekerja dengan formulir
→ Bagian 26: arsitektur aplikasi, pola Container / Komponen
→ Bagian 27: proyek kursus