React Crash Course voor beginners, deel 1

In deze tutorialserie duiken we meteen in het gebruik van React terwijl we een volledig werkende app bouwen om een ​​galerij met films weer te geven.

Leren hoe je vanuit het niets een app moet bouwen, is een geweldige kans om te oefenen met het gebruik van alle belangrijke functies van React terwijl je je ontwikkelvaardigheden verbetert. Alle aanbevolen methoden en best practices worden gevolgd, wat essentieel is voor het maken van moderne React-apps.

We zullen een geheel nieuwe React-app opzetten met behulp van de create-reactie-app tool, ontwikkeld door Facebook, evenals de volgende React-onderwerpen in detail:

• Components 
• JSX
• Rekwisieten
• Staat
• Uw app correct structureren
• ES6-functies gebruiken voor moderne app-ontwikkeling

Wat we gaan bouwen

Om meer te leren over React-ontwikkeling leuker te maken, zullen we een volledig werkende app bouwen in plaats van generieke codefragmenten te presenteren wanneer nieuwe aspecten van React worden behandeld.

Samen bouwen we 'Movie Mojo', een app om een ​​galerij met feelgood-films weer te geven. Wanneer deze is voltooid, laadt de app enkele films bij het laden van de pagina en wordt vervolgens meer geladen wanneer op een knop wordt geklikt. Ten slotte kunt u uw eigen filmtitels invoeren via een aangepast formulier dat, wanneer het wordt ingediend, een nieuwe film dynamisch in de galerij zal invoegen.

voorwaarden

Dit is een tutorial op middelbaar niveau, dus je zult er veel baat bij hebben als je enige voorkennis hebt van de volgende onderwerpen:

• ES6-functies zoals pijlfuncties, klassen en modules.
• Weet wat React-componenten, rekwisieten en staat zijn.
• Sommigen ervaren het gebruik van Node.js en NPM.
• Ten minste een basisniveau van JavaScript-vaardigheid.

De meeste hiervan worden gedetailleerd besproken terwijl we verder gaan, maar ik zou aanraden om bepaalde gebieden zo nodig op te schonen.

Laten we het instellen

We zullen de gebruiken create-reactie-app hulpmiddel om onze React-app in te stellen. Het is extreem gemakkelijk te gebruiken en stelt ons in staat om ons te concentreren op het direct coderen van onze app, zonder door een gecompliceerd instellingsproces te hoeven navigeren.

Gebruiken create-reactie-app, je moet hebben Node.js en NPM geïnstalleerd. U kunt controleren of beide beschikbaar zijn door het volgende te typen in een opdrachtregelvenster:

knooppunt -v

En dan:

npm -v

Als beide zijn geïnstalleerd, ziet u voor elk het huidige versienummer.

MacBook-Pro: ~ davidgwyer $ node -v v6.11.1 MacBook-Pro: ~ davidgwyer $ npm -v 5.3.0 MacBook-Pro: ~ davidgwyer $

Als u moet installeren of bijwerken Node.js en NPM dan is de eenvoudigste manier om te downloaden Node.js van de officiële webpagina. Node.js is gebundeld met NPM u hoeft dus geen aparte installatie uit te voeren.

Installeren create-reactie-app globaal, typ dit in elk commandoregelvenster:

npm install -g create-react-app

We kunnen nu doorgaan en gebruiken create-reactie-app om onze nieuwe React-app te ondersteunen. Het zal ook een map op het hoogste niveau maken om onze projectbestanden te bevatten. Open een opdrachtregelvenster en ga naar de map waarin u uw app wilt plaatsen (bijvoorbeeld / Desktop) en typ het volgende in:

create-react-app movie-mojo

Het proces duurt ongeveer een minuut, maar als dit het geval is, ziet u een bericht dat er ongeveer zo uitziet:

Succes! Movie-mojo gemaakt op / Users / davidgwyer / Desktop / movie-mojo In die map kunt u verschillende opdrachten uitvoeren: garen start Start de ontwikkelserver. yarn build Bundelt de app in statische bestanden voor productie. garentest Start de testloper. garen uitwerpen Verwijdert deze tool en kopieën bouwen afhankelijkheden, configuratiebestanden en scripts in de app-map. Als je dit doet, kun je niet meer terug! We raden je aan om te beginnen met typen: cd movie-mojo yarn start Happy hacking!

Een nieuw movie-mojo map zal zijn gemaakt met de volgende bestandsstructuur:

De src map is waar u uw projectbestanden kunt bewerken en wanneer u uw app gaat implementeren, worden ze gebundeld en toegevoegd aan de openbaar map, klaar voor distributie.

Als u de voorbeeld-app in uw browser wilt bekijken, kunt u gebruikmaken van de miniserver van het web create-reactie-app. We moeten in de projectmap staan ​​die we zojuist hebben gemaakt, dus typ in het opdrachtregelvenster:

cd film-mojo

En dan:

npm start

Deze eenvoudige opdracht heeft drie belangrijke dingen. Het zal:

• Compileer onze voorbeeld React-app.
• Open een nieuw browservenster en bekijk onze app.
• Wijzigingen in projectbestanden controleren.

Na compilatie ziet u de volgende uitvoer:

Met succes samengesteld! Je kunt film-mojo nu bekijken in de browser. Lokaal: http: // localhost: 3000 / op uw netwerk: http://192.168.0.15:3000/ Merk op dat de ontwikkelingsopbouw niet is geoptimaliseerd. Gebruik garenopbouw om een ​​productie-build te maken.

En hier is de voorbeeldapp die in de browser wordt uitgevoerd.

Wanneer er wijzigingen in uw app worden aangebracht, wordt deze automatisch opnieuw gecompileerd en opnieuw geladen in het browservenster. Dit is echt een leuke functie van create-reactie-app en zal je tijdens de ontwikkeling veel tijd besparen!

U kunt zich ook concentreren op het coderen van uw app zonder afgeleid te worden door handmatig opnieuw te compileren en het browservenster voortdurend te vernieuwen om de nieuwste wijzigingen te bekijken.

Misschien is de beste workflow, als u over de beschikbare schermruimte beschikt, dat de browser en de teksteditor naast elkaar moeten worden geopend. Op die manier, wanneer u een wijziging aanbrengt in een van uw projectbestanden, ziet u de wijzigingen bijna onmiddellijk in het browservenster verschijnen.

Laten we eens proberen een verandering aan te brengen in ons voorbeeldproject.

Binnen in de src map, open App.js in je teksteditor. Probeer de lijn te veranderen:

Begin met bewerken src / App.js en opslaan om opnieuw te laden.

naar:

Welkom bij de React-app 'Movie Mojo'!

Zodra u de wijzigingen opslaat, wordt de React-app automatisch opnieuw gecompileerd en wordt het browservenster vernieuwd. Als je je werkruimte hebt gerangschikt zoals hierboven is aangegeven, zie je meteen hoe snel dit is.

Onze app structureren

Laten we de structuur van onze app instellen die we zullen gebruiken voor de rest van deze tutorial.

De create-reactie-app tool doet geweldig werk van onze app steiger, maar we hebben nog steeds de flexibiliteit om het aan te passen aan onze behoeften.

Laten we eerst de bestanden verwijderen die we niet langer nodig hebben van ons src map. We hebben geen servicemedewerkers nodig in onze app, dus verwijder de registerServiceWorker.js het dossier. Hiernaar wordt verwezen in index.js, dus open het in een editor en verwijder alle referenties zodat het er zo uitziet:

import Reageren van 'reageren'; import ReactDOM van 'react-dom'; import './index.css'; importeer de app van './App'; ReactDOM.render (, document.getElementById ( 'root'));

Verwijder vervolgens de logo.svg bestand en bewerken App.js om verwijzingen ernaar te verwijderen. Uw bijgewerkte bestand zou er nu als volgt uit moeten zien:

import Reageren, Component uit 'reageren'; import './App.css'; class-app breidt component render () terug ( 
 
 
Welkom bij React
 
 
 Welkom bij de React-app 'Movie Mojo'! 
 
 );  standaard app exporteren;

We kunnen ook van de App.test.js het dossier. Dit laat ons achter met de volgende bestanden in src:

• index.js
• index.css
• App.js
• App.css

We zullen meerdere componenten maken, dus laten we een speciale map maken om ze allemaal op te slaan. Inside src, maak een nieuw componenten map en voeg de App.js bestand naar het bestand. Onze app compileert niet goed totdat we een aantal referenties hebben bijgewerkt.

In index.js, werk het pad bij om het te importeren  component:

importeer de app van './components/App';

En in App.js, werk het pad naar bij App.css:

importeer '... / App.css';

Sla uw wijzigingen op en zorg ervoor dat uw app opnieuw compileert.

We zijn nu bijna klaar om te beginnen met het coderen van onze 'Movie Mojo'-app. Laten we eerst echter eerst weten hoe onze app wordt weergegeven.

Kijk eens naar index.js. Dit is het bestand dat onze app daadwerkelijk naar de DOM teruggeeft. Het doet dit via de ReactDom.render () methode, die twee argumenten omvat. Het eerste argument is het onderdeel dat we willen weergeven. In ons geval is dit de  component, de component op het hoogste niveau (en momenteel alleen) in onze app.

Het tweede argument specificeert het DOM-doelelement waaraan we onze React-app willen koppelen. Standaard maakt 'create-react-app' dit element automatisch. Als je een kijkje neemt in de openbaar map, er is een index.html welke een bevat