Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Bereaksi kecelakaan kursus untuk pemula, Bagian 4

by
Read Time:5 minsLanguages:
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 3

Indonesian (Bahasa Indonesia) translation by Diangr (you can also view the original English article)

Dalam tutorial akhir ini dalam seri React kami, kami akan membuat komponen baru untuk menambahkan film baru secara manual melalui bentuk kustom. Ini akan membawa pengembangan untuk app 'Film Mojo' untuk menutup.

Kode untuk proyek akhir tersedia untuk men-download melalui link di sebelah kanan layar (anda mungkin perlu gulir ke bawah). Kemudian aku akan memberikan petunjuk langkah demi langkah tentang cara untuk mendapatkan proyek dan berjalan pada sistem anda.

Membuat komponen AddMovie

<AddMovie /> Komponen output formulir untuk memungkinkan pengguna secara manual memasukkan rincian tentang film individu dan menambahkannya ke bioskop yang ada di Galeri setelah formulir sudah diserahkan.

Form memerlukan tiga input teks untuk judul, tahun, dan gambar poster; ditambah area teks untuk Deskripsi film. Dalam /src/komponen /, buat sebuah file baru yang disebut AddMovie.js dan tambahkan berikut:

Atribut ref bereaksi menyimpan referensi untuk setiap field input bentuk sebagai komponen kelas properti. Kita akan menggunakan referensi ini sebagai cara agar dengan mudah mengambil nilai-nilai input field.

Meskipun, pertama, tambahkan styles berikut ke App.css untuk membuat bentuk estetika lebih sedikit:

Dalam App.js, menambahkan  komponen <AddMovie /> dalam penutupan <div> elemen pembungkus :

Kemudian, di bagian atas dari file, impor komponen <AddMovie /> untuk membuatnya tersedia.

App 'Film Mojo' anda sekarang harus menampilkan bentuk ke bagian bawah jendela peramban.

Displaying Movie Mojo at the bottom of the browser windowDisplaying Movie Mojo at the bottom of the browser windowDisplaying Movie Mojo at the bottom of the browser window

Kita perlu menentukan metode callback yang mengeksekusi bila formulir dikirimkan, yang dapat kita gunakan untuk menciptakan film baru. Tambahkan elemen <form> :

Kemudian, tambahkan metode addNewMovie() ke atas kelas komponen <AddMovie />:

Tugas pertama adalah mencegah peristiwa pengajuan default dari penembakan, yang kami lakukan dengan e.preventDefault(). Jika tidak, ketika formulir dikirimkan, halaman web akan secara otomatis menyegarkan, bukan seperti apa yang kita inginkan.

Kemudian, kami membuat film baru objek dengan meraih nilai input field formulir kami mudah disimpan sebagai komponen kelas properti sebelumnya.

Perintah console.log() menampilkan objek film sehingga kami dapat menguji itu dengan benar pada pengiriman formulir.

Viewing the output of consolelogViewing the output of consolelogViewing the output of consolelog

Setelah anda yakin objek film sudah dibuat dengan benar, lanjutkan dan hapus panggilan console.log().

Untuk menampilkan film baru di Galeri kami, kita perlu untuk menambahkannya ke obyek state film. Setelah ini selesai, React akan mengurus pembaruan DOM untuk kami.

Untuk mencapai hal ini, membuat metode baru di App.js (di mana obyek state app tinggal) untuk menangani penambahan film ke keadaan saat ini.

Jangan lupa untuk mengikat metode baru this sehingga tersedia di seluruh kelas.

Kebetulan, anda mungkin bertanya-tanya mengapa kami perlu melakukan ini di sini tetapi tidak untuk metode addNewMovie() yang kami tambahkan ke komponen <AddMovie /> di atas. Ini adalah efek samping dari menggunakan ES6 fungsi panah, karena secara otomatis mengikat this untuk anda. Trik kecil ini perlu mengingat karena mengurangi kompleksitas kode, sambil meningkatkan keterbacaan kode anda.

Untuk menggunakan addMovieToGallery() di kode komponen anak <AddMovie /> kami, kami cukup menyampaikan referensi ke sana melalui alat peraga. Di App.js, perbarui panggilan <AddMovie /> agar menjadi:

Kembali di AddMovie.js, perbarui metode addNewMovie() untuk pass objek film metode addMovieToGallery() melalui prop addMovie yang baru saja kami buat.

Sekarang, ketika kami mengisi formulir, kami mendapatkan objek film yang dikeluarkan ke konsol, seperti sebelumnya, tetapi kali ini melalui metode addMovieToGallery () di komponen <App />.

Reviewing the console for addMovieToGalleryReviewing the console for addMovieToGalleryReviewing the console for addMovieToGallery

Hapus perintah console.log() di addMovieToGallery() dan ganti dengan kode berikut untuk menambahkan rincian film yang dimasukkan ke objek status film:

Hal ini cukup mirip dengan apa yang kami lakukan di bagian tiga metode loadAdditionalMovies(). Perbedaan utama adalah bahwa kunci unik harus dihasilkan, dengan cepat, untuk setiap entri tambahan film. Hal ini dicapai dengan menggunakan stempel waktu saat ini sebagai kunci unik dan menambahkan ke film.

Ini akan menghasilkan dalam setiap film tambahan, ditambahkan melalui bentuk, serta memiliki kunci yang unik.

... dan seterusnya.

Buka aplikasi 'Film Mojo' dalam browser dan tambahkan dua film baru ke Galeri melalui formulir. Ada gambar poster film tambahan yang ditambahkan ke folder ./public/posters/ untuk kenyamanan anda, sehingga anda dapat dengan mudah menguji untuk menambahkan film ke galeri. anda dapat mengakses ini dengan men-download aplikasi selesai proyek.

Setiap kali anda mengirimkan formulir, sebuah film tambahan ditambahkan ke Galeri!

Submitting a movieSubmitting a movieSubmitting a movie
Submitting another movieSubmitting another movieSubmitting another movie

Menginstal film Mojo

Klik link di sebelah kanan (sekitar setengah jalan turun halaman) untuk men-download file zip 'Film Mojo' proyek selesai. Setelah itu diambil, membuka jendela baris perintah dan navigasikan ke direktori film-mojo, dan masukkan:

Ini akan mengambil beberapa menit untuk men-download semua modul 'Node.js' yang diperlukan untuk menjalankan proyek.

Kemudian ketik:

Ini akan mengkompilasi aplikasi React dan membukanya di browser melalui server web mini khusus.

Kesimpulan

Kita telah membahas cukup banyak dalam empat bagian seri tutorial, jadi selamat jika anda membuat itu semua jalan dan diikuti dengan kode.

Anda sekarang harus merasa nyaman dengan dasar-dasar bereaksi, dan mudah-mudahan ini akan memberi anda kepercayaan diri untuk pergi dan membangun aplikasi yang lebih rumit.

Saya sarankan men-download 'Film Mojo' proyek dan memeriksa kode sumber untuk memastikan anda memahami bagaimana semua itu cocok bersama-sama.

Ada banyak cakupan memperpanjang app, jadi mengapa tidak mencoba untuk datang dengan beberapa fitur tambahan baru? Ini adalah cara yang bagus untuk memperkuat belajar anda, dengan mencoba untuk menerapkan unsur-unsur bereaksi baru ke app.

Berikut adalah beberapa ide yang anda dapat mempertimbangkan untuk ditambahkan:

  • Tambahkan UI dan kode untuk menghapus film dari galeri.
  • Memungkinkan menyortir menurut judul film, tahun, dll.
  • Memperkenalkan sistem peringkat.

Saya ingin mendengar masukan apa pun yang anda miliki tentang tutorial ini melalui komentar di bawah ini. Apakah anda merasa mudah untuk mengikuti, atau ada bagian-bagian yang anda geluti? Saya selalu mencari untuk membuat tutorial saya lebih baik, jadi umpan balik selalu sangat diterima.

Selamat coding React!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.