Ställ in en reaktormiljö, del 2

Om du är ny att reagera, förståeligt, vill du bara få kodning och spela runt med några enkla komponenter för att se hur React fungerar. Du vill verkligen inte väga genom en lång installationsprocess i första hand.

I denna handledning visar jag dig hur du börjar kodning med React i sekunder, nästan helt bort installationen! Du använder CodePen, en online kodredigerare, som gör att du kan börja skriva React-kod direkt.

En användbar bieffekt av att använda online-kodredigerare är att du enkelt kan dela ditt arbete med andra via en unik URL. Allt du skapar kan också söks av andra utvecklare som söker React-baserade exempel.

Låt oss ta en titt på CodePen och se hur lätt det är att ställa in React och starta kodning av din första app!

CodePen

CodePen ger dig tillgång till tre fönster för att redigera HTML, CSS och JavaScript, plus ett annat fönster för att göra utdata. Du kan använda CodePen helt gratis, och behöver inte ens registrera dig för ett konto för att dela ditt arbete. Om du använder tjänsten regelbundet kanske du vill överväga att öppna ett konto så att du kan fylla i en profil och börja bygga upp en portfölj.

Varje ny skapelse i CodePen kallas en "penna". Gå till hemsidan och klicka på den stora Skapa knappen längst upp till höger på skärmen, och sedan Ny penna från rullgardinsmenyn.

Beroende på dina standardinställningar kommer de tre redigerarna antingen att vara på vänster / höger sida av huvudfönstret eller placeras överst i en enda rad.

CodePen-utmatningsfönstret uppdateras automatiskt varje gång du skriver in något av redigeringsfönstren. Detta är valfritt och kan inaktiveras via pennens inställningar.

Konfigurera inställningar

Innan vi kan skriva någon React-kod måste vi importera nödvändiga biblioteksskript och ställa in vår JavaScript-processor. Vi använder JSX i våra React-komponenter, liksom vissa funktioner i ES6, så att du är säker på att CodePen JavaScript-redaktören kan tolka vår kod, vi behöver ett verktyg som tar vår JSX- och ES6-kod och sammanställer den till standard JavaScript som alla webbläsare kan köra.

Vi använder Babel som vår JavaScript-kompilator, så du kan säkert använda alla de senaste funktionerna i JavaScript utan att behöva oroa dig för webbläsarkompatibilitet. Det extra stöd för JSX-kompilering är en riktig bonus, eftersom det innebär att vi bara behöver använda ett verktyg.

För att aktivera Babel i CodePen måste vi konfigurera inställningarna för penna. Klicka på inställningar knappen i den övre högra menyn och sedan på JavaScript i Peninställningar dialogrutan som visas. Vi kan också lägga till de nödvändiga React-biblioteken här också.

Klicka på Quick-add dropdown och välj Reagera från listan. Observera att React läggs till i den första inmatningsrutan med hela sökvägen till det angivna biblioteket. Klicka på rullgardinsmenyn igen för att lägga till Reagera DOM. Detta behövs eftersom vi gör våra React-komponenter till webbläsarens DOM.

Slutligen, under JavaScript Preprocessor dropdown, välj Babel. Din Peninställningar dialogrutan ska nu se ut som detta:

De exakta versionerna av React och React DOM-skript kan vara lite annorlunda på din skärm, eftersom CodePen oundvikligen kommer att uppdateras till den senaste versionen från tid till annan.

Klick Stänga att återgå till huvudkoden för CodePen. Lägg märke till att bredvid JS etikett i JavaScript-redigeringsfönstret, ett tillägg (Babel) Etiketten har lagts till som en påminnelse om att JavaScript kommer att skickas via Babel-kompilatorn innan det körs i webbläsaren.

Vår första React App

I redigeringsfönstret HTML CodePen lägger du till en singel 

 element. Detta fungerar som en tom platshållare som vår React app kan använda för att återställa vår komponent.

Vi behöver inte lägga till mycket HTML manuellt eftersom React hanterar att lägga till och uppdatera DOM-element för oss. Vi lägger inte heller någon CSS i vår penna, så gärna ändra om Windows så att JavaScript-redigeraren och utmatningsfönstret har mer ledigt utrymme.

I JavaScript Editor-fönstret anger du följande kod för att lägga till vår första komponent.

klass MyFirstComponent utökar React.Component render () return ( 
Hej från React!
 )

Detta är ganska mycket den mest grundläggande versionen av en komponent som är möjlig i React. Vi använde en ES6-klass för att utöka kärnreaktorkomponenten, som implementerar a göra() metod och returnerar ett HTML-element.

För att visa vår komponent behöver vi ringa ReactDOM.render () metod:

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

Det första argumentet är Reakt-komponenten du vill göra, och den andra anger vilket DOM-element som ska göras till.

Låt oss nu skapa ett nytt par React-komponenter. Lägg först det här biten i HTML-fönstret:

Lägg nu till en annan komponentdefinition i JavaScript-fönstret:

klass MySecondComponent utökar React.Component render () return ( 
Min andra reaktionskomponent.
 )

Den andra komponenten är mycket lik den första, och vi gör det till div element med id av App2 med ett annat samtal till ReactDOM.render ().

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

Det är emellertid inte så effektivt att göra enskilda komponenter så här. Det för närvarande accepterade tillvägagångssättet är att definiera en komponent på toppnivå, till exempel , som innehåller alla andra komponenter i din React app. Sedan behöver du bara ett samtal till RenderDOM.render (), snarare än ett separat samtal för varje komponent.

Så låt oss refactor vår mycket enkla React app för att utnyttja denna övergripande komponent tillvägagångssätt.

För det första, ta bort

Nu, vad om vi ville lägga till lite information till  och  men ville inte nödvändigtvis ange det inom komponentdefinitionerna? Vi kan göra detta genom att skicka information till barnkomponenter från moderkomponenter med hjälp av HTML-attribut som syntax. Detta är känt som rekvisita i React.

Låt oss visa detta genom att skicka nummereringsinformation till våra två kapslade komponenter. Ändra definitionen att vara:

klass App utökar React.Component render () return ( 
 
Mina första reaktorkomponenter!
   
 )

Vi har lagt till två siffra rekvisita som skickas ner till varje barnkomponent och görs tillgänglig via ett JavaScript-objekt. Inom komponentdefinitionerna kan vi komma åt rekvisita via rekvisita objekt som följer:

klass MyFirstComponent utökar React.Component render () return ( 
this.props.number: Hej från React!
 )

klass MySecondComponent utökar React.Component render () return ( 
this.props.number: Min andra reaktionskomponent.
 )

Låt oss snabbt läsa om hur lätt det var att börja kodning med React using CodePen.

För det första öppnade vi en ny penna och konfigurerade inställningarna för att lägga till React and ReactDOM-scriptberoende. Vi har också lagt till JavaScript Babel preprocessor för att kompilera vår JSX och ES6-kod ner till standard JavaScript.

Då var det bara ett enkelt fall att lägga till våra React-komponenter till JavaScript-editoren. Slutligen, för att få våra komponenter att visas i utmatningsfönstret, satte vi in ​​a

element som en monteringspunkt för vår React-app i HTML-redigeringsfönstret.

Slutsats

Med CodePen kan du få en React-komponent utmatad till skärmen inom några minuter! Det har dock vissa begränsningar.

Modern React Best Practices för React Development rekommenderar ett modulärt tillvägagångssätt, med varje komponent i en separat fil. Du kan inte göra det med den grundläggande versionen av CodePen.

Eftersom CodePen-utmatningsfönstret är inbäddat inne i ett iframe-element, har du inte tillgång till webbläsaren React developer-verktyg, vilket är ett viktigt övervägande när dina appar blir mer komplexa.

För nybörjare, och för att snabbt testa ut nya idéer för enkla appar, är CodePen ett utmärkt verktyg för React utveckling. Du kan också använda den för att skapa en onlineportfölj eller som ditt eget mini-bibliotek av React-komponenter redo att klistra in i andra projekt. Det finns gott om andra online-kodredigerare som liknar CodePen som JSFiddle, JS Bin och många andra.

I nästa handledning fokuserar vi på att konfigurera React apps lokalt.

Koda