Una guida rapida ai componenti in stile con esempi interattivi

"È interessante ..." Ho pensato quando ho letto per la prima volta dei componenti in stile. E poi sono tornato indietro ai miei comprovati componenti React.

Ma poi Max Stoiber, il co-creatore di componenti in stile, ci ha mostrato la sua nuova libreria al bootcamp di codifica React in Flip Flops. "È interessante" trasformato in "È strabiliante!"

Difficilmente potrei contenere la mia eccitazione. Alla fine ho capito il concetto alla base dei componenti in stile. Ha aperto così tante nuove possibilità su come modellare i componenti. Ha semplificato il modo di strutturare le applicazioni web. E ha rafforzato la coerenza nello stile delle app React.

Tutto è iniziato con modelli letterali con tag

Potresti pensare che sono un po 'vecchia scuola ma credo che se vuoi veramente capire qualsiasi idea, devi avvolgere la testa attorno ai concetti sottostanti. Potremmo immergerci direttamente in componenti stilizzati. Ma prima, scopriamo cosa ha scatenato la curiosità di Max e Glen prima che iniziassero il progetto e che in realtà costruissero componenti in stile.

I letterali dei template di ES6 semplificano il modo in cui puoi mescolare variabili e testo. Se prendi due variabili: nome e stato d'animo, con valori assegnati rispettivamente di "Alice" e "felice", il modello letterale:

const const = = $ {name} è $ {mood} .`;

produrrà una frase: "Alice è felice".

I letterali dei template con tag portano la sintassi ad un passo ulteriore.

I tag sono funzioni JavaScript. Ma ci sono due differenze essenziali rispetto alle funzioni regolari:

  • le funzioni tag vengono chiamate utilizzando la notazione backtick anziché tra parentesi. Nell'esempio seguente, chiamiamo la funzione greetingTag avvolgendo gli argomenti nei backtick:
greetingTag` $ {name} è $ {mood} .`;
  • JavaScript considera il modello letterale - tutto tra i backtick - come argomenti di funzione. Nel primo passaggio, JavaScript trasforma letteralmente il modello in una matrice di stringhe. Le stringhe sono seguite da variabili estratte. Se prendiamo l'esempio sopra, gli argomenti trasformati passati alla funzione greetingTag appariranno come segue:
["", "is", "."], nome, umore

Il primo argomento, un array, contiene tutte le stringhe che abbiamo inserito prima, tra e dopo il nome e le variabili dell'umore. Nel nostro esempio, la prima stringa è vuota perché non c'è nulla prima del nome. I successivi due argomenti, nome e stato d'animo, sono stati estratti dal modello letteralmente come variabili.

Ora, la funzione greetingTag può applicare qualsiasi logica all'array dei testi e alle variabili name e mood e restituire il risultato desiderato.

Creiamo una funzione tag, il greetingTag, che prenderà tre argomenti: una matrice di testi, un nome e una variabile mood. Ed ecco la logica che userà: se il valore dell'umore è "felice", verrà restituita una frase di saluto regolare. In tutti gli altri casi, restituirà la versione allegra del saluto:

const greetingTag = (testi, nome, umore) => {
  if (mood === 'happy') {
    return `Ciao $ {name}!`;
  } altro {
    return `Ciao $ {name}, sei fantastico!`;
  }
}
const greeting = greetingTag` $ {name} è $ {mood} .`;

Ora, se assegnassimo "Alice" al nome e "felice" per l'umore, la funzione greetingTag ritornerebbe: "Ciao Alice!". Se cambiassimo il valore dell'umore in una parola diversa da "felice" - dite "emozionato" o "gatto" - il salutoTag ritornerebbe: "Ciao Alice, sei fantastica!".

Ma come puoi usare questa conoscenza per modellare i componenti di React?

Componenti in stile

Questa domanda esatta ha sconcertato Max e Glenn mentre cercavano un modo migliore e più coerente di definire i componenti di React. L'Aha! giunse il momento in cui si resero conto che i letterali template con tag accettano non solo variabili ma anche funzioni. Come nell'esempio seguente:

const greeting = greetingTag` $ {name => `Hi $ {name}!`} `;

Qui, il greetingTag riceve un modello letterale con una funzione. Una volta che la funzione viene eseguita da greetingTag, greetingTag può applicare ulteriore logica al valore restituito e restituire un risultato.

I componenti con stile sono anche funzioni di tag. Invece di accettare schemi di saluto, accettano letterali di modelli che contengono stili CSS. E invece di salutare le frasi, restituiscono i componenti di React.

Lascia che ti mostri come funziona.

Nota a margine: gli esempi di codice seguenti sono interattivi. Puoi giocare con loro, aggiungere stili e modificare i valori assegnati. Puoi controllare diversi file facendo clic sulle loro schede. Oppure premi il pulsante arancione, blu-arancione o blu in alto per passare da una vista all'altra.

Se si desidera utilizzare componenti con stile nell'applicazione, è necessario installare prima i componenti con stile:

npm install - salva i componenti in stile

Di seguito, ho creato un componente in stile Titolo:

Styled.h1 è una funzione tag. Restituisce un componente React identico a quello seguente:

import React da 'reagire';
const title = ({children}) => 

{children}

Il bello di questa soluzione è che i componenti in stile fanno il lavoro pesante per te - il tuo titolo del componente avrà il colore del blu reale.

So cosa stai pensando: se dovessimo scrivere stili di ogni singolo componente in questo modo, non sarebbe molto diverso dallo scrivere classi CSS. Per fortuna, i componenti in stile sono molto più intelligenti!

Immagina di voler mantenere le intestazioni nere per la maggior parte del tempo e di evidenziarle solo sporadicamente con un colore diverso. Con componenti in stile, possiamo creare un titolo sensibile al colore che sarà nero per impostazione predefinita e cambierà in royalblue ogni volta che gli passiamo un oggetto principale:

Puoi passare oggetti di scena al titolo come a qualsiasi altro componente React. Qui, il secondo titolo riceve l'elica principale. Possiamo accedere agli oggetti di scena all'interno di una dichiarazione di componenti in stile. Questo apre un nuovo mondo di possibilità.

Sopra, ho definito il componente in stile Titolo. Poiché gli oggetti di scena sono accessibili all'interno della dichiarazione del componente in stile, possiamo decidere di che colore sarà il nostro componente. La funzione utilizza l'operatore ternario e restituisce royalblue quando la proprietà primaria è vera e nera altrimenti.

Non è necessario scriverlo esplicitamente come in:

 Ciao Bob, sei fantastico! 

Passare l'elica primaria senza un incarico è come passare
= Primarie {true}.

Poiché la porta è ora spalancata, rendiamo il nostro titolo più universale. A volte potresti aver bisogno del tuo titolo per usare caratteri più piccoli e talvolta più grandi. A volte potresti volere che abbia un peso normale e a volte potresti volerlo distinguere e dargli un peso in grassetto. E a volte potresti voler scrivere in maiuscolo o in maiuscolo il titolo.

I componenti con stile consentono di creare un singolo componente universale. Quindi puoi usarlo ovunque senza pensare più agli stili:

Nell'esempio sopra, alla dimensione del carattere vengono assegnati valori espliciti: 48px o 32px. Tale codice è difficile da mantenere quando la base di codice cresce.

Temi

Quando si crea un set di componenti con stile per un uso successivo, si desidera applicare uno stile coerente in tutta l'applicazione. Vale sempre la pena impostare le regole di stile. Preferibilmente, in un file separato. Successivamente, quando devi cambiare gli stili, invece di visitare nuovamente tutti i tuoi componenti, puoi modificare lo stile in un solo posto.

I componenti con stile ti offrono uno strumento per fare esattamente questo: i temi.

Un tema è un oggetto JavaScript in cui è possibile definire i parametri di stile:

const theme = {
  colori: {
    primario: "royalblue",
    secondario: "teal",
    testo: "nero"
  },
  dimensione del font: {
    xl: "2.4rem",
    lg: "1.8rem",
    md: "1.3rem",
    nm: "1rem",
    sm: "0.75rem"
  }
}

Il tema sopra definisce i colori e le proprietà fontSize. Sarai in grado di accedervi in ​​tutti i componenti con stile in tutta l'applicazione.

Ma prima, devi rendere l'applicazione consapevole del tema. Devi passarlo come prop al ThemeProvider - un componente wrapper fornito da componenti in stile:

importare {ThemeProvider} da "styled-Components";
importa il tema da "./theme.js";
const App = () => (
  
    
       Ciao, Alice!         )

Facciamo l'esempio precedente per imparare come utilizzare un tema e come accedere alle sue proprietà all'interno di componenti con stile.

Nel titolo, puoi accedere all'oggetto tema tramite il props.theme. Ad esempio, per selezionare il colore del titolo, devi prima verificare se un determinato attributo è stato passato al titolo (primario o secondario). Quindi restituisce il valore di colore corrispondente dichiarato nel tema. Se non è stato passato nessuno, si restituisce un colore di testo standard.

Il titolo può ora decidere anche sulle dimensioni dei caratteri. Verifica innanzitutto se è stato passato un prop xl, lg, md o sm e, in base a ciò, assegna il valore appropriato alla proprietà size-font. Se non è stato passato alcun puntello, assegnerà il valore di fontSize.nm definito nel tema.

Abbiamo appena creato un componente flessibile per il titolo. Ora puoi usarlo senza doversi preoccupare dei CSS. Puoi decidere il suo aspetto esclusivamente passando un set specifico di oggetti di scena.

Estensione di componenti in stile

La creazione di un solo componente Titolo non è sufficiente. Ad esempio, su una pagina del blog, avrai bisogno di un tag h1 per il titolo di un post e di un tag h2 per i sottotitoli. Sono necessari anche paragrafi per visualizzare il testo.

I componenti con stile sono facilmente estensibili. È possibile creare un nuovo componente Sottotitoli con un tag h2 e copiare e incollare tutte le regole di stile dal titolo. Oppure puoi estendere il componente Titolo con il metodo withComponenthelper. Il sottotitolo avrà tutte le proprietà di un titolo ma utilizzerà un tag h2:

const Sottotitolo = Title.withComponent ("h2");

È possibile estendere il titolo per creare il componente Testo con un tag p e, allo stesso tempo, correggere il suo colore come tema.testo e impostare l'altezza della linea su 1,65? Anche qui i componenti in stile brillano:

const Paragrafo = Title.withComponent ("p");
const Text = paragraph.extend`
  color: $ {props => props.theme.colors.text};
  altezza della linea: 1,65;

Innanzitutto, abbiamo creato un componente di paragrafo intermedio che avrà tutte le regole di stile del titolo. Tuttavia, utilizzeremo il tag p e quindi il componente di testo che estende il paragrafo e imposta le sue proprietà di colore e altezza della linea. Di seguito è possibile controllare il codice per i componenti Titolo, Sottotitolo e Testo:

I componenti con stile ti consentono di scrivere un normale CSS in JavaScript. Inoltre, puoi annidare gli stili CSS e le pseudo-classi. È possibile aggiungere media query e attributi. Infine, utilizzando il metodo helper injectGlobal, è possibile iniettare regole di stile globali e importare i caratteri.

Pseudo-classi

Per imparare a utilizzare le pseudo-classi, creiamo un componente Button che cambierà il colore quando ci passiamo sopra con il mouse.

Sopra, ho annidato la pseudo-classe &: hover per cambiare il colore ogni volta che passi il mouse sopra il pulsante. Puoi usare qualsiasi pseudo-classe disponibile nei CSS allo stesso modo.

Iniettare stili globali con componenti stilizzati

Invece di importare il file degli stili globali, è possibile utilizzare l'helper injectGlobal per aggiungere stili globali all'applicazione. Innanzitutto, devi importare l'helper injectGlobal:

importato in stile, {ThemeProvider, injectGlobal} da "componenti con stile";

Nell'esempio seguente, sto usando injectGlobal per:

  • importa i caratteri e imposta la famiglia di caratteri per tutti gli elementi su "Montserrat".
  • resetta margini, risvolti e bordi.
  • cambia la dimensione del carattere dell'elemento radice usando media-query per la dimensione dello schermo inferiore a screen.medium e screen.mobile. Entrambi sono definiti nel tema.

I temi dei componenti in stile rafforzano la coerenza. Per saperne di più, esplora una delle migliori documentazioni che abbia mai visto: Documenti con componenti in stile.

Grazie alla curiosità di Max e Glen, i componenti in stile offrono uno straordinario set di strumenti per lo stile delle applicazioni React. L'ecosistema di componenti in stile è in forte espansione. Visita la pagina dell'ecosistema per esplorare i componenti e i sistemi di griglia pronti all'uso. Esamina i molti altri strumenti creati con componenti stilizzati.

Conclusione

In questo tutorial, hai imparato come funzionano i valori letterali del modello con tag. Hai anche imparato a utilizzare i componenti stilizzati per costruire componenti React universali. Ora capisci come usare un tema per implementare gli stili coerenti della tua prossima applicazione.

I componenti con stile rappresentano un nuovo modo di definire le applicazioni React. Componenti originali:

  • ti consente di costruire componenti riutilizzabili e universali
  • imporre la coerenza dello stile
  • ti permettono di nidificare gli stili
  • aggiungere prefissi fornitore quando necessario
  • sono semplicemente fantastici!

Se ti è piaciuto questo articolo, anche 50 volte, lo apprezzerei molto e fa una grande differenza per me.

Di recente ho pubblicato un tutorial gratuito su React per principianti. Se vuoi imparare a creare un'applicazione web da zero, è un ottimo punto di partenza. Imparerai come creare un'app per aiutarti a trovare il film migliore da guardare Sweet Pumpkins