Développement web avancé

ReactJS

Année 2024-2025

L'enseignant

Clément Dandrieux
clement.dandrieux@proton.me

Questions pédagogiques

• Sur le canal Discord dédié
• Par Discord en privé
• Par mail

Organisation et Evaluation

• Évaluation continue
• Une évaluation théorique
• Hackathon

Introduction

• Prérequis et ressources
• React, qu’est-ce que c’est ?

Prérequis

• Les langages HTML, CSS et Javascript
• Fonctionnalités d’ES6 (arrow functions, classes, let, const...)

Ressources

• Le cours
• Le MDN, la bible du Javascript
• La doc officielle de React (en anglais de préférence...)

React, qu’est-ce que c’est ?

React est une bibliothèque Javascript déclarative, efficace et flexible conçue pour faire des interfaces utilisateur

• Développé par Facebook
• Depuis 2013
• Open-source (MIT)
• Utilisé par Facebook, Netflix, Slack...

Les composants

React permet de créer des interfaces utilisateur complexes depuis de petits morceaux de code isolés appelés composants.

La compilation

La syntaxe <div></div> est transformée au moment de la compilation en React.createElement('div')

                                
                                    const Hello = () => {
                                        return React.createElement("section", null,
                                            React.createElement("h1", null, "Salut")
                                        )
                                    }
                                
                            

Passer des données avec les props

Maintenir un état avec le state

A vous d'essayer

Faut bien mettre un peu les mains dedans...

Exercice 1 : Modifiez HelloAll

Modifiez le composant HelloAll pour utiliser plusieurs fois le composant Hello avec des prop "name" différents.

Exercice 2 :

• le bouton ajoute 2 au compteur
• le compteur n'affiche que les nombres impairs
• une alerte soit affichée au clic