React

Good to know

Training goal

This training will teach the participants the basic mechanisms of ReactJS and Javascript.

Detailed contents

The training is regularly updated to be consistent with the latest Javascript best practices. The training is based on an intensive practice of React and its tools. The training material is a complete project with the emphasis on architecture and best practices.

Course materials provided

The trainer will distribute the training materials in electronic format at the end of the training.

In addition, the work done during these 3 days will result in the creation of a step-by-step versioned web application. Each participant is invited to keep on their machine the code of the training project, which they will have written themselves with the help of the trainer, because this code can be used as a technical base for future projects.

Prerequisites

In order to fully benefit from the training, participants must have previous professional experience in the following areas :

Good knowledge of Javascript

Participants should have a computer with a LAMP environment, including preferably the following elements :

An internet connection allowing working with ease (if the training is held outside our premises),
An IDE they master (PHPStorm, SublimeText, VSCode, ...),
A UNIX shell,
The latest version NodeJS/NPM (https://nodejs.org/en/download/releases/) ,
Git installed (useful for composer dependencies),
One MySql/MariaDB server per person,
Administrator rights on the machine,

It is recommended for the participants to use a text editor they are comfortable with, so that they can focus on the training.

If the training is held in the Client's premises, we require for the Client to provide a separate room for the training to take place, big enough to accommodate all participants and the trainer, for the whole duration of the training. A video projector or wide screen TV must be provided so that the participants can see the trainer's laptop computer screen. A paperboard or white board would be much appreciated.

Training course

Getting started - Bootstrap a react application
1. Boostrap
2. Install
3. Architecture
4. Run & Clean up
JSX
1. Hello World
  1. Embedded expressions
  2. Attributes
  3. Children
Components
1. Functional vs Class components
  1. Create a greeting component
  2. Playing with component props
  3. CSS & class names
  4. Stages & Lifecycles
2. GitClicker - Cookie Clicker like
Hooks
1. Class & Functional components
2. States
3. Refactor your react classes to functional components
4. Let's add an animation on the Gitcoin!
5. Create a store of items
  1. useEffect
  2. We need to buy these items!
6. PropTypes
  1. Install prop-types and eslint
  2. Default props
  3. Fix eslint errors
Routing
1. Install
2. Bootstrap the routing on the application
Let’s add some design
1. Install & exécuter
2. What is under the hood ?
3. Routing
Redux and Side Effects
1. Store, Action, Reducer
2. State
3. Architecture
4. Usage of Hooks
5. Getting started
6. Create the game module
7. Refactoring the game module
Unit testing
1. Jest
  1. Jest - Eslint configuration
  2. Usage
  3. Test the game.js module
2. Unite testing
  1. React Testing Library
  2. Usage
  3. Usage with react-router
  4. Usage with redux
  5. Testing components
Side Effects
1. Redux Thunk
  1. Dispatch asynchronous actions
  2. Install & configure
  3. Save the game with side effects
  4. Call an API endpoint
  5. Environment variable
  6. Call an API endpoint
Forms
1. Let's move on to a more advanced step
2. React final form
3. What's behind the hood
4. CreateItemForm, form component
5. EditItemForm, form component
6. Delete an item