Share
Ce que vous allez créerReact est rapidement devenu un framework populaire pour la création de vues côté client et côté serveur. Il y avait une barrière d'entrée plus élevée avec l'outillage et une certaine frustration liée à la fatigue de la communauté liée à JavaScript. Le create-react-app a été créé pour répondre à ces frustrations.
Vous voudrez d’abord vous assurer que Node est installé sur votre système. Vous devez au moins avoir installé Node version 4, mais ils recommandent de disposer de la version 6 pour des téléchargements plus rapides et une meilleure utilisation du disque. Vous pouvez utiliser nvm pour basculer facilement entre les versions de nœud.
Après avoir installé Node, vous voudrez ouvrir votre outil de ligne de commande préféré et installer l'application create-react-app globalement afin de pouvoir l'exécuter n'importe où sur votre système..
npm installer -g créer-réagir-application
Vous voudrez d’abord ouvrir la ligne de commande et naviguer ou créer un répertoire dans lequel vous effectuerez votre développement. Ensuite, nous allons créer l'application en exécutant créer-réagir-app tuts-plus-réagir-app. Ceci exécutera l'outil cli pour créer notre application tuts-plus-react-app.
Une fois l'outil CLI terminé, vous accédez à un écran de résumé qui vous permet de savoir où l'application a été créée et vous affiche une liste de commandes que vous pouvez utiliser..
Ensuite, vous voudrez accéder à notre nouvelle application en exécutant cd tuts-plus-react-app.
Vous pouvez exécuter l'application localement en exécutant npm start. Une fois l'application démarrée, vous serez automatiquement dirigé vers http: // localhost: 3000 / dans votre navigateur et verrez votre nouvelle application React..
L'application utilise Webpack pour exécuter un serveur de développement local. Une fonction de surveillance est présente. Ainsi, lorsque vous modifiez et enregistrez votre code React, les modifications s'affichent automatiquement dans le navigateur..
Si vous faites des erreurs avec votre code, vous verrez ces erreurs ou ces avertissements apparaître dans le navigateur..
ESLint est inclus pour garantir que votre code respecte les styles de code courants. Cela vous aidera à vous assurer que votre code est cohérent, ce qui est particulièrement utile lorsqu'il y a plusieurs contributeurs à un projet. Je vous suggère également de l'utiliser si vous débutez avec React pour apprendre de bons styles de codage pour React et JavaScript..
Si vous êtes habitué à écrire des tests pour votre code, Jest est inclus pour exécuter des tests. Jest est un framework de test créé et maintenu par Facebook, les créateurs de React. Pour exécuter vos tests, exécutez test npm dans votre outil de ligne de commande. Cela exécutera les tests, puis lancera un observateur pour exécuter vos tests lorsque votre code de production changera. Il existe un fichier de test existant que vous pouvez ajouter à src / App.test.js.
Lorsque vous avez terminé toutes vos modifications, il est temps de déployer votre application. Tout ce que vous avez à faire est d'exécuter npm run build dans votre répertoire d'applications. Ceci utilisera Babel pour transcrire votre code React en un code que le navigateur comprend. Cela réduira également votre code afin de vous assurer les meilleures performances dans le navigateur..
Si vous décidez de continuer à utiliser l'application create-react-app, je vous conseillerais de prendre le temps de lire le guide de l'utilisateur. Il contient de nombreuses informations utiles sur d'autres sujets liés aux vues, tels que l'ajout de feuilles de style CSS, l'importation d'autres composants, l'importation d'images et de polices, etc. Il contient également des informations sur les pratiques de développement Web, telles que l’utilisation de HTTPS, la connexion à un noeud final, la création d’applications Web progressives, etc..
Il existe également une documentation complète sur le test et le déploiement de votre application..
J'espère que vous pouvez maintenant voir à quel point il est facile de créer une application React à l'aide du projet create-react-app. J'espère que cela aide à abaisser la barrière d'entrée et vous permet de démarrer avec React. Je sais que tu vas en profiter!
Accentsconagua