5 moduri de a stila React folosind CSS [2023]

de
Tweet
Share
Share
Pin

Știați că peste 97% dintre siturile web utilizează CSS pentru a defini aspectul vizual?

Tehnologia numită Cascading Style Sheets (CSS) oferă dezvoltatorilor posibilitatea de a construi pagini web atractive, ușor de explorat și bine structurate.

CSS este un limbaj care stabilește modul în care un document, de obicei un fișier scris într-un limbaj de marcare precum XML sau HTML, este prezentat utilizatorului.

Ce înseamnă stilizarea în React?

Unul dintre principalele motive pentru care React a devenit atât de popular este simplitatea cu care se pot crea, lansa și menține aplicații. React nu este doar un cadru, ci mai degrabă o bibliotecă JavaScript, oferind mai mult decât funcții și fragmente de cod deja elaborate.

Disponibilitatea componentelor reutilizabile, flexibilitatea, fiabilitatea codului, viteza și performanțele sale sunt câteva dintre motivele pentru care React se află în topul preferințelor când vine vorba de cadre și biblioteci JavaScript.

Stilizarea în React reprezintă procesul prin care diferite componente ale unei aplicații React sunt transformate în elemente vizuale atrăgătoare, folosind CSS. Trebuie menționat că React utilizează JSX (JavaScript și XML) ca limbaj de marcare în locul HTML. O diferență majoră constă în faptul că HTML utilizează `.class` pentru a specifica clasele, în timp ce JSX folosește `.ClassName` pentru același scop.

De ce este indicat să stilați React cu CSS?

  • Asigurați adaptabilitatea aplicației. Aplicațiile web moderne trebuie să fie accesibile atât pe ecrane mici, cât și pe cele mari. CSS vă dă posibilitatea să implementați interogări media în aplicația React, făcând-o astfel adaptabilă la diferite dimensiuni de afișare.
  • Accelerează procesul de dezvoltare. Puteți reutiliza aceleași reguli CSS în diverse componente ale aplicației React.
  • Facilitează întreținerea aplicației React. Modificarea designului anumitor părți sau componente ale aplicației este simplă cu ajutorul CSS.
  • Îmbunătățește experiența utilizatorului. CSS permite o formatare ușor de înțeles și utilizat. O aplicație React cu text și butoane plasate în locuri logice este simplu de navigat și utilizat.

Dezvoltatorii au la dispoziție mai multe metode pentru a stila aplicațiile React. Câteva dintre cele mai frecvente sunt prezentate în continuare:

Stiluri inline

Stilurile inline reprezintă metoda cea mai simplă de a stila o aplicație React, deoarece nu este necesară crearea unei foi de stil externe. Stilul CSS este aplicat direct în codul React.

Este important de știut că stilurile inline au o prioritate ridicată față de alte stiluri. Prin urmare, dacă există o foaie de stil externă cu o anumită formatare, aceasta va fi înlocuită de stilul inline.

Iată un exemplu de utilizare a stilurilor inline într-o aplicație React:

import React from 'react';

import ReactDOM from 'react-dom/client';

const Header = () => {

  return (

    <>

      <h1 style={{backgroundColor: "lightblue"}}>Salut Lume!!!!!</h1>

      <h2>Adaugă un pic de stil!</h2>

    </>

  );

}

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

root.render(<Header />);

Elementul afișat va prezenta un `h1` cu fundal albastru deschis.

Avantajele stilului inline

  • Rapid. Este metoda cea mai simplă, deoarece adăugați stilul direct elementului pe care doriți să-l stilizați.
  • Are o prioritate ridicată. Stilurile inline au prioritate în fața foilor de stil externe. Așadar, o puteți folosi pentru a vă concentra pe o anumită funcționalitate fără a modifica întreaga aplicație.
  • Excelent pentru prototipare. Puteți folosi stilurile inline pentru a testa funcționalitatea înainte de a implementa formatarea într-o foaie de stil externă.

Dezavantajele stilului inline

  • Poate fi obositor. Aplicarea directă a stilului pentru fiecare element necesită timp.
  • Limitat. Nu puteți folosi funcții CSS avansate, cum ar fi selectoarele și animațiile cu stilurile inline.
  • Un număr mare de stiluri inline face codul JSX greu de citit.

Importul foilor de stil externe

Puteți scrie CSS într-un fișier separat și îl puteți importa în aplicația React. Această abordare este similară cu importul unui fișier CSS în eticheta <head> a unui document HTML.

Pentru a face acest lucru, trebuie să creați un fișier CSS în directorul aplicației, să-l importați în componenta dorită și să scrieți regulile de stil pentru aplicația dvs.

Pentru a demonstra cum funcționează foile de stil CSS externe, puteți crea un fișier CSS și să-l denumiți App.css. Apoi îl puteți exporta după cum urmează.

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

Fragmentul de cod de mai sus importă o foaie de stil externă în componenta App.js. Fișierul App.css se află în directorul Componente.

Avantajele foilor de stil CSS externe

  • Reutilizabile. Puteți folosi aceleași reguli CSS în diferite componente dintr-o aplicație React.
  • Face codul mai ușor de înțeles. Înțelegerea codului este mai ușoară atunci când folosiți foi de stil externe.
  • Oferă acces la funcții CSS avansate. Puteți folosi pseudoclase și selectoare avansate atunci când utilizați foi de stil externe.

Dezavantajele foilor de stil CSS externe

  • Necesită o convenție de denumire clară pentru a se asigura că stilurile nu sunt suprascrise.

Utilizarea modulelor CSS

Aplicațiile React pot crește foarte mult în dimensiune. Numele animațiilor și ale claselor CSS sunt, în mod implicit, globale. Acest lucru poate deveni problematic în cazul foilor de stil ample, deoarece un stil îl poate suprascrie pe altul.

Modulele CSS rezolvă această problemă prin definirea locală a animației și a numelor claselor. Această metodă asigură că numele claselor sunt disponibile numai în fișierul sau componenta unde sunt necesare. Fiecare nume de clasă primește un nume unic generat automat, evitând astfel conflictele.

Pentru a implementa module CSS, creați un fișier cu extensia `.module.css`. Dacă doriți să numiți foaia de stil `style`, numele fișierului va fi `style.module.css`.

Importați fișierul creat în componenta React și sunteți gata să începeți.

Fișierul CSS ar putea arăta astfel:

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Puteți importa modulul CSS în App.js după cum urmează:

import { React } from "react";

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

function App() {

  return (

    <h1 className={styles.heading}>Salut cititor tipstrick.ro</h1>

  );

}

export default App;

Avantajele utilizării modulelor CSS

  • Se integrează ușor cu SCSS și CSS
  • Evită conflictele de nume de clasă

Dezavantajele utilizării modulelor CSS

  • Utilizarea modulelor CSS pentru referirea numelor de clasă poate fi dificilă pentru începători.

Utilizarea componentelor stilizate

Componentele stilizate permit dezvoltatorilor să creeze componente utilizând CSS în codul JavaScript. O componentă stilizată funcționează ca o componentă React care vine cu stiluri integrate. Componentele stilizate oferă stil dinamic și nume de clase unice.

Pentru a începe să utilizați componente stilizate, puteți instala pachetul în directorul rădăcină folosind următoarea comandă:

npm install styled-components

Următorul pas este importarea componentelor stilizate în aplicația React.

Mai jos este un fragment de cod din App.js care utilizează componente stilizate:

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;

Aplicația generată va prelua stilurile de mai sus din componentele stilizate.

Avantajele componentelor stilizate

  • Este previzibil. Stilurile din această metodă de stilizare sunt integrate în componente individuale.
  • Nu este nevoie să vă concentrați pe convențiile de denumire a claselor. Trebuie doar să scrieți stilurile, iar pachetul se va ocupa de restul.
  • Puteți exporta componente stilizate ca proprietăți. Componentele stilizate transformă CSS-ul obișnuit în componente React. Astfel, puteți reutiliza acest cod, extinde stilurile prin intermediul proprietăților și le puteți exporta.

Dezavantajele componentelor stilizate

  • Trebuie să instalați o bibliotecă terță parte pentru a începe.

Foi de stil sintactic uimitoare (SASS/SCSS)

SASS oferă instrumente și funcții mai puternice care lipsesc în CSS-ul obișnuit. Puteți scrie stiluri în două formate diferite, ghidate de aceste extensii: `.scss` și `.sass`.

Sintaxa pentru SASS este asemănătoare cu cea a CSS-ului obișnuit. Totuși, nu mai aveți nevoie de parantezele de deschidere și închidere când scrieți regulile de stil în SASS.

Un simplu fragment SASS ar arăta astfel:

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Pentru a începe să utilizați SASS în aplicația React, trebuie mai întâi să compilați SASS în CSS simplu. După ce ați configurat aplicația prin comanda `Creare aplicație React`, puteți instala `node-sass` pentru a gestiona compilarea.

npm install node-sass

Puteți apoi să creați fișierele și să le dați extensiile `.scss` sau `.sass`. Apoi puteți importa fișierele în mod normal. De exemplu:

import "./Components/App.sass";

Avantajele SASS/SCSS

  • Oferă multe caracteristici dinamice, cum ar fi mixin-uri, imbricare și extindere.
  • Nu trebuie să vă faceți prea multe griji când scrieți cod CSS utilizând SASS/SCSS

Dezavantajele SASS/SCSS

  • Stilurile sunt globale, astfel că puteți întâmpina probleme de prioritate.

Care este cea mai bună metodă de stilizare?

Acum că am analizat cinci metode, doriți să știți care este cea mai bună. Este greu să evidențiem un singur câștigător. Totuși, aceste aspecte vă pot ajuta să luați o decizie în cunoștință de cauză:

  • Măsurătorile de performanță
  • Dacă aveți nevoie de un sistem de design
  • Facilitatea de a vă optimiza codul

Stilul inline este adecvat atunci când aveți o aplicație simplă cu câteva linii de cod. Cu toate acestea, toate celelalte metode (foile de stil externe, SASS, componente stilizate și module CSS) sunt potrivite pentru aplicații mari.

Care sunt cele mai bune practici pentru a menține CSS-ul într-o aplicație React de mari dimensiuni?

  • Evitați stilul inline. Scrierea stilurilor CSS inline pentru fiecare element dintr-o aplicație React mare poate fi obositoare. În schimb, utilizați o foaie de stil externă care să corespundă nevoilor dvs.
  • Verificați codul. Utilizarea unor instrumente de analiză a stilului, precum Stylelint, vă va ajuta să identificați erorile din cod și să le remediați din timp.
  • Faceți recenzii de cod în mod regulat. Scrierea de CSS poate părea distractivă, dar recenziile regulate ale codului ajută la identificarea erorilor din timp.
  • Automatizați testele pentru fișierele CSS. Enzyme și Jest sunt instrumente excelente pe care le puteți folosi pentru a automatiza testele pentru codul CSS.
  • Păstrați codul DRY (Don’t Repeat Yourself – Nu te repeta). Când aveți de a face cu stiluri utilizate frecvent, precum culorile și marginile, utilizați variabile și clase utilitare, conform principiului DRY.
  • Folosiți convenții de denumire, cum ar fi Block Element Modifier (BEM). O astfel de abordare face mai ușor să scrieți clase CSS care sunt ușor de înțeles și reutilizat.

Concluzie

Mai sus sunt câteva dintre modalitățile prin care puteți stila React. Alegerea metodei de stilizare va depinde de nevoile, abilitățile și preferințele dvs. Puteți chiar să combinați mai multe metode, precum stilurile inline și foile de stil externe, în aplicația React.

De asemenea, puteți explora unele dintre cele mai bune cadre și biblioteci CSS pentru dezvoltatorii front-end.