React er et af de mest populære JavaScript-biblioteker til at bygge brugergrænseflader.
Hvis du ønsker at blive frontend-udvikler eller finde et job inden for webudvikling, vil du sandsynligvis have gavn af at lære React i dybden.
I dette indlæg vil du lære nogle af de grundlæggende ting i React, såsom oprettelse af en komponent, JSX-syntaksen og Props. Hvis du ikke har nogen eller kun lidt erfaring med React, er dette indlæg for dig.
For at starte med kan du her se, hvordan du installerer React.
Hvad er JSX?
Det første, du vil indse, når du har installeret dit første React-projekt, er, at en JavaScript-funktion returnerer noget HTML-kode:
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 er en særlig og gyldig syntaksudvidelse til React, som kaldes JSX (JavaScript XML). Normalt i frontend-relaterede projekter opbevarer vi HTML-, CSS- og JavaScript-kode i separate filer. Men i React fungerer det lidt anderledes.
I React-projekter opretter vi ikke separate HTML-filer, fordi JSX giver os mulighed for at skrive HTML og JavaScript kombineret sammen i samme fil, som i eksemplet ovenfor. Du kan dog adskille din CSS i en anden fil.
I begyndelsen virker JSX måske lidt mærkeligt. Men bare rolig, du skal nok vænne dig til det.
JSX er meget praktisk, fordi vi også kan udføre enhver JavaScript-kode (logik, funktioner, variabler osv.) inde i HTML direkte ved hjælp af parenteser { }, som her:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Det er også muligt at tildele HTML-tags til JavaScript-variabler:
const message = <h1>React is cool!</h1>;Og du kan returnere HTML inde i JavaScript-logik (f.eks. if-else-tilfælde):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Jeg vil ikke gå yderligere i detaljer med JSX, men sørg for at tage følgende regler i betragtning, når du skriver JSX:
- HTML- og komponenttags skal altid lukkes < />
- Nogle attributter som “class” bliver til “className” (fordi class henviser til JavaScript-klasser), “tabindex” bliver til “tabIndex” og skal skrives camelCase
- Vi kan ikke returnere mere end ét HTML-element på én gang, så sørg for at pakke dem ind i et overordnet tag:
return ( <div> <p>Hello</p> <p>World</p> </div>);- eller som alternativ kan du indpakke dem med tomme tags:
return ( <> <p>Hello</p> <p>World</p> </>);Du kan også se min React for Begyndere tutorial for mere info:
Hvad er funktionelle & klassekomponenter?
Når du har vænnet dig til JSX-syntaksen, er det næste, du skal forstå, den komponentbaserede struktur i React.
Hvis du genlæser eksempelkoden øverst i dette indlæg, vil du se, at JSX-koden returneres af en funktion. Men funktionen App( ) er ikke en almindelig funktion – den er faktisk en komponent. Så hvad er en komponent?
Hvad er en komponent?
En komponent er en uafhængig, genanvendelig kodeblok, som opdeler brugergrænsefladen i mindre stykker. Hvis vi f.eks. skulle bygge Twitters brugergrænseflade med React:
I stedet for at bygge hele brugergrænsefladen under en enkelt fil kan og bør vi opdele alle sektionerne (markeret med rødt) i mindre uafhængige stykker. Det er med andre ord komponenter.
React har to typer komponenter: funktionelle komponenter og klassekomponenter. Lad os nu se nærmere på hver enkelt af dem.
Funktionelle komponenter
Den første og anbefalede komponenttype i React er funktionelle komponenter. En funktionel komponent er grundlæggende en JavaScript/ES6-funktion, der returnerer et React-element (JSX). Ifølge Reakts officielle dokumentation er nedenstående funktion en gyldig funktionel komponent:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternativt kan du også oprette en funktionel komponent med pilfunktionsdefinitionen:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Denne funktion er en gyldig React-komponent, fordi den accepterer et enkelt “props”-objektargument (som står for egenskaber) med data og returnerer et React-element. – reactjs.org
For at kunne bruge en komponent senere skal du først eksportere den, så du kan importere den et andet sted:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Når du har importeret den, kan du kalde komponenten som i dette eksempel:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Så en funktionel komponent i React:
- er en JavaScript/ES6-funktion
- skal returnere et React-element (JSX)
- begynder altid med et stort bogstav (navngivningskonvention)
- tager om nødvendigt props som parameter
Hvad er klassekomponenter?
Den anden type komponent er klassekomponenten. Klassekomponenter er ES6-klasser, der returnerer JSX. Nedenfor ser du vores samme Welcome-funktion, denne gang som en klassekomponent:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Som forskel fra funktionelle komponenter skal klassekomponenter have en ekstra render( ) metode til at returnere JSX.
Hvorfor bruge klassekomponenter?
Vi plejede at bruge klassekomponenter på grund af “state”. I de ældre versioner af React (version < 16.8) var det ikke muligt at bruge tilstand inden for funktionelle komponenter.
Derfor havde vi kun brug for funktionelle komponenter til rendering af brugergrænsefladen, mens vi ville bruge klassekomponenter til dataadministration og nogle yderligere operationer (som livscyklusmetoder).
Dette har ændret sig med indførelsen af React Hooks, og nu kan vi også bruge tilstande i funktionelle komponenter. (Jeg vil dække tilstand og hooks i mine følgende indlæg, så lad dem ligge for nu).
En klassekomponent:
- er en ES6-klasse, vil være en komponent, når den ‘udvider’ en React-komponent.
- tager Props (i konstruktøren), hvis det er nødvendigt
- skal have en render( ) metode til at returnere JSX
Hvad er Props i React?
Et andet vigtigt koncept for komponenter er, hvordan de kommunikerer. React har et særligt objekt kaldet prop (står for property), som vi bruger til at transportere data fra en komponent til en anden.
Men vær forsigtig – props transporterer kun data i et envejsflow (kun fra overordnede til underordnede komponenter). Det er ikke muligt med props at overføre data fra barn til forælder eller til komponenter på samme niveau.
Lad os se tilbage på App( )-funktionen ovenfor for at se, hvordan man overfører data med props.
Først skal vi definere en prop på velkomstkomponenten og tildele den en værdi:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Props er brugerdefinerede værdier, og de gør også komponenterne mere dynamiske. Da Welcome-komponenten er barnet her, skal vi definere props på dens forælder (App), så vi kan videregive værdierne og få resultatet ved blot at få adgang til prop “name”:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props er virkelig nyttige
Så React-udviklere bruger props til at videregive data, og de er nyttige til denne opgave. Men hvad med håndtering af data? Props bruges til at videregive data, ikke til at manipulere dem. Jeg vil dække håndtering af data med React i mine fremtidige indlæg her på freeCodeCamp.
I mellemtiden, hvis du vil lære mere om React & webudvikling, er du velkommen til at abonnere på min YouTube-kanal.
Tak for at læse!