Qu'est-ce que React ? ⚛️

React est une bibliothèque JavaScript populaire créée par Facebook en 2013. Elle vous permet de développer des interfaces rapides et conviviales pour les applications Web. Si vous avez déjà utilisé Facebook, Instagram ou Netflix, vous avez déjà rencontré React ! 🚀

Le principal avantage de React est approche par composants. Vous pouvez créer de petits blocs indépendants (composants) et les réutiliser comme des cubes LEGO ! 🧱

Comment commencer à programmer avec React ? 💻

Pour travailler avec React, vous aurez besoin de :

• ✅ Node.js — environnement d'exécution JavaScript (téléchargeable à partir de site officiel).

• ✅ Éditeur de texte, par exemple Visual Studio Code.

• ✅ Installer React avec create-react-app.

Comment installer React ? 🛠

Ouvrez le terminal (ou la ligne de commande) et entrez :

npx create-react-app my-app
cd my-app
npm start

Cette commande créera un nouveau projet sur React et démarrera un serveur local. Vous pouvez maintenant développer ! 🚀

Principales fonctionnalités de React 🔧

• Composants : Permettent de diviser le code en petites parties réutilisables.

• État (state) : Gère les données à l'intérieur de l'application.

• Événements : Permettent de répondre aux actions de l'utilisateur.

• DOM virtuel : Accélère la mise à jour de l'interface.

Les bases de React 📚

1. Composants 📦

Les composants sont la principale fonctionnalité de React. Ils peuvent être fonctionnels ou de classe.

Exemple de composant simple :

function Welcome() {
  return <h1>Привет, React!</h1>;
}

Ce composant peut être inséré n'importe où dans l'application.

2. JSX — JavaScript + HTML 📜

React utilise JSX, qui vous permet d'écrire du code HTML directement dans JavaScript.

Exemple de code JSX :

const element = <h1>Привет, мир!</h1>;

JSX rend le code plus lisible et plus pratique.

3. État (state) 🎛

L'état vous permet de gérer les données dynamiques dans le composant.

Exemple de composant avec state :

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

Lorsque l'utilisateur appuie sur le bouton, le nombre augmente ! 🔢

4. Gestionnaires d'événements 🖱

React permet de travailler facilement avec des événements, tels que des clics.

Exemple de gestionnaire d'événements :

function Button() {
  function handleClick() {
    alert('Button pressed!');
  }

  return <button onClick={handleClick}>Нажми меня</button>;
}

5. Travail avec les effets (useEffect) ⚙️

Hook useEffect permet d'exécuter le code lors du changement d'état.

Exemple :

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);

  return <p>Прошло {seconds} секунд</p>;
}

Ce composant compte les secondes à partir du moment où la page est chargée. ⏳

Projets simples sur React 💡

1. Compteur 📊

Créons un compteur qui augmente lorsque vous appuyez sur le bouton.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

2. Générateur de nombres aléatoires 🎲

Chaque fois que vous cliquez sur le bouton, un nouveau nombre apparaîtra.

import React, { useState } from 'react';

function RandomNumber() {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <p>Число: {number}</p>
      <button onClick={() => setNumber(Math.floor(Math.random() * 100))}>Сгенерировать</button>
    </div>
  );
}

Conclusion 🎉

React est un outil puissant pour créer des applications Web modernes. Nous avons examiné les bases : les composants, l'état, les événements et les effets. Vous pouvez maintenant commencer à développer vos premières applications React ! 🚀

L'essentiel est la pratique ! Plus tu écris de code, mieux tu le comprends. Alors n'hésitez pas à expérimenter et à créer vos propres projets ! Bonne chance pour apprendre React ! 😊