Selamat siang teman!
Hari ini saya ingin berbicara dengan Anda tentang gaya di React.
Mengapa pertanyaan ini relevan? Mengapa ada pendekatan berbeda untuk bekerja dengan gaya di React?
Dalam hal markup (HTML), React menggunakan JSX (JavaScript dan XML). JSX memungkinkan Anda untuk menulis markup dalam file JS - teknik ini dapat disebut "HTML-in-JS".
Namun, jika menyangkut gaya, React tidak menyediakan alat khusus (JSC?). Oleh karena itu, setiap pengembang bebas memilih alat tersebut sesuai dengan keinginan mereka.
Secara total, ada 5 pendekatan untuk menata komponen React:
- Gaya global - semua gaya ada dalam satu file (misalnya index.css)
- CSS- — (, «css»); CSS- ( index.css) "@import"
- «» CSS- ( React-; «» , «css-modules» React, .. , , «create-react-app») — «Component.module.css», «Component» — (, ); JS- , (: import styles from './Button.module.css'; <button style={styles.button}> </button>)
- («») — «style» (, <button style={{ borderRadius: '6px'; } }> </button>)
- «CSS--JS» — , CSS JS-; «styled-components»: import styled from 'styled-components'; const Button = styled`- css`; <Button> </Button>
Menurut pendapat saya, solusi terbaik adalah pendekatan yang terakhir yaitu CSS-ke-JS. Ini terlihat paling logis dalam hal mendeskripsikan struktur (markup), tampilan (gaya) dan logika (skrip) komponen dalam satu file - kami mendapatkan sesuatu seperti All-in-JS.
Lembar contekan tentang penggunaan pustaka "komponen-gaya" dapat ditemukan di sini . Anda mungkin juga tertarik untuk melihat Lembar Cheat Hook .
Nah, pendekatan terburuk menurut saya adalah gaya inline. Perlu dicatat, bagaimanapun, bahwa mendefinisikan objek yang diberi gaya sebelum menentukan komponen dan kemudian menggunakan objek tersebut mirip dengan CSS-in-JS, tetapi masih ada camelCase, atribut gaya, dan gaya sebaris itu sendiri yang membuatnya sulit untuk memeriksa DOM.
Berikut adalah aplikasi penghitung React sederhana yang secara konsisten menggunakan semua pendekatan gaya ini (dengan pengecualian gaya sebaris).
Kode sumbernya adalah GitHub .
Bak pasir:
Aplikasi terlihat seperti ini:
Aplikasi terdiri dari tiga komponen: Judul - judul, Penghitung - nilai penghitung dan informasi tentang apakah angka itu positif atau negatif, genap atau ganjil, Kontrol - panel kontrol yang memungkinkan Anda untuk menambah, mengurangi dan setel ulang nilai penghitung.
Struktur proyek adalah sebagai berikut:
|--public |--index.html |--src |--components |--Control |--Control.js |--Control.module.css |--package.json |--styles.js |--Counter |--Counter.js |--Control.module.css |--package.json |--styles.js |--Title |--Title.js |--Title.module.css |--package.json |--index.js |--css |--control.css |--counter.css |--title.css |--App.js |--global.css |--index.js |--nativeModules.css |--reactModules.css ...
Mari kita lihat beberapa file di direktori "src":
- index.js - titik masuk JavaScript (dalam terminologi "bundler") tempat gaya global diimpor dan komponen "Aplikasi" dirender
- App.js adalah komponen utama di mana komponen Kontrol, Penghitung dan Judul diimpor dan digabungkan
- global.css - gaya global, mis. gaya semua komponen dalam satu file
- nativeModules.css — , CSS- «css» (control.css, counter.css title.css)
- reactModules.css — «» CSS-
- components/Control/Control.js — «Control» ( / CSS-, c «» CSS- ),
- components/Control/Control.module.css — «» CSS- «Control»
- components/Control/styles.js — «Control» ( , )
- components / Control / package.json - file dengan "main": "./Control", yang membuatnya lebih mudah untuk mengimpor komponen (daripada mengimpor Kontrol dari './Control/Control' Anda dapat menggunakan kontrol impor dari './ Kontrol'
- components / index.js - ekspor ulang, memungkinkan Anda mengimpor semua komponen sekaligus ke App.js
Seperti biasa, saya akan senang menerima masukan apa pun.
Terima kasih atas perhatiannya dan semoga harimu menyenangkan.