Commencez avec React

Les bibliothèques de JavaScript qui sont en charge de manipuler les vues et la manière dont elles affichent les informations intègrent de plus en plus de fonctionnalités qui rendent le développement d'applications plus facile pour le développeur et plus agréable pour les utilisateurs qui les utilisent.

Parmi ces bibliothèques, nous avons Réagir, qui est une bibliothèque de JavaScript d'open source axé principalement sur la création d'interfaces utilisateur pour candidatures d'une seule page ou des applications d'une seule page qui sont utilisées par Facebook et Instagram pour gérer tout ce qui fait référence aux vues, en résolvant le problème des grandes applications où les données présentées à l'utilisateur changent constamment.

Fonctionnalités de réaction

Pour résoudre ce problème que nous avons mentionné Réagir fonde sa philosophie sur les caractéristiques suivantes :

SimpleCette caractéristique exprime à quoi notre application doit ressembler à un certain point et de quelle manière elle le fait, et ce qu'elle fait Réagir est qu'il gère automatiquement toutes les mises à jour de l'interface utilisateur lorsque des modifications fondamentales sont apportées à l'application.
DéclaratifLorsque les informations changent dans notre application Réagir remplit la fonction de rafraîchir notre page, mais uniquement lorsque les informations ont changé.
Construction de composants combinablesQuand on parle de Réagir, on parle principalement de la construction de composants réutilisables, en fait avec cette librairie ce que l'on fait la plupart du temps c'est construire des composants et grâce au fait qu'ils sont encapsulés, ils rendent la réutilisation de code, les tests et la séparation des fonctionnalités extrêmement Facile.

Réagir

Maintenant que nous savons de quoi il s'agit Réagir et ses caractéristiques, nous allons obtenir la dernière version de la bibliothèque et réaliser une implémentation simple pour afficher le fameux Hello World.

Pour obtenir la dernière version, nous téléchargeons une tablette avec la bibliothèque au lien suivant. Après le téléchargement, nous décompressons et plaçons le contenu dans un dossier appelé Bonjour_Réagir et à l'intérieur, nous créons un fichier appelé bonjour_react.html qui contiendra le contenu suivant :

Comme nous pouvons le voir, c'est un code assez simple qui nous permet de rendre un texte dans notre vue principale grâce à l'inclusion de réagir.js. De plus, nous utilisons JSX qu'est-ce que la syntaxe XML au sein de notre JavaScript puis faire la transformation dans le navigateur, que nous pouvons utiliser grâce à l'implémentation de la deuxième bibliothèque appelée JSXTransformer.js

En plus de cela, nous pouvons rendre notre code plus lisible et modulaire en séparant sa logique, nous pouvons y parvenir en créant deux fichiers, pour cela nous en créons un appelé bonjour_react.js et on met le code suivant :

 React.render (, document.getElementById ('example_react'));

Puis dans notre HTML ce que nous faisons est d'inclure notre fichier .js dans la balise script et nous aurons la même opération :

Voyons alors lorsque nous exécutons notre exemple dans le navigateur sa réponse :

Comme nous pouvons le voir, la manipulation des données était assez simple, cependant il existe une meilleure façon de mettre en œuvre Réagir, puisque la façon dont nous le faisons, le code utilise le transformateur de JSX du navigateur comme nous le verrons dans le message que nous recevons via la console.

Ce message de console nous donne la solution à ce petit avertissement, et c'est d'effectuer une pré-compilation de notre code .js, pour cela nous utiliserons le gestionnaire de paquets de Node.js pour cette tâche, donc si nous n'avons pas cet environnement installé sur notre PC, nous allons sur la page officielle et le téléchargeons dans le cas où nous travaillons sous Windows et dans le cas où nous travaillons sous Linux, nous pouvons suivre les étapes de ce tutoriel.

Pré-compiler notre code

Pour effectuer cette tâche, nous allons sur notre console Node.js et avec l'aide de npm nous avons installé l'outil Réagir pour la console de commande appelée réagir-outils pour laquelle il suffit d'exécuter cette ligne :

 npm install -g réagir-outils

Maintenant, ce que nous faisons est de traduire notre code en JavaScript pur comme suit :

 jsx --regardez hello_react.js

Cela traduit non seulement notre code mais génère automatiquement le fichier bonjour_react.js Chaque fois qu'une modification est apportée à notre application, voyons la réponse de la console lorsque nous exécutons cette commande :

Enfin, nous modifions notre HTML suppression de l'inclusion de la bibliothèque JSXTransformer.js puisque nous n'en avons pas besoin et que nous faisons l'inclusion de notre script de manière conventionnelle, voyons :

 Bonjour Réagissez !

Comme nous l'avons mentionné, la dernière opération que nous effectuons via la console génère automatiquement le fichier chaque fois que nous apportons une modification à notre application, donc si nous avons apporté des modifications, la console nous en informera comme suit :

Comme nous pouvons le voir, nous avons deux notifications indiquant que des modifications ont été apportées au fichier, qui étaient effectivement celles que nous avons faites en ce qui concerne la suppression de la bibliothèque et l'inclusion conventionnelle d'un fichier JavaScript.

C'est ainsi que nous avons terminé ce tutoriel, où nous avons pu faire nos premiers pas avec Réagir et sa mise en œuvre dans nos applications, ceci pour nous aider dans la construction de composants pour la visualisation des données dans nos vues, en vérifiant que ce n'est pas seulement simple mais qu'il nous fournit des outils qui faciliteront grandement notre développement.