5 Ansätze zum Styling Reagieren Sie Komponenten in einer einzigen Anwendung

Guten Tag, Freunde!



Heute möchte ich mit Ihnen über das Styling in React sprechen.



Warum ist diese Frage relevant? Warum gibt es in React unterschiedliche Ansätze für die Arbeit mit Stilen?



Wenn es um Markup (HTML) geht, stellt React JSX (JavaScript und XML) zur Verfügung. Mit JSX können Sie Markups in JS-Dateien schreiben. Diese Technik kann als "HTML-in-JS" bezeichnet werden.



Wenn es um Stile geht, bietet React jedoch keine speziellen Tools (JSC?). Daher kann jeder Entwickler solche Tools nach seinen Wünschen auswählen.



Insgesamt gibt es 5 Ansätze zum Styling von React-Komponenten:

• Globale Stile - Alle Stile sind in einer Datei enthalten (z. B. 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>

Meiner Meinung nach ist die beste Lösung der letztere Ansatz, d.h. CSS-to-JS. Es sieht am logischsten aus, wenn es darum geht, die Struktur (Markup), das Erscheinungsbild (Stile) und die Logik (Skript) der Komponente in einer Datei zu beschreiben - wir erhalten so etwas wie All-in-JS.



Ein Spickzettel zur Verwendung der Bibliothek "Styled-Components" finden Sie hier . Vielleicht möchten Sie auch einen Blick auf das Hook Cheat Sheet werfen .



Nun, der schlechteste Ansatz ist meiner Meinung nach Inline-Stile. Es ist jedoch anzumerken, dass das Definieren von gestalteten Objekten vor dem Definieren einer Komponente und dem anschließenden Verwenden dieser Objekte CSS-in-JS ähnelt. Es gibt jedoch immer noch camelCase, Stilattribute und Inline-Stile, die es schwierig machen, das DOM zu überprüfen.



Hier ist eine einfache React Counter-Anwendung, die alle diese Styling-Ansätze konsistent verwendet (mit Ausnahme von Inline-Styles).



Der Quellcode ist GitHub .



Sandkasten:





Die Anwendung sieht folgendermaßen aus: Die







Anwendung besteht aus drei Komponenten: Titel - Titel, Zähler - Zählerwert und Informationen darüber, ob die Zahl positiv oder negativ, gerade oder ungerade ist, Steuerung - ein Bedienfeld, mit dem Sie erhöhen oder verringern können und setzen Sie den Zählerwert zurück.



Die Struktur des Projekts ist wie folgt:

|--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
...

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Lassen Sie uns einige der Dateien im Verzeichnis "src" durchgehen:

• index.js - JavaScript-Einstiegspunkt (in der Terminologie "Bundler"), an dem globale Stile importiert und die Komponente "App" gerendert wird
• App.js ist die Hauptkomponente, in die die Steuerelement-, Zähler- und Titelkomponenten importiert und zusammengeführt werden
• global.css - globale Stile, d.h. Stile aller Komponenten in einer Datei
• 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 - Datei mit "main": "./Control", die das Importieren einer Komponente erleichtert (anstelle des Imports von Control aus './Control/Control' können Sie das Import Control aus './ verwenden. Steuerung'
• components / index.js - Reexport, sodass Sie alle Komponenten gleichzeitig in App.js importieren können

Wie immer freue ich mich über Feedback.



Vielen Dank für Ihre Aufmerksamkeit und einen schönen Tag.