Article original : How to Install React.js with create-react-app
Par Cem Eygi
React est l'une des bibliothèques JavaScript les plus populaires dans le domaine du développement web aujourd'hui.
En tant que développeur Frontend, j'ai personnellement travaillé avec React dans mes projets et je continuerai probablement à travailler avec dans le futur. L'une des étapes avec lesquelles beaucoup de gens ont du mal est le processus d'installation/configuration de React.
Alors commençons par les bases. Dans cet article, vous allez apprendre comment installer et exécuter une application React de manière facile.
Puisque l'intérêt pour l'apprentissage de React augmente également rapidement jour après jour, j'ai également décidé de créer des tutoriels vidéo sur React sur ma chaîne YouTube. Voici une version vidéo de ce tutoriel :
Comment télécharger et installer Node.js
Tout d'abord, vous allez avoir besoin de NPM (ou Yarn, alternativement). Utilisons NPM pour cet exemple.
Si vous ne l'avez pas installé sur votre système, alors vous devez vous rendre sur le site officiel de Node.js pour télécharger et installer Node, qui inclut également NPM (Node Package Manager).
Sélectionnez le bouton "Recommandé pour la plupart des utilisateurs" et téléchargez la version actuelle pour votre système d'exploitation.
Après avoir téléchargé et installé Node, ouvrez votre terminal/invite de commande et exécutez node -v et npm -v pour voir quelles versions vous avez.
Votre version de NPM doit être au moins 5.2.0 ou plus récente car create-react-app nécessite que nous ayons NPX installé. Si vous avez une version plus ancienne de NPM, exécutez cette commande pour la mettre à jour :
npm install -g npm
Qu'est-ce que create-react-app ?
Étant donné que c'est compliqué et que cela prend beaucoup de temps, nous ne voulons pas configurer React manuellement. create-react-app est une méthode beaucoup plus facile qui effectue toutes les configurations et installations de packages nécessaires automatiquement pour nous et démarre une nouvelle application React localement, prête pour le développement.
Un autre avantage de l'utilisation de create-react-app est que vous n'avez pas à vous occuper des configurations de Babel ou Webpack. Toutes les configurations nécessaires seront faites par create-react-app pour vous.
Selon la documentation React, create-react-app est l'une des méthodes officiellement supportées pour créer des applications monopages dans React. Vous pouvez trouver d'autres méthodes ici.
Comment installer Create-React-App
Pour installer votre application, rendez-vous d'abord dans votre espace de travail (bureau ou un dossier) et exécutez la commande suivante :
npx create-react-app my-app
Le processus d'installation peut prendre quelques minutes. Une fois terminé, vous devriez voir un dossier apparaître dans votre espace de travail avec le nom que vous avez donné à votre application.
Remarque : Si vous êtes sur Mac et que vous recevez des erreurs de permission, n'oubliez pas de devenir super utilisateur d'abord avec la commande sudo.
Comment exécuter l'application que vous avez créée avec Create-React-App
Une fois l'installation terminée, changez de répertoire pour celui où votre application a été installée :
cd my-app
et enfin, exécutez npm start pour voir votre application en direct sur localhost :
npm start
Si vous voyez quelque chose comme ceci dans votre navigateur, vous êtes prêt à travailler avec React. Félicitations ! :)
Merci d'avoir lu !