Tutoriel ReactJS pour les débutants : apprenez avec un exemple étape par étape

Qu'est-ce que ReactJS?

ReactJS est une bibliothèque JavaScript frontale open source permettant de créer des interfaces utilisateur. ReactJS est maintenu par Facebook et un service de communicationunity des développeurs individuels et des entreprises. Il est largement utilisé comme base dans la création de sites Web d’une seule page et d’applications mobiles. Il est très simple à utiliser et permet aux utilisateurs de créer des composants d’interface utilisateur réutilisables.

Caractéristiques de ReactJS

JSX : JSX est une extension de javascript. Bien qu'il ne soit pas obligatoire d'utiliser JSX dans React, c'est l'une des fonctionnalités intéressantes et facile à utiliser.

Composantes: Les composants sont comme des fonctions javascript pures qui contribuent à simplifier le code en divisant la logique en code indépendant réutilisable. Nous pouvons utiliser des composants comme fonctions et des composants comme classes. Les composants ont également un état, des accessoires qui facilitent la vie. À l’intérieur d’une classe, l’état de chacun des accessoires est conservé.

DOM virtuel : React crée un dom virtuel, c'est-à-dire un cache de structure de données en mémoire. Seules les modifications finales du DOM ont later mis à jour dans le DOM des navigateurs.

Expressions Javascript : Les expressions JS peuvent être utilisées dans les fichiers jsx en utilisant curl brackets, Par exemple {}.

Avantages de ReactJS

Voici les avantages/avantages importants de l’utilisation de ReactJS :

  • ReactJS utilise un dom virtuel qui utilise le cache de structure 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 les composants de votre choix en utilisant la fonctionnalité de composant React. Les composants peuvent être réutilisés et également utiles dans la maintenance du code.
  • Reactjs est une bibliothèque javascript open source, elle est donc facile à utiliser.
  • ReactJS est devenu très populaire en peu de temps et maintenu par Facebook et Instagram. Il est utilisé par de nombreuses entreprises célèbres comme Apple, Netflix, etc.
  • Facebook maintient ReactJS, la bibliothèque, elle est donc bien entretenue et 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 javascript plutôt que sur HTML.

Inconvénients de ReactJS

Voici les inconvénients/inconvénients de l’utilisation de ReactJS :

  • La plupart du code est écrit en JSX, c'est-à-dire que HTML et CSS font partie de Javascript, cela peut être assez déroutant car la plupart des autres frameworks préfèrent garder HTML séparé du code javascript.
  • La taille du fichier de ReactJS est importante.

Utiliser ReactJS depuis CDN

Pour commencer à travailler avec React, nous devons d'abord installer Reactjs. Vous pouvez facilement commencer à utiliser Reactjs en utilisant les fichiers javascript CDN, comme indiqué ci-dessous.

Allez sur le site officiel de reactjs pour obtenir les liens CDN, c'est à dire, https://reactjs.org/docs/cdn-links.html et vous obtiendrez les fichiers requis pour expliquer la suitewing l'image.

Utiliser ReactJS depuis CDN

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 avec la dernière version de React pour React-development.js et React-dom.developement.js. Vous pouvez héberger les fichiers de votre côté pour commencer à travailler avec Reactjs.

Si vous envisagez d'utiliser les fichiers CDN, assurez-vous de conserver l'attribut d'origine croisée afin d'éviter les problèmes inter-domaines. Le code Reactjs ne peut pas être exécuté directement dans le navigateur et doit être transpiré à l'aide de Babel en javascript avant d'être exécuté 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 l'exemple ReactJS fonctionnel utilisant des fichiers cdn et un 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 :

Pour la production

Nous entrerons dans le details du code dans le chapitre suivant, voyons comment travailler ici avec les fichiers CDN. On dit que l'utilisation directe du script Babel n'est pas une bonne pratique, et les nouveaux arrivants peuvent simplement l'utiliser pour apprendre ReactJs pour le moment. En production, vous devrez installer React à l'aide du package npm.

Utilisation des packages NPM

Assurez-vous que nodejs est installé. S'il n'est pas installé, parcourez ce tutoriel pour nodejs (https://www.guru99.com/node-js-tutorial.html) installation.

Une fois nodejs 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 :

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

Créer un dossier src / où tout le code js viendra dans ce dossier. Tout le code du projet Reactjs sera disponible dans le dossier src/. Créez un fichier index.js et ajoutez importreact etreact-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 renvoyé le code de base de Reactjs. Nous expliquerons le details en parler dans le chapitre suivant. Nous voulons afficher Bonjour, des tutoriels Guru99 et la même chose est donnée à l'élément dom avec l'identifiant « root ». Il est extrait du fichier index.html, qui est le fichier de démarrage, comme indiqué ci-dessous.

Créez un dossier public/ et ajoutez-y 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 se chargera d'utiliser les scripts de réaction 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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Pour commencer à tester 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 l'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>

Utilisation des packages NPM

Nous allons également utiliser le même processus pour exécuter les fichiers javascript dans les prochains chapitres. Ajoutez tous vos fichiers js et .jsx dans le dossier src/. La structure des fichiers sera la suivante :

reatproj/
	 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 didacticiel ReactJS pour commencer avec la 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 index.js dans le dossier src/

Étape 2) Écrivez du code simple.
Nous allons écrire un code simple dans ce tutoriel React JS, dans lequel nous afficherons le message « Bonjour, des didacticiels Guru99 ! »

ReactDOM.render(

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

ReactDOM.render ajoutera le balise l'élément avec l'identifiant racine. Voici le fichier html que nous avons :

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

Étape 3) Compilez 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 suitewing commander:

npm run start

Lorsque vous exécutez la commande ci-dessus, elle compilera les fichiers et vous avertira en cas d'erreur. Si tout semble bon, elle ouvrira le navigateur et exécutera le fichier index.html à l'adresse http://localhost:3000/index.html

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.
L'URL http://localhost:3000 s'ouvrira dans le navigateur une fois le code compilé comme indiqué ci-dessous :

Résultat du projet First React

Qu'est-ce que JSX ?

JSX est une extension de javascript. Il s'agit d'un modèle de script dans lequel vous aurez le pouvoir d'utiliser HTML et Javascript 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 javascript dans le même fichier et de gérer efficacement les changements d'état dans le 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 ajouter des expressions. Les expressions sont utilisées à l'intérieur de Curly brackets {}, et ils sont développés pendant l'exécution. Les expressions en réaction sont les mêmes que les expressions javascript.

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.

Expressions dans la sortie JSX

Vous pouvez voir que l'expression {display} n'est pas remplacée. React ne sait pas quoi faire lorsqu'une expression est utilisée dans le 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 text.jsx dans index.js.Nous voulons que le h1tag variable à utiliser dans script.js, donc la même chose 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 test.jsx dans index.js, nous devons 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 :

Sortie

Que sont les composants dans ReactJS ?

Les composants sont comme des fonctions javascript pures qui contribuent à simplifier le code en divisant la logique en code indépendant 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 a renvoyé la 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 et assigné à Bonjour_comp variable et la même chose est exportée en utilisant l'exportation.

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 :

Sortie des composants dans ReactJS

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 balise HTML, c'est-à-dire .

Voici le résultat du même.

Classe comme sortie de composant

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

Un état est un objet javascript similaire aux accessoires qui contiennent des données à utiliser avec le rendu Reactjs. Les données d'état sont un objet privé et sont utilisées dans les composants d'une classe.

Exemple d'État

Voici un exemple pratique sur la façon d'utiliser l'état dans 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 :

État dans la sortie ReactJS

Que sont les accessoires dans ReactJS ?

Les accessoires sont des propriétés à utiliser à l'intérieur d'un composant. Ils agissent comme des objets globaux ou des variables qui peuvent être utilisés à l'intérieur 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é msg attribuer à Composant. Le même peut être consulté comme accessoires à l'intérieur de la fonction Hello, qui est un objet qui aura le msg attribut details, et la même chose est utilisée 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 pour la sortie du composant de fonction

Accessoires au composant de classe

Pour accéder aux accessoires dans 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 :

Accessoires pour la sortie du composant de classe

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

Cycle de vie d'un composant

Le cycle de vie d'un composant est divisé en étapes d'initialisation, de montage, de mise à jour et de démontage.

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

Un composant dans Reactjs a le résultat suivantwing étapes :

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.

Montage: Dans cette phase, le composant est rendu à l'intérieur du dom. Nous avons une exposition à suivrewing méthodes à l’état de montage.

  • composantDidMount() : ceci est également appelé lorsque le composant vient d'être ajouté au dom.
  • render() : Vous disposez de cette méthode pour tous les composants créés. Il renvoie le nœud HTML.

Mises à jour: Dans cet état, le dom interagit avec un utilisateur et est mis à jour. Par exemple, vous saisissez quelque chose dans le textebox, donc les propriétés de l'état sont mises à jour.

Following sont les méthodes disponibles en état de mise à jour :

  • ShouldComponentUpdate() : appelé lorsque le composant est mis à jour.
  • composantDidUpdate() : après la mise à jour du composant.

Démontage : cet état apparaît lorsque le composant n'est pas requis ou supprimé.

Following sont les méthodes disponibles dans l'état démonté :

Component willUnmount() : appelé lorsque le composant est supprimé ou détruityed.

Exemple de travail

Voici un exemple fonctionnel qui montre les méthodes appelées à chaque état.

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 vérifiez la sortie dans le navigateur

Sortie

Dans la console du navigateur, vous obtenez :

Sortie de la console du navigateur

Lorsque l'utilisateur saisit le textebox:

Sortie des valeurs utilisateur

Dans la console, suivezwing les messages sont affichésyed:

Sortie de la console

Travailler avec des formulaires

Dans les éléments d'entrée HTML de Reactjs comme , et <select /> a son propre état et doit être mis à jour lorsque l'utilisateur interagit à l'aide de la méthode setState().

Dans ce chapitre, nous verrons comment travailler avec des 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 maintenir l'état, donc pour cela, React fournit une méthode spéciale appelée setState, ce qui aide à maintenir l’état chaque fois qu’il y a un changement.

Nous avons utilisé les événements onChange et onClick sur le textebox et le bouton Soumettre. Lorsque l'utilisateur entre à l'intérieur du textebox l'événement onChange est appelé et le champ de nom à l'intérieur de l'état 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 Form from './form.jsx';

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

Le résultat dans le navigateur est le suivant :

Travailler avec la sortie des formulaires

Étape 1) Entrez votre nom dans le textebox:

Travailler avec la sortie des formulaires

  1. Cliquez sur le bouton Soumettre

Travailler avec la sortie des formulaires

Travailler avec des événements dans ReactJS

Travailler avec des événements dans Reactjs est la même chose que vous l'auriez fait en Javascript. Vous pouvez utiliser tous les gestionnaires d'événements utilisés en 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 pratique de la façon d'utiliser les é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 maintenir l'état, donc pour cela, React fournit une méthode spéciale appelée setState, ce qui aide à maintenir l’état chaque fois qu’il y a un changement.

Nous avons utilisé des événements sur le changement et onClick sur le textebox et bouton. Lorsque l'utilisateur entre à l'intérieur du textebox le sur le changement L'événement est appelé et le champ de nom à l'intérieur de l'état 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 :

Travailler avec la sortie d'événements

Lorsqu'un utilisateur saisit le nom :

Travailler avec la sortie d'événements

Lorsque l'utilisateur clique sur le bouton Cliquez ici :

Travailler avec la sortie d'événements

Travailler avec du CSS en ligne dans ReactJS

Je vais jeter un œil à un exemple fonctionnel pour comprendre le fonctionnement des 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 color: 'red' à 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 :

Travailler avec la sortie CSS en ligne

Vous pouvez créer un objet de style que vous souhaitez sur l'élément et utiliser une expression pour ajouter du style, comme indiqué dans l'exemple ci-dessus.

Travailler avec du CSS externe dans ReactJS

Créons un css externe, pour cela créons un dossier css/ et ajoutons-y 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>
    <script src = "out/script.min.js"></script>
  </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 reçoit la classe details. Testons maintenant dans le navigateur.

Travailler avec une sortie CSS externe

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

Travailler avec une sortie CSS externe

Vous pouvez voir que le class="h1tag" est ajouté avec succès à la balise h1.

Résumé

  • ReactJS est une bibliothèque JavaScript frontale open source pour créer l'interface utilisateur. Il est maintenu par Facebook et utilisé aujourd'hui par de nombreuses entreprises pour le développement de l'interface utilisateur.
  • Les fonctionnalités principales de ReactJS incluent JSX, les composants (composants fonctionnels et composants basés sur les classes), le cycle de vie d'un composant, les accessoires et la prise en charge de l'état d'un composant, fonctionnant avec des expressions javascript.
  • La configuration du projet ReactJS est expliquée à l'aide de fichiers CDN et également à l'aide de packages npm pour créer le projet.
  • JSX est une extension de javascript. Il s'agit d'un modèle de script dans lequel vous aurez le pouvoir d'utiliser HTML et Javascript ensemble.
  • Les composants sont comme des fonctions javascript pures qui contribuent à simplifier le code en divisant la logique en code indépendant réutilisable.
  • Un état est un objet javascript similaire aux accessoires qui contiennent des données à utiliser avec le rendu Reactjs. Les données d'état sont un objet privé et sont utilisées dans les composants d'une classe.
  • Les accessoires sont des propriétés à utiliser à l'intérieur d'un composant.
  • Le cycle de vie d'un composant est divisé en étapes d'initialisation, de montage, de mise à jour et de démontage.
  • Dans les éléments d'entrée HTML de Reactjs comme , et <select /> a son propre état et doit être mis à jour lorsque l'utilisateur interagit à l'aide de la méthode setState().
  • Travailler avec des événements dans Reactjs est la même chose que vous l'auriez fait en Javascript. Vous pouvez utiliser tous les gestionnaires d'événements utilisés en javascript. La méthode setState() est utilisée pour mettre à jour l'état lorsque l'utilisateur interagit avec un élément HTML.
  • ReactJS vous permet de travailler avec des CSS externes ainsi qu'avec des CSS en ligne à l'aide d'une expression javascript.

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