Introduction à React

React est une bibliothèque JavaScript pour construire des interfaces utilisateur. Elle a été développée par Facebook et est maintenant maintenue par Facebook et une communauté de développeurs individuels et d'entreprises. React permet aux développeurs de créer de grandes applications web qui peuvent changer de données sans recharger la page.

Dans ce guide, nous allons couvrir les bases de React et vous guider à travers la création de votre premier composant.

Pourquoi React?

React présente plusieurs avantages qui en font un choix populaire pour le développement frontend:

• Architecture basée sur les composants: React est construit autour du concept de composants réutilisables, ce qui facilite la gestion des interfaces utilisateur complexes.
• DOM virtuel: React utilise un DOM virtuel pour optimiser les performances de rendu.
• Syntaxe déclarative: React facilite la compréhension et le débogage de votre code.
• Fort soutien communautaire: React dispose d'une grande communauté et d'un écosystème de bibliothèques et d'outils.

Configuration de votre premier projet

La façon la plus simple de commencer avec React est d'utiliser Create React App, un outil qui configure un nouveau projet React avec une bonne configuration par défaut.

npx create-react-app mon-premier-app
cd mon-premier-app
npm start

Cela créera un nouveau projet React et démarrera un serveur de développement. Vous pouvez maintenant ouvrir votre navigateur et naviguer vers http://localhost:3000 pour voir votre application en cours d'exécution.

Création de votre premier composant

Dans React, un composant est un morceau d'interface utilisateur réutilisable. Créons un composant simple qui affiche un message de bienvenue.

// src/components/Greeting.js
import React from 'react';

function Greeting(props) {
  return (
    

      
Bonjour, {props.name}!
      
Bienvenue à React.
    
  );
}

export default Greeting;

Maintenant, vous pouvez utiliser ce composant dans votre fichier App.js:

// src/App.js
import React from 'react';
import Greeting from './components/Greeting';

function App() {
  return (
    

      
    
  );
}

export default App;

Comprendre les Props

Dans l'exemple ci-dessus, nous avons passé une prop appelée "name" à notre composant Greeting. Les props (abréviation de propriétés) sont un moyen de passer des données d'un composant parent à un composant enfant.

Ajout d'état à votre composant

Alors que les props sont passées à un composant, l'état est géré à l'intérieur du composant. Modifions notre composant Greeting pour inclure une variable d'état:

// src/components/Greeting.js
import React, { useState } from 'react';

function Greeting(props) {
  const [count, setCount] = useState(0);

  return (
    

      
Bonjour, {props.name}!
      
Bienvenue à React.
      
Vous avez cliqué sur le bouton {count} fois.
       setCount(count + 1)}>
        Cliquez-moi
      
    
  );
}

export default Greeting;

Conclusion

Ce guide a couvert les bases de React, y compris la configuration d'un projet, la création de composants, l'utilisation des props et la gestion de l'état. React a beaucoup plus à offrir, comme les méthodes de cycle de vie, les hooks, le contexte, et plus encore. Au fur et à mesure que vous poursuivez votre voyage React, vous découvrirez ces fonctionnalités et comment elles peuvent vous aider à construire des applications web puissantes.