React är ett av de mest populära JavaScript-biblioteken för att bygga användargränssnitt.
Om du vill bli en front-end-utvecklare eller hitta ett jobb inom webbutveckling skulle du förmodligen tjäna på att lära dig React på djupet.
I det här inlägget kommer du att lära dig några av grunderna i React som att skapa en komponent, JSX-syntaxen och Props. Om du inte har någon eller liten erfarenhet av React är det här inlägget för dig.
För att börja, så här kan du installera React.
Vad är JSX?
Det första du inser efter att du har installerat ditt första React-projekt är att en JavaScript-funktion returnerar lite HTML-kod:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Det här är ett speciellt och giltigt syntaxutvidgande för React som kallas JSX (JavaScript XML). Normalt i frontend-relaterade projekt håller vi HTML-, CSS- och JavaScript-koden i separata filer. Men i React fungerar detta lite annorlunda.
I React-projekt skapar vi inte separata HTML-filer, eftersom JSX gör det möjligt för oss att skriva HTML och JavaScript kombinerat i samma fil, som i exemplet ovan. Du kan dock separera din CSS i en annan fil.
I början kan JSX verka lite konstigt. Men oroa dig inte, du kommer att vänja dig vid det.
JSX är mycket praktiskt, eftersom vi också kan exekvera all JavaScript-kod (logik, funktioner, variabler och så vidare) inne i HTML direkt med hjälp av parenteser { }, så här:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Det går också att tilldela HTML-taggar till JavaScript-variabler:
const message = <h1>React is cool!</h1>;Och du kan returnera HTML inuti JavaScript-logik (t.ex. if-else-fall):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Jag kommer inte att gå in på fler detaljer om JSX, men se till att du tar hänsyn till följande regler när du skriver JSX:
- HTML- och komponenttaggar måste alltid stängas < />
- Vissa attribut som ”class” blir ”className” (eftersom class hänvisar till JavaScript-klasser), ”tabindex” blir ”tabIndex” och ska skrivas med kamelkaraktär
- Vi kan inte returnera mer än ett HTML-element på en gång, så se till att de är inplacerade i en överordnad tagg:
return ( <div> <p>Hello</p> <p>World</p> </div>);- Och som ett alternativ kan du slå in dem med tomma taggar:
return ( <> <p>Hello</p> <p>World</p> </>);Du kan också titta på min React for Beginners-tutorial för mer information:
Vad är Functional & Class Components?
När du har vant dig vid JSX-syntaxen är nästa sak att förstå den komponentbaserade strukturen i React.
Om du återser exempelkoden högst upp i det här inlägget ser du att JSX-koden returneras av en funktion. Men funktionen App( ) är inte en vanlig funktion – den är faktiskt en komponent. Så vad är en komponent?
Vad är en komponent?
En komponent är ett oberoende, återanvändbart kodblock som delar upp användargränssnittet i mindre delar. Om vi till exempel bygger Twitters användargränssnitt med React:
Istället för att bygga hela användargränssnittet i en enda fil kan och bör vi dela upp alla sektioner (markerade med rött) i mindre oberoende delar. Med andra ord är detta komponenter.
React har två typer av komponenter: funktionella och klassmässiga. Låt oss nu titta närmare på var och en av dem.
Funktionella komponenter
Den första och rekommenderade komponenttypen i React är funktionella komponenter. En funktionell komponent är i princip en JavaScript/ES6-funktion som returnerar ett React-element (JSX). Enligt Reacts officiella dokumentation är funktionen nedan en giltig funktionell komponent:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternativt kan du också skapa en funktionell komponent med definitionen av pilfunktionen:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Den här funktionen är en giltig React-komponent eftersom den tar emot ett enda ”props”-objektargument (som står för properties) med data och returnerar ett React-element. – reactjs.org
För att kunna använda en komponent senare måste du först exportera den så att du kan importera den någon annanstans:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;När du importerat den kan du anropa komponenten som i det här exemplet:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Så en funktionell komponent i React:
- är en JavaScript/ES6-funktion
- måste returnera ett React-element (JSX)
- börjar alltid med en stor bokstav (namnkonvention)
- tar props som en parameter om det behövs
Vad är klasskomponenter?
Den andra typen av komponent är klasskomponenten. Klasskomponenter är ES6-klasser som returnerar JSX. Nedan ser du samma Welcome-funktion, den här gången som en klasskomponent:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Till skillnad från funktionella komponenter måste klasskomponenter ha en extra render( ) metod för att returnera JSX.
Varför använder vi klasskomponenter?
Vi brukade använda klasskomponenter på grund av ”state”. I de äldre versionerna av React (version < 16.8) var det inte möjligt att använda tillstånd i funktionella komponenter.
Därför behövde vi funktionella komponenter för att endast rendera användargränssnittet, medan vi använde klasskomponenter för datahantering och vissa ytterligare operationer (som livscykelmetoder).
Detta har ändrats i och med införandet av React Hooks, och nu kan vi även använda tillstånd i funktionella komponenter. (Jag kommer att ta upp tillstånd och hooks i mina följande inlägg, så strunta i dem för tillfället).
En klasskomponent:
- är en ES6-klass, blir en komponent när den ”förlänger” en React-komponent.
- tar Props (i konstruktören) om det behövs
- måste ha en render( ) metod för att returnera JSX
Vad är Props i React?
Ett annat viktigt koncept för komponenter är hur de kommunicerar. React har ett speciellt objekt som kallas prop (står för property) som vi använder för att transportera data från en komponent till en annan.
Men var försiktig – props transporterar bara data i ett enkelriktat flöde (bara från föräldra- till barnkomponenter). Det är inte möjligt med props att överföra data från barn till förälder, eller till komponenter på samma nivå.
Låt oss återgå till App( )-funktionen ovan för att se hur man överför data med props.
Först måste vi definiera ett prop på Welcome Component och tilldela det ett värde:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Props är anpassade värden och de gör också komponenterna mer dynamiska. Eftersom Welcome-komponenten är barnet här måste vi definiera props på dess förälder (App), så att vi kan skicka värdena och få resultatet helt enkelt genom att komma åt prop ”name”:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props Are Really Useful
Så React-utvecklare använder props för att skicka data och de är användbara för det här jobbet. Men hur är det med hantering av data? Props används för att skicka data, inte för att manipulera dem. Jag kommer att täcka hantering av data med React i mina framtida inlägg här på freeCodeCamp.
Under tiden, om du vill lära dig mer om React & Webbutveckling, är du välkommen att prenumerera på min YouTube-kanal.
Tack för att du läste!