React

Bon à savoir

Objectifs de la formation

Faire acquérir aux participants les connaissances des mécanismes de base de ReactJS et de Javascript.

Description

Le contenu est régulièrement mis à jour afin de correspondre aux dernières bonnes pratiques Javascript. La formation est appuyée par une pratique intensive de React et de ses outils. Le support de formation est un projet complet où l’accent est mis sur l’architecture et les bonnes pratiques.

Matériel pédagogique fourni

Le formateur distribuera les supports de la formation en format électronique à la fin de la formation.

D'autre part, le travail pendant ces 3 jours donnera lieu à la création d'une application web versionnée étape par étape. Chaque participant est invité à garder sur sa machine le code du projet de formation, qu’il aura rédigé lui-même avec l’aide du formateur, car ce code pourra servir de base technique pour de futurs projets.

Pré-requis

Afin de pouvoir profiter pleinement de la formation, les participants devront impérativement avoir une expérience professionnelle préalable dans les domaines suivants :

  • Bonne connaissance de Javascript

Les participants devront avoir un ordinateur avec un environnement LAMP comprenant de préférences les éléments suivants :

  • Une connexion internet permettant l'installation d'extensions afin de travailler en toute aisance (si formation hors de nos locaux),
  • Un IDE maîtrisé (PHPStorm, SublimeText, VSCode, ...),
  • Un shell UNIX,
  • La dernière version de NodeJS/NPM (https://nodejs.org/en/download/releases/)
  • Git installé (utile pour des dépendances de composer),
  • Un serveur MySql/MariaDB par personne,
  • Les droits d'administrateur sur la machine,

Il est conseillé de permettre aux participants d'utiliser un éditeur de texte avec lequel ils se sentent le plus à l'aise afin de se concentrer au maximum sur la formation.

Plus généralement, si la formation se déroule dans les locaux du client, il est demandé qu'une salle permettant d'accueillir l'ensemble des participants ainsi que le formateur soit réservée pendant l'intégralité de la durée de la formation. Un moyen de présentation écran (projecteur ou téléviseur plat de grande taille) devra être présent dans cette salle afin de permettre aux participants de visualiser l'écran du formateur. Un paperboard ou tableau effaçable et une connexion internet seraient également appréciés.

Adaptation des locaux aux stagiaires en situation de handicap

Nantes:

Nos locaux se situant dans un immeuble construit en 2023, il répond ainsi aux normes d'accessibilité aux personnes à mobilité réduite, nous sommes situés au premier étage avec ascenseur.

Caen:

Les locaux sont de plain-pied, l’accès par l’arrière du bâtiment est possible pour les publics en situation de handicap.

N’hésitez pas à nous contacter, nous nous ferons un plaisir de vous accompagner pour répondre au mieux à vos besoins pour votre demande de formation.

Le programme

  1. Getting started - Bootstrap d'une application react

    1. Boostrap

    2. Installer

    3. Architecture

    4. Exécuter et nettoyer

  2. JSX - Templating

    1. Hello World

      1. Expressions intégrées

      2. Attributes

      3. Children

  3. Composants

    1. Composants fonctionnels et composants de classe

      1. Créer un composant d'accueil

      2. Jouer avec les accessoires de composants

      3. CSS et noms de classe

      4. Étapes et cycles de vie

    2. GitClicker - Cookie Clicker

  4. Hooks

    1. Classe et composants fonctionnels

    2. States

    3. Refactorisez vos classes react en composants fonctionnels

    4. Ajoutons une animation sur le Gitcoin !

    5. Créer un object store

      1. useEffect

      2. Nous devons acheter ces objets !

    6. PropTypes

      1. Installer prop-types et eslint

      2. Props par défaut

      3. Correction des erreurs eslint

  5. Routing

    1. Installation

    2. Bootstrap du routage sur l'application

  6. Ajoutons un peu de design

    1. Installation & run

    2. Qu'y a-t-il sous le capot ?

    3. Routage

  7. Redux et les "Side Effects"

    1. Store, Action, Reducer

    2. State

    3. Architecture

    4. Utilisation des Hooks

    5. Mise en route

    6. Créer le module de jeu

    7. Refactorer du module de jeu

  8. Tests unitaires

    1. Jest

      1. Jest - Configuration d'Eslint

      2. Utilisation

      3. Tester le module game.js

    2. Unite testing

      1. React Testing Library

        1. Utilisation

        2. Utilisation avec react-router

        3. Utilisation avec redux

        4. Composants de test

  9. Side Effects

    1. Redux Thunk

      1. Dispatcher des actions asynchrones

      2. Installer et configurer

      3. Sauver la partie avec des effets secondaires

      4. Appeler un endpoint API

      5. Variable d'environnement

      6. Appeler un point de terminaison de l'API

  10. Forms

    1. Passons à une étape plus avancée

    2. La forme finale de React

    3. Ce qu'il y a derrière le capot

    4. CreateItemForm, composant de formulaire

    5. EditItemForm, composant de formulaire

    6. Supprimer un élément

Témoignages

Victor P. - April Marine

« La formation répondait tout simplement à mon besoin. Merci pour votre accueil ! »

Valentin C. - Web ID

« Merci à Antoine, c'était top d'apprendre React avec toi. »

Gabriel P. - Web ID

« GG à Antoine pour la formation, ça faisait plaisir de le revoir hors du contexte Yousign ! »

Ils recommandent nos formations