Rock Solid React.js Foundations: A Beginner's Guide

Jeg har arbejdet med React og React-Native de sidste par måneder. Jeg har allerede udgivet to apps i produktion, Kiven Aa (React) og Pollen Chat (React Native). Da jeg begyndte at lære React, søgte jeg efter noget (en blog, en video, et kursus, hvad som helst), der ikke kun lærte mig at skrive apps i React. Jeg ville også have det til at forberede mig på interviews.

Det meste af det materiale, jeg fandt, koncentrerede sig om det ene eller det andet. Så dette indlæg er rettet mod publikum, der er på udkig efter en perfekt blanding af teori og praktisk. Jeg vil give dig en smule teori, så du forstår, hvad der sker under emhætten, og så vil jeg vise dig, hvordan du skriver en React.js-kode.

Hvis du foretrækker video, har jeg også hele dette kursus på YouTube. Tjek det ud.

Lad os dykke ned i ...

React.js er et JavaScript-bibliotek til opbygning af brugergrænseflader

Du kan oprette alle mulige applikationer til en enkelt side. For eksempel chatbudskaber og e-handelsportaler, hvor du vil vise ændringer på brugergrænsefladen i realtid.

Alt er en komponent

En React-app består af komponenter, hvoraf mange er indlejret i hinanden. ”Men hvad er komponenter?” Spørger du måske.

En komponent er et genanvendeligt stykke kode, der definerer, hvordan bestemte funktioner skal se ud og opføre sig på brugergrænsefladen. For eksempel er en knap en komponent.

Lad os se på følgende lommeregner, som du ser på Google, når du prøver at beregne noget i retning af 2 + 2 = 4 –1 = 3 (hurtig matematik!)

Som du kan se på billedet ovenfor, har lommeregneren mange områder - som resultatvisningsvinduet og numpad . Alle disse kan være separate komponenter eller en kæmpe komponent. Det afhænger af, hvor behagelig man er ved at nedbryde og abstrahere ting væk i React

Du skriver kode til alle sådanne komponenter separat. Kombiner derefter dem under en container, som igen er selve en React-komponent. På denne måde kan du oprette genanvendelige komponenter, og din endelige app vil være en samling af separate komponenter, der arbejder sammen.

Følgende er en sådan måde, du kan skrive lommeregneren, vist ovenfor, i React:

Ja! Det ligner HTML-kode, men det er det ikke. Vi vil udforske mere om det i de senere afsnit.

Opsætning af vores legeplads

Denne vejledning fokuserer på React's grundlæggende. Det er ikke primært rettet mod React for Web eller React Native (til opbygning af mobile apps). Så vi bruger en online editor for at undgå web- eller native-specifikke konfigurationer, før vi selv lærer, hvad React kan gøre.

Jeg har allerede oprettet et miljø for dig på codepen.io. Følg blot linket og læs alle kommentarerne i HTML- og JavaScript-fanerne (JS).

Styring af komponenter

Vi har lært, at en React-app er en samling af forskellige komponenter, struktureret som et indlejret træ. Således kræver vi en slags mekanisme til at overføre data fra en komponent til en anden.

Indtast “rekvisitter”

Vi kan videregive vilkårlige data til vores komponent ved hjælp af et propsobjekt. Hver komponent i React får dette propsobjekt.

Før vi lærer at bruge dette propsobjekt, lad os lære om funktionelle komponenter.

a) Funktionel komponent

En funktionel komponent i React forbruger vilkårlige data, som du videregiver til den ved hjælp af propsobjekt. Det returnerer et objekt, der beskriver, hvad UI React skal gengive. Funktionelle komponenter er også kendt som statsløse komponenter.

Lad os skrive vores første funktionelle komponent:

Det er så simpelt. Vi passerede lige propssom et argument til en almindelig JavaScript-funktion og returnerede, umm, ja, hvad var det? At {props.name}jeg v> ting! Det er JSX (JavaScript udvidet). Vi vil lære mere om det i et senere afsnit.

Denne ovenstående funktion gengiver følgende HTML i browseren:

Læs afsnittet nedenfor om JSX, hvor jeg har forklaret, hvordan vi får denne HTML fra vores JSX-kode.

Hvordan kan du bruge denne funktionelle komponent i din React-app? Glad for du spurgte! Det er så simpelt som følgende:

Attributten namei ovenstående kode bliver props.nameinde i vores Hello komponent. Attributten agebliver props.ageog så videre.

Husk! Du kan rede en React-komponent inde i andre React-komponenter.

Lad os bruge denne Hellokomponent i vores codepen legeplads. Udskift divindersiden ReactDOM.render()med vores Hellokomponent som følger, og se ændringerne i det nederste vindue.

Men hvad hvis din komponent har en intern tilstand? For eksempel som den følgende tællerkomponent, som har en intern tællervariabel, der ændres ved tryk på + og -.

b) Klassebaseret komponent

Den klassebaserede komponent har en ekstra egenskab state, som du kan bruge til at holde en komponents private data. Vi kan omskrive vores Hellokomponent ved hjælp af klasse notation som følger. Da disse komponenter har en tilstand, er disse også kendt som Stateful komponenter .

Vi udvider React.Componentklassen af ​​React-bibliotek til at fremstille klassebaserede komponenter i React. Lær mere om JavaScript-klasser her.

Den render()metode skal være til stede i din klasse som React udseende i denne metode for at vide, hvad UI det skal gengive på skærmen.

For at bruge denne form for intern tilstand skal vi først initialisere stateobjektet i konstruktøren af ​​komponentklassen på følgende måde.

På samme måde propskan den tilgås i vores klassebaserede komponent ved hjælp af this.propsobjekt.

For at indstille tilstanden bruger du React.Component's setState(). Vi vil se et eksempel på dette i den sidste del af denne vejledning.

Tip: Ring aldrig setState()ind i render()funktionen, da setState()komponenten gengives igen, og dette vil resultere i endeløs sløjfe.

Bortset fra statehar en klassebaseret komponent nogle livscyklusmetoder som componentWillMount().Disse, du kan bruge til at gøre ting, som at initialisere state og alt andet, men det er uden for dette indlæg.

JSX

JSX er en kort form for JavaScript Extended, og det er en måde at skrive React komponenter på. Ved hjælp af JSX får du den fulde kraft af JavaScript inde i XML-lignende tags.

Du sætter JavaScript-udtryk inde {}. Følgende er nogle gyldige JSX-eksempler.

Sådan fungerer det, er at du skriver JSX for at beskrive, hvordan dit brugergrænseflade skal se ud. En transpiller som Babelkonverterer den kode til en masse React.createElement()opkald. React-biblioteket bruger derefter disse React.createElement()opkald til at konstruere en trælignende struktur af DOM-elementer (i tilfælde af React for Web) eller Native views (i tilfælde af React Native) og opbevarer den i hukommelsen.

React beregner derefter, hvordan det effektivt kan efterligne dette træ i hukommelsen til brugergrænsefladen, der vises for brugeren. Denne proces kaldes forsoning. Når denne beregning er udført, foretager React ændringerne i den aktuelle brugergrænseflade på skærmen.

Du kan bruge Babels online REPL til at se, hvad React faktisk sender, når du skriver noget JSX.

Da JSX kun er et syntaktisk sukker over almindelige React.createElement()opkald, kan React bruges uden JSX

Nu har vi alle koncepter på plads, så vi er godt positioneret til at skrive en counterkomponent, som vi tidligere så som en GIF.

Koden er som følger, og jeg håber, at du allerede ved, hvordan du gengiver det på vores legeplads.

Følgende er nogle vigtige punkter om ovenstående kode.

  1. JSX bruger camelCasingderfor buttonattributten onClickikke er onclick, som vi bruger i HTML.
  2. Binding er nødvendig for thisat arbejde på tilbagekald. Se linje 8 og 9 i koden ovenfor.

Den sidste interaktive kode findes her.

Med det er vi nået til konklusionen på vores React crash-kursus. Jeg håber, jeg har belyst, hvordan React fungerer, og hvordan du kan bruge React til at opbygge større apps ved hjælp af mindre og genanvendelige komponenter.

Hvis du har spørgsmål eller tvivl, slå mig op på Twitter @ rajat1saxena eller skriv til mig på [email protected]

Anbefal dette indlæg, hvis du kunne lide det og del det med dit netværk. Følg mig for mere tekniske relaterede indlæg og overvej at abonnere på min kanal Rayn Studios på YouTube. Mange tak.