Installer React.js sur Mac

Le logiciel est une bibliothèque JavaScript frontale gratuite et open-source. En 2013, React.JS a été créé par Facebook.

Il s'agit d'une bibliothèque d'interface utilisateur (UI) utilisée pour créer et manipuler des composants d'interface utilisateur. Il s'agit d'un package qui permet aux développeurs de créer des applications SPA basées sur les données très efficaces.

Il est basé sur la programmation fonctionnelle, s'appuie sur le concept d'immuabilité et promeut une architecture à base de composants basée sur le principe de réutilisabilité unique.

Dans cet article, nous allons passer en revue les procédures d'installation de React sur mac. Après avoir terminé les étapes d'installation, nous vous invitons à suivre la formation React en ligne.

Explorons quelques termes avant-

NodeJS et NPM

• Vous devez d'abord installer NodeJS et NPM pour obtenir l'installation de React sur Mac.
• C'est un moteur JavaScript qui vous permet de l'exécuter en dehors du navigateur.
• NPM (node ​​package manager) est utilisé sur la ligne de commande. Il s'agit d'installer des bibliothèques comme ReactJS.
• Vous pouvez installer NodeJS via leur site officiel. Lorsque vous installez NodeJS, il télécharge également NPM pour vous.
• Après avoir téléchargé NodeJS depuis leur site Web, recherchez le fichier ".pkg". Double-cliquez simplement dessus. Il lancera une fenêtre contextuelle pour l'installation.
• Vous serez dirigé vers le processus d'installation. Cliquez sur "Installer" ou "Modifier l'emplacement d'installation"
• Lorsque le processus est terminé, vous serez invité avec un message final. Vos NodeJS et NPM sont installés.

Installer ReactJS sur MacOS

Après avoir installé NodeJS et NPM, on peut installer ReactJS. Cela se fait en exécutant npm install-save react react-dom.

Créer un projet ReactJS

Depuis que nous avons installé ReactJS, on peut créer un nouveau répertoire de projet React. Cela se fait en exécutant npx create react project. créer-réagir-app.

Réagir - Introduction

Avant de procéder à l'installation de React-Lib sur Mac, nous devons d'abord acquérir une compréhension de base de React.

• React est un package qui aide les développeurs et les architectes Web à répondre aux attentes des clients qui ont besoin d'un flux de données élevé et d'interfaces utilisateur réactives rapides dans le contexte des données.
• Il est construit sur une architecture à base de composants. La page Web peut être représentée par des composants parent et enfant.
• Il s'appuie en grande partie sur Virtual DOM, qui fonctionne comme un optimiseur de performances pour les opérations DOM.
• Une page Web HTML a une arborescence DOM, que le navigateur utilise pour afficher la page Web.

Lorsqu'un utilisateur interagit avec une page, cela implique l'ajout et l'insertion d'informations en fonction de l'action de l'utilisateur. comme dans Un utilisateur a ajouté un article au panier. Le panier affiche maintenant l'article modifié suite à la décision de l'utilisateur.

Dans les coulisses, le document HTML subit une transformation qui permet de partager la page modifiée.

Comme indiqué précédemment, l'arborescence DOM représente le document HTML. Dans le cas précédent, le DOM nécessite quelques ajustements, notamment l'insertion et la suppression de nœuds HTML particuliers.

Cela aide à afficher les informations essentielles qui symbolisent ce qu'un utilisateur tente de faire dans le cadre de la révision de son

décision d'achat.

Nous pouvons voir le DOM comme un arbre pour mieux le comprendre.

L'arbre a des racines ainsi que des branches. De même, l'élément HTML se trouve en haut du DOM et les nœuds situés en dessous sont connectés au nœud parent. En termes d'analogie arborescente, le nœud parent peut être représenté comme le tronc, avec d'autres nœuds se connectant au tronc. Et React est utilisé pour améliorer les opérations d'insertion et de suppression sur ces nœuds.

Il y a une pénalité de mémoire associée à cette opération d'insertion et de suppression sur le DOM HTML. En termes d'opérations de mise à jour du DOM, le DOM virtuel fonctionne comme un optimiseur de performances.

Il conserve deux copies : une du vrai DOM (react DOM) et une des mises à jour à faire. Le processus de minimisation des modifications sur le DOM de réaction est également étudié dans le cadre du processus de réconciliation.

Node.js & npm

Node.js exécute le code de JavaScript. Il s'agit d'un environnement d'exécution open source et multiplateforme pour JavaScript. Il est propulsé par le moteur Chrome V8. Le moteur Chrome V8 est écrit en C++. Node est compatible avec Windows, Mac et Linux.

Après avoir installé Node.js, nous pouvons exécuter l'application basée sur React localement sur notre système pendant le développement. Cela nous permet également de déployer notre programme sur le serveur de production.

Node.js inclut les fonctionnalités suivantes :

• Utilise JavaScript comme langage principal
• E/S non bloquantes
• Prend en charge la programmation asynchrone
• Peut gérer de nombreuses demandes de connexion en utilisant un seul serveur.

Npmjs.org est un référentiel de code en ligne de milliers de modules (npm) qui nous permet d'installer des modules de nœud à l'aide de commandes simples.

Certains modules sont autonomes, tandis que d'autres nécessitent une interdépendance pour fonctionner correctement. Node.js nous permet d'effectuer des opérations de lecture et d'écriture sur le serveur. Il vous permet également de travailler avec des bases de données.

Au lieu de créer des fonctionnalités à partir de zéro, nous pouvons rechercher un module et réutiliser et étendre ses fonctionnalités.

Les initiatives des développeurs impliquent généralement des contraintes de temps et de budget. Quand il s'agit de Node. développement basé sur js, npmjs.org est une bouée de sauvetage pour la communauté des développeurs.

Pour résumer

Dans ce didacticiel, nous avons découvert React.js et l'approche de l'architecture basée sur les composants dans React.js. Nous avons également eu un aperçu de haut niveau du DOM virtuel.

Nous avons discuté du concept de réconciliation, de l'utilisation de Node.js dans le monde de JavaScript et de sa capacité à gérer les sorties d'E/S non bloquantes pour répondre simultanément aux demandes de connexion des clients.

Nous avons testé deux techniques d'installation de Node.js : une avec la gestion des packages et une avec la ligne de commande.

Pour commencer rapidement à utiliser React.js, nous avons utilisé le module create-react-app. Nous pouvons également utiliser la ligne de commande pour installer React.js.

Pour éviter d'être surchargé de trop de détails, nous avons utilisé la technique create-react-app pour ce tutoriel. Nous avons vu notre première application réagir fonctionner après l'avoir développée. Nous avons rapidement évalué les fichiers importants qui font fonctionner l'application pour nous familiariser avec le code du point de vue du développement.

A lire aussi :

• Les virus Mac sont vivants Tuez-les et habitez dans la tranquillité !