Course React Fundamentals

In the course React Fundamentals you will learn to use the open source ReactJS JavaScript library for the development of modern Single Page Applications.

React Components

React has a programming model where child component do not influence parent components in an update, providing a clean separation of components in a single-page application.

Virtual DOM

After introducing the main characteristics of React such as the Virtual DOM, JSX, component renderers and callback functions, it is discussed how to create a first React app with the right combination of developer tooling like React, Webpack and Babel.

JSX

React uses the functional programming style whose main characteristics in JavaScript are highlighted. Next attention is paid to React Views that put a nested component tree with HTML custom tags on the screen. The creation of components with the JavaScript extension JSX is discussed as well.

Routing en Forms

Also Forms, Validation and Routing in React Applications are on the course schedule.

Redux

Finally the use of the Redux Framework that is often used in combination with React is discussed.

Audience React Fundamentals Course

Developers who want to learn how to program with the ReactJS JavaScript library for building modern state of the art web applications.

Prerequisites Course React Fundamentals

Experience with programming in a modern programming language is required. Knowledge and experience with JavaScript is beneficial for a good understanding.

Realization Training React Programming

The theory is treated on the basis of presentation slides. The concepts are illustrated with demos. The theory is interspersed with exercises. The course times are from 9.30 to 16.30.

Certification React Fundamentals

The participants receive an official certificate React Fundamentals after successful completion of the course.

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