Di bagian terjemahan program Bereaksi hari ini, kami sarankan Anda menyelesaikan tugas praktis membuat set komponen menggunakan JavaScript dan terus bekerja pada aplikasi TODO.
→
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 komponenBagian 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 kursusPelajaran 22. Workshop. Pembentukan set komponen yang dinamis
→
Asli▍ pekerjaan
Berdasarkan proyek aplikasi Bereaksi standar yang dihasilkan oleh
create-react-app , dan menggunakan kode dari file data
vschoolProducts.js , buat aplikasi yang menampilkan daftar komponen
Product pada halaman, dibentuk menggunakan metode array standar
.map() pada Berdasarkan data dari
vschoolProducts.js .
Jangan lupa untuk membuat instance komponen dan memberikannya atribut
key dengan pengidentifikasi unik, jika tidak, sistem akan mengeluarkan peringatan.
Dalam proses penyelesaian masalah, Anda dapat menggunakan persiapan file
App.js :
import React from "react" import productsData from "./vschoolProducts" function App() { return ( <div> </div> ) } export default App
Berikut adalah
vschoolProducts.js file
vschoolProducts.js :
const products = [ { id: "1", name: "Pencil", price: 1, description: "Perfect for those who can't remember things! 5/5 Highly recommend." }, { id: "2", name: "Housing", price: 0, description: "Housing provided for out-of-state students or those who can't commute" }, { id: "3", name: "Computer Rental", price: 300, description: "Don't have a computer? No problem!" }, { id: "4", name: "Coffee", price: 2, description: "Wake up!" }, { id: "5", name: "Snacks", price: 0, description: "Free snacks!" }, { id: "6", name: "Rubber Duckies", price: 3.50, description: "To help you solve your hardest coding problems." }, { id: "7", name: "Fidget Spinner", price: 21.99, description: "Because we like to pretend we're in high school." }, { id: "8", name: "Sticker Set", price: 14.99, description: "To prove to other devs you know a lot." } ] export default products
OlSolusi
Berikut adalah kode untuk file
App.js :
import React from "react" import Product from "./Product" import productsData from "./vschoolProducts" function App() { const productComponents = productsData.map(item => <Product key={item.id} product={item}/>) return ( <div> {productComponents} </div> ) } export default App
Harap dicatat bahwa properti
id objek dari file data adalah opsional. Properti ini berguna bagi kami untuk menetapkan atribut
key dibuat dengan menggunakan metode
.map() dari instance komponen
Product .
Berikut adalah kode untuk file
Product.js :
import React from "react" function Product(props) { return ( <div> <h2><font color="#3AC1EF">{props.product.name}</font></h2> <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p> </div> ) } export default Product
Di sini, ketika memperoleh properti yang berisi harga produk, yang terlihat dalam komponen sebagai
props.product.price , kami menggunakan metode
toLocaleString() , di mana kami memformat jumlah produk.
Seperti inilah proyek aplikasi di VSCode.
Aplikasi dalam VSCodeDan di sini adalah halaman aplikasi di browser.
Halaman aplikasi di browserPerhatikan bentuk di mana nilai barang disajikan.
Pelajaran 23. Workshop. Aplikasi TODO. Tahap nomor 3
→
AsliDi sini kami terus bekerja pada aplikasi TODO, yang ditangani di
sini dan di
sini . Khususnya, di sini Anda akan diminta untuk menerapkan pengetahuan tentang pembentukan dinamis daftar komponen untuk membuat daftar tugas yang ditampilkan oleh aplikasi.
▍ pekerjaan
Menggunakan
todosData.js case
todosData.js , yang isinya diberikan di bawah ini, buat daftar komponen
TodoItem dan tampilkan daftar ini di komponen
App . Harap dicatat bahwa Anda perlu memodifikasi kode komponen
TodoItem sehingga dapat menampilkan properti yang diteruskan ke sana.
Berikut adalah isi file
todosData.js :
const todosData = [ { id: 1, text: "Take out the trash", completed: true }, { id: 2, text: "Grocery shopping", completed: false }, { id: 3, text: "Clean gecko tank", completed: false }, { id: 4, text: "Mow lawn", completed: true }, { id: 5, text: "Catch up on Arrested Development", completed: false } ] export default todosData
OlSolusi
Berikut adalah kode untuk file
App.js :
import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() { const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>) return ( <div className="todo-list"> {todoItems} </div> ) } export default App
Berikut adalah kode untuk file
TodoItem.js :
import React from "react" function TodoItem(props) { return ( <div className="todo-item"> <input type="checkbox" checked={props.item.completed}/> <p>{props.item.text}</p> </div> ) } export default TodoItem
Ini adalah proyek aplikasi di VSCode.
Aplikasi dalam VSCodePerlu dicatat bahwa setelah selesainya pekerjaan yang disediakan oleh pelajaran praktis ini, kami, terlepas dari kenyataan bahwa kami akan melengkapi aplikasi dengan fitur-fitur baru, mengganggu fungsinya. Secara khusus, kita berbicara tentang keadaan bendera. Bendera untuk properti
props.item.completed disetel ke
true digunakan untuk mengatur status yang akan diperiksa, bendera yang digunakan untuk properti yang sama dengan
false akan tidak dicentang. Tetapi jika Anda mengklik bendera pada halaman aplikasi, tidak ada yang akan terjadi, karena kami salah mengonfigurasi elemen HTML yang sesuai. Anda dapat melihat peringatan tentang ini di konsol.
Halaman aplikasi di browser dan peringatan di konsolNanti kita akan berbicara tentang formulir dan memperbaiki aplikasi pelatihan kita sambil terus mengerjakannya.
Ringkasan
Dalam pelajaran ini, Anda memiliki kesempatan untuk berlatih membuat file komponen, bekerja dengan properti yang diteruskan ke instance komponen ketika mereka dibuat, dan menggunakan metode array JavaScript
.map() standar. Selain itu, di sini kami terus mengerjakan aplikasi pelatihan. Lain kali kita akan berbicara tentang komponen berbasis kelas.
Pembaca yang budiman! Sudahkah Anda menguasai teknik menggunakan metode array JavaScript
.map() untuk membuat set komponen?
