• Homepage
  • >
  • React Fundamentals/ Introduction to React
React Fundamentals/ Introduction to React

React Fundamentals/ Introduction to React

React is waarschijnlijk de populairste frontend 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 data 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.

Wat leer je?

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

De training Introduction to React is bedoeld voor programmeurs en webdevelopers die hun frontendapplicaties los van het backend willen ontwikkelen en hiervoor hebben gekozen voor React. Ook backendontwikkelaars (PHP, Java, C#) kunnen zich de React-werkwijze en -syntaxis relatief snel eigen maken.

Welke voorkennis heb je nodig?

– 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.

Trainingsvorm

Offerte formulier

Wij proberen je aanvraag binnen 2 werkdagen te verwerken. Telefoonnummer is niet direct nodig, maar handig als we nog vragen hebben.

Heb je een vraag?

Neem dan contact op met onze klantenservice voor studieadvies of een training op maat.

React Fundamentals/ Introduction to React

Wij proberen je aanvraag zo snel mogelijk te beantwoorden. Meestal zou dat op de dag zelf gebeuren. Om je sneller van dienst te zijn vragen we je telefoonnummer.

Trainingsdata

Heeft je voorkeursdatum geen doorgangsgarantie, neem dan voor de zekerheid contact met ons op. Vaak hebben we een oplossing voor je waarmee je doel gehaald kan worden.

React Fundamentals/ Introduction to React

Wij proberen je aanvraag zo snel mogelijk te beantwoorden. Meestal zou dat op de dag zelf gebeuren. Om je sneller van dienst te zijn vragen we je telefoonnummer.

Startdatum

Trainingsvorm

Locatie

Duur

Prijs

datum:
25 oktober 2021

Virtueel

Virtual

3

1,380.00

Offerte formulier

Wij proberen je aanvraag binnen 2 werkdagen te verwerken. Telefoonnummer is niet direct nodig, maar handig als we nog vragen hebben.

DatumStarttijdEindtijd
2021-10-2509:0016:00
2021-10-2609:0016:00
2021-10-2709:0016:00
datum:
17 januari 2022

Virtueel

Virtual

3

1,380.00

Offerte formulier

Wij proberen je aanvraag binnen 2 werkdagen te verwerken. Telefoonnummer is niet direct nodig, maar handig als we nog vragen hebben.

DatumStarttijdEindtijd
2022-01-1809:0016:00
2022-01-1709:0010:00
2022-01-1909:0016:00
datum:
17 januari 2022

Klassikaal

Startel (Drachten)

3 dagen

1,380.00

Offerte formulier

Wij proberen je aanvraag binnen 2 werkdagen te verwerken. Telefoonnummer is niet direct nodig, maar handig als we nog vragen hebben.

DatumStarttijdEindtijd
2022-01-1909:0016:00
2022-01-1809:0016:00
2022-01-1709:0016:00
datum:
28 maart 2022

Virtueel

Virtual

3

1,380.00

Offerte formulier

Wij proberen je aanvraag binnen 2 werkdagen te verwerken. Telefoonnummer is niet direct nodig, maar handig als we nog vragen hebben.

DatumStarttijdEindtijd
2022-03-2909:0016:00
2022-03-2809:0010:00
2022-03-3009:0016:00
datum:
28 maart 2022

Klassikaal

Startel (Drachten)

3 dagen

1,380.00

Offerte formulier

Wij proberen je aanvraag binnen 2 werkdagen te verwerken. Telefoonnummer is niet direct nodig, maar handig als we nog vragen hebben.

DatumStarttijdEindtijd
2022-03-3009:0016:00
2022-03-2909:0016:00
2022-03-2809:0016:00
datum:

In company

Offerte formulier

Wij proberen je aanvraag binnen 2 werkdagen te verwerken. Telefoonnummer is niet direct nodig, maar handig als we nog vragen hebben.

Waarom Startel?

Persoonlijke
aanpak
Ervaren
trainers
Aanbod
op maat
Klassikaal en e-learning
mogelijkheden

Het programma

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


Wat is React, overzicht van het front-end landschap.


o Hoe ziet een React-applicatie eruit.


o Tooling – npx, create-react-app, React DevTools, Node.js en de browser.


o Je eerste React-project.


– De werkomgeving instellen


o Een project maken met create-react-app.


o Het project starten.


o De homepage aanpassen.


React componenten en composition:


o Class based componenten vs. Function based componenten.


o Data en state in componenten.


o Het principe van one-way data flow.


o Componenten nesten.


o Props doorgeven in componenten.


o “Lifting state up”.


o Korte introductie in React Hooks.


– Werken met data


o Externe data laden en tonen.


o Detailgegevens tonen.


o Reageren op events.


– Class-based Lifecycle hooks


o Wat zijn lifecycle hooks?


o ComponentDidMount()


o ComponentDidUpdate()


o ComponentWillUnmount()


o Verouderde lifecycle hooks.


React Componenten Styling


o CSS globaal en lokaal.


o Inline styles definiëren als constante.


o Werken met CSS Modules.


o Werken met CSS preprocessors zoals SASS.


Gebruikersinvoer verwerken


o Werken met invoervelden.


o Meer formuliervelden: radio buttons, selectievakjes en textareas.


o Keuzes uit dropdown-lijsten verwerken.


Communicatie met externe API’s


o Hoe gaat React om met externe data?


o Werken met axios.


o Ajax-calls instellen en afvuren.


o Resultaten van Ajax-requests verwerken.


o Een indicatie voor laden (of: Spinner) laten zien.


Werken met React Router


o Wat is routing in webapplicaties?


o Alternatief: Reach Router.


o Routing Basics – installatie, links naar routes.


o De actieve link afwijkende opmaak geven.


o Werken met Route Parameters.


o Navigeren via code.


React Hooks in detail


o Nogmaals: werken met Function based components.


o De hook useState().


o De hook useEffect().


o ES6-syntaxis voor destructuring.


o Zelf hooks schrijven.


Een korte introductie in Redux


o Wat is State management?


o Waarom Redux?


o De basis van Store, Actions, Reducers en Dispatcher.


o Vervolgstappen.


Deployment: React-applicaties online publiceren


o React applicatie uitrollen naar een productieserver.


o Publiceren op een lokale webserver.


o Publiceren bij een gratis online hosting provider.

Hoe maken we het persoonlijk?

Bij Startel is persoonlijk ook écht persoonlijk. Om de best passende trainingen te geven starten we met het belangrijkste ingrediënt: jou.

  1. We starten altijd met een intake om jou te leren kennen.
  2. We passen de Training aan de hand van jouw ambitie en doelen aan.
  3. We kijken ook naar jouw persoonlijke situatie om de lesstof zo praktisch mogelijk te maken.

Contact formulier

Wil je informatie of wil je een maatwerk training. Neem dan Contact met  ons op.

React Fundamentals/ Introduction to React

Wij proberen je aanvraag zo snel mogelijk te beantwoorden. Meestal zou dat op de dag zelf gebeuren. Om je sneller van dienst te zijn vragen we je telefoonnummer.

categorie: 
  • Development

Op de hoogte blijven van de nieuwste trainingen?

Schrijf je in voor onze nieuwsbrief!

Inschrijven nieuwsbrief