Tutoriel ReactJS pour débutants

Qu'est-ce que ReactJS?

ReactJS est un frontal open source JavaBibliothèque de scripts pour la création d'interfaces utilisateur. ReactJS Ce framework est maintenu par Meta (anciennement Facebook) et une communauté de développeurs indépendants et d'entreprises. Il est largement utilisé comme base pour la création d'applications monopages et d'applications mobiles. Très simple d'utilisation, il permet de créer des composants d'interface utilisateur réutilisables.

Avant d'écrire votre première ligne de code React, il est utile de comprendre ce qui différencie cette bibliothèque des bibliothèques classiques. JavaScript. La section suivante décrit ses principales caractéristiques.

Caractéristiques de ReactJS

JSX : JSX est une extension de JavaScript. Bien que l'utilisation de JSX ne soit pas obligatoire dans React, c'est une fonctionnalité intéressante et facile à utiliser.

ComposantsLes composants sont comme des purs JavaLes fonctions de script simplifient le code en divisant la logique en portions de code indépendantes et réutilisables. On peut utiliser les composants comme des fonctions ou comme des classes. Les composants possèdent également un état et des propriétés, ce qui facilite leur développement. Au sein d'un composant de classe, l'état et les propriétés sont gérés.

DOM virtuel : React crée un DOM virtuel, c'est-à-dire un cache de données en mémoire. Seules les modifications finales sont ensuite mises à jour dans le DOM du navigateur, ce qui permet un rendu rapide.

JavaExpressions de script : Les expressions JS peuvent être utilisées dans les fichiers JSX à l'aide d'accolades, par exemple {}.

Avantages de ReactJS

Voici les principaux avantages de l'utilisation de ReactJS :

• ReactJS utilise un DOM virtuel qui exploite un cache de données en mémoire, et seules les modifications finales sont mises à jour dans le DOM du navigateur. Cela rend l'application plus rapide.
• Vous pouvez créer des composants personnalisés grâce à la fonctionnalité de composants React. Ces composants sont réutilisables et facilitent la maintenance du code.
• ReactJS est un logiciel libre JavaBibliothèque de scripts, donc facile à prendre en main.
• ReactJS a connu un succès fulgurant et alimente des produits comme Facebook et InstagramIl est utilisé par de nombreuses entreprises célèbres comme Apple. Netflix, etc.
• Meta assure la maintenance de la bibliothèque ReactJS, qui est donc bien maintenue et régulièrement mise à jour.
• ReactJS peut être utilisé pour développer une interface utilisateur riche pour les applications de bureau et mobiles.
• Facile à déboguer et à tester car la plupart du codage est effectué dans Javascénario plutôt qu'en HTML.

Inconvénients de ReactJS

Voici les inconvénients/rejets liés à l'utilisation de ReactJS :

• La majeure partie du code est écrite en JSX, c'est-à-dire que HTML et CSS en font partie. JavaScript. Cela peut être assez déroutant, car la plupart des autres frameworks préfèrent garderping HTML séparé du JavaCode de script.
• La taille du fichier ReactJS est relativement importante.

Maintenant que vous connaissez les avantages et les inconvénients, vous êtes prêt à configurer React. Le moyen le plus rapide de l'essayer est de l'installer directement depuis un CDN, ce que nous allons aborder en premier ; les configurations basées sur npm pour les projets réels suivront.

Utiliser ReactJS depuis CDN

Pour commencer à utiliser React, il faut d'abord ajouter ReactJS à notre page. Vous pouvez facilement commencer à utiliser ReactJS grâce au CDN. JavaFichiers de script, comme indiqué ci-dessous.

Rendez-vous sur l'ancien site de documentation React pour obtenir les liens CDN, c'est-à-dire : https://legacy.reactjs.org/docs/cdn-links.htmlVous obtiendrez alors les fichiers nécessaires, comme expliqué dans l'image suivante.

Pour les développeurs

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Pour la production

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

remplacer version Choisissez la version de React souhaitée pour react.development.js et react-dom.development.js. Sur cette page, nous utilisons la version 16 ; les exemples ci-dessous restent donc valides.

Si vous prévoyez d'utiliser les fichiers CDN, veillez à conserver l'attribut crossorigin pour éviter les problèmes de droits inter-domaines. Le code ReactJS ne peut pas être exécuté directement dans le navigateur et doit être transpilé à l'aide de Babel pour être exécuté sans modification. JavaScript avant exécution dans le navigateur.

Voici le script BabelJS pouvant être utilisé :

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Voici un exemple fonctionnel de ReactJS utilisant des fichiers CDN et le script BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Sortie :

Nous aborderons le code en détail dans le chapitre suivant ; voyons d'abord comment cela fonctionne avec les fichiers CDN. L'utilisation directe du script Babel est déconseillée et les débutants devraient l'utiliser uniquement pour apprendre ReactJS dans un premier temps. En production, vous devrez installer React à l'aide du package npm.

Utilisation des packages NPM

Assurez-vous d'avoir installé Node.js. Si ce n'est pas le cas, suivez ce tutoriel pour Node.js (https://www.guru99.com/node-js-tutorial.html) installation.

Une fois Node.js installé, créez un dossier réagirproj/.

Pour commencer la configuration du projet, exécutez la commande initialisation npm.

Voici à quoi ressemblera la structure des dossiers :

reactproj\
package.json

Nous allons maintenant installer les packages dont nous avons besoin.

Voici la liste des packages pour ReactJS. Nous limitons React à la version 16, donc… ReactDOM.render Les exemples présentés sur cette page fonctionnent exactement comme indiqué :

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Ouvrez l'invite de commandes et exécutez les commandes ci-dessus dans le dossier reactproj/.

Créer un dossier src / C'est là que sera placé tout le code JS. Tout le code du projet ReactJS sera disponible dans le dossier `src/`. Créez un fichier `index.js` et importez `react` et `react-dom`, comme indiqué ci-dessous.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Nous avons écrit le code de base pour ReactJS. Nous expliquerons les détails dans le chapitre suivant. Nous souhaitons afficher Bonjour, de Guru99 TutorielsLe même identifiant est attribué à l'élément DOM « root ». Cet identifiant est extrait du fichier index.html, qui est le fichier de départ, comme indiqué ci-dessous.

Créez un dossier public/ et ajoutez-y le fichier index.html comme indiqué ci-dessous.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Le package react-scripts se chargera de compiler le code et de démarrer le serveur pour afficher le fichier HTML, c'est-à-dire index.html. Vous devez ajouter la commande dans package.json qui permettra d'utiliser react-scripts pour compiler le code et démarrer le serveur, comme indiqué ci-dessous :

 "scripts": {
    "start": "react-scripts start"
  }

Après avoir installé tous les packages et ajouté la commande ci-dessus, le package.json final est le suivant :

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Pour commencer les tests ReactJS, exécutez la commande :

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Il ouvrira le navigateur avec le URL http://localhost:3000/ comme indiqué ci-dessous:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Nous allons utiliser le même processus pour exécuter le JavaLes fichiers de script des chapitres suivants seront également inclus. Ajoutez tous vos fichiers .js et .jsx dans le dossier src/. La structure des fichiers sera la suivante :

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Comment créer votre première configuration de projet React

Voici un guide étape par étape dans ce tutoriel ReactJS pour démarrer avec votre première application React.

Étape 1) Importez les packages de réaction.
1. Pour commencer avec ReactJS, nous devons d'abord importer les packages React comme suit.

import React from 'react';
import ReactDOM from 'react-dom';

2. Enregistrez le fichier sous le nom index.js dans le dossier src/.

Étape 2) Écrire simple Code.
Nous allons écrire un code simple dans ce tutoriel React JS, dans lequel nous afficherons le message « Bonjour, de la part de Guru99 tutoriels !

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render ajoutera le Ajoutez la balise à l'élément dont l'identifiant est « root ». Voici le fichier HTML en question :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Étape 3) Compiler le Code.

Ensuite, dans ce didacticiel React.js, nous devons compiler le code pour obtenir la sortie dans le navigateur.

Voici la structure des dossiers :

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Nous avons ajouté les commandes pour compiler le fichier final dans package.json comme suit :

"scripts": {
    "start": "react-scripts start"
  },

Pour compiler le fichier final, exécutez la commande suivante :

npm run start

Lorsque vous exécuterez la commande ci-dessus, elle compilera les fichiers et vous avertira en cas d'erreur. Si tout se déroule correctement, elle ouvrira le navigateur et affichera la page à l'adresse indiquée. http://localhost:3000/

Commande : npm run start :

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Étape 4) Vérifiez la sortie.
Le URL http://localhost:3000 La page s'ouvrira dans le navigateur une fois le code compilé, comme indiqué ci-dessous :

Comment configurer React avec Vite (approche moderne)

La configuration react-scripts ci-dessus provient de Create React App (CRA), qui a été le modèle de démarrage standard pendant des années. L'équipe React a officiellement abandonné Create React App en février 2025 ; les nouveaux projets doivent donc utiliser un outil de construction moderne. Le choix le plus populaire aujourd'hui est : Vite, qui démarre plus rapidement et produit des constructions plus petites.

Voici comment créer un nouveau projet React avec Vite :

Étape 1) Exécutez la commande de génération de structure dans votre terminal :

npm create vite@latest my-react-app -- --template react

Étape 2) Accédez au dossier et installez les dépendances :

cd my-react-app
npm install

Étape 3) Démarrer le serveur de développement :

npm run dev

Vite propose l'application à http://localhost:5173/ par défaut, et se recharge instantanément lorsque vous enregistrez un fichier.

Principales différences par rapport à l'ancienne configuration présentées sur cette page :

• Le fichier d'entrée est src/main.jsx au lieu de src/index.js.
• Il installe la dernière version de React, qui utilise créerRoot au lieu de ReactDOM.render.
• Le fichier index.html se trouve à la racine du projet, et non dans public/.
• Les builds sont produits avec npm run build dans un dossier dist/.

Pour les besoins de développement complets tels que le routage et le rendu côté serveur, l'équipe React recommande également des frameworks comme Next.jsTout ce que vous apprendrez dans les chapitres ci-dessous (JSX, composants, état et propriétés) s'applique sans modification dans un projet Vite ou Next.js.

Qu'est-ce que JSX ?

JSX est une extension de JavaScript. Il s'agit d'un script modèle qui vous permettra d'utiliser HTML et JavaÉcrire ensemble.

Voici un exemple simple de code JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Pourquoi avons-nous besoin de JSX dans React ?

Pour une interface utilisateur, nous avons besoin de HTML, et chaque élément du DOM aura des événements à gérer, des changements d'état, etc.

Dans le cas de React, cela nous permet d'utiliser HTML et JavaIntégrez le script dans le même fichier et gérez efficacement les changements d'état du DOM.

Expressions en JSX

Voici un exemple simple de la façon d'utiliser des expressions dans JSX.

Dans les exemples ReactJS précédents, nous avions écrit quelque chose comme :

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Nous allons maintenant modifier le code ci-dessus pour y ajouter des expressions. Les expressions sont utilisées entre accolades {} et sont développées lors de l'exécution. Les expressions dans React sont identiques à… JavaExpressions de script.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Testons maintenant la même chose dans le navigateur.

Comme vous pouvez le constater sur la capture d'écran ci-dessus, l'expression {display} n'est pas remplacée. React ne sait pas comment interpréter l'utilisation d'une expression dans un fichier .js.

Ajoutons maintenant des modifications et créons un fichier .jsx, comme indiqué ci-dessous :

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Nous avons ajouté le code requis et utiliserons le fichier test.jsx dans index.js. Nous voulons h1tag Variable à utiliser dans index.js, donc la même est exportée comme indiqué ci-dessus dans test.jsx.

Voici le code modifié dans index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Pour utiliser le fichier test.jsx dans index.js, il faut d'abord l'importer comme indiqué ci-dessous :

import h1tag from './test.jsx';

Nous pouvons maintenant utiliser le h1tag dans le ReactDOM.render comme indiqué ci-dessous :

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Voici le résultat lorsque nous vérifions la même chose dans le navigateur :

Que sont les composants dans ReactJS ?

Les composants sont comme des purs JavaDes fonctions de script qui simplifient le code en divisant la logique en code indépendant et réutilisable.

Composants comme fonctions

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Nous avons créé une fonction appelée Bonjour qui renvoie une balise h1, comme indiqué ci-dessus. Le nom de la fonction agit comme un élément, comme indiqué ci-dessous :

const Hello_comp = <Hello />;
export default Hello_comp;

Le composant Bonjour est utilisé comme balise HTML, c'est-à-dire, , affecté au Bonjour_comp variable, et la même est exportée à l'aide de la commande export.

Utilisons maintenant ce composant dans le fichier index.js comme indiqué ci-dessous :

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Voici le résultat dans le navigateur :

Classe en tant que composant

Voici un exemple ReactJS qui utilise une classe comme composant.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Nous pouvons utiliser le composant Hello dans le fichier index.js comme suit :

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Le composant Hello est utilisé comme une balise HTML, c'est-à-dire, .

Voici le résultat du même.

Composants de classe vs composants fonctionnels et hooks

Vous avez maintenant vu les deux façons d'écrire un composant. Laquelle choisir ? Cette page présente les composants de classe, car ils explicitent les concepts d'état et de cycle de vie, ce qui est précieux pour les débutants et encore présent dans les anciens projets. Cependant, depuis l'introduction des Hooks dans React 16.8, les composants fonctionnels peuvent également gérer un état et constituent le style recommandé pour tout nouveau code.

Aspect	Composant de classe	Composant fonctionnel avec hooks
État	this.state et this.setState()	Hook useState()
Cycle de vie	componentDidMount, componentDidUpdate, componentWillUnmount	Le hook useEffect() couvre les trois
Syntaxe	Plus de code standard (constructeur, liaison, ceci)	Plus court, sans ce mot-clé
Statut	Style hérité pris en charge	Recommandé pour les nouveaux codes

Voici l'exemple d'état de cette page réécrit avec le hook useState :

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Les deux versions produisent le même résultat. Apprenez la syntaxe des classes utilisée dans les chapitres suivants, puis entraînez-vous à convertir chaque exemple en Hooks.

Qu’est-ce qu’un état dans ReactJS ?

Un État est un JavaObjet script, similaire aux props, contenant des données utilisées par le rendu ReactJS. Ces données d'état sont un objet privé utilisé au sein des composants d'une classe.

Exemple d'État

Voici un exemple fonctionnel d'utilisation de l'état à l'intérieur d'une classe.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Voici ce que nous obtenons lorsque nous le testons dans le navigateur :

Que sont les accessoires dans ReactJS ?

Les props sont des propriétés utilisables à l'intérieur d'un composant. Elles fonctionnent comme des objets ou des variables globales utilisables au sein du composant.

Accessoires au composant fonctionnel

Voici un exemple de transmission d'accessoires à un composant de fonction.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Comme indiqué ci-dessus, nous avons ajouté le msg attribut à l' composant. On peut y accéder de la même manière. accessoires à l'intérieur de la fonction Hello, qui est un objet qui aura le msg détails de l'attribut, et ceux-ci sont utilisés comme expression.

Le composant est utilisé dans index.js comme suit :

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Voici le résultat dans le navigateur :

Accessoires au composant de classe

Pour accéder aux propriétés d'une classe, nous pouvons procéder comme suit :

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Le msg L'attribut est transmis au composant dans index.js comme suit :

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Voici le résultat dans le navigateur :

Vérifiez également: - Tutoriel AngularJS pour les débutants : Apprenez AngularJS étape par étape

Cycle de vie d'un composant

Maintenant que nous avons abordé les composants, l'état et les propriétés, l'étape suivante consiste à comprendre quand React appelle les méthodes de votre composant. Le cycle de vie d'un composant se divise en quatre phases : initialisation, montage, mise à jour et démontage.

Voici une explication détaillée de chaque étape.

Un composant ReactJS comporte les étapes suivantes :

Initialisation: Il s'agit de la première étape du cycle de vie des composants.

Ici, il aura les accessoires par défaut et l'état au niveau initial.

MontageDans cette phase, le composant est rendu dans le DOM. Nous avons accès aux méthodes suivantes dans l'état de montage :

• render() : Cette méthode est disponible pour tous les composants créés. Elle renvoie le nœud HTML.
• componentDidMount() : Cette méthode est appelée immédiatement après l'ajout du composant au DOM.

Mises à jourDans cet état, l'utilisateur interagit avec le DOM, qui est alors mis à jour. Par exemple, si vous saisissez du texte dans la zone de texte, les propriétés de l'état sont mises à jour.

Voici les méthodes disponibles dans l'état de mise à jour :

• shouldComponentUpdate() : appelée avant le rendu, elle permet de déterminer si le composant doit être mis à jour. La valeur true entraîne un nouveau rendu du composant.
• componentDidUpdate() : appelée après la mise à jour du composant.

Démontage : Cet état se présente lorsque le composant n'est pas requis ou est supprimé.

Voici la méthode disponible en état démonté :

• componentWillUnmount() : appelée juste avant que le composant ne soit supprimé ou détruit.

Exemple pratique des méthodes de cycle de vie

Voici un exemple fonctionnel qui illustre les méthodes appelées à chaque étape.

Exemple : complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Lorsque vous consultez le résultat dans le navigateur :

Dans la console du navigateur, vous obtenez :

Lorsque l'utilisateur saisit dans la zone de texte :

Dans la console, les messages suivants s'affichent :

Maintenant que vous savez quand un composant est rendu et mis à jour, appliquons l'état et les événements à un cas d'utilisation pratique : la gestion des entrées utilisateur via des formulaires.

Travailler avec des formulaires

Dans ReactJS, les éléments d'entrée HTML comme , , et <select /> ont leur propre état et doivent être mis à jour lorsque l'utilisateur interagit, en utilisant la méthode setState().

Dans ce chapitre, nous verrons comment utiliser les formulaires dans ReactJS.

Voici un exemple de travail :

formulaire.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Pour les champs de saisie, nous devons gérer l'état ; React fournit donc une méthode spéciale appelée définir l'étatce qui permet de maintenir l'état en cas de modification. Dans une application réelle, appelez également cette fonction. event.preventDefault() Dans la fonction formSubmit, empêcher le navigateur de recharger la page lors de la soumission.

Nous avons utilisé les événements onChange et onClick sur la zone de texte et le bouton Soumettre. Lorsque l'utilisateur saisit du texte dans la zone de texte, l'événement onChange est déclenché et le champ nom de l'objet d'état est mis à jour, comme illustré ci-dessous :

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Le résultat dans le navigateur est le suivant :

Étape 1) Saisissez votre nom dans la zone de texte :

Étape 2) Cliquez sur le bouton Soumettre :

Travailler avec des événements dans ReactJS

Les formulaires ne sont qu'une source d'interaction utilisateur parmi d'autres. La gestion des événements dans ReactJS est identique à celle que vous auriez utilisée dans d'autres contextes. JavaScript. Vous pouvez utiliser tous les gestionnaires d'événements utilisés dans JavaScript. La méthode setState() est utilisée pour mettre à jour l'état lorsque l'utilisateur interagit avec un élément HTML.

Voici un exemple fonctionnel d'utilisation des événements dans ReactJS.

événements.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Pour les champs de saisie, nous devons gérer l'état ; React fournit pour cela… définir l'état méthode, qui permet de maintenir l'état en cas de changement.

Nous avons utilisé les événements sur le changement et onClick sur la zone de texte et le bouton. Lorsque l'utilisateur saisit du texte dans la zone de texte, sur le changement L'événement est déclenché et le champ nom à l'intérieur de l'objet d'état est mis à jour, comme indiqué ci-dessous :

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Voici le résultat dans le navigateur :

Lorsqu'un utilisateur saisit le nom :

Lorsque l'utilisateur clique sur le bouton Cliquez ici :

Travailler avec du CSS en ligne dans ReactJS

Une fois que vos composants gèrent les données et les événements, la dernière étape consiste à les styliser. Nous allons examiner un exemple concret pour comprendre le CSS en ligne dans ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

J'ai ajouté le style de couleur « rouge » à la balise h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Le résultat dans le navigateur est le suivant :

Vous pouvez créer un objet avec le style souhaité pour l'élément et utiliser une expression pour ajouter ce style, comme illustré dans l'exemple ci-dessus.

Travailler avec du CSS externe dans ReactJS

Créons un fichier CSS externe. Pour cela, créez un dossier css/ et ajoutez-y le fichier style.css.

style.css

.h1tag {
color:red;
}

Ajoutez le style.css à votre fichier index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Ajoutons maintenant la classe à la balise h1 dans le fichier .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

L'attribut className contient les détails de la classe. Notez que JSX utilise nom du cours au lieu de l'attribut HTML class, car class est un mot-clé réservé. JavaScript. Testons-le maintenant dans le navigateur.

Voici ce que vous voyez lorsque vous inspectez la balise h1 dans le navigateur :

Vous pouvez constater que la classe « h1tag » a bien été ajoutée à la balise h1.

Pourquoi ReactDOM.render a-t-il été remplacé par createRoot ?

Chaque exemple de cette page utilise `ReactDOM.render` pour monter l'application, ce qui est correct pour React 16 et 17, les versions ciblées par ce cours. React 18, sorti en mars 2022, a remplacé ce point d'entrée par l'API `createRoot`, et React 19 a complètement supprimé `ReactDOM.render`. La raison ? La gestion de la concurrence : `createRoot` permet à React de préparer plusieurs versions de l'interface utilisateur simultanément, d'interrompre le rendu des tâches de faible priorité et de maintenir une certaine flexibilité.ping et des animations fluides. Des fonctionnalités telles que le traitement par lots automatique, useTransition et le streaming basé sur le suspense en dépendent toutes.

L'équivalent moderne du fichier index.js utilisé sur cette page ressemble à ceci :

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Tout ce que vous avez appris ici (composants, JSX, état, propriétés et événements) fonctionne de la même manière après cette simple modification au point d'entrée. Les différences de versions comme celle-ci sont fréquentes. questions d'entretien sur React JSIl est donc avantageux de comprendre les deux API.

FAQ

Vérifiez également: - Top 70 des questions et réponses d'entretien React (mises à jour)