Een beknopte handleiding voor gestileerde componenten met interactieve voorbeelden

"Dat is interessant ..." dacht ik toen ik voor het eerst las over componenten in stijl. En toen ging ik meteen terug naar mijn beproefde React-componenten.

Maar toen toonde Max Stoiber, de co-maker van stijlcomponenten, ons zijn nieuwe bibliotheek bij de bootcamp React in Flip Flops. "Dat is interessant" werd "Dat is verbazingwekkend!"

Ik kon mijn opwinding nauwelijks bedwingen. Ik begreep eindelijk het concept achter stijlcomponenten. Het opende zoveel nieuwe mogelijkheden om componenten te stylen. Het vereenvoudigde de manier om webapplicaties te structureren. En het dwong de consistentie in de stijl van React-apps.

Het begon allemaal met getagde sjabloonliterals

Je denkt misschien dat ik een beetje ouderwets ben, maar ik geloof dat als je een idee echt wilt begrijpen, je je hoofd rond de onderliggende concepten moet wikkelen. We kunnen meteen in stijlonderdelen duiken. Maar laten we eerst kijken wat de nieuwsgierigheid van Max en Glen heeft aangewakkerd voordat ze aan het project begonnen en daadwerkelijk componenten bouwden.

ES6's sjabloonliterals vereenvoudigen de manier waarop u variabelen en tekst kunt combineren. Als u twee variabelen neemt: naam en stemming, met toegewezen waarden voor respectievelijk "Alice" en "happy", is de sjabloon letterlijk:

const zin = `$ {name} is $ {mood} .`;

zal een zin produceren: "Alice is gelukkig."

Getagde sjabloonliterals gaan nog een stap verder.

Tags zijn JavaScript-functies. Maar er zijn twee essentiële verschillen in vergelijking met reguliere functies:

  • tagfuncties worden opgeroepen met behulp van backticks-notatie in plaats van haakjes. In het onderstaande voorbeeld roepen we de functie greetingTag aan door de argumenten in backticks te plaatsen:
greetingTag` $ {name} is $ {mood} .`;
  • JavaScript behandelt de sjabloon letterlijk - alles tussen backticks - als functieargumenten. In de eerste stap transformeert JavaScript het letterlijke sjabloon in een reeks tekenreeksen. De strings worden gevolgd door geëxtraheerde variabelen. Als we het bovenstaande voorbeeld nemen, zien de getransformeerde argumenten die aan de greetingTagfunction zijn doorgegeven er als volgt uit:
["", "is", "."], naam, stemming

Het eerste argument, een array, bevat alle tekenreeksen die we vóór, tussen en na de naam en de stemmingsvariabelen hebben geplaatst. In ons voorbeeld is de eerste string leeg omdat er niets vóór de naam staat. De volgende twee argumenten, naam en stemming, werden als variabelen uit de sjabloon gehaald.

Nu kan de groetTag-functie elke logica toepassen op de matrix van de tekst en de naam- en stemmingsvariabelen en het gewenste resultaat teruggeven.

Laten we een tagfunctie maken, de greetingTag, waarvoor drie argumenten nodig zijn: een tekstarray, een naam en stemmingsvariabelen. En hier is de logica die het zal gebruiken: als de waarde van stemming "gelukkig" is, retourneert het een normale begroetingszin. In alle andere gevallen retourneert het de cheer-upversie van de begroeting:

const greetingTag = (teksten, naam, stemming) => {
  if (mood === 'happy') {
    retourneer `Hallo $ {name}!`;
  } anders {
    retourneer `Hallo $ {name}, je bent geweldig!`;
  }
}
const greeting = greetingTag` $ {name} is $ {mood} .`;

Als we nu "Alice" toewijzen aan de naam en "gelukkig" aan de stemming, zou de functie groetTag terugkeren: "Hallo Alice!". Als we de waarde van de stemming zouden veranderen in een ander woord dan "blij" - zeg "opgewonden" of "kat" - zou de groetTag terugkeren: "Hallo Alice, je bent geweldig!".

Maar hoe kun je deze kennis gebruiken om React-componenten te stylen?

Gestileerde componenten

Deze exacte vraag bracht Max en Glenn in verwarring terwijl ze op zoek waren naar een betere en consistentere manier om componenten van React te stylen. De Aha! het moment kwam toen ze zich realiseerden dat getagde sjabloonliteralen niet alleen variabelen maar ook functies accepteren. Zoals in het onderstaande voorbeeld:

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

Hier ontvangt de greetingTag een letterlijke sjabloon met een functie. Nadat de functie is uitgevoerd door de greetingTag, kan de greetingTag verdere logica toepassen op de geretourneerde waarde en een resultaat retourneren.

Gestileerde componenten zijn ook tag-functies. Maar in plaats van begroetingspatronen te accepteren, accepteren ze sjabloonliteralen die CSS-stijlen bevatten. En in plaats van zinnen te begroeten, geven ze React-componenten terug.

Ik zal je laten zien hoe het werkt.

Kanttekening: de onderstaande codevoorbeelden zijn interactief. Je kunt ermee spelen, stijlen toevoegen en toegewezen waarden wijzigen. U kunt verschillende bestanden inspecteren door op hun tabbladen te klikken. Of druk op de oranje, blauw-oranje of blauwe knop bovenaan om te schakelen tussen verschillende weergaven.

Als u stijlcomponenten in uw toepassing wilt gebruiken, moet u eerst stijlcomponenten installeren:

npm install - bewaar stijl-componenten

Hieronder heb ik een gestileerde componenttitel gemaakt:

De gestileerde.h1 is een tag-functie. Het retourneert een React-component die identiek is aan die hieronder:

importeren Reageren van 'reageren';
const Title = ({children}) => 

{children}

Het mooie van deze oplossing is dat gestileerde componenten het zware werk voor u doen - uw componenttitel heeft de kleur van royalblue.

Ik weet wat je denkt: als we op deze manier stijlen van elk onderdeel zouden moeten schrijven, zou dat niet veel anders zijn dan het schrijven van CSS-klassen. Gelukkig zijn gestileerde componenten veel slimmer!

Stel je voor dat je je headers meestal zwart wilt houden en ze slechts sporadisch wilt markeren met een andere kleur. Met gestileerde componenten kunnen we een kleurbewuste titel maken die standaard zwart is en veranderen in royalblue wanneer we deze een primaire prop doorgeven:

Je kunt rekwisieten doorgeven aan de titel zoals elk ander React-onderdeel. Hier ontvangt de tweede titel de primaire prop. We hebben toegang tot de rekwisieten in een opgemaakte componentverklaring. Dat opent een hele nieuwe wereld van mogelijkheden.

Hierboven heb ik de stijlcomponent Titel gedefinieerd. Omdat de rekwisieten toegankelijk zijn in de gestileerde componentdeclaratie, kunnen we beslissen welke kleur onze component krijgt. De functie gebruikt de ternaire operator en retourneert royalblue wanneer de primaire eigenschap true is en anders zwart.

U hoeft het niet expliciet te schrijven zoals in:

 Hallo Bob, je bent geweldig! 

Het slagen voor de primaire prop zonder een opdracht is als passen
primaire = {true}.

Omdat de deur nu wijd open staat, laten we onze titel universeler maken. Soms heb je je titel nodig om kleinere lettertypen te gebruiken en soms groter. Soms wilt u dat het een normaal gewicht heeft en soms wilt u dat het opvalt en het een vet lettertype geeft. En soms wilt u de titel in hoofdletters of in hoofdletters plaatsen.

Met gestileerde componenten kunt u een enkele universele component maken. Dan kun je het overal gebruiken zonder na te denken over stijlen:

In het bovenstaande voorbeeld is aan de lettergrootte expliciete waarden toegewezen: 48 px of 32 px. Een dergelijke code is moeilijk te onderhouden wanneer de codebasis groeit.

Thema's

Wanneer u een set met vormgegeven componenten voor later gebruik maakt, wilt u een consistente stijl afdwingen in de toepassing. Het is altijd de moeite waard om de stijlregels in te stellen. Bij voorkeur in een apart bestand. Later, wanneer u de stijlen moet veranderen, in plaats van al uw componenten opnieuw te bezoeken, kunt u de styling op slechts één plaats wijzigen.

Gestileerde componenten bieden u een tool om precies dat te doen - thema's.

Een thema is een JavaScript-object waar u stijlparameters kunt definiëren:

const theme = {
  kleuren: {
    primair: "royalblue",
    secundair: "groenblauw",
    tekst: "zwart"
  },
  lettertypegrootte: {
    xl: "2.4rem",
    lg: "1.8rem",
    md: "1.3rem",
    nm: "1rem",
    sm: "0.75rem"
  }
}

Het bovenstaande thema definieert kleuren en fontSize-eigenschappen. U hebt toegang tot alle componenten in de stijl van de toepassing.

Maar eerst moet u de toepassing bewust maken van het thema. Je moet het doorgeven als een prop aan de ThemeProvider - een wrapper-component geleverd door gestileerde componenten:

importeer {ThemeProvider} uit "stijl-componenten";
thema importeren uit "./theme.js";
const App = () => (
  
    
       Hallo Alice!         )

Laten we het vorige voorbeeld nemen om te leren hoe u een thema kunt gebruiken en hoe u de eigenschappen ervan binnen gestileerde componenten kunt openen.

In de titel hebt u toegang tot het themaobject via het props.theme. Als u bijvoorbeeld de kleur van de titel wilt selecteren, controleert u eerst of een bepaald kenmerk is doorgegeven aan de titel (primair of secundair). Retourneer vervolgens de overeenkomstige kleurwaarde die in het thema is opgegeven. Als er geen is doorgegeven, retourneert u een standaardtekstkleur.

De titel kan nu ook beslissen over de lettergroottes. Het controleert eerst of een xl-, lg-, md- of sm-prop is doorgegeven en wijst op basis daarvan de juiste waarde toe aan de eigenschap font-size. Als er geen prop is doorgegeven, wordt de waarde fontSize.nm toegewezen die in het thema is gedefinieerd.

We hebben zojuist een flexibele titelcomponent gemaakt. Nu kunt u het gebruiken zonder u zorgen te maken over CSS. Je kunt het uiterlijk exclusief bepalen door een specifieke set rekwisieten te passeren.

Uitbreiden van stijlcomponenten

Het is niet voldoende om slechts één component Titel te maken. Op een blogpagina hebt u bijvoorbeeld een h1-tag nodig voor een posttitel en een h2-tag voor ondertitels. U hebt ook alinea's nodig om tekst weer te geven.

Gestileerde componenten zijn eenvoudig uit te breiden. U kunt een nieuwe ondertitelingcomponent maken met een h2-tag en alle stijlregels uit de titel kopiëren en plakken. Of u kunt het component Titel uitbreiden met de methode withComponenthelper. De ondertitel heeft alle eigenschappen van een titel, maar gebruikt een h2-tag:

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

U kunt de titel uitbreiden om de tekstcomponent met een p-tag te maken en tegelijkertijd de kleur als een thema aanpassen en de lijnhoogte instellen op 1,65? Ook hier schitteren stijlcomponenten:

const Alinea = Title.withComponent ("p");
const Text = Alinea.extend`
  kleur: $ {props => props.theme.colors.text};
  lijnhoogte: 1,65;

Eerst hebben we een intermediaire paragraafcomponent gemaakt met alle stijlregels van de titel. We zullen echter de p-tag gebruiken en vervolgens de tekstcomponent die de alinea uitbreidt en de kleur- en regelhoogte-eigenschappen instelt. Hieronder kunt u de code voor de componenten Titel, Ondertitel en Tekst bekijken:

Met gestileerde componenten kunt u een normale CSS in JavaScript schrijven. Bovendien kunt u de CSS-stijlen en pseudoklassen nesten. U kunt mediaquery's en attributen toevoegen. Ten slotte kunt u met de methode injectGlobal helper globale stijlregels injecteren en lettertypen importeren.

Pseudo-classes

Laten we, om te leren hoe de pseudoklassen te gebruiken, een component Knop maken die de kleur zal veranderen wanneer we de muis eroverheen bewegen.

Hierboven nestelde ik de &: hover pseudo-klasse om de kleur te veranderen wanneer je de muis over de knop beweegt. U kunt elke pseudoklasse die beschikbaar is in CSS op dezelfde manier gebruiken.

Globale stijlen injecteren met stijlcomponenten

In plaats van het bestand met globale stijlen te importeren, kunt u de injectGlobal-helper gebruiken om globale stijlen aan uw toepassing toe te voegen. Eerst moet u de injectGlobal-helper importeren:

stijl, {ThemeProvider, injectGlobal} importeren uit "stijl-componenten";

In het onderstaande voorbeeld gebruik ik injectGlobal om:

  • importeer lettertypen en stel de lettertypefamilie voor alle elementen in op "Montserrat".
  • marges, opvullingen en randen opnieuw instellen.
  • verander de lettergrootte van het root-element met behulp van de media-query voor de schermgrootte kleiner dan screen.medium en screen.mobile. Beide zijn gedefinieerd in het thema.

Gestileerde componententhema's zorgen voor consistentie. Voor meer informatie, verken een van de beste documentatie die ik ooit heb gezien: Documenten met gestileerde componenten.

Dankzij de nieuwsgierigheid van Max en Glen bieden gestileerde componenten je een verbazingwekkende set tools om React-applicaties te stylen. Het gestileerde componenten-ecosysteem is booming. Ga naar de pagina Ecosysteem om de kant-en-klare componenten en rastersystemen te verkennen. Bekijk de vele andere tools die zijn gebouwd met gestileerde componenten.

Gevolgtrekking

In deze zelfstudie hebt u geleerd hoe de getagde sjabloonletterwoorden werken. U hebt ook geleerd hoe u gestileerde componenten kunt gebruiken om universele React-componenten te bouwen. U begrijpt nu hoe u een thema kunt gebruiken om de consistente stijlen van uw volgende toepassing te implementeren.

Gestileerde componenten is een nieuwe manier om React-toepassingen te stylen. Uit de doos, gestileerde componenten:

  • laat u herbruikbare en universele componenten bouwen
  • de consistentie van styling afdwingen
  • kunt u stijlen nesten
  • voeg indien nodig leveranciersvoorvoegsels toe
  • zijn gewoon geweldig!

Als je dit artikel zelfs 50 keer leuk vond - zou ik het erg waarderen en het maakt een enorm verschil voor mij.

Ik heb onlangs een gratis React-tutorial voor beginners gepubliceerd. Als je wilt leren hoe je een webapplicatie helemaal opnieuw kunt bouwen, is dit een prima startpunt. Je leert hoe je een app bouwt om je te helpen de beste film te vinden om naar te kijken Sweet Pumpkins