Kursus Pelatihan Bereaksi, Bagian 28: Bereaksi Fitur Modern, Ide Proyek, Kesimpulan

Hari ini, di bagian akhir dari terjemahan kursus React, kami akan berbicara tentang kemampuan modern React dan mendiskusikan ide-ide aplikasi React, menciptakan yang dapat Anda ulangi apa yang Anda pelajari saat mengambil kursus ini dan belajar banyak.



→ 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
→ Bagian 28: Fitur Bereaksi saat ini, ide proyek, kesimpulan
→ Akhir!

Pelajaran 46. Mengembangkan Aplikasi Bereaksi Modern

→ Asli

Banyak programmer di Facebook bekerja di perpustakaan React, dan anggota komunitas besar di sekitar React berkontribusi pada proyek ini. Semua ini mengarah pada fakta bahwa React berkembang sangat cepat. Misalnya, jika Anda mempelajari Bereaksi pada awal 2019 dan melihat materi di perpustakaan ini, katakanlah, dua tahun yang lalu, Anda tidak bisa tidak melihat perubahan yang terjadi di Bereaksi sejak publikasi bahan-bahan itu. Misalnya, dalam Bereaksi 16.3, beberapa metode siklus hidup komponen baru muncul, dan beberapa metode tidak digunakan lagi. Dan, katakanlah, dalam Bereaksi 16.6 ada lebih banyak fitur baru. Sejumlah besar inovasi diharapkan dalam Bereaksi 17.0 dan dalam versi perpustakaan ini di masa depan.

Sekarang kita akan berbicara tentang beberapa fitur Bereaksi modern.

Banyak dari fitur ini bergantung pada versi spesifikasi ECMAScript yang didukung oleh alat yang digunakan untuk mengembangkan proyek Bereaksi. Katakanlah, jika Anda menggunakan Babel transporter, ini berarti Anda memiliki fitur JavaScript terbaru. Perlu dicatat bahwa ketika menggunakan fitur JavaScript dalam proyek-proyek yang belum termasuk dalam standar, Anda mungkin menemukan fakta bahwa, jika dimasukkan dalam standar, mereka dapat berubah.

Salah satu fitur JavaScript modern yang dapat Anda gunakan saat mengembangkan aplikasi Bereaksi adalah kemampuan untuk mendeklarasikan metode kelas menggunakan sintaks fungsi panah.

Berikut ini adalah kode untuk komponen App yang menampilkan bidang teks:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Seperti inilah tampilan halaman aplikasi ini di browser.


Aplikasi di browser

Kami menulis ulang metode handleChange() sebagai fungsi panah, membawa kode komponen ke formulir berikut:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Selama konversi ini, perubahan kecil dilakukan pada kode, tetapi perubahan ini berdampak serius pada bagaimana metode ini akan bekerja. Kata this dalam fungsi panah ini menunjukkan ruang lingkup leksikal di mana mereka berada. Fungsi-fungsi ini tidak mendukung pengikatan this . Fitur fungsi panah ini mengarah pada fakta bahwa metode yang dideklarasikan menggunakannya tidak perlu terikat dengan this di konstruktor kelas.

Kemungkinan lain yang akan kami pertimbangkan di sini adalah menggunakan properti kelas. Sekarang, ketika menginisialisasi keadaan dalam konstruktor, kami menggunakan this.state . Jadi kami membuat properti instance dari kelas. Sekarang, properti dapat dibuat di luar konstruktor. Hasilnya, Anda dapat mengonversi kode sebagai berikut:

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Harap perhatikan bahwa di sini kami menyingkirkan konstruktor dengan menginisialisasi keadaan saat mendeklarasikan properti terkait. Semuanya menunjukkan bahwa fitur JS ini akan dimasukkan dalam standar untuk masa yang akan datang.

Berikut adalah daftar fitur Bereaksi.

• API Konteks Ini dapat digunakan sebagai ganti Redux, meskipun ini tidak berarti bahwa pustaka Redux telah kehilangan relevansinya.
• Batas kesalahan .
• Buat template alat peraga .
• Komponen pesanan lebih tinggi .
• Bereaksi Router .
• Bereaksi kait .
• Fitur baru Bereaksi 16.6 .

Secara umum, dapat dicatat bahwa, karena React berkembang sangat cepat, disarankan agar setiap orang yang terlibat dalam pengembangan React terus memantau inovasi perpustakaan ini.

Pelajaran 47. Bereaksi Ide Proyek

→ Asli

Selama pengembangan Bereaksi, Anda dan saya membuat beberapa proyek - aplikasi Todo dan generator meme. Mungkin saja Anda sudah tahu apa yang ingin Anda buat menggunakan Bereaksi. Mungkin Anda sudah mengembangkan aplikasi Anda sendiri. Jika Anda belum memutuskan, dan mengingat praktik itu adalah cara terbaik untuk mempelajari teknologi komputer, inilah Anda - materi di mana Anda akan menemukan sejumlah besar ide untuk aplikasi web yang dapat dibuat menggunakan React.

Pelajaran 48. Kesimpulan

→ Asli

Selamat! Anda baru saja menyelesaikan kursus di perpustakaan Bereaksi. Anda telah membiasakan diri dengan blok bangunan dasar aplikasi Bereaksi, yang dapat Anda gunakan untuk membuat proyek Anda sendiri. Benar, jika Anda ingin membuat sesuatu menggunakan Bereaksi, bersiaplah untuk fakta bahwa Anda masih harus banyak belajar.

Mari kita pergi melalui konsep dasar yang Anda pelajari selama pengembangan kursus ini.

• BEJ. JSX memungkinkan Anda untuk menggambarkan antarmuka pengguna menggunakan sintaksis yang sangat mirip dengan kode HTML biasa.
• Dua pendekatan untuk pengembangan komponen. Komponen berbasis kelas dan fungsional.
• Berbagai cara untuk mendesain Bereaksi aplikasi.
• Melewati properti dari komponen induk ke komponen turunan.
• Menggunakan status komponen untuk menyimpan dan bekerja dengan data.
• Render bersyarat.
• Bekerja dengan formulir di Bereaksi.

Terima kasih atas perhatian anda!

Pembaca yang budiman! Kami meminta Anda untuk membagikan kesan Anda tentang kursus ini dan memberi tahu kami tentang apa yang ingin Anda kembangkan (atau sedang kembangkan) menggunakan React.