React Functional Components, Props og JSX - React.js tutorial til begyndere

React er et af de mest populære JavaScript-biblioteker til opbygning af brugergrænseflader.

Hvis du ønsker at blive en front-end-udvikler eller finde et webudviklingsjob, vil du sandsynligvis have gavn af at lære Reager grundigt.

I dette indlæg vil du lære nogle af det grundlæggende i React som at oprette en komponent, JSX-syntaksen og rekvisitterne. Hvis du ikke har nogen eller ringe erfaring med React, er dette indlæg noget for dig.

For det første kan du her se, hvordan du kan installere React.

Hvad er JSX?

Den første ting du vil indse efter installation af dit første React-projekt er, at en JavaScript-funktion returnerer en HTML-kode:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Dette er en særlig og gyldig syntaksudvidelse til React, der kaldes JSX (JavaScript XML). Normalt gemmer vi i frontend-relaterede projekter HTML-, CSS- og JavaScript-kode i separate filer. Men i React fungerer dette 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 den samme fil, som i eksemplet ovenfor. Du kan dog adskille din CSS i en anden fil.

I starten kan JSX virke lidt underlig. Men rolig, du bliver vant til det.

JSX er meget praktisk, fordi vi også kan udføre enhver JavaScript-kode (logik, funktioner, variabler osv.) Inde i HTML'en direkte ved hjælp af krøllede seler {}, som denne:

function App() { const text = 'Hello World'; return ( 

{text}

); }

Du kan også tildele HTML-tags til JavaScript-variabler:

const message = 

React is cool!

;

Eller du kan returnere HTML inden for JavaScript-logik (f.eks. Hvis-ellers tilfælde):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Jeg vil ikke gå nærmere ind på JSX, men sørg for at du overvejer følgende regler, mens du skriver JSX:

  • HTML og komponent tags skal altid lukkes
  • Nogle attributter som "klasse" bliver "className" (fordi klasse refererer til JavaScript-klasser), "tabindex" bliver "tabIndex" og skal skrives camelCase
  • Vi kan ikke returnere mere end et HTML-element på én gang, så sørg for at pakke dem ind i et overordnet tag:
return ( 

Hello

World

);
  • eller som et alternativ kan du pakke dem med tomme tags:
return (  

Hello

World

);

Du kan også se min React for Beginners tutorial for mere info:

Hvad er funktionelle og klassekomponenter?

Efter at have vænnet sig til JSX-syntaksen er den næste ting at forstå den komponentbaserede struktur i React.

Hvis du besøger eksempelkoden igen øverst i dette indlæg, ser du, at JSX-koden returneres af en funktion. Men App () -funktionen 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, der opdeler brugergrænsefladen i mindre stykker. For eksempel, hvis vi byggede brugergrænsefladen til Twitter med React:

I stedet for at bygge hele brugergrænsefladen under en enkelt fil, kan vi og vi skal opdele alle sektionerne (markeret med rødt) i mindre uafhængige stykker. Med andre ord er disse komponenter.

React har to typer komponenter: funktionelog klasse. Lad os se nærmere på hver nu.

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 React's officielle dokumenter er nedenstående funktion en gyldig funktionel komponent:

function Welcome(props) { return 

Hello, {props.name}

; }

Alternativt kan du også oprette en funktionel komponent med definitionen af ​​pilfunktionen:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Denne funktion er en gyldig React-komponent, fordi den accepterer et enkelt "rekvisitter" (som står for egenskaber) objektargument 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 

Hello, {props.name}

; } export default Welcome;

Efter importen kan du ringe til komponenten som i dette eksempel:

import Welcome from './Welcome'; function App() { return ( ); }

Så en funktionel komponent i React:

  • er en JavaScript / ES6-funktion
  • skal returnere et React-element (JSX)
  • starter altid med et stort bogstav (navngivningskonvention)
  • tager rekvisitter som en parameter, hvis det er nødvendigt

Hvad er klassekomponenter?

Den anden type komponent er klassekomponenten. Klassekomponenter er ES6-klasser, der returnerer JSX. Nedenfor ser du vores samme velkomstfunktion, denne gang som en klassekomponent:

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

Forskellig fra funktionelle komponenter skal klassekomponenter have en ekstra gengivelsesmetode () til returnering af JSX.

Hvorfor bruge klassekomponenter?

Vi brugte klassekomponenter på grund af "tilstand". I de ældre versioner af React (version <16.8) var det ikke muligt at bruge tilstand inde i funktionelle komponenter.

Derfor havde vi kun brug for funktionelle komponenter til gengivelse af brugergrænsefladen, mens vi ville bruge klassekomponenter til datastyring og nogle yderligere operationer (som livscyklusmetoder).

Dette har ændret sig med introduktionen af ​​React Hooks, og nu kan vi også bruge tilstande i funktionelle komponenter. (Jeg vil dække tilstand og kroge i mine følgende indlæg, så husk ikke dem for nu).

En klasse komponent:

  • er en ES6-klasse, vil være en komponent, når den 'udvider' en React-komponent.
  • tager rekvisitter (i konstruktøren), hvis det er nødvendigt
  • skal have en gengivelse ()metode til returnering af JSX

Hvad er rekvisitter i reaktion?

Et andet vigtigt begreb med komponenter er, hvordan de kommunikerer. React har et specielt objekt kaldet prop (står for egenskab), som vi bruger til at transportere data fra en komponent til en anden.

Men vær forsigtig - rekvisitter transporterer kun data i en envejsflow (kun fra forældrekomponenter til underordnede komponenter). Det er ikke muligt med rekvisitter at overføre data fra barn til forælder eller til komponenter på samme niveau.

Lad os besøge App () -funktionen ovenfor for at se, hvordan du overfører data med rekvisitter.

Først skal vi definere en prop på velkomstkomponenten og tildele den en værdi:

import Welcome from './Welcome'; function App() { return ( ); }

Rekvisitter er brugerdefinerede værdier, og de gør også komponenter mere dynamiske. Da velkomstkomponenten er barnet her, er vi nødt til at definere rekvisitter på dets overordnede (App), så vi kan videregive værdierne og få resultatet ved blot at få adgang til prop "name":

function Welcome(props) { return 

Hello, {props.name}

; }

React-rekvisitter er virkelig nyttige

Så React-udviklere bruger rekvisitter til at videregive data, og de er nyttige til dette job. Men hvad med styring af data? Rekvisitter bruges til at videregive data, ikke til at manipulere dem. Jeg skal dække administration af data med React i mine fremtidige indlæg her på freeCodeCamp.

I mellemtiden, hvis du vil lære mere om React & Web-udvikling, er du velkommen til at abonnere på min YouTube-kanal.

Tak fordi du læste!