Bereaksi Tutorial Bagian 7: Gaya Inline

Hari ini, di bagian selanjutnya dari kursus Bereaksi, kita akan berbicara tentang gaya sebaris.



→ 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 15. Gaya Bawaan

→ Asli

Di akhir pelajaran terakhir, kami membuat komponen yang menganalisis waktu hari dan menampilkan ucapan yang sesuai. Berikut ini adalah index.js file index.js lengkap yang mengimplementasikan fungsi ini:

 import React from "react" import ReactDOM from "react-dom" function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Sekarang kita perlu gaya apa yang ditampilkan kode ini di halaman. Pada saat yang sama, kita akan menggunakan pendekatan di sini yang berbeda dari stylization elemen yang dipertimbangkan sebelumnya menggunakan kelas CSS. Yaitu, kita berbicara tentang menggunakan style atribut HTML. Mari kita lihat apa yang terjadi jika Anda menggunakan desain ini:

 <h1 style="color: #FF8C00">Good {timeOfDay}!</h1> 

Tidak ada yang benar-benar bagus. Teks tidak akan sampai ke halaman, sebagai gantinya, pesan kesalahan akan ditampilkan. Esensi intinya bermuara pada fakta bahwa di sini, saat menyiapkan gaya, diharapkan bukan nilai string, tetapi objek yang berisi pasangan : form : , di mana kunci adalah nama-nama properti CSS, dan nilai adalah nilainya.

Ketika mencoba menggunakan atribut HTML dalam kode JSX, kita tidak boleh lupa bahwa apa yang sedang kita kerjakan, meskipun terlihat seperti kode HTML biasa, bukan. Akibatnya, tampilan desain ini atau itu di sini mungkin berbeda dari yang diterima dalam HTML. Dalam hal ini, kita memerlukan objek JavaScript reguler yang berisi deskripsi gaya. Berbekal gagasan ini, kami menulis ulang fragmen kode di atas sebagai berikut:

 <h1 style={color: "#FF8C00"}>Good {timeOfDay}!</h1> 

Jadi, sayangnya, kode kami tidak akan berfungsi. Sebagai hasil dari eksekusi, pesan kesalahan akan ditampilkan lagi, meskipun tidak sama dengan terakhir kali. Sekarang melaporkan bahwa di mana sistem dapat mengharapkan braket keriting, ia menemukan sesuatu yang lain. Untuk mengatasi masalah ini, Anda perlu mengingat apa yang kita bicarakan dalam pelajaran sebelumnya. Yaitu, bahwa kode JavaScript yang tertanam dalam JSX harus dimasukkan dalam kurung kurawal. Kurung kurawal yang sudah ada dalam kode kita digunakan untuk menggambarkan objek literal, dan bukan untuk menyorot kode JS. Mari kita perbaiki ini:

 <h1 style={{color: "#FF8C00"}}>Good {timeOfDay}!</h1> 

Sekarang komponen membentuk apa yang dibutuhkan pada halaman.


Teks bergaya ditampilkan pada halaman oleh komponen

Bagaimana jika kita memutuskan untuk terus menata teks ini? Untuk melakukan ini, kita harus ingat bahwa kita menggambarkan gaya dalam objek-JS, yang berarti bahwa kita perlu menambahkan pasangan : tambahan ke objek ini. Sebagai contoh, kami akan mencoba mendesain latar belakang teks dengan cara ini menggunakan background-color properti CSS dan menambahkan kode seperti ini:

 <h1 style={{color: "#FF8C00", background-color: "#FF2D00"}}>Good {timeOfDay}!</h1> 

Desain ini akan menghasilkan pesan kesalahan. Intinya di sini adalah bahwa kita menggambarkan gaya menggunakan objek JS biasa, dan dalam JavaScript, variabel dan nama properti objek ( pengidentifikasi ) tidak dapat berisi simbol "-", tanda hubung. Bahkan, pembatasan ini dapat dielakkan, misalnya, dengan melampirkan nama properti objek dalam tanda kutip, tetapi dalam kasus kami ini tidak terjadi. Dalam situasi seperti itu, ketika nama properti CSS berisi tanda hubung, kami menghapus karakter ini dan membuat huruf pertama dari kata yang mengikutinya dengan huruf besar. Sangat mudah untuk melihat bahwa dengan pendekatan ini, nama properti CSS akan ditulis dalam gaya unta - seperti halnya JavaScript, biasanya menulis nama variabel terdiri dari beberapa kata. Tulis ulang kode:

 <h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1> 

Mari kita lihat hasil karyanya.


Teks bergaya ditampilkan pada halaman oleh komponen

Dalam proses penataan teks, kode objek dengan gaya menjadi lebih panjang. Tidak nyaman bekerja dengannya. Jika Anda mencoba memecah kode ini menjadi beberapa baris, tidak ada manfaatnya juga. Oleh karena itu, kita akan memperoleh deskripsi objek dengan gaya dari kode JSX dengan membuat konstanta dengan styles nama, menulis objek ke sana dan menggunakan namanya di JSX. Hasilnya, kami mendapatkan yang berikut:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) 

Kode ini bekerja persis sama dengan yang dijelaskan di atas, tetapi pendekatan ini sangat nyaman ketika menjadi perlu untuk menambahkan gaya baru ke objek. Ini tidak menyebabkan kode yang dikembalikan oleh komponen bertambah.

Seperti yang Anda lihat, sekarang nilai properti CSS diatur dalam objek styles sebagai string. Ketika bekerja dengan objek ini, ada baiknya mempertimbangkan beberapa fitur, yang, khususnya, berkaitan dengan properti yang nilainya diatur dalam bentuk angka. Sebagai contoh, ini adalah properti fontSize (tampak seperti font-size di CSS). Jadi, properti ini dapat diatur dalam bentuk angka biasa, dan bukan string yang dilampirkan dalam tanda kutip. Misalnya, konstruksi berikut ini benar-benar valid:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: 24 } 

Di sini, angka 24 akan ditafsirkan sebagai ukuran font yang ditunjukkan dalam piksel. Jika unit ukuran perlu ditentukan secara eksplisit, kita perlu menggunakan nilai string dari properti. Misalnya, fragmen kode berikut ini serupa, dalam hal efek pada ukuran font, dengan yang sebelumnya, tetapi unit pengukuran untuk ukuran ditunjukkan di sini secara eksplisit:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: "24px" } 

Di sini kami menunjukkan ukuran dalam piksel, tetapi jika perlu, unit lain dapat digunakan dalam desain serupa.

Berbicara tentang gaya bawaan, seseorang tidak dapat tidak menyebutkan keterbatasan dari pendekatan ini. Jadi, jika Anda perlu menambahkan awalan peramban ke gaya, ini bisa sedikit lebih sulit daripada menambahkan gaya lainnya. Tetapi sesuatu seperti pseudo-class , seperti :hover , tidak didukung. Jika Anda membutuhkannya pada tahap mastering React, yang terbaik adalah memanfaatkan elemen penataan menggunakan kelas CSS. Dan di masa depan, mungkin akan lebih mudah bagi Anda untuk menggunakan perpustakaan khusus seperti komponen bergaya untuk tujuan tersebut. Namun untuk saat ini, kami akan membatasi diri pada gaya inline dan elemen gaya menggunakan kelas CSS.

Mungkin setelah Anda mengetahui batasan gaya inline ini, Anda mungkin bertanya-tanya mengapa Anda harus menggunakannya jika kelas CSS dapat mencapai efek yang sama dan memiliki fitur yang lebih luas. Salah satu alasan untuk menggunakan gaya sebaris di Bereaksi adalah bahwa gaya tersebut dapat dihasilkan secara dinamis. Selain itu, apa gaya ini atau itu akan ditentukan dengan menggunakan kode JavaScript. Kami menulis ulang contoh kami sehingga warna teks berubah tergantung pada waktu hari di mana pesan ditampilkan.

Berikut ini adalah kode komponen lengkap yang menggunakan formasi gaya dinamis.

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay const styles = {   fontSize: 30 } if (hours < 12) {   timeOfDay = "morning"   styles.color = "#04756F" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon"   styles.color = "#2E0927" } else {   timeOfDay = "night"   styles.color = "#D90000" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) } 

Perhatikan bahwa deklarasi konstanta styles sekarang sebelum blok if . Di objek yang menentukan gaya, hanya ukuran font prasasti yang diatur - 30 piksel. Kemudian, properti color ditambahkan ke objek, yang nilainya tergantung pada waktu hari. Ingatlah bahwa kita berbicara tentang objek JavaScript yang sepenuhnya biasa, dan objek tersebut mendukung penambahan dan perubahan properti setelah dibuat. Setelah gaya terbentuk, itu diterapkan saat menampilkan teks. Untuk menguji dengan cepat semua cabang pernyataan bersyarat, Anda dapat, saat menginisialisasi konstanta date , meneruskan tanggal dan waktu yang diinginkan ke konstruktor tipe Date . Misalnya, mungkin terlihat seperti ini:

 const date = new Date(2018, 6, 31, 15) 

Sebenarnya, arti dari semua ini adalah bahwa data dinamis dapat mempengaruhi bagaimana elemen-elemen yang dibentuk oleh komponen terlihat. Ini membuka peluang besar bagi pengembang.

Ringkasan

Hari ini kita berbicara tentang gaya bawaan, tentang kemampuan dan keterbatasannya. Dalam pelajaran berikutnya, kami akan terus bekerja pada aplikasi TODO, serta mulai berkenalan dengan sifat-sifat komponen, dengan konsep React yang paling penting. Oleh karena itu, direkomendasikan kepada semua orang yang terlibat dalam kursus ini, sebelum melanjutkan studi mereka, bagaimana mengulang semuanya dan bereksperimen dengan semua yang telah kami analisis pada titik ini.

Pembaca yang budiman! Jika Anda berpengalaman dalam React development, beri tahu kami perpustakaan mana yang Anda gunakan untuk mendesain komponen.