greeeg / hetic-p2023-react

⚡️Introduction to React.js & modern front-end development for HETIC H2 students

hetic-p2023-react ·

Introduction à React.js et au développement front-end avancé à HETIC

🎯 Objectif

L'objectif de ce cours est d'introduire la librarie React.js et son rôle dans le développement d'applications web front-end modernes. Plus largement, il a également pour but de comprendre le panorama front-end, ses enjeux, son histoire et ses acteurs.

Très concrètement, être capable de développer une application React.js fonctionnelle et être en mesure de développer ses compétences par soi-même par la suite.

🗺 Ressources

• 👨‍🏫 La présentation: Site web PDF
• 🗺 La CheatSheet: GitHub
• 👩‍🔧 Sandbox: Codesandbox.io

🏁 Le plan

👀 Le contexte

• Comment s'affiche une page web ?
• Évolution du développement front-end

⚛️ React

• Qu'est-ce que React.js
• Les concepts derrière React
  • Declaratif vs Imperatif
  • Everything is a component
  • Learn once, write everywhere

🐣 Les bases de React.js

• Le JSX
• Les composants
• Les Props
• Le style
• Gestion des évènments
• Le state
• Le cycle de vie
• Le rendu conditionnel
• Les listes
• Les formulaires

🤔 Mise en perspective de React.js

• Avantages/Inconvénients
• Alternatives

👵 Aller plus loin avec React.js

• Utiliser create-react-app
• React Dev Tools
• Déployer une application React.js
• L'AJAX avec React.js
• Le CSS-in-JS
• Le routing
• Les performances

✨ L'écosystème React

• The React community
• React.js developer roadmap