React Tutorial Bagian 4: Komponen Induk dan Anak

Kami menerbitkan bagian selanjutnya dari terjemahan kursus pelatihan Bereaksi. Topik kita hari ini adalah hubungan antara komponen induk dan anak.



→ 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

Pelajaran 9. Komponen orangtua dan anak

→ Asli

Hari ini kita akan berbicara tentang komponen orangtua dan anak. Menggunakan konstruksi semacam itu akan membuat aplikasi kita jauh lebih kompleks daripada ketika hanya memiliki satu output komponen di DOM, seperti MyInfo . Alih-alih struktur sederhana ini, aplikasi mungkin memiliki hierarki komponen yang kompleks, yang, sebagai akibatnya, dikonversi ke elemen JSX.

Mari kita mulai dengan templat aplikasi yang sudah Anda ketahui. Untuk mengingat kembali apa yang telah Anda index.js , Anda dapat, dari memori, menulis kode dalam file index.js kosong untuk menampilkan halaman header tingkat pertama dengan teks Hello World! Bereaksi alat. Seperti apa kode ini:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <h1>Hello World!</h1>, document.getElementById("root") ) 

Terakhir kali, di mana deskripsi elemen <h1> ada dalam kode di atas, ada kode untuk menampilkan komponen MyInfo . Sekarang kita akan membuat komponen App dan menampilkannya. Untuk melakukan ini, kita memerlukan kode dari formulir berikut:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <App />, document.getElementById("root") ) 

Komponen App akan menjadi titik masuk ke aplikasi kita. Anda mungkin sudah memperhatikan bahwa ada sesuatu yang hilang dalam kode contoh sebelumnya. Ini benar - kami belum mengimpor App sini. Mari kita lakukan:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Tetapi kode seperti itu masih tetap tidak beroperasi. Kita memerlukan file komponen App ( App.js ) yang terletak di folder yang sama dengan index.js . Ini adalah file yang kita rujuk dalam aplikasi impor perintah import App from "./App" . Ingatlah bahwa nama-nama komponen Bereaksi ditulis dalam gaya unta dan mulai dengan huruf kapital. Buat file yang kita butuhkan dan jelaskan komponen App di dalamnya. Coba lakukan sendiri. Yaitu, tulis kode berkat komponen App menampilkan Hello again di halaman.

Seperti apa bentuk kode ini:

 import React from "react" function App(){ return (   <h1>Hello again</h1> ) } export default App 

Di sini fungsi App mengembalikan elemen tunggal, tetapi ingat bahwa struktur yang lebih kompleks dapat dikembalikan dari fungsi yang sama. Yang paling penting adalah jangan lupa bahwa Anda hanya dapat mengembalikan satu elemen, yang, jika, sebenarnya, Anda perlu menampilkan beberapa elemen, adalah sebuah wadah yang menyertakannya. Misalnya, inilah tampilan markup yang menggambarkan judul dan daftar poin tingkat pertama:

 import React from "react" function App(){ return (   <div>     <h1>Hello a third time!</h1>     <ul>       <li>Thing 1</li>       <li>Thing 2</li>       <li>Thing 3</li>     </ul>   </div> ) } export default App 

Mungkin sekarang kita akan memutuskan bahwa apa yang dibentuk melalui komponen App harus berupa situs web. Ini akan memiliki blok navigasi ( <nav></nav> ) dan area konten utama ( <main></main> ). Solusi ini akan mengarah pada pembentukan kode berikut:

 import React from "react" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>   </div> ) } export default App 

Beginilah tampilannya di browser.


Aplikasi di browser

Di sini Anda masih dapat menyesuaikan dgn mode daftar sehingga menjadi lebih seperti bilah navigasi.

Anda mungkin memperhatikan bahwa kode komponen sudah menjadi cukup besar. Ini bertentangan dengan tujuan yang kami gunakan Bereaksi. Sebelumnya kami berbicara tentang fakta bahwa potongan-potongan kode HTML dapat direpresentasikan sebagai komponen yang terpisah, dan dalam komponen kami semuanya ditumpuk dalam satu tumpukan. Oleh karena itu, sekarang kita akan membuat komponen untuk setiap fragmen markup yang independen.

Lihatlah diagram ini untuk lebih memahami apa yang dipertaruhkan.


Komponen Aplikasi menampilkan komponen MyInfo, output dari elemen <div>

Di sini kami menampilkan komponen App pada halaman. Dalam hal ini, komponen App memutuskan untuk menampilkan komponen lain - MyInfo . Dan komponen MyInfo sudah menampilkan elemen JSX tertentu. Perhatikan perbedaan antara konsep "komponen" dan "elemen". Elemen adalah entitas yang berubah menjadi kode HTML biasa. Jadi, dalam elemen yang disajikan di bagian bawah diagram, tag <div> sederhana digunakan, namanya dimulai dengan huruf kecil, yang memberitahu kita bahwa ini adalah elemen biasa, dan bukan salah satu komponen yang kita buat. Di sisi lain, nama MyInfo dimulai dengan huruf kapital. Ini membantu untuk memahami bahwa kita memiliki komponen.

Anda mungkin pernah mendengar bahwa DOM (Document Object Model, sering disebut sebagai "tree"). Elemen root dari pohon ini adalah elemen <html> . Dalam kasus kami, elemen akar pohon yang diwakili dalam diagram adalah komponen App . Kemampuan komponen ini tidak terbatas pada output dari komponen lain, MyInfo dalam kasus kami. Misalnya, dapat menampilkan komponen lain, yang merupakan "footer", bagian bawah halaman. Katakanlah komponen ini akan disebut AwesomeFooter .


App Komponen mengeluarkan dua komponen

Komponen ini, pada gilirannya, dapat menampilkan elemen <footer> yang akan berisi kode HTML di bagian bawah halaman.

Jika kita memiliki "footer" dari sebuah halaman, maka itu juga bisa berisi sebuah "header", yang membentuk bagian atasnya.


Output Aplikasi Komponen Tiga Komponen

Bagian atas halaman diwakili dalam diagram kami oleh komponen AwesomeHeader . Nama-nama tersebut diberikan kepada komponen-komponen ini agar tidak membingungkan mereka dengan unsur-unsurnya. Komponen AwesomeHeader , seperti komponen App , dapat menghasilkan tidak hanya markup JSX, tetapi juga komponen lainnya. Misalnya, itu bisa menjadi komponen NavBar , yang merupakan bilah navigasi, dan komponen Logo yang menampilkan logo. Dan komponen-komponen ini sudah akan menampilkan elemen biasa - seperti <img /> dan <nav> .

Saat Anda meninjau skema ini, Anda mungkin memperhatikan bahwa aplikasi Bereaksi, saat dikembangkan, dapat menjadi semakin kompleks. Dan apa yang kami teliti di sini sebenarnya adalah contoh dari struktur aplikasi yang sangat sederhana.

Sekarang mari kita membuat komponen dalam aplikasi pelatihan kita yang akan menjadi "footer" dari halaman.

Untuk melakukan ini, buat, dalam folder yang sama dengan file index.js , file baru. Footer.js saja Footer.js dan masukkan kode berikut ke dalamnya:

 import React from "react" function Footer() {   return (       <footer>           <h3><font color="#3AC1EF">▍This is my footer element</font></h3>       </footer>   ) } export default Footer 

Harap dicatat bahwa nama komponen fungsional dimulai dengan huruf kapital ( Footer ), dan nama elemen (<footer> ) dimulai dengan yang kecil. Seperti yang telah disebutkan, ini membantu membedakan elemen dari komponen.

Jika sekarang Anda me-refresh halaman, markup yang dihasilkan oleh komponen Footer tidak akan ditampilkan di bagian bawahnya. Ini sepenuhnya diharapkan, karena untuk menampilkannya, Anda perlu membuat perubahan yang sesuai pada kode komponen App .

Yaitu, kita berbicara tentang fakta bahwa dalam kode file komponen App Anda perlu mengimpor komponen Footer dan membuat turunannya. Edit kode untuk file App.js :

 import React from "react" import Footer from "./Footer" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>     <Footer />   </div> ) } export default App 

Sekarang halaman yang formulir aplikasi akan terlihat seperti yang ditunjukkan di bawah ini.


Komponen Aplikasi menampilkan markup yang dibentuk oleh komponen lain di bagian bawah halaman - Footer

Anda mungkin memperhatikan bahwa sekarang dalam output kode oleh komponen App ada campuran aneh elemen JSX biasa dengan komponen. Akan jauh lebih baik jika apa yang ditampilkan komponen App seperti daftar isi dalam buku, sehingga sebagian besar mengandung komponen. Yaitu, intinya adalah bahwa kode komponen akan terlihat seperti ini:

 import React from "react" import Footer from "./Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Jika aplikasi memiliki struktur yang serupa (dalam kasus kami, karena file komponen Header dan MainContent belum dibuat, kode tidak akan berfungsi), maka deskripsi elemen yang membentuk berbagai bagian halaman akan berada di file komponen yang sesuai. Pada saat yang sama, komponen yang diimpor ke dalam komponen App dapat berisi komponen bersarang lainnya. Jadi struktur yang cukup luas dapat dibentuk, dimensi yang ditentukan oleh kebutuhan aplikasi tertentu.

Di sini kami berbicara tentang cara bekerja dengan komponen bersarang. Anda dapat mencoba dengan baik apa yang baru saja Anda pelajari dengan membawa proyek, file App.js yang terlihat seperti ditunjukkan di atas, ke dalam kondisi kerja.

Pelajaran 10. Workshop. Komponen induk dan anak

→ Asli

▍ pekerjaan

Buat aplikasi Bereaksi dari awal. Tampilkan komponen root dari App (didefinisikan dalam file terpisah) pada halaman. Cetak komponen berikut di dalam komponen ini:

1. Navbar
2. MainContent
3. Footer

Komponen yang ditampilkan oleh App harus dijelaskan dalam file yang terpisah, masing-masing harus menampilkan beberapa elemen JSX.

OlSolusi

Sebagai dasar untuk memecahkan masalah ini, sebuah proyek standar yang dibuat menggunakan alat create-react-app digunakan (jika Anda tidak tahu cara membuat proyek seperti itu, lihat materi ini ). Ini menggunakan index.html standar.

Kode untuk file index.js :

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Ini adalah kode untuk file App.js Harap dicatat bahwa kami akan menggunakan folder components untuk menyimpan file komponen.

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Kode untuk file Header.js :

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

MainContent.js file MainContent.js :

 import React from "react" function MainContent() {   return (       <main>This is the main section</main>   ) } export default MainContent 

Kode file Footer.js :

 import React from "react" function Footer() {   return (       <footer>This is the footer</footer>   ) } export default Footer 

Anda dapat mengatur pekerjaan dengan komponen sesuka Anda. Yaitu, Anda dapat, misalnya, pertama-tama menulis semua kode yang diperlukan dalam file App.js yang mengimpor komponen dan menampilkan instans mereka, dan kemudian membuat file komponen. Anda dapat melakukan yang sebaliknya - pertama membuat file komponen dengan kode, dan kemudian bekerja pada file App.js Yang paling penting adalah Anda memiliki aplikasi yang berfungsi.

Seperti inilah proyeknya di VSCode.


Proyek dalam VSCode

Dan inilah halaman yang dibentuk aplikasi ini.


Halaman aplikasi di browser

Aplikasi Bereaksi kami berfungsi, tetapi apa yang ditampilkannya pada halaman itu terlihat sangat tidak menarik. Anda dapat memperbaikinya dengan menata konten halaman.

Ringkasan

Hari ini kita berbicara tentang komponen orangtua dan anak. Lain kali kita akan mulai bekerja pada proyek pelatihan besar pertama kami dan berbicara tentang elemen halaman styling.

Pembaca yang budiman! Jika Anda terlibat dalam kursus ini, tolong beri tahu kami bagaimana Anda melakukan latihan praktis. Yaitu - apakah Anda menulis kode yang disebut "dari kepala", atau melihat teks pelajaran sebelumnya? Atau mungkin Anda mencoba menemukan apa yang Anda lupa di Internet?