Introduction de réaction:

React est une bibliothèque JavaScript créée par Facebook. React est un outil de création de composants d'interface utilisateur. React est une bibliothèque javascript qui n'est pas un framework et qui construit une interface utilisateur, c'est une petite bibliothèque et se concentre extrêmement bien sur les performances. React crée une application d'une seule page et nous permet de créer des composants d'interface utilisateur réutilisables.

Pourquoi apprendre ReactJS?

C'est une communauté de développeurs rapide, évolutive, flexible, puissante et en croissance rapide. react offre une solution élégante à certains développeurs frontaux pour créer des applications Web dynamiques et interactives. React est populaire. Bien que cette raison ait certes peu à voir avec la qualité de React, la vérité est que comprendre React vous rendra plus employable.

Créer une application React:

vous devez configurer un environnement React sur votre ordinateur.

npx create-react-app my-app by running this command in terminal:
cd my-app
npm start

      

Composants React:

React définit les petits composants, puis les assemble pour en former de plus grands.Tous les composants petits ou grands sont réutilisables, même dans différents projets. Les composants sont comme des fonctions qui renvoient des éléments HTML. leur entrée est un ensemble «d'accessoires» et leur sortie est une description d'une interface utilisateur, les composants sont de deux types, les composants de classe et les composants de fonction ,

Composants de la classe:

Lors de la création d'un composant React, le nom du composant commence par une lettre majuscule.

Exemple:

Créez un composant de classe appelé rcc→squelette de composant de classe Bus and Trigger , retournez div

Composants fonctionnels:

Lors de la création d'un composant React, le nom du composant commence par une lettre majuscule. identique aux composants de la classe

Exemple:

Créez un composant de classe appelé Bus et retournez h2

DOM virtuel:

Je vais donc vous expliquer ici comment fonctionne le DOM virtuel. Pour qu'il devienne facile pour vous de le visualiser.DOM est le «modèle d'objet de document». c'est une interface de programmation de navigateur pour les documents HTML qui les traite comme des arborescences.DOM est représenté comme une arborescence,

React a un DOM virtuel qui est une copie du DOM réel et est conservé dans la mémoire du navigateur sous la forme d'un objet javascript. React a un DOM virtuel qui est une copie du DOM réel et est conservé dans la mémoire du navigateur sous la forme d'un objet javascript. React a également l'état et les accessoires, React a également l'état et les accessoires, qui contiennent les données de l'application et sont utilisés pour les transmettre à travers les composants de la hiérarchie. Le rendu du DOM est un processus très fastidieux et lent. Parce qu'il implique l'analyse CSS pour les modifications de mise en page et l'analyse HTML pour les calculs de l'interface utilisateur. Par conséquent, Virtual DOM est plus rapide en comparaison car il n'implique pas le rendu complet de la page.

JSX:

JSX signifie JavaScript XML, JSX est une extension de type XML / HTML de JavaScript, JSX est une extension de syntaxe en JavaScript. Nous l'utilisons pour décrire à quoi devrait ressembler l'interface utilisateur. JSX peut vous rappeler n'importe quel langage de modèle, mais il est livré avec toute la puissance de JavaScript.

Accessoires de réaction:

Les props sont des arguments passés dans les composants React. Les React Props sont comme des arguments de fonction en JavaScript et des attributs en HTML. Pour envoyer des accessoires dans un composant, utilisez la même syntaxe que les attributs HTML:

types d'accessoires:

Vérification du type d'exécution pour les objets. Vous pouvez utiliser des prop-types pour documenter les types de propriétés transmises dans les éléments. Les commentaires testeront les processus de vos composants par rapport à ces définitions et avertiront le développement s'ils ne correspondent pas.

Installation

npm install --save prop-types

import PropTypes from 'prop-types';
var PropTypes = require('prop-types');

      

Une excellente expérience utilisateur devrait être l'objectif principal de tout développement d'application. Si Feedback essaie de vous fournir tout ce dont vous avez besoin pour développer une application de performance, vous devez dans certains cas optimiser manuellement votre application. Pour cela, je pense que les développeurs devraient avoir une mentalité d'optimisation des performances dès le début de leur projet. il existe plusieurs façons d'accélérer votre application React.

Moyens d'optimiser l'application React

1.Utilisez la version de production
2. Créez l'application React
3. Builds à un seul fichier
4.Pour la
version de production Rollup la plus efficace , installez: 5.Pour la version de production Browserify la plus efficace, installez
6. installez le terser-brunchplug-in et évitez la réconciliation

État de réaction:

Les composants React ont un stateobjet intégré . l'état est le lieu d'où proviennent les données. Nous devons toujours essayer de rendre notre état aussi simple que possible et de minimiser le nombre de composants avec état.

Rendu conditionnel:

Rendez la liste en vous basant sur un raisonnement conditionnel. Souvent, une partie du balisage doit être rendue si certaines conditions sont remplies et l'autre sinon. Il existe plusieurs façons de le faire en réponse.

Opérateur ternaire

utiliser l' opérateur ternaire pour effectuer un rendu conditionnel