Formation React

14-15 février 2022
Blablacar x WeLoveDevs.com
  • Clément Devos - 30 ans
  • Marié - 1,95 enfants
  • Développeur Web
  • WeLoveDevs.com
  • Ingénieur Centrale-IG2I
  • RS : @clementdevos (twitter) , clementdevos (github)

WeLoveDevs.com

  • Fondé en 2016
  • 2 co-fondateurs développeurs
  • “Ca devrait être facile de trouver un job”
  • Jobboard WeLoveDevs.com
  • Expertise accompagnement marque employeur
    • Création de contenu
    • Audits
    • Accompagnement blog technique

Objectifs de la formation

  1. Comprendre l'écosystème et les outils de React
  2. Comprendre et rédiger du code en JSX

Partie 0

Présentons-nous

Programme de la formation

4 Demi journées

  1. Présentation de React et de l’outillage
  2. Ecrire de la syntaxe React (JSX, Components)
  3. Interactions et cycle de vie (hooks)
  4. Outils avancés : Routage, gestion de l’état

70% pratique, 30% théorique

Partie 1

Présentation

Pourquoi React?

Le DOM

Transition de l'architecture Web

  • Multi Devices
  • Augmentation du nombre d'applications
  • Nécessité du découplage
  • Nécessité de structurer les applications

En 2010

Backbone JS

  • MVC
  • Séparer la vue du model

En 2012

angular.js

  • 2-way databinding
  • Framework
  • Opiniated

En 2013

Facebook introduit React

  • La vue devient une fonction
  • Déclaratif*
  • Orienté Composants
  • Implémentation libre

20xx

Web Components ?

  • HTML/CSS/JS seulement
  • Spécifications W3C
                            
import './my-header.js';
import './my-article.js';
import './my-footer.js';

class MyPage extends LitElement {
  render() {
    return html`
      
      
      
    `;
  }
}

Un peu d'architecture front

2000-2010

  • Server Side Rendering
  • AJAX pour dynamiser le contenu

2010

  • Découplage Client/serveur (API)
  • Client side rendering (App Mobile)
  • Augmentation des appels HTTP

20xx

  • Recouplage client/serveur
  • Hybrid Server Side rendering
  • Static Site Generator (next.js)
  • Micro Front-ends?

React

Fonctionnalités

  • Composants
  • Virtual DOM
  • JSX
  • Gestion de l'état
  • SSR

Historique

  • Première release 0.3 (29/05/2013)
  • "Stable" depuis la v16.8 (02/2019)
    • Livraison des hooks
  • v17 stable : Changement de performance/sécurité
  • v18
    • Rendu asynchrone

Communauté

  • 182k ⭐ Github
  • 2M de repo github
  • https://github.com/enaqx/awesome-react

JSX

Comment les navigateurs le lisent?

See the Pen Hello World in React by Dan Abramov (@gaearon) on CodePen.

Trans(com)pileurs

  • ES6 ==> ES3
  • JSX ==> Javascript
Babel, Typescript

Bundlers

  • Faciliter la livraison du code
  • Code splitting
  • Minifying
  • ...
Webpack, vite, rollup

Fin partie 1

Partie 2

Syntaxe JSX/API

Rappels Javascript (ES6)

React API/JSX

Fin partie 2

Partie 3

Hooks

Fin partie 3

Partie 4

Router / State Management

Router

State management

Et voila!

Ca va?

Petit QCM de fin de formation

Ici
Sources
Exercices/infos supplémentaires
Doc intéressante sur create react app
Pour déployer, quelques pistes
  • Faire tourner votre appli buildée sur le port 8080 dans un docker (avec un apache/ avec serve...)
  • Utiliser Clever cloud/vercel ... qui font tourner avec un package.json