React.js, développé et maintenu par Facebook, est devenu l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur, en particulier des applications à page unique (SPA). Connu pour sa flexibilité, son efficacité et sa facilité d'utilisation, React dispose d'une vaste communauté et d'une richesse de ressources pour les développeurs de tous niveaux. Que vous soyez un développeur débutant ou expérimenté souhaitant ajouter React à vos compétences, ce didacticiel vous guidera à travers les principes fondamentaux de React.js.

1. Qu'est-ce que React.js ?

React.js est une bibliothèque JavaScript open source utilisée pour créer des interfaces utilisateur, en particulier pour les applications d'une seule page où vous souhaitez une expérience utilisateur rapide et interactive. React permet aux développeurs de créer de grandes applications Web capables de se mettre à jour et de s'afficher efficacement en réponse aux modifications des données. Elle est basée sur des composants, ce qui signifie que l'interface utilisateur est divisée en petits éléments réutilisables appelés composants.

2. Configuration de votre environnement React

Avant de commencer à coder, vous devrez configurer votre environnement de développement. Suivez ces étapes :

Étape 1 : Installer Node.js et npm

• Node.js : React nécessite Node.js pour ses outils de construction.
• npm : Node Package Manager (npm) est utilisé pour installer des bibliothèques et des packages.

Vous pouvez télécharger et installer Node.js depuis le site officiel. npm est fourni avec Node.js.

Étape 2 : Installer l'application Create React

Facebook a créé un outil appelé Create React App qui vous aide à configurer un nouveau projet React rapidement et efficacement. Exécutez la commande suivante dans votre terminal :

npx create-react-app my-app

Cette commande crée un nouveau répertoire nommé my-app avec tous les fichiers et dépendances nécessaires pour démarrer un projet React.

Étape 3 : Démarrez le serveur de développement

Naviguez dans le répertoire de votre projet et démarrez le serveur de développement :

cd my-app
npm start

Votre nouvelle application React devrait maintenant fonctionner sur http://localhost:3000.

3. Comprendre les composants React

React est avant tout une question de composants. Un composant dans React est un module autonome qui restitue certaines sorties, généralement HTML. Les composants peuvent être définis comme des composants fonctionnels ou des composants de classe.

Composants fonctionnels

Un composant fonctionnel est une simple fonction JavaScript qui renvoie du HTML (en utilisant JSX).

Exemple:

function Welcome(props) {
  return 
Hello, {props.name}
;
}

Composants de classe

Un composant de classe est un moyen plus puissant de définir des composants et vous permet de gérer l'état local et les méthodes de cycle de vie.

Exemple:

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

4. JSX-JavaScript XML

JSX est une extension de syntaxe pour JavaScript qui ressemble à HTML. Il vous permet d'écrire du HTML directement dans JavaScript, que React transformera ensuite en véritables éléments DOM.

Exemple:

const element = 
Hello, world!
;

JSX facilite l'écriture et la visualisation de la structure de votre interface utilisateur. Cependant, sous le capot, JSX est converti en appels React.createElement().

5. État et accessoires

Accessoires

Props (abréviation de « propriétés ») sont utilisés pour transmettre des données d'un composant à un autre. Ils sont immuables, ce qui signifie qu'ils ne peuvent pas être modifiés par le composant récepteur.

Exemple:

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

État

L'état est similaire aux accessoires, mais il est géré au sein du composant et peut changer au fil du temps. L'état est souvent utilisé pour les données dont un composant doit assurer le suivi, telles que les entrées de l'utilisateur.

Exemple:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count   1 });
  }

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

6. Gestion des événements

La gestion des événements dans React est similaire à la gestion des événements dans les éléments DOM. Il existe cependant quelques différences syntaxiques :

• Les événements React sont nommés en utilisant camelCase, au lieu de minuscules.
• Avec JSX, vous transmettez une fonction en tant que gestionnaire d'événements, plutôt qu'une chaîne.

Exemple:

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

  return (
    
      Click me
    
  );
}

7. Méthodes de cycle de vie

Les composants de classe dans React ont des méthodes de cycle de vie spéciales qui vous permettent d'exécuter du code à des moments particuliers de la vie du composant. Ceux-ci incluent :

• componentDidMount : appelé après le montage du composant.
• componentDidUpdate : appelé après les mises à jour du composant.
• componentWillUnmount : appelé avant le démontage du composant.

Exemple:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      

        
{this.state.date.toLocaleTimeString()}
      
    );
  }
}

8. Rendu conditionnel

Dans React, vous pouvez créer différentes vues en fonction de l'état de votre composant.

Exemple:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return 
Welcome back!
;
  }
  return 
Please sign up.
;
}

9. Listes et clés

Lorsque vous devez afficher une liste de données, React peut restituer chaque élément en tant que composant. Il est important de donner à chaque élément un accessoire « clé » unique pour aider React à identifier les éléments qui ont changé.

Exemple:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

{listItems}

10. Réagir aux crochets

Les Hooks React vous permettent d'utiliser l'état et d'autres fonctionnalités React dans les composants fonctionnels. Certains des crochets les plus couramment utilisés incluent :

• useState : permet d'ajouter un état à un composant fonctionnel.
• useEffect : vous permet d'effectuer des effets secondaires dans vos composants de fonction.
• useContext : fournit un moyen de transmettre des données via l'arborescence des composants sans avoir à transmettre manuellement les accessoires à chaque niveau.

Exemple d'utilisationÉtat :

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

11. Création et déploiement d'applications React

Une fois votre application prête, vous pouvez la créer pour la production. Utilisez la commande suivante :

npm run build

Cela créera une version de production optimisée de votre application React dans le dossier de construction. Vous pouvez ensuite le déployer sur n'importe quel serveur Web.

Conclusion

React.js est un outil puissant pour créer des applications Web modernes. En comprenant les composants, la gestion des états, la gestion des événements et les hooks, vous pouvez créer des interfaces utilisateur dynamiques et interactives. Ce didacticiel couvre les bases, mais l'écosystème de React offre bien plus, notamment la gestion avancée de l'état avec Redux, le routage avec React Router et le rendu côté serveur avec Next.js.

Alors que vous poursuivez votre voyage avec React, n'oubliez pas de tirer parti de la richesse des ressources en ligne, notamment la documentation officielle de React, les forums communautaires et les didacticiels. Bon codage !