Les 3 principaux piliers de ReactJS

Dans cet article, je vais expliquer ReactJS et les trois principaux piliers de ReactJS, qui sont les composants, l’état et les accessoires.

ReactJS

ReactJS est une technologie frontale open-source. Il s’agit d’une bibliothèque Javascript pour développer des composants d’interface utilisateur. Il s’agit d’une application d’une seule page, et nous pouvons également l’utiliser comme une application multipage. Facebook a introduit ReactJS. Javascript et d’autres bibliothèques sont très lents pour mettre à jour ou charger DOM, mais ReactJS est plus rapide pour mettre à jour et charger DOM. ReactJS a donc de bonnes performances par rapport aux autres bibliothèques. C’est plus souple. ReactJs a introduit le DOM virtuel. Par exemple, supposons que nous voulions créer une application de commerce électronique en général. Dans ce cas, nous commençons par créer des pages individuelles et plusieurs composants comme une page de tableau de bord (bouton, lien, texte, image, etc.) et une page d’accueil (bouton, lien, texte). Pourtant, en utilisant React, nous pouvons créer des composants personnalisés pour certains des éléments largement utilisés comme les boutons ou les textes qui peuvent être rendus réutilisables dans l’ensemble de l’application. Pour être plus précis, la zone de texte a des propriétés telles que la longueur, la taille, les validations, les nuances et d’autres propriétés, mais pour garder l’utilisateur final interactif, nous utilisons toujours un style particulier et nous y tenons. Par conséquent, la personnalisation et la réutilisation ont beaucoup de sens.

Exigences

Les trois piliers de ReactJS

1. Composant
2. État
3. Accessoires

Composant ReactJS

Les composants sont comme des fonctions JavaScript. Il s’agit d’une fonctionnalité spécifique pour la création d’une interface utilisateur telle que des boutons, du texte, des conteneurs, des en-têtes, des pieds de page et des pages (accueil, tableau de bord, aide). Ici, ReactJS a deux types de composants.

1. Composant de fonction
2. Composant de classe

1. Composant fonctionnel

Un composant fonctionnel est comme une fonction JavaScript. C’est un composant sans état. Il n’a pas de méthode de rendu et il n’a pas de constructeur. Nous ne pouvons pas utiliser l’exemple de cycle de vie ReactJS componentDidMount() dans les composants fonctionnels. Il prend des accessoires et renvoie JSX. Il renverra le code HTML.

2. Composante de classe

Le composant de classe est une simple classe JavaScript, et il créera la fonction de rendu, et le composant de classe renverra l’élément react. Il prend en charge le cycle de vie de réaction. Un composant de classe est avec état.

Extrait de code

import React, { Component } from 'react'

export default class DoorComponent extends Component {

    constructor(props){

     super(props);

     this.state = {

        name:"Muthuramalingam"

    }

    }

    componentDidMount(){

        updateName();

    }



    updateName(){

        this.setState ({

            name:"Muthuramalingam Duraipandi"

        });

    }

  render() {

    return (

      <div>Hi Welcome to Door component {this.state.name}</div>

    )

  }

État

L’état est utilisé pour créer un objet React. Il contient des informations telles que le nom, l’âge, l’adresse, les informations sur l’organisation, etc. L’état peut ajouter et modifier des données en fonction de l’action de l’utilisateur, et il restituera également la page. L’objet d’état est initialisé dans Constructor.Add et modifie les états que nous pouvons utiliser pour cela. setState(), et si nous voulons ajouter et modifier l’état précédent dans un composant fonctionnel, nous pouvons utiliser setState();

Pour mettre à jour les données d’un objet, nous pouvons utiliser l’exemple ci-dessous.

Dans le composant fonctionnel, en utilisant des crochets, nous pouvons définir l’état à l’aide du mot-clé useState();

Exemple

Si nous voulons définir une chaîne.

const [name,setName] = useState("");

setName est utilisé pour attribuer une valeur au nom d’une variable, telle que :

Ici, nous pouvons définir le nombre.

const [age,setAge] = useState(0);

setAge pour affecter les données à la variable d’âge.

Nous pouvons maintenant définir Array.

const [userList,setUserList] = useState([]);

setUserList attribuer les données à userList variable.

setUserList([{"name":"Muthu"},{"name":"Ram"}]);

Accessoires

Les accessoires sont des objets envoyés d’un composant parent à un composant enfant. Ces objets sont en fait envoyés via des balises HTML. Nous pouvons donc dire qu’il s’agit également d’une valeur de balise HTML. Donc, accessoires, nous pouvons faire en lecture seule.

Envoyé des données du composant parent au composant enfant.

<receiverComponent news="Today Gold rate is increased" />

Extrait de code

import React from 'react'

import receiverComponent from './receiverComponent';

function ratioStationComponent() {

  return (

    <div>

        <receiverComponent news="Today Gold rate is increased" />

        </div>

  )

}

export default ratioStationComponent

Ici, nous recevons des données du composant parent.

import React from 'react'

function receiverComponent(props) {

  return (

    <div><div>

        <p>Hi Welcome to receiver component</p>

        <p>Today News {props.news}</p>



        </div></div>

  )

}

export default receiverComponent

Conclusion

J’espère que vous avez entendu parler de ReactJS et de ses trois principaux piliers de reactJS. Merci d’avoir lu cet article.