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

Qu'est-ce que ReactJS?

ReactJS est un frontal open source JavaBibliothèque de scripts pour la création d'interfaces utilisateur. ReactJS est maintenu par Facebook et une communauté de développeurs individuels et d'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.

Composants: 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 dernières modifications du DOM ont ensuite été mises à jour dans le DOM des navigateurs.

Javascript Expressions: Les expressions JS peuvent être utilisées dans les fichiers jsx en utilisant des accolades, 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 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 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 :

Nous entrerons dans les détails 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 en expliquerons les détails dans le prochain chapitre. 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>

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 commande suivante :

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 :

Qu'est-ce que JSX ?

JSX est une extension de javascript. Il s'agit d'un script de modèle dans lequel vous aurez la possibilité 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 entre accolades {} et sont développées 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.

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 :

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 :

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.

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 :

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 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 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;

Pour 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

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 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.

Montage: Dans cette phase, le composant est rendu à l'intérieur du dom. Nous sommes exposés aux méthodes suivantes à 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 la zone de texte afin que les propriétés de l'état soient mises à jour.

Voici 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é.

Voici les méthodes disponibles à l’état démonté :

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

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

Dans la console du navigateur, vous obtenez :

Lorsque l'utilisateur saisit dans la zone de texte :

Dans la console, les messages suivants s'affichent :

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 la zone de texte et le bouton Soumettre. Lorsque l'utilisateur entre dans la zone de texte, 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 :

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

Cliquez sur le bouton Soumettre

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;

Nous avons utilisé des événements sur le changement et mes onClick sur la zone de texte et le bouton. Lorsque l'utilisateur entre dans la zone de texte, 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 :

Lorsqu'un utilisateur saisit le nom :

Lorsque l'utilisateur clique sur le bouton Cliquez ici :

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 :

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 les détails de la classe. Testons maintenant dans le navigateur.

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

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

Résumé

ReactJS est un frontal open source JavaBibliothèque de scripts pour créer l'interface utilisateur. Elle est maintenue par Facebook et utilisée par de nombreuses entreprises aujourd'hui 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)

Qu'est-ce que ReactJS?

Caractéristiques de ReactJS

Avantages de ReactJS

Inconvénients de ReactJS

Utiliser ReactJS depuis CDN

Pour les développeurs

Pour la production

ARTICLES LIÉS

Utilisation des packages NPM

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

Qu'est-ce que JSX ?

Pourquoi avons-nous besoin de JSX dans React ?

Expressions en JSX

Que sont les composants dans ReactJS ?

Composants comme fonctions

Classe en tant que composant

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

Exemple d'État

Que sont les accessoires dans ReactJS ?

Accessoires au composant fonctionnel

Accessoires au composant de classe

Cycle de vie d'un composant

Exemple de travail

Travailler avec des formulaires

Travailler avec des événements dans ReactJS

Travailler avec du CSS en ligne dans ReactJS

Travailler avec du CSS externe dans ReactJS

Résumé

Newsletter quotidienne de Guru99