Kelas hari ini dalam kursus pelatihan Bereaksi, yang kami terbitkan, didedikasikan untuk terus bekerja pada aplikasi TODO dan properti komponen.
→
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 16. Workshop. Aplikasi TODO. Tahap nomor 2
→
Asli▍ pekerjaan
- Mengikuti lokakarya sebelumnya , Anda membuat aplikasi Bereaksi, komponen
App yang menampilkan serangkaian pasangan elemen - bendera (elemen <input type="checkbox" /> ) dan deskripsi mereka (elemen <p> </p> ). Rancang elemen-elemen set ini sebagai komponen terpisah - <TodoItem /> dan gunakan untuk membuat daftar di komponen App . Pada saat yang sama, jangan memperhatikan fakta bahwa semua elemen dari daftar ini akan terlihat sama (nanti kita akan berbicara tentang cara mengisinya dengan data yang berbeda). - Ubahsuaikan halaman sesuai keinginan Anda menggunakan file CSS, gaya inline, atau kombinasi metode penataan ini untuk aplikasi Bereaksi.
OlSolusi
Ini mengasumsikan bahwa Anda terus bekerja pada aplikasi berdasarkan proyek standar yang dibuat menggunakan
create-react-app . Ini adalah seperti apa kode komponen
App sebelum pekerjaan.
import React from "react" function App() { return ( <div> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default App
Mari kita buat, dalam folder yang sama di mana file ini berada, file
TodoItem.js , di mana kode komponen
TodoItem akan disimpan. Sekarang impor file ini ke file
App.js perintah berikut:
import TodoItem from "./TodoItem"
Anda dapat melakukan ini nanti, ketika tiba saatnya untuk menggunakan
TodoItem komponen
TodoItem (belum ditulis). Kami akan mengurus kode ini sekarang. Inilah yang akan terjadi:
import React from "react" function TodoItem() { return ( <div> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default TodoItem
Perhatikan dua hal. Pertama, komponen ini mengembalikan dua elemen - oleh karena itu mereka dibungkus dengan elemen
<div> . Kedua, apa yang dikembalikan adalah salinan dari salah satu pasangan elemen pemeriksaan / deskripsi dari file
App.jsSekarang kita kembali ke file
App.js dan, alih-alih pasangan cek / deskripsi, kita menggunakan contoh komponen
TodoItem di markup yang dikembalikan olehnya:
import React from "react" import TodoItem from "./TodoItem" function App() { return ( <div> <TodoItem /> <TodoItem /> <TodoItem /> <TodoItem /> </div> ) } export default App
Akibatnya, halaman yang formulir aplikasi akan terlihat seperti yang ditunjukkan di bawah ini.
Penampilan aplikasi di browserSebenarnya, penampilannya, dibandingkan dengan versi sebelumnya, tidak berubah, tetapi fakta bahwa sebuah komponen sekarang digunakan untuk membentuk pasangan elemen membuka peluang besar bagi kita, yang akan kita gunakan nanti.
Sekarang kita akan menyelesaikan tugas kedua, menata aplikasi menggunakan kelas CSS. Untuk melakukan ini, kami membawa kode komponen
App ke formulir berikut:
import React from "react" import TodoItem from "./TodoItem" function App() { return ( <div className="todo-list"> <TodoItem /> <TodoItem /> <TodoItem /> <TodoItem /> </div> ) } export default App
Di sini kami menetapkan nama kelas ke elemen
<div> . Demikian pula,
TodoItem bekerja dengan
TodoItem komponen
TodoItem :
import React from "react" function TodoItem(){ return ( <div className="todo-item"> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default TodoItem
Sekarang kita
index.css memasukkan file CSS
index.css yang sudah ada dalam proyek, karena itu dibuat menggunakan
create-react-app dalam file
index.js :
import React from "react" import ReactDOM from "react-dom" import "./index.css" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") )
Tambahkan deskripsi gaya berikut ke
index.css :
body { background-color: whitesmoke; } .todo-list { background-color: white; margin: auto; width: 50%; display: flex; flex-direction: column; align-items: center; border: 1px solid #efefef; box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0,0,0,0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0,0,0,0.15); padding: 30px; } .todo-item { display: flex; justify-content: flex-start; align-items: center; padding: 30px 20px 0; width: 70%; border-bottom: 1px solid #cecece; font-family: Roboto, sans-serif; font-weight: 100; font-size: 15px; color: #333333; } input[type=checkbox] { margin-right: 10px; font-size: 30px; } input[type=checkbox]:focus { outline: 0; }
Beginilah tampilan halaman aplikasi di browser.
Penampilan aplikasi di browserAnda dapat menganalisis dan mengedit gaya ini sendiri.
Jika kita berbicara tentang kekhasan kode yang digunakan dalam gaya, perhatikan bahwa kata kunci
className digunakan untuk menetapkan kelas ke elemen, dan bahwa Bereaksi mendukung gaya inline. Ini adalah bagaimana proyek aplikasi kita di VSCode terlihat pada tahap ini.
Proyek aplikasi dalam VSCodeJika sekarang kita bereksperimen dengan apa yang kita miliki, ternyata kotak centang merespons interaksi pengguna.
Bendera merespons interaksi pengguna.Tetapi pada saat yang sama, kode aplikasi tidak tahu apa-apa tentang perubahan yang terjadi dengan flag-flag ini. Jika kode mengetahui apa yang terjadi di antarmuka aplikasi, ini akan memungkinkan kami untuk mengatur reaksinya terhadap berbagai peristiwa. Misalnya, item dalam daftar yang harus dilakukan, di mana kotak centang dipilih, menunjukkan bahwa tugas yang sesuai telah selesai, dapat diubah entah bagaimana. Kita akan berbicara tentang bagaimana melakukan ini di pelajaran selanjutnya.
Pelajaran 17. Properti, Bagian 1. Atribut Elemen HTML
→
AsliMari kita bicara tentang konsep properti di Bereaksi. Mari kita mulai dengan contoh kode HTML untuk satu halaman:
<html> <head></head> <body> <a>This is a link</a> <input /> <img /> </body> </html>
Seperti yang Anda lihat, tidak ada yang terkait dengan Bereaksi. Di depan kami adalah markup HTML biasa. Perhatikan tiga elemen yang ada di badan halaman yang dijelaskan oleh markup ini:
<a> ,
<input /> dan
<img /> , dan pikirkan tentang apa yang salah dengan mereka.
Masalahnya di sini adalah bahwa semua elemen ini tidak memenuhi fungsi bawaannya. Tautan yang dijelaskan oleh tag
<a> tidak mengarah ke mana pun. Tag ini perlu diberi atribut (properti)
href , yang berisi alamat tertentu yang akan Anda arahkan ketika Anda mengklik tautan tersebut. Masalah yang sama juga khas untuk
<img /> dari contoh kita. Itu tidak ditugaskan atribut
src , yang menentukan gambar, lokal, atau dapat diakses oleh URL bahwa elemen ini akan ditampilkan. Akibatnya, ternyata untuk memastikan operasi yang benar dari elemen
<a> dan
<img> , masing-masing perlu mengatur properti
href dan
src mereka. Jika kita berbicara tentang elemen
<input> , maka, tanpa mengatur atributnya, itu akan menampilkan bidang input pada halaman, tetapi dalam formulir ini biasanya tidak digunakan, mengatur propertinya
placeholder ,
name ,
type . Properti terakhir, misalnya, memungkinkan Anda untuk secara radikal mengubah tampilan dan perilaku elemen
<input> , mengubahnya dari bidang input teks menjadi bendera, menjadi tombol radio, atau menjadi tombol untuk mengirim formulir. Perlu dicatat bahwa istilah "atribut" dan "properti" yang kami gunakan di sini dipertukarkan.
Dengan mengedit kode di atas, kita dapat membawanya ke formulir berikut:
<html> <head></head> <body> <a href="https://google.com">This is a link</a> <input placeholder="First Name" name="" type=""/> <img align="center" src=""/> </body> </html>
Ini masih belum cukup normal dalam formulir ini, tetapi di sini, setidaknya, kami menetapkan nilai untuk beberapa atribut elemen HTML, dan tempat yang ditunjuk di mana Anda dapat memasukkan nilai untuk beberapa atribut lainnya.
Faktanya, jika konsep atribut elemen HTML yang dijelaskan di atas jelas bagi Anda, maka Anda dapat dengan mudah mengetahui konsep properti komponen React. Yaitu, kita berbicara tentang fakta bahwa, dalam aplikasi Bereaksi, kita dapat menggunakan komponen pengembangan kita sendiri, dan bukan hanya tag HTML standar. Saat bekerja dengan komponen, kita dapat menetapkan mereka properti yang, ketika diproses dalam komponen, dapat mengubah perilaku mereka. Misalnya, properti tersebut memungkinkan Anda untuk menyesuaikan tampilan komponen.
Pelajaran 18. Properti, Bagian 2. Komponen yang Dapat Digunakan Kembali
→
AsliSebelum kita masuk ke percakapan tentang menggunakan properti di Bereaksi, mari kita lihat konsep konseptual lain. Lihatlah beranda YouTube.
Beranda YouTubeSaya yakin bahwa Bereaksi tidak menggunakan halaman ini, karena Google terlibat dalam pengembangan kerangka Angular, tetapi prinsip-prinsip yang akan kami pertimbangkan dalam contoh ini bersifat universal.
Pikirkan tentang bagaimana halaman seperti itu dapat dibangun menggunakan kemampuan React. Mungkin hal pertama yang Anda perhatikan adalah bahwa halaman ini dapat dibagi menjadi beberapa fragmen, diwakili oleh komponen independen. Misalnya, mudah untuk memperhatikan bahwa elemen yang menampilkan informasi tentang klip video yang disorot pada gambar di bawah ini sangat mirip satu sama lain.
Beranda YouTube, elemen yang mirip satu sama lainJika Anda melihat lebih dekat pada elemen-elemen ini, ternyata ada gambar di atas masing-masing, dan semua gambar ini berukuran sama. Masing-masing elemen memiliki judul dalam huruf tebal dan langsung di bawah gambar. Setiap elemen berisi informasi tentang jumlah penayangan video terkait, tentang tanggal publikasi. Di sudut kanan bawah setiap gambar yang ada pada elemen, ada informasi tentang durasi klip video yang sesuai.
Dapat dimengerti bahwa orang yang membuat halaman ini tidak melakukan sesuatu seperti menyalin, menempel, atau memodifikasi kode untuk mewakili setiap elemen yang ditampilkan di dalamnya. Jika halaman seperti itu dibuat menggunakan alat Bereaksi, akan mungkin untuk membayangkan bahwa kartu klip video adalah contoh dari beberapa komponen, katakanlah,
<VideoTile /> . Selain itu, komponen tersebut mencakup sejumlah komponen lain, yaitu gambar, judul, informasi tentang durasi klip, dan elemen lain dari kartu klip video.
Hal tersebut di atas membawa kita pada gagasan bahwa untuk membentuk halaman seperti itu komponen tunggal dikembangkan, yaitu kartu klip video. Pada saat yang sama, banyak contoh komponen ini ditampilkan pada halaman, yang masing-masing menampilkan data unik. Artinya, ketika mengembangkan komponen seperti itu, perlu untuk menyediakan kemungkinan mengubah properti tertentu, seperti URL gambar, yang mempengaruhi penampilan dan perilakunya. Sebenarnya, inilah pelajaran selanjutnya yang akan kami berikan. Tetapi sebelum kita membahasnya, saya ingin Anda merasa nyaman dengan gagasan untuk menggunakan komponen dalam React.
Pikirkan tentang pelajaran di mana kita membahas komponen induk dan anak, dan komponen itu dapat membentuk struktur dengan kedalaman bersarang yang besar. Misalnya, dalam kasus kami, pada halaman, Anda dapat memilih grup horisontal dari kartu klip video, mungkin terletak dengan cara ini dengan bantuan komponen layanan tertentu untuk menampilkan daftar elemen. Elemen-elemen ini adalah kartu klip video, yang, pada gilirannya, menampilkan sejumlah elemen lain yang mewakili informasi tentang klip tertentu.
Beranda YouTube, komponen induk dan anakSelain itu, di sisi kiri halaman Anda dapat melihat sekelompok elemen vertikal yang mirip satu sama lain. Kemungkinan besar, mereka adalah contoh dari komponen yang sama. Selain itu, masing-masing memiliki gambar dan teks sendiri.
Fakta bahwa kerangka kerja modern untuk mengembangkan antarmuka web, seperti React, Angular atau Vue, memungkinkan Anda untuk membuat komponen sekali dan menggunakannya kembali dengan mengatur propertinya, adalah salah satu alasan untuk popularitas kerangka kerja ini. Ini sangat memudahkan dan mempercepat pengembangan.
Ringkasan
Dalam pelajaran ini, kami terus bekerja pada aplikasi TODO dan membahas topik tentang atribut elemen HTML dan gagasan menggunakan kembali komponen, yang membawa kami untuk bekerja dengan sifat-sifat komponen Bereaksi. Ini yang akan kita lakukan lain kali.
Pembaca yang budiman! Apakah Anda memahami konsep properti komponen?
