Bereaksi Tutorial Bagian 3: File Komponen, Struktur Proyek

Pada artikel ini, kita akan berbicara tentang file komponen dan struktur proyek Bereaksi.



→ 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 8. File komponen, struktur proyek Bereaksi

→ Asli

File Komponen

Jika kami berasumsi bahwa Anda melakukan tugas dari pelajaran praktis sebelumnya menggunakan proyek standar yang dibuat oleh create-react-app , maka sekarang ia menggunakan file index.html dari folder public , konten yang sesuai dengan kami, dan file index.js dari folder src , di mana kita menulis kode. Secara khusus, index.js sekarang terlihat seperti ini:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Harap dicatat bahwa kode komponen fungsional MyInfo terkandung dalam file ini. Seperti yang Anda ingat, React memungkinkan Anda membuat banyak komponen, ini adalah salah satu kekuatannya. Jelas bahwa menempatkan kode sejumlah besar komponen dalam satu file, meskipun secara teknis layak, dalam praktiknya berarti ketidaknyamanan yang hebat. Oleh karena itu, kode komponen, bahkan yang kecil, biasanya disusun dalam file terpisah. Pendekatan inilah yang direkomendasikan untuk diikuti saat mengembangkan aplikasi Bereaksi.

File komponen diberikan nama yang sesuai dengan nama-nama komponen yang kode file ini disimpan. Tempatkan mereka, dalam kasus create-react-app , di folder src sama di mana file index.js . Dengan pendekatan ini, file dengan komponen MyInfo.js akan dinamai MyInfo.js .

Buat file MyInfo.js dan transfer kode komponen MyInfo.js ke dalamnya, hapus dari index.js .

Pada tahap ini, index.js akan terlihat seperti ini:

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

Kode MyInfo.js akan seperti ini:

 function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } 

Ini adalah tampilannya di VSCode.


Transfer kode komponen ke file baru

Kami mentransfer kode komponen dari index.js , tetapi struktur yang kami miliki sekarang masih tidak beroperasi.

Pertama, ingat tujuan import React from "react" di index.js , meskipun kami tidak mengakses React langsung di sini. Alasan untuk ini adalah bahwa tanpa impor React , mekanisme perpustakaan ini, khususnya, BEJ, tidak akan berfungsi. Berkat perintah impor ini, kami dapat, di kelas sebelumnya, untuk meneruskan kode JSX ke metode ReactDOM.render() dan menampilkan markup HTML yang dibuat berdasarkan pada halamannya. Semua ini berarti bahwa dalam file MyInfo.js kita juga perlu mengimpor Bereaksi. Ini adalah praktik umum untuk file komponen.

Kedua, kita perlu memastikan bahwa fungsi MyInfo.js file MyInfo.js dapat digunakan dalam file aplikasi lain. Perlu diekspor untuk ini. Di sini kemampuan standar ES6 digunakan. Akibatnya, kode MyInfo.js diperbarui mengambil bentuk berikut:

 import React from "react" function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } export default MyInfo 

Sekarang mari kita bekerja pada file index.js . Yaitu, kita membutuhkan komponen MyInfo untuk tersedia dalam file ini. Anda dapat membuatnya tersedia di index.js mengimpornya.

Bagaimana jika saya mencoba menulis perintah impor komponen berdasarkan pada perintah impor react dan react-dom di index.js ? Misalnya, tambahkan perintah impor berikut ke file:

 import MyInfo from "MyInfo.js" //  

Sistem, setelah melihat perintah seperti itu, khususnya, mengandalkan fakta bahwa itu tidak mengandung informasi tentang path relatif ke file, akan mencari ketergantungan proyek - modul dengan nama yang ditentukan ketika perintah ini dipanggil ( inilah cara menginstal dependensi dalam proyek yang dibuat menggunakan create-react-app ; dependensi ini kemudian dapat diimpor ke proyek Bereaksi dengan cara yang sama seperti perpustakaan Bereaksi diimpor). Dia tidak akan menemukan modul seperti itu, akibatnya, perintah impor tidak akan berfungsi. Oleh karena itu, perintah impor file harus ditulis ulang dengan path ke sana. Dalam hal ini, kami puas dengan indikasi direktori saat ini ( ./ ) dan perintah impor akan mengambil bentuk berikut:

 import MyInfo from "./MyInfo.js" //  

Selain itu, jika kita berbicara tentang perintah import , penting untuk mempertimbangkan bahwa itu menyiratkan bahwa file JavaScript diimpor dengan bantuannya. Artinya, ekstensi .js dapat dihapus sepenuhnya, dan perintah import , setelah mendapatkan formulir yang ditunjukkan di bawah ini, tidak akan kehilangan fungsinya.

 import MyInfo from "./MyInfo" //  

Biasanya, perintah impor file JS ini menulis seperti ini.

Ini adalah index.js file index.js lengkap.

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

▍ Struktur proyek

Dengan pertumbuhan dalam ukuran dan kompleksitas proyek Bereaksi, sangat penting untuk mempertahankan struktur mereka dalam kondisi yang baik. Dalam kasus kami, walaupun proyek kami sekarang kecil, ada kemungkinan, di folder src , untuk membuat folder components , yang dirancang untuk menyimpan file dengan kode komponen.

Buat folder seperti itu dan pindahkan file MyInfo.js ke dalamnya. Setelah itu, Anda perlu mengedit perintah impor file ini di index.js .

Yaitu, sekarang jalur ke MyInfo.js menunjukkan bahwa file ini terletak di tempat yang sama dengan index.js , tetapi sebenarnya file ini sekarang terletak di folder components berada di folder yang sama dengan index.js . Akibatnya, jalur relatif ke sana di index.js akan terlihat seperti ini: ./components/MyInfo . Berikut ini adalah kode index.js diperbarui:

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

Dan berikut ini tampilannya di VSCode.


Folder untuk menyimpan komponen dan mengimpor komponen dari folder ini ke VSCode

Bahkan, satu folder components , yang dirancang untuk meng-host kode untuk semua komponen, adalah contoh dari struktur proyek yang sangat disederhanakan. Dalam proyek nyata, untuk memastikan kenyamanan bekerja dengan sejumlah besar entitas, struktur folder yang jauh lebih kompleks digunakan. Apa sebenarnya struktur ini akan tergantung pada kebutuhan proyek dan pada preferensi pribadi programmer.

Disarankan untuk bereksperimen dengan semua yang Anda pelajari hari ini. Misalnya, Anda dapat mencoba memindahkan file MyInfo.js ke beberapa folder dan melihat apa yang MyInfo.js , Anda dapat mencoba mengganti namanya, mengubah beberapa kode di dalamnya. Ketika selama percobaan tersebut, operasi proyek yang benar akan terganggu - akan berguna untuk memahami masalah dan membawa proyek kembali ke kondisi kerja.

Ringkasan

Dalam pelajaran ini, kita berbicara tentang memformat kode komponen sebagai file terpisah, mengekspor dan mengimpor kode menggunakan ES6, dan struktur proyek Bereaksi. Lain kali kita akan terus berkenalan dengan kemampuan komponen.

Pembaca yang budiman! Kami meminta pengembang Bereaksi berpengalaman untuk berbagi ide dengan pendatang baru mengenai organisasi struktur proyek.