React

During this training, we will learn the basics of the React Framework. In this three-day ABIS course, we will study the fundamental ingredients of the framework , as well as how it is used to create a modern web application.

React is a JavaScript/TypeScript-based open-source framework, developed by Meta, that allows us to create front-end web applications. 

During this course, you will:

• learn how to write a complete single-page web application (SPA), in accordance with best practices for web development
• get acquainted with React's main building blocks, e.g. components, props, state and hooks.

Intended for

Web developers who are planning to use the React framework.

Backgroud

Knowledge of HTML and CSS and of TypeScript programming is required.

You can test yourself to see if you have enough background by filling out the online selftest "JavaScript" and the online selftest "HTML".

Main topics

• Introducing React
  • What is React
  • React (Version) History
  • Installation and Tooling: Vite and npm (or other package managers)
• React Hello World
  • Creating a React App with Vite
  • JSX vs. TSX
  • React Hello World
    • Project Structure
    • Application Files
• TypeScript for React
  • Definition and Key Features
  • TypeScript vs JavaScript
  • TypeScript Syntax
    • Data Types and Type Inference
    • Classes and Interfaces
    • Enums and Generics
  • TypeScript Setup in React
    • Configuration (tsconfig.json)
    • Compiling and Tooling
• Components and Props
  • Defining Components: functional Components vs class components
  • JSX/TSX Syntax
  • Using Props and Default Values
  • Children and Composition
  • Virtual DOM
  • Component Lifecycle: Mounting, updating, and unmounting
• State and Hooks
  • State in React
  • The useState Hook
  • The useEffect Hook
  • Custom Hooks
• Event Handling and Data Binding
  • Handling Events
  • The event object
  • Conditional rendering
  • Two‑Way Binding with Controlled Components
  • Passing Data Up with Callbacks
• Calling APIs
  • Async Programming in React
  • Fetching with fetch and axios
  • Error Handling
  • CORS
• Structuring Applications
  • Application Layers
  • Custom Hooks and Services
• Forms
  • Controlled Forms
  • Form Validation
  • Typed Form Inputs and Events
• Routing and Navigation
  • React Router
  • Route Parameters
  • Navigation and Links
  • Storage: localStorage, sessionStorage,...

Training method

Live instructor-led training, with plenty of opportunities for hands-on exercises and discussion

Delivered as a live, interactive training: available in-person or online, or in a hybrid format. 
Training can be implemented in English, Dutch, or French.
If interested in organising this training internally, get in touch with us; we can even customise it to meet your specific needs.

Certificate

At the end of the course session, the participant receives a 'Certificate of Completion'.

Duration
3 days.