Hur bra är stålkomponenter i React för styling av webbsidor? Om du frågar oss skulle vi säga att det är ganska bra!
Att lägga till stil på webbsidor med hjälp av formaterade komponenter har varit den praxis som ger applikationer det typiska utseendet.
Så vad sägs om att vi lär oss lite om hur du stylar dina appar? Låt oss börja!
Vilka är förutsättningarna?
Har du följande förutsättningar installerad och igång för att följa kodning delen?
- Kommandoradsgränssnitt körs på administrativa behörigheter
- JavaScript och CSS-förståelse
- Garn- eller npm-pakethanterare
- som VS-kod efter eget val
- Den senaste versionen av Node.JS
Vad är React och dess komponenter?
React är ett JavaScript-bibliotek med öppen källkod som drivs av Facebook Inc. Om du ser fram emot att bygga en app i ett urbant och lyhört användargränssnitt och komponenter, då är React din bästa handling. React är ett av de mest föredragna ramverken för frontend-utvecklare eftersom det är komponentbaserat.
React i front-end integrerar väl med backend-bibliotek som Node.JS, Django, Java bland andra. Som ett snabbt, enkelt och skalbart ramverk utökar React data ändringar i dina applikationer utan att behöva ladda om applikationerna.
Applikationer byggda med React har möjlighet att utveckla var och en av dess delar separat och kan återanvändas som en komponent. React-komponenter är återanvändbara JavaScript-funktioner som hanterar vad som visas på användargränssnittet och i vilken sekvens det visas. React-komponenterna returnerar HTML-skript och andra delar byggda separat som JSX-kod genom render()-funktionen.
Dessa komponenter samlas sedan ihop för att skapa komplexa användargränssnitt. Dessutom gör React-komponenterna det möjligt för utvecklare att segmentera applikationens användargränssnitt i oberoende och återanvändbara sektioner för att engagera varje sektion i segregering.
Delarna i en webbapplikation som navigeringsfält, sökfält, rubrik och andra sektioner byggs som komponenter och slås samman till ett enda användargränssnitt med hjälp av React-komponenter. Komponenterna i React kan skrivas som funktioner eller klasser. Funktioner eller klasser accepterar definierade input/props för att fixa vad som ska levereras på webbläsarna.
Rekvisita är som funktionsargument som skickar data som indata från en komponent till den andra. I JavaScript tar den funktionella komponenten in enstaka rekvisita som ett argument som överförs till en komponent och returnerar ett react-element utan att använda metoden render().
När det gäller klass komponenter, baskomponenter- React. Komponent – returnera alla definierade React-element genom metoden react().
I React är knappar, innehållsområden, navigering, dialogrutor etc. några av frontend-delarna som kan definieras som komponenter. Låt oss nu se mer om Reacts stilade komponenter.
Stora styling strategier i Reactsägs
Vadom att nu diskutera de mest populära moderna styling strategierna i React och hur man använder dem för att styla dina React-komponenter? Här är några av de bästa styling strategierna i React:
- CSS- och SCSS-stilmallar
Separata stilmallar är som det traditionella sättet att styla HTML-webbplatser med CSS eller CSS-förprocessor-SCSS.
- CSS-moduler
CSS-moduler är CSS-filer där alla klassnamn tillsammans med animationsnamn är definierade i den lokala inställningen som standard.
- Stiliserade komponenter
Styled-components är ett bibliotek skapat för React och React Native-utvecklare, vilket gör att de kan använda stilar på komponentnivå i sina applikationer. Stilade komponenter är en kombination av JavaScript och CSS som använder CSS-in-JS-tekniken.
- JSS
JSS är ett författarverktyg för CSS som använder JavaScript för att beskriva stilar på ett problemfritt, deklarativt och återanvändbart sätt som kompileras i webbläsaren, på serversidan eller vid byggtid i noden.
Vad är React Style-Components?
Som redan nämnts är stilade komponenter ett bibliotek skapat för React och React Native-utvecklare, vilket gör att de kan använda stilar på komponentnivå i sina applikationer. Stilade komponenter är en kombination av JavaScript och CSS som använder CSS-in-JS-tekniken.
CSS erbjuder utvecklare flexibiliteten att återanvända sina koder för ett visst projekt för ett annat. Detta är möjligt eftersom formaterade komponenter är centrerade på taggade malllitterals, vilket innebär att CSS-koderna skrivs mellan backticks medan du stylar dina komponenter. Ett annat plus med formaterade komponenter är att de inte kräver mappning av de redan skapade komponenterna till externa CSS-stilar.
Mer om Styled-Components:
Styled-components vi skapade med samma funktion som CSS-moduler. På så sätt begränsas omfattningen av CSS till en enskild komponent och kommer att vara oåtkomlig för något annat element på sidan eller till och med komponent.
Säg att du måste göra styling i filen Box.js. Följande är stegen att följa:
- Installera styled-components- biblioteket genom att köra npm install styled-components –save.
- Importera ett bibliotek med formaterade komponenter till din komponent genom att skriva importformat från “formaterade komponenter”;.
- Skapa en variabel genom att välja ett HTML-element där stilnycklar lagras.
- Använd namnet på den skapade variabeln som ett omslag runt JSX-elementen.
Ovanstående steg kan sammanfattas i ett kodformat. I cod-formatet, formaterade objekt från formaterade komponenter som använder taggade malllitterals för styling. En variabel skapas sedan för att hålla stylingen och fungera som ett omslag runt innehållet. För detta har vi <Box> och <Content> taggar, för att tilldela formaterade objekt plus HTML-elementet för styling följt av de medföljande stilarna för HTML-elementet. JSX eller innehåll mellan dem som taggar lindas för att använda variablerna som skapats för styling.
importera Reagera från ‘reagera’;
importera stil från ‘stilade komponenter;
const Box = styled.div`
margin: 40px;
kant: 5px svart;
`;
const Innehåll = styled.p`
font-size: 16px;
text-align: center;
`;
konst Låda = () => (
<Box>
<Content> Styling React Components </Content>
</Box>
);
exportera standardbox; tack
Vilka är fördelarna med stylade komponenter?
- Ange unika klassnamn för dina stilar och minimera därmed klassnamn problem som namn dubbletter, felstavningar och överlappningar.
- Enkel identifiering av CSS som tillämpas och enkel radering av oanvända komponent stilar eftersom styling är kopplat till en specifik komponent.
- Enkel och smart styling som möjliggörs genom stödda rekvisita och globala teman, vilket upphäver kravet på att manuellt hantera delar av klasser.
- Oavsett storleken på din kodbas kan du importera olika stilar till andra projektområden.
Slutnot: Varför är den stilade komponenten i React viktig?
- Konsistensen gör det enkelt att publicera en React-komponent till NPM med en formaterad komponent. Utan att krocka med CDS-väljare, kan komponenterna anpassas med hjälp av rekvisita och/eller förlängas genom styled(Component).
- Utan att installera SASS eller några extra byggverktyg kan du få SAS varumärkes syntax direkt.
- I React, för att dynamiskt ändra stilar eller justera stilen på det sätt du vill, kan du använda rekvisita.
- Med Theme Context kan du få ett tema objekt tillgängligt för alla dina komponenter, och som standard kan det infogas i stiliserade definitioner.
Behöver du fler anledningar att gilla React-stilade komponenter? Våra experter finns inom räckhåll! Prova Webdura!
