Een reactieomgeving opzetten, deel 3

Merk op hoe in de component kunnen we zoveel elementen maken als we willen door er meer aan toe te voegen React.createElement (). Ook worden rekwisieten overgedragen via een rekwisieten JavaScript-object, dat vervolgens via componenten in de functieparameter kan worden geopend rekwisieten.

Open index.html in een browser om de React-uitvoer te zien.

Ik zal hier niet meer in details treden React.createElement (), en andere niet-JSX-onderwerpen, aangezien de meerderheid van de React-gebruikers ervoor kiezen hun componenten te schrijven met behulp van JSX. We zullen JSX gebruiken voor onze React-componenten voor de rest van deze tutorialserie.

Het is duidelijk dat het gebrek aan hulpmiddelen zoals Babel het eenvoudig maakt om React-code helemaal vanaf nul te schrijven. Er zijn veel andere tools waar we ook voordeel uit kunnen halen, zoals een bundler die één enkel JavaScript-bestand maakt van alle vereiste React-bibliotheken plus onze app-code. We zullen een betere aanpak ontdekken in de volgende sectie die net zo eenvoudig is in te stellen.

Maak React-app

Om het probleem van complexe handmatige React-setups op te lossen, heeft Facebook create-react-app geïntroduceerd, een gebruiksvriendelijke manier om met React aan de slag te gaan. Het biedt u volledige setup, maar vereist helemaal geen handmatige configuratie.

Laten we doorgaan en create-react-app installeren. Typ de volgende code in een opdrachtregelvenster.

npm install -g create-react-app

Hiermee wordt create-react-app globaal geïnstalleerd, zodat u deze vanuit elke map kunt openen.

U hebt npm geïnstalleerd om deze opdracht uit te voeren en Node.js om create-react-app uit te voeren. Omdat npm wordt gebundeld met Node.js, download en installeer eenvoudig de nieuwste versie van Node.js van de officiële website.

We maken nu een nieuwe React-app met de naam my-first-onderdelen. Merk op dat create-react-app automatisch de omringende map voor je app maakt, dus je hoeft alleen maar te zorgen dat je in de map bent waar je je app-map in wilt maken.

Voer deze opdrachten uit om uw app te maken en het startscript uit te voeren.

create-react-app my-first-components cd mijn-first-components / npm start

Het kan een minuut of twee duren voor create-react-app om alles te installeren. Als u klaar bent, voert u het npm start commando en een nieuw browservenster wordt geopend en na enkele seconden wordt je React-app weergegeven.

Het leuke van create-react-app is dat het een mini-webserver bevat en ook de bestanden in je app bekijkt op wijzigingen. Wanneer een wijziging wordt aangebracht, wordt uw app opnieuw opgebouwd en wordt het browservenster automatisch opnieuw geladen om uw bijgewerkte app weer te geven.

Tijdens het geautomatiseerde instellingsproces genereert create-react-app verschillende bestanden en de volgende drie mappen:

• node_modules
• openbaar
• src

Om een ​​idee te krijgen hoe we componenten maken en deze met elkaar verbinden in een app die is gemaakt om apps te maken en apps te genereren, maken we dezelfde componenten waarmee we tot nu toe hebben samengewerkt.

De standaarduitvoer van de app suggereert dat we moeten bewerken App.js als een startpunt, dus open dit bestand en verwijder de importeeroproepen voor het logo en CSS-bestanden omdat we deze niet nodig hebben. We kunnen het ook vereenvoudigen component en voeg in onze twee onderliggende componenten van vóór toe.

Jouw App.js bestand zou er nu als volgt uit moeten zien:

import Reageren, Component uit 'reageren'; class-app breidt component render () terug ( 
 
Mijn eerste componenten reageren!
   
 ) class MyFirstComponent breidt Component render () return uit ( 
this.props.number: Hello from React!
 ) class MySecondComponent breidt Component render () return uit ( 
this.props.number: mijn tweede reactiecomponent.
 ) standaard app exporteren;

Sla je wijzigingen op en create-react-app zal je app automatisch updaten in de browser. Dit resulteert in dezelfde uitvoer als voorheen. (Merk echter op dat deze keer in de browser is geladen via de lokale webserver.)

Laten we dit echter meer modulair maken om in overeenstemming te zijn met de moderne best practices voor het maken van React-apps. Maak twee nieuwe bestanden in de src map met de naam MyFirstComponent.js en MySecondComponent.js.

Binnen MyFirstComponent.js, voeg de volgende code toe:

import Reageren, Component uit 'reageren'; class MyFirstComponent breidt Component render () return uit ( 
this.props.number: Hello from React!
 ) export standaard MyFirstComponent;

En van binnen MySecondComponent.js, voeg soortgelijke code toe:

import Reageren, Component uit 'reageren'; class MySecondComponent breidt Component render () return uit ( 
this.props.number: mijn tweede reactiecomponent.
 ) export standaard MySecondComponent;

Eindelijk moeten we updaten App.js om beide onderliggende componenten te importeren zoals ze nu in afzonderlijke bestanden staan:

import Reageren, Component uit 'reageren'; importeer MyFirstComponent van './MyFirstComponent'; importeer MySecondComponent van './ MySecondComponent'; class-app breidt component render () terug ( 
 
Mijn eerste componenten reageren!
   
 ) standaard app exporteren;

Deze aanpak voor het structureren van uw React-app is veel modulair en draagbaar. Het zorgt ook voor eenvoudiger debuggen, omdat elk onderdeel in zijn eigen module op zichzelf staat.

Conclusie

In deze zelfstudie hebben we twee methoden besproken voor het lokaal instellen van React: de handmatige aanpak en het gebruik van de app create-react-app van Facebook.

Handmatig vanuit het niets een React-app maken en de script-afhankelijkheden rechtstreeks in de index.html bestand is behoorlijk inefficiënt. Terwijl uw app wordt geschaald en verschillende versies van uw scripts worden vrijgegeven, wordt het handmatig bijwerken van de scripts snel onhandelbaar. Bovendien kunnen we geen ES6-functies gebruiken of onze componenten in JSX schrijven!

Het gebruik van create-react-app daarentegen is een zeer soepel proces. Het is geïnstalleerd en geïnitialiseerd met een paar commando's. Eenmaal uitgevoerd, maakt create-react-app je app opnieuw en wordt het browservenster bijgewerkt elke keer dat je projectbestanden bewerkt. Dit is een erg leuke workflow bij het maken van veel kleine wijzigingen, omdat het helpt bij het versnellen van de app-ontwikkeling.

In de volgende zelfstudie maken we een geheel nieuwe React-app die gebruikmaakt van Webpack en Babel om onze app te bundelen en te verwerken in een enkel JavaScript-bestand. In tegenstelling tot create-react-app, waar alles voor u wordt gedaan, zullen we alle setup-bestanden handmatig configureren en zullen we bespreken waarom u voor deze aanpak zou kiezen.