5 Möglichkeiten, Reaktionen mit CSS zu stylen (2023)

von

Wussten Sie, dass über 97 % der Websites CSS für das Styling verwenden?

Cascading Style Sheets oder CSS ermöglichen es Entwicklern, gut aussehende, scanbare und präsentable Webseiten zu erstellen.

Die CSS-Sprache gibt an, wie Dokumente dem Benutzer präsentiert werden. Ein Dokument ist in diesem Fall eine Datei, die in einer Auszeichnungssprache wie XML oder HTML geschrieben ist.

Was ist Styling in React?

Die Einfachheit der Erstellung, Ausführung und Wartung einer React-App ist der Hauptgrund für ihre Popularität. React ist eher eine JavaScript-Bibliothek als ein Framework und bietet mehr als nur vorgefertigte Funktionen und Code-Snippets.

Die Verfügbarkeit wiederverwendbarer Komponenten, seine Flexibilität, Codestabilität, Geschwindigkeit und Leistung sind einige der Gründe, warum React unter den JavaScript-Frameworks und -Bibliotheken einen hohen Stellenwert einnimmt.

Styling in React ist der Prozess, verschiedene Komponenten in einer React-App mithilfe von CSS optisch ansprechend zu gestalten. Es ist jedoch erwähnenswert, dass React JSX (JavaScript und XML) anstelle von HTML als Auszeichnungssprache verwendet. Einer der Hauptunterschiede besteht darin, dass HTML .class verwendet, um Klassen zu bezeichnen, während JSX .ClassName verwendet, um dasselbe zu bezeichnen.

Warum sollten Sie React mit CSS stylen?

  • Gestalten Sie Ihre App responsiv. Moderne Web-Apps sollten sowohl auf kleinen als auch auf großen Bildschirmen zugänglich sein. Mit CSS können Sie Medienabfragen auf Ihre React-App anwenden und sie auf unterschiedliche Bildschirmgrößen reagieren lassen.
  • Beschleunigen Sie den Entwicklungsprozess. Sie können dieselbe CSS-Regel für mehrere Komponenten Ihrer React-App verwenden.
  • Machen Sie die React-App wartbar. Das Ändern des Aussehens bestimmter Komponenten/Teile Ihrer App ist mit CSS einfach.
  • Verbesserte Benutzererfahrung. CSS ermöglicht eine benutzerfreundliche Formatierung. Ein React mit Text und Schaltflächen an logischen Stellen ist einfach zu navigieren und zu verwenden.

Es gibt mehrere Ansätze, mit denen Entwickler ihre React-Apps gestalten können. Die folgenden sind einige der häufigsten;

Schreiben Sie Inline-Stile

Inline-Stile sind der einfachste Ansatz zum Gestalten einer React-App, da Benutzer kein externes Stylesheet erstellen müssen. Das CSS-Styling wird direkt auf den React-Code angewendet.

Es ist erwähnenswert, dass Inline-Stile einen hohen Vorrang vor anderen Stilen haben. Wenn Sie also ein externes Stylesheet mit einer gewissen Formatierung hätten, würde es vom Inline-Style überschrieben werden.

Dies ist eine Demonstration des Inline-Stylings in einer React-App. 

import React from 'react';

import ReactDOM from 'react-dom/client';

const Header = () => {

  return (

    <>

      <h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>

      <h2>Add a little style!</h2>

    </>

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Header />);

Das angezeigte Element zeigt ein h1 mit hellblauem Hintergrund.

  Können Sie Warzone Aimbot auf Xbox One bekommen?

Vorteile des Inline-Stylings

  • Schnell. Dies ist der einfachste Ansatz, da Sie den Stil direkt zu dem Tag hinzufügen, den Sie gestalten möchten.
  • Hat große Vorliebe. Inline-Stile überschreiben externe Stylesheets. So können Sie sich auf eine bestimmte Funktionalität konzentrieren, ohne die gesamte App zu ändern.
  • Ehrfürchtig für das Prototyping. Sie können Inline-Stile verwenden, um die Funktionalität zu testen, bevor Sie die Formatierung in ein externes Stylesheet integrieren.

Nachteile von Inline-Styling

  • Kann langweilig sein. Jeden Tag direkt zu stylen ist zeitaufwändig.
  • Begrenzt. Sie können CSS-Funktionen wie Selektoren und Animationen nicht mit Inline-Stilen verwenden.
  • Viele Inline-Stile machen JSX-Code unlesbar.

Importieren externer Stylesheets

Sie können CSS in eine externe Datei schreiben und in die React-App importieren. Dieser Ansatz ist vergleichbar mit dem Importieren einer CSS-Datei in das -Tag eines HTML-Dokuments.

Um dies zu erreichen, müssen Sie eine CSS-Datei im Verzeichnis Ihrer App erstellen, sie in Ihre Zielkomponente importieren und Stilregeln für Ihre App schreiben.

Um zu demonstrieren, wie externe CSS-Stylesheets funktionieren, können Sie eine CSS-Datei erstellen und sie App.css nennen. Sie können es dann wie folgt exportieren. 

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Das obige Code-Snippet importiert ein externes Stylesheet in die App.js-Komponente. Die App.css-Datei befindet sich im Ordner „Komponenten“.

Vorteile externer CSS-Stylesheets

  • Wiederverwendbar. Sie können dieselben CSS-Regeln für verschiedene Komponenten in einer React-App verwenden.
  • Macht Code präsentabler. Code zu verstehen ist einfach, wenn externe Stylesheets verwendet werden.
  • Ermöglicht den Zugriff auf erweiterte CSS-Funktionen. Sie können Pseudoklassen und erweiterte Selektoren verwenden, wenn Sie externe Stylesheets verwenden.

Con von externen CSS-Stylesheets

  • Erfordert eine zuverlässige Namenskonvention, um sicherzustellen, dass Stile nicht überschrieben werden.

Verwenden Sie CSS-Module

React-Apps können wirklich groß werden. CSS-Animationsnamen und Klassennamen sind standardmäßig global gültig. Diese Einstellung kann bei großen Stilvorlagen problematisch sein, da ein Stil einen anderen überschreiben kann.

CSS-Module lösen diese Herausforderung, indem sie Animationen und Klassennamen lokal festlegen. Dieser Ansatz stellt sicher, dass Klassennamen nur innerhalb der Datei/Komponente verfügbar sind, wo sie benötigt werden. Jeder Klassenname erhält einen eindeutigen programmatischen Namen, wodurch Konflikte vermieden werden.

Um CSS-Module zu implementieren, erstellen Sie eine Datei mit .module.css. Wenn Sie Ihr Stylesheet als Stil bezeichnen möchten, lautet der Dateiname style.module.css.

Importieren Sie die erstellte Datei in Ihre React-Komponente, und Sie können loslegen.

  Die 8 besten Tools zur Überwachung und Messung der Betriebszeit

Ihre CSS-Datei könnte etwa so aussehen;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Sie können das CSS-Modul wie folgt in Ihre App.js importieren;

import { React } from "react";

import styles from "./styles.module.css";

function App() {

  return (

    <h1 className={styles.heading}>Hello wdzwdz reader</h1>

  );

}

export default App;

Vorteile der Verwendung von CSS-Modulen

  • Einfache Integration mit SCSS und CSS
  • Vermeidet Klassennamenskonflikte

Nachteile der Verwendung von CSS-Modulen

  • Das Referenzieren von Klassennamen mit CSS-Modulen kann für Anfänger verwirrend sein.

Verwenden Sie Styled-Components

Gestylte Komponenten ermöglichen es Entwicklern, Komponenten mit CSS in JavaScript-Code zu erstellen. Eine gestylte Komponente fungiert als React-Komponente, die mit Stilen geliefert wird. Styled Components bieten dynamisches Styling und eindeutige Klassennamen.

Um mit der Verwendung von Styled Components zu beginnen, können Sie das Paket mit diesem Befehl in Ihrem Stammordner installieren;

npm install styled-components

Der nächste Schritt ist das Importieren von Styled Components in Ihre React-App

Das Folgende ist ein Code-Snippet von App.js, das Styled Components verwendet;

import { React } from "react";
import styled from "styled-components";

function App() {

  const Wrapper = styled.div`

    width: 80%;

    height: 120px;

    background-color: lightblue;

    display: block;

  `;

  return <Wrapper />;

}

export default App;

In die gerenderte App werden die oben genannten Stile aus Styled Components importiert.

Vorteile von Styled Components

  • Es ist vorhersehbar. Styles in diesem Styling-Ansatz sind in einzelne Komponenten verschachtelt.
  • Sie müssen sich nicht auf die Namenskonventionen Ihrer Klassen konzentrieren. Schreiben Sie einfach Ihre Stile, und das Paket kümmert sich um den Rest.
  • Sie können Styled Components als Requisiten exportieren. Styled Components wandeln normales CSS in React-Komponenten um. Sie können diesen Code also wiederverwenden, Stile durch Requisiten erweitern und exportieren.

Con von Styled Components

  • Sie müssen eine Bibliothek eines Drittanbieters installieren, um loszulegen.

Syntaktisch geniale Stylesheets (SASS/SCSS)

SASS verfügt über leistungsfähigere Tools und Funktionen, die in normalem CSS fehlen. Sie können Stile in zwei verschiedenen Stilen schreiben, die von diesen Erweiterungen geleitet werden; .scss und .sass.

Die Syntax für SASS ähnelt der von gewöhnlichem CSS. Sie benötigen die öffnenden und schließenden Klammern jedoch nicht, wenn Sie Stilregeln in SASS schreiben.

Ein einfacher Ausschnitt von SASS wird wie folgt angezeigt;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Um mit der Verwendung von SASS in Ihrer React-App zu beginnen, müssen Sie zuerst SASS in einfaches CSS kompilieren. Nachdem Sie Ihre App über den Befehl Create React App eingerichtet haben, können Sie node-sass installieren, um sich um die Kompilierung zu kümmern. 

npm install node-sass

Sie können dann Ihre Dateien erstellen und ihnen entweder die Erweiterungen .scss oder .sass geben. Anschließend können Sie Ihre Dateien ganz normal importieren. Zum Beispiel;

import "./Components/App.sass";

Vorteile von SASS/SCSS

  • Es verfügt über viele dynamische Funktionen wie Mixins, Verschachtelung und Erweiterung.
  • Sie haben nicht viel Boilerplate, um CSS-Code zu schreiben, wenn Sie SASS/SCSS verwenden
  So deaktivieren Sie die Lieferung leise auf iMessage

Nachteile von SASS/SCSS

  • Stile sind global, und Sie können daher auf übergeordnete Probleme stoßen.

Was ist der beste Styling-Ansatz?

Da wir fünf Ansätze besprochen haben, möchten Sie wissen, welcher der beste ist. Es ist schwer, den absoluten Gewinner in dieser Diskussion hervorzuheben. Diese Überlegungen helfen Ihnen jedoch, eine fundierte Entscheidung zu treffen:

  • Die Leistungskennzahlen
  • Ob Sie ein Designsystem benötigen
  • Die Leichtigkeit der Optimierung Ihres Codes

Inline-Styling ist geeignet, wenn Sie eine einfache App mit wenigen Codezeilen haben. Alle anderen jedoch; external, SASS, Styled Components und CSS Modules eignen sich für große Apps.

Was sind die Best Practices für die Verwaltung von CSS in einer Large React-Anwendung?

  • Vermeiden Sie Inline-Styling. Das Schreiben von Inline-CSS-Stilen für jedes Tag in einer großen React-App kann ermüdend sein. Verwenden Sie stattdessen ein externes Stylesheet, das Ihren Anforderungen entspricht.
  • Lint deinen Code. Linters wie Stylelint heben Stilfehler in Ihrem Code hervor, damit Sie sie frühzeitig beheben können.
  • Führen Sie regelmäßige Code-Reviews durch. Das Schreiben von CSS scheint Spaß zu machen, aber regelmäßige Codeüberprüfungen machen es einfach, Fehler frühzeitig zu erkennen.
  • Automatisieren Sie Tests Ihrer CSS-Dateien. Enzyme und Jest sind großartige Tools, mit denen Sie Tests an Ihrem CSS-Code automatisieren können.
  • Halten Sie Ihren Code TROCKEN. Wenn Sie sich mit häufig verwendeten Stilen wie Farben und Rändern befassen, verwenden Sie Hilfsvariablen und Klassen, wie es mit dem DRY-Prinzip (Don’t Repeat Yourself) einhergeht.
  • Verwenden Sie Namenskonventionen wie Block Element Modifier. Ein solcher Ansatz macht es einfach, CSS-Klassen zu schreiben, die einfach zu verstehen und wiederzuverwenden sind.

Fazit

Oben sind einige Möglichkeiten aufgeführt, wie Sie React gestalten können. Die Wahl des Styling-Ansatzes hängt von Ihren Bedürfnissen, Fähigkeiten und Ihrem Geschmack ab. Sie können in Ihrer React-App sogar mehrere Styling-Ansätze kombinieren, z. B. Inline- und externe Stylesheets.

Sie können auch einige der besten CSS-Frameworks und -Bibliotheken für Frontend-Entwickler erkunden.