React : votre guide complet pour débutant sur l'utilisation de ReactJS

Vous avez entendu parler de ReactJS mais vous ne savez pas par où commencer ? Avez-vous commencé à jouer avec ReactJS mais vous ne savez pas comment l'utiliser au quotidien ? Cet article sera votre guide pour apprendre et maîtriser la bibliothèque React JavaScript, la bibliothèque la plus populaire utilisée par les développeurs aujourd'hui. Je vais vous montrer exactement comment démarrer avec ReactJS et comment l'intégrer dans votre flux de travail afin que vous puissiez créer des interfaces utilisateur plus dynamiques sans avoir à faire un détour inutile par un autre framework ou une autre bibliothèque. Commençons!

Qu'est-ce que ReactJS ?

React est une bibliothèque de développement frontale qui vous encourage à créer des composants réutilisables. Si vous recherchez un moyen efficace de créer des interfaces utilisateur, React pourrait être exactement ce dont vous avez besoin. Lors de la création d'interfaces utilisateur avec Vanilla JavaScript ou jQuery, votre code peut devenir très compliqué et peu maniable très rapidement. En utilisant React et sa méthode préférée de développement basé sur les composants, votre code sera beaucoup plus facile à réutiliser et à maintenir.

En fait, une fois que vous avez construit quelques composants, il est relativement facile pour les autres développeurs de votre équipe d'intervenir et de contribuer au code sans avoir aucune expérience (ou connaissance de) React !

Recommandé pour vous : 5 conseils valables pour optimiser les performances de l'application native React.

Pourquoi utiliser ReactJS ?

Tout d'abord, vous avez le choix devant vous en ce qui concerne les frameworks JavaScript. Alors, pourquoi choisiriez-vous React ? Eh bien, pour commencer, lorsqu'il s'agit d'aider les développeurs à créer de grandes applications faciles à comprendre et à utiliser pour les utilisateurs finaux.

Pour les développeurs qui n'ont travaillé qu'avec jQuery ou Vanilla JavaScript jusqu'à présent, apprendre à travailler avec les nouvelles technologies peut être frustrant. Dans certains cas, les développeurs peuvent avoir besoin de centaines de lignes de code simplement pour créer une simple boîte modale ou une barre de navigation. Parce que React utilise le DOM virtuel au lieu d'écrire et de réécrire de vrais éléments DOM chaque fois qu'il y a un changement d'état (comme c'est souvent le cas dans Angular), l'utilisation de React peut faire gagner un temps précieux en autorisant moins de lignes de code tout en rendant vos applications plus rapides qu'elles ne l'étaient. avant.

L'installer dans un navigateur

Avant de pouvoir utiliser React dans un navigateur, vous devez l'installer. Heureusement, c'est un processus simple grâce à npm et Browserify. Vous utilisez Node ou un autre environnement côté serveur ? Vous pouvez également utiliser npm et Browserify pour cela aussi. Une fois que vous avez tout installé, créez un fichier HTML avec votre éditeur de texte préféré. Sinon, utilisez un générateur standard comme Create-React-App qui crée pour vous un projet de démarrage de base qui a déjà toutes ces choses configurées.

Conversion d'App.js pour utiliser ReactJS

Tout notre code est actuellement dans un seul fichier nommé App.js. Mais cela rend le test difficile. Alors, décomposons-le en plusieurs fichiers. Nous allons commencer par convertir un composant écrit en ES6 en un composant écrit en JSX. C'est plus simple si nous gardons tous nos composants React dans un seul répertoire (ce que vous devriez faire). Alors, créons un répertoire src/components vide et déplaçons App.js dedans : mv app/App.js src/components/app-react.js. Puis renommez-le en app-react.js.

Pour utiliser React au lieu de simplement ES6, modifiez use strict; en haut de votre fichier pour utiliser babel ; Vous devrez également installer Babel via npm install –save babel-CLI babel-preset-es2015 babel-preset-react, ce qui obligera Babel à compiler votre nouvelle syntaxe JSX.

Commencez à construire avec notre exemple d'application

Il existe de nombreuses façons de démarrer avec React, mais l'une de nos préférées consiste à créer une simple application To-Do List. Pour vous permettre de progresser rapidement et d'éviter de nombreuses erreurs courantes, nous avons créé un exemple d'application dans lequel tout ce que vous avez à faire est d'échanger votre code back-end et vos composants front-end. Il est équipé de tout ce dont vous avez besoin, y compris des images, pour vous assurer qu'il est aussi beau que fonctionnel.

Vous n'avez pas envie de vous coder ? Aucun problème! Vous pouvez réellement copier tous nos composants en suivant ces étapes simples. Une fois que vous les avez copiés dans votre projet, modifiez-les simplement en fonction de vos besoins ! Le choix t'appartient! Découvrez les trois options de démarrage ici.

Exemple de base utilisant des composants

Si vous regardez n'importe quelle application Web, l'une des premières choses que vous remarquerez est que chaque élément est séparé. Sur une page typique, il existe différents en-têtes, pieds de page, logos et boutons. Cependant, lorsque vous travaillez avec React.js, au lieu d'utiliser plusieurs éléments HTML pour chaque composant de votre page, vous pouvez utiliser un seul élément HTML pour tous les représenter. Cela peut sembler contre-intuitif ; après tout, n'est-ce pas ce que nous faisons depuis des années ?

Vous aimerez peut-être : Facebook JavaScript Engine (Hermes) booste React Native sur Android.

Introduction à la syntaxe JSX

JSX n'est pas un langage de programmation comme JavaScript ou TypeScript, mais une syntaxe conçue comme une extension de JavaScript. Pour cette raison, il est important que les nouveaux développeurs comprennent comment cela fonctionne et où vous pouvez l'utiliser. Le code JSX est écrit d'une manière qui ressemble beaucoup au HTML, ce qui fait du code JSX une excellente première étape pour les nouveaux développeurs qui apprennent les deux langages en même temps. Pour plus d'informations sur ce qui rend JSX unique et comment vous pouvez le maîtriser facilement, lisez notre tutoriel ReactJS complet !

Pour commencer à construire votre premier projet React, créez un nouveau répertoire en tapant mkdir react_tutorial dans votre terminal. Une fois l'exécution terminée, naviguez dans votre répertoire nouvellement créé en tapant cd react_tutorial. Ouvrez ensuite votre terminal et démarrez Node.js en tapant node -v.

Vous devriez voir v10.x répertorié à côté de Node si vous avez installé Node avec succès. Sinon, essayez d'utiliser nvm install 10 si vous utilisez macOS ou Linux. Si cela ne fonctionne pas non plus, Google devrait pouvoir vous aider à comprendre ce qui ne va pas là-bas ! Une fois que Node est correctement installé avec la version 10+, nous sommes prêts à passer à la création de notre projet à partir de zéro !

Statique vs Dynamique vs PureComponent

Lors de la création d'applications Web avec JavaScript moderne, vous disposez de trois options principales pour créer des composants d'interface utilisateur. Celles-ci incluent le HTML statique (react-markup), les requêtes AJAX dynamiques (react-data) et la réutilisation d'éléments DOM existants (react-pure). Chaque méthode a ses propres mérites et peut être appliquée différemment selon votre cas d'utilisation spécifique.

Par exemple, si vous savez que certains éléments seront toujours disponibles, vous pouvez les placer dans des balises HTML statiques. Cependant, si vous avez besoin de récupérer du contenu à partir de bases de données qui n'existent peut-être pas encore, l'utilisation de react-data est un meilleur choix. Lorsque vous décidez quelle méthode de création de composants convient le mieux à votre projet, il est important de penser à la stabilité et à la permanence de chaque partie de votre application.

Méthodes de cycle de vie dans les composants ReactJS

Il existe une poignée de méthodes de cycle de vie que vous pouvez utiliser dans vos composants afin de contrôler différentes parties de leur cycle de vie. La méthode componentWillMount() est appelée juste avant qu'un composant ne soit rendu pour la première fois. Dans celui-ci, vous pouvez ajouter toutes les initialisations dont vous avez besoin pour votre composant, telles que l'enregistrement d'informations à l'aide de localStorage. La méthode componentDidMount() est également appelée immédiatement après qu'un composant a été monté et rendu. Ici, vous pouvez ajouter du code qui doit s'exécuter une fois qu'un composant a été entièrement initialisé (par exemple, la création de nouvelles requêtes réseau).

Gestion de l'état dans les composants

La façon dont Reacts aborde la gestion de l'état est quelque peu unique. Pour comprendre pourquoi, nous devons d'abord considérer comment la plupart des frameworks gèrent les états.

Traditionnellement, un développeur considérerait l'état d'un composant comme étant stocké en lui-même. Cela entraîne de nombreux problèmes. Si un composant veut mettre à jour l'état d'un autre composant, il a besoin d'une référence (props) à cet autre composant pour le faire. Et si vous souhaitez que vos objets d'état ou tableaux restent synchronisés entre les composants, vous avez besoin d'une sorte de magasin de données centralisé ou d'un émetteur d'événements auquel tous les composants peuvent accéder.

Et même si cela peut être assez simple pour les composants d'une petite application avec seulement deux ou trois états différents, que se passe-t-il lorsque votre application a des dizaines d'états différents ? Comment les gérez-vous tous ?

Transmission de données du composant parent au composant enfant

Il existe deux façons de transmettre des données d'un composant parent à un composant enfant : via les accessoires ou l'état. La transmission de données via des accessoires peut être utile pour définir des variables pour vos composants, telles que la définition du nombre d'éléments dans un tableau. D'autre part, la transmission de données via l'état peut être utile si vous souhaitez transmettre des objets volumineux (ce qui pourrait potentiellement ralentir votre application) ou définir des fonctions que vous souhaitez appeler depuis votre composant enfant. Passons en revue les deux approches et voyons quand il est approprié de les utiliser dans notre code !

Vous pourriez également aimer : Quelles sont les améliorations proposées par React JS dans Headless WordPress ?

Conclusion

Lorsque vous embauchez un développeur ReactJS, assurez-vous de choisir un pigiste expérimenté dans le travail avec JavaScript, CSS, HTML et Node.js depuis plus de 5 ans. Il est important que votre développeur puisse démontrer son expertise en fournissant des exemples de projets et en concevant des projets adaptés à vos besoins spécifiques. Cela les aidera à comprendre facilement les buts et objectifs de votre entreprise.

Tout expert commencera toujours par poser des questions avant de commencer tout travail. Par conséquent, il est indispensable d'engager un expert qui pose des questions aux moments appropriés lors de la création d'un site Web à l'aide du framework React. Le coût moyen d'embauche des développeurs ReactJS se situerait entre 40 $ et 100 $ de l'heure. Mais les experts facturent plus cher que la normale. Alors, gardez cela à l'esprit lorsque vous établissez un budget pour la création d'un site Web à l'aide du cadre de développement ReactJS.

 Cet article est écrit par Rahul Kalsariya de Tagline Infotech LLP.