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.
In order to fully benefit from the training, participants must have previous professional experience in the following areas :
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.
Getting started - Bootstrap a react application
Run & Clean up
Functional vs Class components
Create a greeting component
Playing with component props
CSS & class names
Stages & Lifecycles
GitClicker - Cookie Clicker like
Class & Functional components
Refactor your react classes to functional components
Let's add an animation on the Gitcoin!
Create a store of items
We need to buy these items!
Install prop-types and eslint
Fix eslint errors
Bootstrap the routing on the application
Let’s add some design
Install & exécuter
What is under the hood ?
Redux and Side Effects
Store, Action, Reducer
Usage of Hooks
Create the game module
Refactoring the game module
Jest - Eslint configuration
Test the game.js module
React Testing Library
Usage with react-router
Usage with redux
Dispatch asynchronous actions
Install & configure
Save the game with side effects
Call an API endpoint
Call an API endpoint
Let's move on to a more advanced step
React final form
What's behind the hood
CreateItemForm, form component
EditItemForm, form component
Delete an item