React Tutorial, Bagian 5: Memulai dengan Aplikasi TODO, Styling Dasar

Hari ini, di bagian selanjutnya dari terjemahan kursus pelatihan Bereaksi, kita akan mulai bekerja pada proyek pelatihan pertama dan berbicara tentang dasar-dasar gaya.



→ 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 11. Workshop. Aplikasi TODO. Tahap nomor 1

→ Asli

Dalam pelajaran ini, kita akan mulai mengerjakan proyek pelatihan pertama kita - aplikasi TODO. Kelas serupa akan dibingkai sebagai bengkel biasa. Pertama, Anda akan diberi tugas, untuk implementasi yang akan diperlukan untuk menavigasi dalam materi yang dipelajari sebelumnya, setelah itu solusi akan disajikan.

Kami akan mengerjakan aplikasi ini untuk beberapa waktu, oleh karena itu, jika Anda menggunakan create-react-app , disarankan untuk membuat proyek terpisah untuk itu.

▍ pekerjaan

• Buat aplikasi Bereaksi baru.
• Tampilkan komponen <App /> pada halaman menggunakan file index.js .
• Komponen <App /> harus menghasilkan kode untuk menampilkan 3-4 flag dengan beberapa teks mengikutinya. Teks dapat diformat menggunakan <p> atau <span> . Apa yang dapat Anda lakukan harus menyerupai daftar hal yang harus dilakukan di mana beberapa entri telah dibuat.

OlSolusi

Kode untuk file index.js :

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

App.js file App.js :

 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 

Inilah yang terlihat seperti proyek create-react-app standar di VSCode pada tahap kerja ini.


Proyek dalam VSCode

Inilah yang sekarang ditampilkan aplikasi kami di halaman.


Penampilan aplikasi di browser

Hari ini kami telah mengambil langkah pertama menuju aplikasi TODO. Tetapi apa yang menampilkan aplikasi ini di layar tidak terlihat senyaman apa yang muncul di halaman selama percobaan kami sebelumnya. Karena itu, dalam pelajaran selanjutnya kita akan fokus pada penataan elemen.

Pelajaran 12. Penataan Gaya Bereaksi Menggunakan Kelas CSS

→ Asli

Sekarang kita akan mengerjakan aplikasi yang dibuat sebagai hasil dari workshop di pelajaran 10. Inilah yang ditampilkan aplikasi di layar.


Halaman aplikasi di browser

Kami ingin menata elemen elemen halaman. Bereaksi memiliki banyak pendekatan gaya. Kami sekarang menggunakan pendekatan dengan prinsip-prinsip yang mungkin sudah Anda kenal. Ini terdiri dalam menerapkan kelas-kelas CSS dan aturan-aturan CSS yang ditugaskan untuk kelas-kelas ini. Mari kita lihat struktur proyek ini dan pikirkan tentang elemen apa yang perlu ditugaskan kelas yang akan digunakan untuk mendesainnya.


Proyek dalam VSCode

File index.js bertanggung jawab untuk merender komponen App . Komponen App menampilkan elemen <div> , yang berisi tiga komponen lainnya - Header , MainComponent dan Footer . Dan masing-masing komponen ini hanya menampilkan satu elemen JSX dengan teks. Dalam komponen-komponen inilah kita akan terlibat dalam penataan. Mari kita bekerja pada komponen Header . Ingatlah bahwa pada tahap karyanya ini, kodenya terlihat seperti ini:

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

Biasanya, ketika mereka bekerja dengan kode HTML dan ingin menetapkan kelas ke elemen tertentu, ini dilakukan dengan menggunakan atribut class . Misalkan kita akan menetapkan atribut seperti itu ke elemen <header> . Tapi di sini kita tidak boleh lupa bahwa kita bekerja bukan dengan kode HTML, tetapi dengan JSX. Dan di sini kita tidak dapat menggunakan atribut class (pada kenyataannya, Anda dapat menggunakan atribut dengan nama ini, tetapi ini tidak disarankan). Sebagai gantinya, atribut bernama className . Banyak publikasi mengatakan bahwa alasannya adalah karena class adalah kata kunci JavaScript dilindungi undang-undang. Tetapi, pada kenyataannya, JSX menggunakan JavaScript API biasa untuk bekerja dengan DOM. Untuk mengakses elemen menggunakan API ini, desain akrab dari formulir berikut digunakan:

 document.getElementById("something") 

Untuk menambahkan kelas baru ke elemen, lanjutkan sebagai berikut:

 document.getElementById("something").className += " new-class-name" 

Dalam situasi yang serupa, lebih mudah menggunakan properti elemen classList , khususnya, karena memiliki metode yang mudah untuk menambah dan menghapus kelas, tetapi dalam hal ini tidak masalah. Dan yang penting adalah properti className digunakan di className .

Sebenarnya, untuk menetapkan kelas ke elemen JSX, cukup bagi kami untuk mengetahui bahwa di mana kata kunci class digunakan dalam HTML, kata kunci className harus digunakan di JSX.

Tetapkan kelas navbar ke elemen <header> :

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

Sekarang, di folder components , buat file Header.css . Masukkan kode berikut di dalamnya:

 .navbar { background-color: purple; } 

Sekarang hubungkan file ini ke Header.js dengan perintah import gunakan Header.css di Header.js ).

Beginilah tampilannya di VSCode.


File gaya dan koneksinya dalam VSCode

Semua ini akan mengarah pada kenyataan bahwa tampilan baris teratas yang ditampilkan oleh aplikasi pada halaman berubah.


Ubah gaya baris atas

Di sini kami menggunakan gaya yang sangat sederhana. Header.css konten file Header.css yang berikut ini:

 .navbar {   height: 100px;   background-color: #333;   color: whitesmoke;   margin-bottom: 15px;   text-align: center;   font-size: 30px;   display: flex;   justify-content: center;   align-items: center; } 

Selain itu, buka file index.css sudah ada dalam proyek dan masukkan gaya berikut ke dalamnya:

 body {   margin: 0; } 

index.js file ini dalam index.js dengan perintah import "./index.css" . Akibatnya, halaman aplikasi akan mengambil bentuk yang ditunjukkan pada gambar berikut.


Ubah gaya halaman

Harap perhatikan bahwa gaya yang ditentukan dalam index.css telah memengaruhi semua elemen halaman. Jika Anda menggunakan, misalnya, beberapa jenis editor online untuk eksperimen, bekerja dengan file gaya dapat diatur dengan cara khusus. Misalnya, dalam editor seperti itu, mungkin ada satu file gaya standar yang terhubung secara otomatis ke halaman, aturan CSS yang dijelaskan di mana akan diterapkan ke semua elemen halaman. Dalam contoh sederhana kami, akan sangat mungkin untuk menempatkan semua gaya di index.css .

Sebenarnya, dengan asumsi bahwa Anda sudah terbiasa dengan CSS, kita dapat mengatakan bahwa di sini kita menggunakan kode CSS yang persis sama yang digunakan untuk menata elemen HTML biasa. Hal utama yang perlu diingat ketika menata elemen dengan kelas di Bereaksi adalah bahwa alih-alih atribut elemen class yang digunakan dalam HTML, className digunakan.

Selain itu, perlu dicatat bahwa kelas hanya dapat ditugaskan untuk Bereaksi elemen - seperti <header> , <p> atau <h1> . Jika Anda mencoba menetapkan nama kelas ke instance komponen - seperti <Header /> atau <MainContent /> , sistem akan berperilaku sangat berbeda dari yang Anda harapkan. Kami akan membicarakan ini nanti. Sementara itu, ingatlah bahwa kelas dalam aplikasi Bereaksi ditugaskan untuk elemen, bukan komponen.

Berikut ini hal lain yang mungkin Anda rasa sulit untuk memulai dengan Bereaksi. Kita berbicara tentang elemen penataan yang memiliki berbagai tingkat hierarki pada halaman. Katakanlah ini terjadi ketika teknologi CSS Flexbox atau CSS Grid digunakan untuk penataan gaya. Dalam kasus seperti itu, misalnya, saat menggunakan tata letak Flex, Anda perlu mengetahui entitas mana yang merupakan wadah fleksibel dan entitas mana yang merupakan elemen flex. Yaitu, bisa sulit untuk memahami - bagaimana tepatnya elemen gaya, elemen mana yang menerapkan gaya tertentu. Misalkan, misalnya, bahwa elemen <div> dari komponen App kami harus berupa wadah fleksibel:

 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 

Dalam hal ini, elemen fleksibel ditampilkan melalui komponen Header , MainContent , dan Footer . Lihatlah, misalnya, pada kode komponen Header :

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

Elemen <header> harus merupakan turunan langsung dari elemen <div> dari komponen App . Itu harus bergaya sebagai elemen fleksibel.

Untuk memahami stilisasi konstruksi semacam itu, Anda perlu mempertimbangkan kode HTML apa yang dihasilkan oleh aplikasi tersebut. Kami akan membuka tab Elements alat pengembang Chrome untuk laman yang muncul di browser saat bekerja dengan proyek yang dibuat menggunakan create-react-app .


Kode Halaman

Elemen <div> dengan root pengidentifikasi adalah elemen halaman index.html yang kita rujuk dalam metode ReactDOM.render() yang disebut dalam file index.js . Markup yang dihasilkan oleh komponen App ditampilkan di dalamnya, yaitu elemen <div> berikutnya, yang berisi elemen <header> , <main> dan <footer> dibentuk oleh komponen yang sesuai.

Yaitu, dengan menganalisis kode aplikasi Bereaksi yang diberikan di atas, kita dapat mengasumsikan bahwa konstruk <Header /> dalam komponen App diganti dengan <header className="navbar">This is the header</header> konstruktor <header className="navbar">This is the header</header> . Memahami fakta ini memungkinkan Anda untuk menggunakan skema kompleks untuk menata elemen halaman.

Ini menyimpulkan pengantar pertama kami untuk menata aplikasi Bereaksi. Disarankan agar Anda bereksperimen dengan apa yang baru saja Anda temukan. Misalnya, coba <MainContent /> keluaran elemen dengan komponen <MainContent /> dan <Footer /> <MainContent /> .

Ringkasan

Hari ini kami mulai mengembangkan proyek pelatihan pertama kami - aplikasi TODO, dan juga berkenalan dengan styling aplikasi Bereaksi menggunakan kelas CSS. Lain kali kita akan berbicara tentang fitur gaya kode yang dianut penulis kursus ini, serta beberapa hal tentang JSX dan JavaScript.

Pembaca yang budiman! Apakah Anda sudah memiliki ide untuk aplikasi yang ingin Anda buat menggunakan Bereaksi?