Een reactieomgeving opzetten, deel 2

Als je nog niet zo lang geleden hebt gereageerd, wil je begrijpelijkerwijs gewoon coderen en met wat eenvoudige componenten spelen om te zien hoe React werkt. U wilt in eerste instantie niet echt een lang opstartproces doorlopen.

In deze tutorial laat ik je zien hoe je in seconden met het coderen begint met React, waarbij je het installatieproces bijna volledig verwijdert! U zult CodePen gebruiken, een online code-editor, waarmee u onmiddellijk React-code kunt schrijven.

Een handig neveneffect van het gebruik van online codebewerkers is dat u uw werk gemakkelijk kunt delen met anderen via een unieke URL. Alles wat u maakt, kan ook worden opgezocht door andere ontwikkelaars die op React gebaseerde voorbeelden zoeken.

Laten we eens kijken naar CodePen en zien hoe eenvoudig het is om React in te stellen en uw eerste app te coderen!

CodePen

CodePen geeft u toegang tot drie vensters om HTML, CSS en JavaScript te bewerken, plus een ander venster om de uitvoer te renderen. U kunt CodePen volledig gratis gebruiken en u hoeft zich niet eens aan te melden voor een account om uw werk te delen. Als u de service echter regelmatig gebruikt, kunt u overwegen om een ​​account te openen, zodat u een profiel kunt invullen en een portefeuille kunt opbouwen..

Elke nieuwe creatie in CodePen wordt een 'pen' genoemd. Ga naar de startpagina en klik op de grote creëren knop in de rechterbovenhoek van het scherm en vervolgens Nieuwe pen in het vervolgkeuzemenu.

Afhankelijk van uw standaardinstellingen bevinden de drie editors zich aan de linker- of rechterkant van het hoofdvenster of liggen ze aan de bovenkant in een rij.

Het uitvoervenster van CodePen wordt automatisch bijgewerkt elke keer dat u in een van de editor-vensters typt. Dit is optioneel en kan worden uitgeschakeld via de instellingen van de pen.

Instellingen configureren

Voordat we een React-code kunnen schrijven, moeten we de nodige bibliotheekscripts importeren en onze JavaScript-processor instellen. We zullen JSX gebruiken in onze React-componenten, evenals enkele functies van ES6, dus om zeker te zijn dat de CodePen JavaScript-editor onze code kan interpreteren, hebben we een tool nodig die onze JSX- en ES6-code gebruikt en compileert tot standaard JavaScript dat alle browsers kunnen uitvoeren.

We zullen Babel gebruiken als onze JavaScript-compiler, zodat je veilig alle nieuwste functies van JavaScript kunt gebruiken zonder je zorgen te hoeven maken over browsercompatibiliteit. De toegevoegde ondersteuning voor JSX-compilatie is een echte bonus, omdat we maar één tool hoeven te gebruiken.

Om Babel in CodePen in te schakelen, moeten we de instellingen van onze pen configureren. Klik op de instellingen knop in het menu rechtsboven en vervolgens aan JavaScript in de Peninstellingen dialoogvenster dat verschijnt. We kunnen hier ook de vereiste React-bibliotheken toevoegen.

Klik op de Quick-add dropdown en selecteer Reageer van de lijst. Merk op dat React is toegevoegd aan het eerste invoervak ​​met het volledige pad naar de opgegeven bibliotheek. Klik nogmaals op de vervolgkeuzelijst om toe te voegen Reageer DOM. Dit is nodig omdat we onze React-componenten naar de DOM van de browser renderen.

Eindelijk, onder de JavaScript Preprocessor dropdown, selecteer Babel. Jouw Peninstellingen dialoogvenster zou er nu ongeveer zo uit moeten zien:

De exacte versies van React en React DOM-scripts kunnen enigszins afwijken op uw scherm omdat CodePen van tijd tot tijd onvermijdelijk zal worden bijgewerkt naar de nieuwste versie.

Klik Dichtbij om terug te keren naar de hoofdcodePen-interface. Merk op dat naast de JS label in het JavaScript-editorvenster, een extra (Babel) label is toegevoegd als herinnering dat het JavaScript door de Babel-compiler zal worden geleid voordat het in de browser wordt uitgevoerd.

Onze eerste React-app

Voeg een single toe in het HTML CodePen-editorvenster 

 element. Dit dient als een lege tijdelijke aanduiding die onze React-app kan gebruiken om ons onderdeel weer te geven.

We hoeven niet veel HTML handmatig toe te voegen omdat React-handles DOM-elementen voor ons toevoegen en bijwerken. We zullen ook geen CSS aan onze pen toevoegen, dus aarzel niet om de vensters opnieuw te rangschikken, zodat de JavaScript-editor en het uitvoervenster meer ruimte beschikbaar hebben.

Voer in het venster JavaScript-editor de volgende code in om ons eerste onderdeel toe te voegen.

class MyFirstComponent breidt React.Component uit render () return ( 
Hallo van React!
 )

Dit is vrijwel de meest eenvoudige versie van een component die mogelijk is in React. We hebben een ES6-klasse gebruikt om de kerncomponent React uit te breiden, die een a implementeert render () methode en retourneert een HTML-element.

Om onze component weer te geven, moeten we de ReactDOM.render () methode:

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

Het eerste argument is de React-component die u wilt renderen en de tweede geeft aan welk DOM-element moet worden gerenderd.

Laten we nu nog een paar React-componenten maken. Voeg eerst dit fragment toe aan het HTML-venster:

Voeg nu een andere componentdefinitie toe aan het JavaScript-venster:

class MySecondComponent breidt React.Component uit render () return ( 
Mijn tweede reactiecomponent.
 )

De tweede component lijkt erg op de eerste en we geven deze weer aan de div element met ID kaart van APP2 met een andere oproep naar ReactDOM.render ().

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

Het is echter niet erg efficiënt om individuele componenten op deze manier weer te geven. De momenteel geaccepteerde benadering is om een ​​component op het hoogste niveau, zoals , welke alle andere componenten in je React-app bevat. Dan is alles wat je nodig hebt een enkele oproep om RenderDOM.render (), in plaats van een afzonderlijke oproep voor elk onderdeel.

Dus laten we onze zeer eenvoudige React-app refactoren om gebruik te maken van deze componentbenadering op het hoogste niveau.

Verwijder eerst de

Nu, wat als we wat informatie wilden toevoegen  en  maar wilde het niet noodzakelijk specificeren binnen de componentdefinities? We kunnen dit doen door informatie door te geven aan onderliggende componenten van bovenliggende componenten met behulp van HTML-kenmerkachtige syntaxis. Dit staat bekend als rekwisieten in React.

Laten we dit demonstreren door nummerinformatie door te geven aan onze twee geneste componenten. Verander de definitie te zijn:

class-app breidt React.Component uit render () return ( 
 
Mijn eerste componenten reageren!
   
 )

We hebben er twee toegevoegd aantal rekwisieten die aan elke onderliggende component worden doorgegeven en beschikbaar worden gemaakt via een JavaScript-object. Binnen de componentdefinities hebben we toegang tot de rekwisieten via de rekwisieten object als volgt:

class MyFirstComponent breidt React.Component uit render () return ( 
this.props.number: Hello from React!
 )

class MySecondComponent breidt React.Component uit render () return ( 
this.props.number: mijn tweede reactiecomponent.
 )

Laten we snel samenvatten hoe eenvoudig het was om te beginnen met coderen met React met CodePen.

Ten eerste hebben we een nieuwe pen geopend en de instellingen geconfigureerd om de afhankelijkheden van React en ReactDOM-script toe te voegen. We hebben ook de JavaScript Babel preprocessor toegevoegd om onze JSX- en ES6-code samen te stellen tot standaard JavaScript.

Daarna was het gewoon een eenvoudig geval van het toevoegen van onze React-componenten aan de JavaScript-editor. Om uiteindelijk onze componenten weer te geven in het outputvenster, voerden we een

element als een montagepunt voor onze React-app in het HTML-editorvenster.

Conclusie

Met CodePen kunt u binnen enkele minuten een React-component laten uitvoeren op het scherm! Er zijn echter enkele beperkingen.

Modern React-best practices voor React-ontwikkeling bevelen een modulaire aanpak aan, waarbij elke component in een afzonderlijk bestand wordt opgenomen. Je kunt dit niet doen met de basisversie van CodePen.

Omdat het uitvoervenster van CodePen is ingesloten in een iframe-element, hebt u geen toegang tot de browser Reage-ontwikkelaarstools, wat een belangrijke overweging is naarmate uw apps complexer worden.

Voor beginners is CodePen echter een geweldige tool voor React-ontwikkeling, en voor het snel testen van nieuwe ideeën voor eenvoudige apps. U kunt het ook gebruiken om een ​​online portfolio te maken of als uw eigen mini-bibliotheek met React-componenten klaar om in andere projecten te plakken. Er zijn tal van andere online-code-editors vergelijkbaar met CodePen zoals JSFiddle, JS Bin en vele anderen.

In de volgende zelfstudie concentreren we ons op het lokaal instellen van React-apps.

Code