Sette opp et reaktormiljø, del 2

Hvis du er ny til å reagere, vil du forståelig nok bare ha koding og leke med noen enkle komponenter for å se hvordan React fungerer. Du ønsker virkelig ikke å vade gjennom en lang oppsettprosess i første omgang.

I denne veiledningen vil jeg vise deg hvordan du begynner koding med React i sekunder, nesten helt fjerner installasjonsprosessen! Du bruker CodePen, en online kodeditor, som gjør det mulig å begynne å skrive React-kode umiddelbart.

En nyttig bivirkning ved bruk av online kode redaktører er at du enkelt kan dele arbeidet ditt med andre via en unik URL. Alt du lager kan også søges av av andre utviklere som ser etter React-baserte eksempler.

La oss ta en titt på CodePen og se hvor lett det er å sette opp React og start kodingen din første app!

CodePen

CodePen gir deg tilgang til tre vinduer for å redigere HTML, CSS og JavaScript, pluss et annet vindu for å gjengi utdata. Du kan bruke CodePen helt gratis, og trenger ikke engang å registrere deg for en konto for å dele arbeidet ditt. Men hvis du bruker tjenesten regelmessig, kan du vurdere å åpne en konto slik at du kan fylle ut en profil og begynne å bygge opp en portefølje.

Hver ny opprettelse i CodePen kalles en penn. Gå til hjemmesiden og klikk på den store Skape knappen øverst til høyre på skjermen, og deretter Ny penn fra rullegardinmenyen.

Avhengig av standardinnstillingene, vil de tre redaktørene enten være på venstre / høyre side av hovedvinduet eller legges ut over toppen i en enkelt rad.

CodePen-utgangsvinduet oppdateres automatisk hver gang du skriver inn et av redigeringsvinduene. Dette er valgfritt og kan deaktiveres via pennens innstillinger.

Konfigurere innstillinger

Før vi kan skrive noen React-kode, må vi importere de nødvendige bibliotekskriptene og sette opp vår JavaScript-prosessor. Vi bruker JSX i våre React-komponenter, i tillegg til noen funksjoner i ES6, for å være sikker på at CodePen JavaScript-editoren kan tolke vår kode, trenger vi et verktøy som tar vår JSX- og ES6-kode og kompilerer den ned til standard JavaScript som alle nettlesere kan kjøre.

Vi bruker Babel som JavaScript-kompilator, så du kan trygt bruke alle de nyeste funksjonene til JavaScript uten å måtte bekymre deg om nettleserkompatibilitet. Den ekstra støtten til JSX-kompilering er en reell bonus, da det betyr at vi bare trenger å bruke ett verktøy.

For å aktivere Babel i CodePen, må vi konfigurere pennens innstillinger. Klikk på innstillinger knappen i øverste høyre meny, og deretter på Javascript i Penninnstillinger dialogboks som vises. Vi kan også legge til de nødvendige React-bibliotekene her også.

Klikk på Quick-add rullegardinmenyen og velg Reagere fra listen. Legg merke til at React er lagt til den første innboksboksen med hele banen til det angitte biblioteket. Klikk på rullegardinmenyen igjen for å legge til Reag DOM. Dette er nødvendig når vi gjør våre React-komponenter til nettleseren DOM.

Til slutt, under JavaScript Preprocessor dropdown, velg Babel. Din Penninnstillinger dialog skal nå se ut som dette:

De eksakte versjonene av React og React DOM-skript kan være litt forskjellige på skjermen, da CodePen uunngåelig oppdaterer til den nyeste versjonen fra tid til annen.

Klikk Lukk å gå tilbake til hovedkoden for CodePen. Legg merke til at ved siden av JS etikett i JavaScript-editor-vinduet, en ekstra (Babel) Etikett er lagt til som en påminnelse om at JavaScript vil bli sendt gjennom Babel-kompilatoren før det blir utført i nettleseren.

Vår første reaksjonsapp

I HTML-koden, redigeringsvinduet, legg til en enkelt 

 element. Dette fungerer som en tom plassholder vår React app kan bruke til å gjengi vår komponent.

Vi trenger ikke å legge til mye HTML manuelt som React håndterer å legge til og oppdatere DOM-elementer for oss. Vi legger heller ikke noen CSS i vår penn, så vær så snill å omorganisere vinduene slik at JavaScript-editoren og utskriftsvinduet har mer ledig plass.

I JavaScript Editor-vinduet, skriv inn følgende kode for å legge til vår første komponent.

klasse MyFirstComponent utvider React.Component render () return ( 
Hei fra React!
 )

Dette er ganske mye den mest grunnleggende versjonen av en komponent mulig i React. Vi brukte en ES6 klasse for å utvide kjerne React komponent klassen, som implementerer a render () metode og returnerer et HTML-element.

For å vise vår komponent, må vi ringe ReactDOM.render () metode:

ReactDOM.render ( , document.querySelector ('#app'));

Det første argumentet er React-komponenten du vil gjengi, og det andre angir hvilket DOM-element som skal gjengis.

La oss nå lage et nytt par React-komponenter. Først legger du til denne koden i HTML-vinduet:

Legg til en annen komponentdefinisjon i JavaScript-vinduet:

klasse MySecondComponent strekker seg React.Component render () return ( 
Min andre reaksjonskomponent.
 )

Den andre komponenten er veldig lik den første, og vi gjør det til div element med id av APP2 med en annen samtale til ReactDOM.render ().

ReactDOM.render ( , document.querySelector ('# app2'));

Det er imidlertid ikke veldig effektivt å gjengi enkelte komponenter på denne måten. Den nåværende aksepterte tilnærmingen er å definere en komponent på toppnivå, for eksempel , som inneholder alle andre komponenter i React-appen din. Så, alt du trenger er en enkelt samtale til RenderDOM.render (), snarere enn et eget anrop for hver komponent.

Så la oss refactor vår svært enkle React app for å gjøre bruk av denne toppnivnte komponent tilnærmingen.

Først fjerner du

Nå, hva hvis vi ønsket å legge til litt informasjon til  og  men ville ikke nødvendigvis spesifisere det inne i komponentdefinisjonene? Vi kan gjøre dette ved å overføre informasjon til barnekomponenter fra overordnede komponenter ved hjelp av HTML-attributt som syntaks. Dette er kjent som rekvisitter i React.

La oss demonstrere dette ved å sende ned nummereringsinformasjon til våre to nestede komponenter. Endre definisjon å være:

klassen App utvider React.Component render () return ( 
 
Mine første reaktorkomponenter!
   
 )

Vi har lagt til to Nummer rekvisitter som vil bli sendt ned til hver barnekomponent og gjort tilgjengelig via et JavaScript-objekt. Innenfor komponentdefinisjonene kan vi få tilgang til rekvisitter via Rekvisitter objekt som følger:

klasse MyFirstComponent utvider React.Component render () return ( 
this.props.number: Hei fra React!
 )

klasse MySecondComponent strekker seg React.Component render () return ( 
this.props.number: Min andre reaksjonskomponent.
 )

La oss raskt oppsummere om hvor enkelt det var å starte kodingen med React ved hjelp av CodePen.

For det første åpnet vi en ny penn og konfigurerte innstillingene for å legge til React and ReactDOM script avhengighetene. Vi har også lagt til JavaScript Babel preprosessoren for å kompilere vår JSX og ES6 kode ned til standard JavaScript.

Da var det bare et enkelt tilfelle å legge til våre React-komponenter til JavaScript-editoren. Til slutt, for å få komponentene våre til å vises i utgangsvinduet, satte vi inn a

element som et monteringspunkt for vår React-app i HTML-editor-vinduet.

Konklusjon

Ved hjelp av CodePen kan du få en React-komponent utgitt til skjermen på bare et par minutter! Det har imidlertid noen begrensninger.

Modern React best practices for React Development anbefaler en modulær tilnærming, med hver komponent i en egen fil. Du kan ikke gjøre dette med den grunnleggende versjonen av CodePen.

Dessuten, fordi CodePen-utdatavinduet er innebygd i et iframe-element, har du ikke tilgang til nettleseren React-utviklerverktøy, noe som er et viktig hensyn når appene dine blir mer komplekse.

For nybegynnere, og for raskt å teste ut nye ideer for enkle apper, er CodePen et godt verktøy for React utvikling. Du kan også bruke den til å lage en nettportefølje, eller som ditt eget mini-bibliotek av React-komponenter, klar til å lime inn i andre prosjekter. Det er mange andre online-kodeditorer som ligner på CodePen som JSFiddle, JS Bin, og mange andre.

I neste veiledning vil vi fokusere på å sette opp React apps lokalt.

Kode