React Fundamentals / Introduction to React

Algemene omschrijving

React is waarschijnlijk de populairste front-end bibliotheek voor het maken van webapplicaties. Oorspronkelijk komt React uit de stal van Facebook, maar in 2013 is de bibliotheek als open source beschikbaar gesteld. Iedereen kan met de broncode aan de slag. React wordt onder meer gebruikt door BBC, Dropbox, Instagram, Airbnb, Uber, Netflix, Slack en talloze andere bedrijven en organisaties.

React is geheel gebaseerd op componenten. Deze worden geschreven in ES6/ECMAScript 2015 (de nieuwe versie van JavaScript). Gedegen JavaScript-kennis is dan ook van belang. Vervolgens wordt de applicatie opgebouwd als een boomstructuur van componenten.

In de training wordt ingegaan op de best practices rondom de structuur en architectuur van React-applicaties en leer je alle conventies om snel met deze bibliotheek aan de slag te gaan. Concreet ga je zelf aan de slag met code om componenten te schrijven (functies of classes), het doorgeven van props en events om componenten met elkaar te kunnen laten communiceren, het opmaken van componenten en het werken met externe gegevens en API's via http.

In de training wordt daarnaast aandacht besteed aan moderne werkwijzen voor React-componenten en -applicaties zoals het werken met React Hooks. Je maakt ook kennis met de wijze waarop state management kan worden uitgevoerd met Redux.

Doelgroep

De React Fundamentals/Introduction to React-training is bedoeld voor programmeurs en webontwikkelaars die hun front-end applicaties los van het back-end willen ontwikkelen en hiervoor hebben gekozen voor React. Ook back-end ontwikkelaars (bijvoorbeeld: PHP, Java en C#) kunnen zich de React-werkwijze en -syntaxis relatief snel eigen maken.

Leerdoelen

Na afloop van de React Fundamentals/Introduction to React-training ken je het React-ecosysteem en kun je zelf React-applicaties opzetten volgens best practices, onderhouden en uitrollen naar productie.

Voorkennis

• Kennis van het ontwikkelen van webapplicaties met HTML, CSS en JavaScript.
   
• Kennis van een ander framework zoals Angular, Vue of Svelte is handig, maar niet beslist noodzakelijk.
   
• Enige kennis van Node.js en het installeren van packages met NPM.
   
• Enige kennis van modern JavaScript zoals classes, arrow functions en objectnotaties.
   
• Werken met een code-editor zoals Visual Studio Code (gratis), Jetbrains Webstorm (30-dagenversie beschikbaar) of vergelijkbaar.
   
• Kennis van de Engelse taal. Veel bronnen en naslagwerken zijn alleen in het Engels beschikbaar.

Onderwerpen

In de React Fundamentals/Introduction to React-training komen de volgende onderwerpen aan de orde:

Wat is React, overzicht van het front-end landschap

• Hoe ziet een React-applicatie eruit.
• Tooling – npx, create-react-app, React DevTools, Node.js en de browser.
• Je eerste React-project.
  • De werkomgeving instellen.
• Een project maken met create-react-app.
• Het project starten.
• De startpagina aanpassen.

React-componenten en -compositie

• Class-based componenten vs. Function-based componenten.
• Data en state in componenten.
• Het principe van one-way data flow.
• Componenten nesten.
• Props doorgeven in componenten.
• “Lifting state up”.
• Korte introductie in React Hooks.
  • Werken met gegevens.
• Externe gegevens laden en tonen.
• Detailgegevens tonen.
• Reageren op events.
  • Class-based Lifecycle hooks.
• Wat zijn lifecycle hooks?
• ComponentDidMount().
• ComponentDidUpdate().
• ComponentWillUnmount().
• Verouderde lifecycle hooks.

React-componentenstyling

• CSS globaal en lokaal.
• Inline styles definiëren als constante.
• Werken met CSS Modules.
• Werken met CSS-preprocessors zoals SASS.

Gebruikersinvoer verwerken

• Werken met invoervelden.
• Meer formuliervelden: radio buttons, selectievakjes en tekstgebieden.
• Keuzes uit dropdown-lijsten verwerken.

Communicatie met externe API’s

• Hoe gaat React om met externe gegevens?
• Werken met axios.
• Ajax-calls instellen en afvuren.
• Resultaten van Ajax-requests verwerken.
• Een indicatie voor laden (of: Spinner) laten zien.

Werken met React Router

• Wat is routing in webapplicaties?
• Alternatief: Reach Router.
• Routing Basics – installatie, links naar routes.
• De actieve link afwijkende opmaak geven.
• Werken met Route Parameters.
• Navigeren via code.

React Hooks in detail

• Nogmaals: werken met Function-based components.
• De hook useState().
• De hook useEffect().
• ES6-syntaxis voor destructuring.
• Zelf hooks schrijven.

Een korte introductie in Redux

• Wat is State management?
• Waarom Redux?
• De basis van Store, Actions, Reducers en Dispatcher.
• Vervolgstappen.

Deployment: React-applicaties online publiceren

• React-applicatie uitrollen naar een productieserver.
• Publiceren op een lokale webserver.
• Publiceren bij een gratis online hosting provider.