Cours n°1 : Introduction à React

Introduction à React

Qu’est-ce que React ?

React est une bibliothèque JavaScript open-source développée par Facebook (maintenant Meta) pour créer des interfaces utilisateur (UI). L’objectif principal de React est de faciliter la création de composants réutilisables pour des applications web interactives, performantes et dynamiques.

Historique de React

• 2011 : React est initialement développé en interne chez Facebook pour gérer les performances de l’interface utilisateur.
• 2013 : React est publié en open-source. Depuis lors, il a rapidement gagné en popularité grâce à sa philosophie et son efficacité.
• 2022 : React est devenu l’une des bibliothèques front-end les plus utilisées au monde.

Pourquoi React est-il si populaire ?

1. Composants Réutilisables :
   • React permet de diviser l’interface utilisateur en composants réutilisables, ce qui améliore la maintenabilité et la modularité du code.
2. Performance Élevée grâce au Virtual DOM :
   • React utilise un DOM virtuel (Virtual DOM), qui minimise les manipulations du DOM réel, augmentant ainsi les performances.
3. Écosystème Étendu :
   • Avec des outils comme React Router (pour la gestion des routes) et Redux (pour la gestion de l’état), React offre un écosystème complet pour les applications modernes.
4. Grande Communauté :
   • Une large communauté de développeurs contribue à l’évolution de React et à la création de nombreuses bibliothèques et outils.
5. Adoption par les Grandes Entreprises :
   • Des entreprises comme Facebook, Instagram, Netflix, Airbnb, et bien d’autres utilisent React pour leurs applications.

Intérêts et Avantages de React

• Simplicité et Flexibilité : React est facile à comprendre, surtout pour ceux qui ont des bases solides en JavaScript.
• Réactivité : Grâce à son modèle de composants, React facilite la création d’interfaces interactives.
• Facilité d’Apprentissage : Comparé à d’autres frameworks front-end, React se concentre uniquement sur la vue, ce qui simplifie son apprentissage.
• Richesse Fonctionnelle : Avec des concepts comme JSX, props, state, et hooks, React offre une richesse de fonctionnalités pour créer des applications web modernes.

Chapitre 1 : JSX et Composants en React

JSX : Qu’est-ce que c’est ?

Définition

JSX (JavaScript XML) est une extension de syntaxe qui permet de combiner HTML et JavaScript. Elle rend le code plus lisible et expressif en permettant d’écrire des balises HTML directement dans le JavaScript.

Pourquoi Utiliser JSX ?

• Lisibilité : JSX permet de voir clairement la structure des composants.
• Dynamisme : Il permet d’insérer des expressions JavaScript directement dans le HTML.
• Facilite l’Intégration UI : Les interfaces utilisateur sont plus faciles à créer et à maintenir.

Exemple Basique de JSX :

const element = <h1>Hello, React!</h1>;
console.log(element);

Le code ci-dessus est un exemple de JSX, où une balise HTML <h1> est écrite directement dans le JavaScript.

Comment fonctionne JSX ?

JSX n’est pas compris directement par les navigateurs. Il est transformé en code JavaScript pur par un compilateur comme Babel.

JSX Transpile :

const element = <h1>Hello, React!</h1>;

Transpilé en JavaScript pur :

const element = React.createElement('h1', null, 'Hello, React!');

2.2 Composants en React

Qu’est-ce qu’un Composant ?

Un composant est la brique de base d’une application React. Chaque composant correspond à une partie de l’interface utilisateur. Par exemple, une barre de navigation, un bouton, ou une carte peuvent être des composants.

Types de Composants :

1. Composants Fonctionnels :
   • Ce sont des fonctions JavaScript simples qui retournent du JSX.
   • Ils sont recommandés pour leur simplicité et leur efficacité.
2. Composants à Classe (Legacy) :
   • Ce sont des classes ES6 qui héritent de React.Component.
   • Utilisés principalement dans les anciennes versions de React, remplacés par les hooks dans les composants fonctionnels.

Création d’un Composant Fonctionnel

Exemple Basique :

function Welcome() {
    return <h1>Bienvenue sur React !</h1>;
}

export default Welcome;

Utilisation d’un Composant :

Une fois créé, un composant peut être utilisé comme une balise HTML.

import Welcome from './Welcome';

function App() {

    return (
        <div>
            <Welcome />
        </div>
);
}

export default App;

Propriétés (Props) : Passer des Données à un Composant

Les props permettent de passer des données d’un composant parent à un composant enfant.

Exemple avec Props :

function Welcome(props) {
    return <h1>Bienvenue, {props.nom} !</h1>;
}

function App() {
    return (
        <div>
            <Welcome nom="Alice" />
            <Welcome nom="Bob" />
        </div>
);
}

Dans cet exemple :

Le composant Welcome reçoit une prop nom et l’affiche dynamiquement.

Points Clés des Composants :

1. Réutilisables : Un composant peut être utilisé plusieurs fois avec des données différentes.
2. Immutables : Les props sont immutables, ce qui signifie qu’un composant ne peut pas les modifier.
3. Composants Emboîtés : Vous pouvez combiner plusieurs composants pour créer des interfaces utilisateur complexes.

Conclusion

Pourquoi Apprendre React ?

• React est un outil puissant pour créer des interfaces utilisateur dynamiques et réactives.
• Avec son système de composants réutilisables et sa syntaxe JSX, il permet de créer des applications modernes de manière efficace.
• Sa courbe d’apprentissage est adaptée aux développeurs débutants comme confirmés.

Dans le prochain chapitre, nous approfondirons l’utilisation des props, explorerons le state et comprendrons la gestion des événements en React.