React Fundamentals

React Components

React heeft een programmeer model waarin subcomponenten bovenliggende componenten niet beïnvloeden bij een update, zodat de componenten goed gescheiden zijn in een single page application.

Virtual DOM

Na een introductie over de voornaamste kenmerken van React zoals de Virtual DOM, JSX, component renderers en callback functions, komt aan de orde hoe u een eerste React app maakt met de juiste combinatie van developer tooling zoals React, Webpack en Babel.

JSX

React maakt gebruik van de functionele programmeer stijl waarvan de belangrijkste kenmerken in JavaScript op een rij worden gezet. Vervolgens wordt aandacht besteed aan React Views die een geneste component tree met HTML custom tags op het scherm zetten. Ook wordt in de cursus ook ingegaan op het bouwen van componenten met de JavaScript extensie JSX.

Routing en Forms

En tenslotte komen ook Forms en Validation en Routing in React Applicaties aan de orde.

Redux

De cursus wordt afgesloten met een behandeling van het Redux Framework dat veelal in combinatie met React wordt gebruikt.

Doelgroep Cursus React Fundamentals

De cursus React Fundamentals is bestemd voor developers die de ReactJS JavaScript library willen leren voor het bouwen van moderne state of the art web applicaties.

Voorkennis cursus React Fundamentals

Ervaring met programmeren in een moderne programmeertaal is vereist. Kennis en ervaring met JavaScript is bevorderlijk voor een goede begripsvorming.

Uitvoering Training React Fundamentals

De theorie wordt behandeld aan de hand van presentatie slides. De concepten worden toegelicht met demo's. De theorie wordt afgewisseld met oefeningen. De cursustijden zijn van 9.30 tot 16.30.

Officieel Certificaat React Fundamentals

De deelnemers krijgen na het goed doorlopen van de cursus een officieel certificaat React Fundamentals.

Modules

Module 1 : React Intro

• What is React?
• React Features
• Benefits of React
• JSX
• Virtual DOM
• Webpack Module Builder
• Webpack Features
• Webpack.config
• ES6 Features
• Babel
• Benefits of Redux
• React Scripts

Module 2 : Components

• React Components
• JSX Component
• React and JSX
• JSX versus JavaScript
• Single Root
• JSX XSS Protection
• Props Collection
• Props in Variables
• propTypes
• List of Props Types
• Default Props
• Rendering State

Module 3 : Composition and LifeCycle

• Composing Components
• Refs and DOM
• Components with Behavior
• Pass State Update
• Accessing Child Components
• Mounting and Unmounting
• Components Lifecycle
• Updating Events
• Dynamic Tables
• ReadOnly and ReadWrite
• Higher Order Components
• Hooks

Module 4 : Forms and Validation

• ReadOnly
• ReadWrite
• Forms in React
• Controlled Components
• Uncontrolled Components
• Textarea Tag
• Select Tag
• Field Level Validation
• Form Level Validation
• Submit Handlers

Module 5 : React Routing

• Defining Routes
• Default Route
• Not Found Route
• Nesting and Params
• Multiple Params
• Redirects
• Include External Routes
• Running the Router
• Using Universal Rendering
• Access Router Methods

Module 6 : Redux Framework

• React with Redux
• Three Principles
• Redux Flow
• Connecting to React
• Store
• Actions
• Reducer
• Data Flow
• Unidirectional
• Async Flow