Bonne journée, mes amis!
Aujourd'hui, je veux vous parler du style dans React.
Pourquoi cette question est-elle pertinente? Pourquoi existe-t-il différentes approches pour travailler avec les styles dans React?
En matière de balisage (HTML), React met JSX (JavaScript et XML) à notre disposition. JSX vous permet d'écrire du balisage dans des fichiers JS - cette technique peut être appelée "HTML-in-JS".
Cependant, en ce qui concerne les styles, React ne fournit aucun outil spécial (JSC?). Par conséquent, chaque développeur est libre de choisir ces outils à son goût.
Au total, il existe 5 approches pour styliser les composants React:
- Styles globaux - tous les styles sont contenus dans un seul fichier (par exemple 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>
À mon avis, la meilleure solution est la dernière approche, c'est-à-dire CSS vers JS. Cela semble le plus logique en termes de description de la structure (balisage), de l'apparence (styles) et de la logique (script) du composant dans un seul fichier - nous obtenons quelque chose comme All-in-JS.
Une feuille de triche sur l'utilisation de la bibliothèque "styled-components" peut être trouvée ici . Vous pourriez également être intéressé à jeter un œil à la feuille de triche Hook .
Eh bien, la pire approche à mon avis est les styles en ligne. Il convient de noter, cependant, que définir des objets stylisés avant de définir un composant, puis d'utiliser ces objets est similaire à CSS-in-JS, mais il existe toujours camelCase, des attributs de style et des styles en ligne eux-mêmes qui rendent difficile l'inspection du DOM.
Voici une simple application de compteur React qui utilise systématiquement toutes ces approches de style (à l'exception des styles en ligne).
Le code source est GitHub .
Bac à sable:
L'application ressemble à ceci: L'
application se compose de trois composants: Titre - le titre, Compteur - la valeur du compteur et des informations indiquant si le nombre est positif ou négatif, pair ou impair, Contrôle - un panneau de contrôle qui vous permet d'augmenter, de diminuer et réinitialisez la valeur du compteur.
La structure du projet est la suivante:
|--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 ...
Passons en revue certains des fichiers du répertoire "src":
- index.js - Point d'entrée JavaScript (dans la terminologie "bundler") où les styles globaux sont importés et le composant "App" est rendu
- App.js est le composant principal où les composants Control, Counter et Title sont importés et fusionnés
- global.css - styles globaux, c'est-à-dire styles de tous les composants dans un seul fichier
- 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 - fichier avec "main": "./Control", ce qui facilite l'importation d'un composant (au lieu d'importer le contrôle depuis './Control/Control', vous pouvez utiliser importer le contrôle depuis './ Contrôler'
- components / index.js - réexportation, vous permettant d'importer tous les composants à la fois dans App.js
Comme toujours, je serai heureux de recevoir vos commentaires.
Merci pour votre attention et bonne journée.