Share
React était connu dans le passé pour sa difficulté à commencer à créer des applications, car il fallait vraiment comprendre comment configurer les outils de génération manuellement. Ceci est même avant que vous écriviez une seule ligne de code React.
L'outil create-react-app aide énormément à résoudre ce problème, car il permet à quiconque de créer une application React opérationnelle sans nécessiter de connaissances sur la configuration des outils de construction. La réalité est que créer-réagir-app ira pour la plupart des applications, surtout si vous êtes nouveau sur React.
À mesure que vous acquérez de l'expérience avec React, certaines exigences relatives à vos applications nécessitent une configuration personnalisée des fichiers de configuration. Dans ce cas, vous devez pouvoir configurer les outils de génération de React manuellement, car create-react-app les masque par défaut..
Dans ce tutoriel, je vais vous montrer comment configurer une application React en configurant manuellement les outils de construction au fur et à mesure. J'espère que cela vous donnera la confiance nécessaire pour continuer et expérimenter avec des configurations plus complexes.
Bien que cela puisse sembler un peu intimidant au début, vous profiterez de tous les avantages d'un contrôle total sur chaque paramètre de configuration. Vous pouvez également choisir les outils à inclure dans votre application, lesquels peuvent varier d’un projet à l’autre. Cette approche vous permet également d'intégrer facilement de nouveaux outils de construction au fur et à mesure qu'ils arrivent (ce qu'ils font fréquemment).
Êtes-vous prêt à créer votre première application React complètement à partir de zéro? Faisons le.
Pour montrer comment configurer une application React via la configuration manuelle des outils de construction, nous allons créer la même application très simple, React, à partir des didacticiels précédents de cette série..
Commencez par créer un dossier appelé ma-premier-composants-build, puis ouvrez une fenêtre de ligne de commande pointant sur ce dossier.
Type npm init créer un package.json fichier. Ce fichier contiendra toutes les informations sur les outils utilisés pour créer votre application, ainsi que les paramètres associés. Accepter tous les paramètres par défaut et continuer à frapper Entrer (environ dix fois) jusqu'à la fin.
Si vous avez accepté tous les défauts, package.json ressemblera à ceci:
"name": "my-first-components-build", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test" : "echo \" Erreur: aucun test spécifié \ "&& exit 1", "author": "", "license": "ISC"
Nous devons maintenant ajouter les scripts React et ReactDOM à notre projet. Nous ferons cela via npm, le gestionnaire de paquets pour Node.js.
Dans le même répertoire de ligne de commande, entrez:
npm installer --save react rea-dom
Cela installe à la fois React et ReactDom, ainsi que les dépendances requises par ces deux modules. Vous remarquerez que nous avons maintenant un nouveau node_modules répertoire qui est où les modules ont été ajoutés à.
Si vous regardez le package.json fichier, un nouveau les dépendances la propriété a été ajoutée contenant des informations sur les modules de noeud que nous avons installés.
"dépendances": "réagir": "^ 15.6.1", "réagir-dom": "^ 15.6.1"
Ceci est dû au fait que nous avons spécifié le --enregistrer option dans notre npm installer commander. Ce npm averti que nous voulions garder une trace de nos dépendances de projets installés. Ceci est important si nous voulons partager notre projet.
En règle générale, parce que le node_modules Le dossier est si volumineux que vous ne voulez pas essayer de le partager directement. Au lieu de cela, vous partagez votre projet sans le node_modules dossier. Ensuite, lorsque quelqu'un télécharge votre projet, il ne reste plus qu'à taper npm installer dupliquer la configuration directement à partir de package.json.
Remarque: Dans npm 5.x, les modules installés sont automatiquement enregistrés dans package.json. Vous n'avez plus besoin de spécifier manuellement le --enregistrer option.
À l'intérieur de ma-premier-composants-build dossier, créer un nouveau src dossier, et ajouter un index.js fichier à elle. Nous y reviendrons plus tard lorsque nous commencerons à créer notre application React, une fois que nous aurons configuré les fichiers de configuration du projet..
Ajoutez un fichier index.html dans le même dossier avec le code suivant:
Créer une application React manuellement, à l'aide des outils de construction
Nous voulons pouvoir compiler notre application en un seul fichier JavaScript et également utiliser les classes et les modules JSX et ES6. Pour ce faire, nous devons installer les modules Webpack et Babel via npm..
Commençons par installer Babel. Tapez ce qui suit dans la fenêtre de ligne de commande:
npm installer --save-dev babel-core babel-loader babel-preset-env babel-preset-rea
Ceci installe tous les modules nécessaires à Babel pour compiler le code ES6 et JSX en JavaScript standard..
Maintenant, installons Webpack, à nouveau via la ligne de commande:
npm installer --save-dev html-webpack-plugin webpack webpack-dev-server
Ceci installe tous les modules nécessaires à Webpack, un serveur Web local, et nous permet de diriger Webpack pour créer un environnement dynamique. index.html déposer dans le Publique dossier basé sur celui que nous avons ajouté à la src dossier. Nous pouvons également ajouter une référence dynamique au fichier JavaScript fourni dans le fichier HTML chaque fois que l'application est créée..
Une fois ces nouveaux modules installés, votre package.json Le fichier va maintenant ressembler à ceci:
"dépendances": "react": "^ 15.6.1", "react-dom": "^ 15.6.1", "devDependencies": "babel-core": "^ 6.25.0", "babel -loader ":" ^ 7.1.0 "," babel-preset-env ":" ^ 1.5.2 "," babel-preset-react ":" ^ 6.24.1 "," html-webpack-plugin ":" ^ 2.28.0 "," webpack ":" ^ 3.0.0 "," webpack-dev-server ":" ^ 2.5.0 "
Cette fois, cependant, les dépendances Webpack et Babel sont enregistrées dans package.json comme dépendances dev.
Cela signifie que ces modules particuliers sont nécessaires pendant la phase de développement (c'est-à-dire de construction) de l'application. D'autre part, les dépendances (telles que React et ReactDOM) sont nécessaires pendant l'exécution et seront donc incluses directement avec notre code d'application personnalisé..
Pour que Webpack construise notre application et la regroupe dans un seul fichier, nous devons configurer les paramètres. Dans le dossier de votre application racine, créez webpack.config.js, qui est utilisé pour stocker les paramètres de construction spécifiques à Webpack.
Webpack doit faire trois choses:
À l'intérieur webpack.config.js, ajouter:
Accentsconagua
var path = require ('path'); var HtmlWebpackPlugin = require ('html-webpack-plugin'); module.exports = entrée: './src/index.js', sortie: chemin: chemin.resolve (__ nom de répertoire, 'public'), nom de fichier: 'build.js', module: règles: [test : /\.(js)$/, utilisez: 'babel-loader'], plugins: [new HtmlWebpackPlugin (template: 'src / index.html')]Ne vous inquiétez pas trop de la syntaxe utilisée ici; juste comprendre l'aperçu de ce qui se passe.
Nous ne faisons qu'exporter un objet JavaScript avec certaines propriétés qui contrôlent la façon dont Webpack construit notre application. le entrée propriété spécifie le point de départ de notre application React, qui est index.js. Ensuite, le sortie propriété définit le chemin de sortie et le nom de fichier du fichier JavaScript fourni.
En ce qui concerne le processus de construction lui-même, nous souhaitons que Webpack transmette tous les fichiers JavaScript au compilateur Babel pour transformer JSX / ES6 en JavaScript standard. Nous faisons cela via le module propriété. Il spécifie simplement une expression régulière qui exécute les transformations de Babel seulement pour les fichiers JavaScript.
Pour terminer la configuration de Babel, nous devons ajouter une entrée à la package.json fichier pour spécifier les transformations Babel que nous voulons effectuer sur nos fichiers JavaScript. S'ouvrir package.json et ajouter un babel propriété:
"babel": "presets": ["env", "react"],
Cela va exécuter deux transformations sur chaque fichier JavaScript de notre projet. le env La transformation convertira le JavaScript ES6 en JavaScript standard compatible avec tous les navigateurs. Et le réagir la transformation compilera le code JSX jusqu'à createElement () appels de fonction, ce qui est parfaitement valide JavaScript.
Maintenant, revenons à notre webpack.config.js fichier.
La dernière propriété que nous avons est plugins, qui contient toutes les opérations spéciales que nous souhaitons effectuer pendant le processus de construction. Dans notre cas, nous avons besoin de Webpack pour créer un index.html fichier qui inclut une référence au fichier JavaScript fourni. Nous indiquons également un existant index.html fichier (celui que nous avons créé plus tôt) à utiliser comme modèle pour créer le paquet final index.html fichier.
Ajoutons maintenant un scénario propriété à package.json. Au fait, vous pouvez ajouter autant de scripts que vous le souhaitez pour effectuer diverses tâches. Pour le moment, nous voulons simplement être en mesure d’exécuter Webpack. package.json supprimer le "tester" script et le remplacer par:
"scripts": "build": "webpack",,
Avant de tester le processus de construction, ajoutons un composant React à index.js nous avons donc quelque chose à rendre.
importer Réagir, Composant de 'réagir'; importer ReactDOM de 'react-dom'; La classe App étend le composant render () return () ReactDOM.render (Bonjour le monde!
, document.querySelector ('#app'));
Cela devrait maintenant vous sembler très familier si vous avez suivi les didacticiels précédents de cette série..
À partir de la ligne de commande, exécutez:
npm run build
Au bout d'un moment, vous devriez voir un nouveau Publique dossier créé à l'intérieur ma-premier-composants-build, contenant index.html et index.js. S'ouvrir index.html pour voir la sortie de notre test React app.
Notez que le fichier JavaScript fourni a été ajouté pour nous et que le composant de test est restitué dans le bon élément DOM..
Une fois que vous aurez commencé à apporter plusieurs modifications à votre application, vous découvrirez rapidement qu'il est plutôt fastidieux de devoir modifier manuellement un fichier, de l'enregistrer, d'exécuter la commande de construction, puis de recharger la fenêtre du navigateur pour afficher les modifications..
Heureusement, nous pouvons utiliser le mini-serveur Webpack que nous avons installé précédemment pour automatiser ce processus. Ajouter un deuxième script à package.json la propriété 'scripts' ressemble à ceci:
"scripts": "build": "webpack", "dev": "webpack-dev-server --open",
Maintenant, lancez:
npm run dev
Au bout de quelques secondes, un nouvel onglet de navigateur s’ouvre et votre application Web est en cours d’exécution. L'URL pointe maintenant sur un serveur local au lieu de pointer sur un fichier local spécifique. Faire un changement mineur à index.js dans le src dossier et enregistrer. Notez que votre application se met automatiquement à jour dans le navigateur presque instantanément pour refléter les nouveaux changements..
Webpack va maintenant surveiller les fichiers dans votre application pour les changements. Lorsque toute modification est apportée et enregistrée, Webpack recompilera votre application et rechargera automatiquement la fenêtre du navigateur avec les nouvelles mises à jour..
Remarque: le serveur Webpack ne reconstruira pas votre application, mais stocke les modifications dans un cache. C'est pourquoi il peut mettre à jour le navigateur aussi rapidement. Cela signifie que vous ne verrez pas les mises à jour reflétées dans la Publique dossier. En fait, vous pouvez supprimer entièrement ce dossier lorsque vous utilisez le serveur Webpack..
Lorsque vous avez besoin de créer votre application, vous pouvez simplement exécuter npm run build pour créer le Publique dossier à nouveau (si nécessaire) et sortez vos fichiers d'application, prêts à être distribués.
Pour être complet, ajoutons les deux composants simples que nous utilisions dans les tutoriels précédents..
Ajoutez deux nouveaux fichiers dans le dossier du projet racine appelé MyFirstComponent.js et MySecondComponent.js dans le dossier principal de l'application. Dans MyFirstComponent.js, ajoutez le code suivant:
importer Réagir, Composant de 'réagir'; La classe MyFirstComponent étend Component render () return (this.props.number: Hello de React!
) export par défaut MyFirstComponent;
Et en MySecondComponent.js, ajouter:
importer Réagir, Composant de 'réagir'; La classe MySecondComponent étend Component render () return (this.props.number: Ma deuxième composante de réaction.
) export default MySecondComponent;
Pour utiliser ces composants dans notre application, mettez à jour index.js à ce qui suit:
importer Réagir, Composant de 'réagir'; importer ReactDOM de 'react-dom'; importer MyFirstComponent à partir de './MyFirstComponent'; importer MySecondComponent à partir de './MySecondComponent'; La classe App étend le composant render () return () ReactDOM.render (Mes premiers composants réactifs!
, document.querySelector ('#app'));
Cela donne le même résultat que nous avons vu auparavant, sauf que cette fois en configurant l'application React à 100% manuellement.
Une fois que vous avez effectué cette configuration manuelle une fois et créé les fichiers de configuration, c’est le seul moment où vous aurez besoin de le faire entièrement à partir de zéro. Pour les projets futurs, vous pouvez réutiliser un ou plusieurs de vos fichiers de configuration existants, ce qui accélère considérablement la configuration des projets React suivants..
Vous pouvez même créer un ensemble de modèles de départ React spécialement conçus et les héberger sur GitHub. Il s’agirait alors d’un simple cas de clonage d’un projet de démarrage et d’exécution npm init installer les modules requis Node.js.
Le projet React de ce didacticiel est disponible au téléchargement. Vous pouvez donc vous en servir ou l'utiliser comme modèle pour de nouveaux projets..
Clique le Télécharger la pièce jointe lien dans la barre latérale droite pour accéder au fichier .zip du projet. Une fois téléchargé, extrayez-le et ouvrez une fenêtre de ligne de commande. Assurez-vous que vous êtes dans le ma-premier-composants-build annuaire.
Entrez les commandes suivantes pour installer et compiler l'application React..
npm installer npm exécuter dev
La première commande téléchargera tous les modules Node.js nécessaires au projet, ce qui prendra une minute ou deux. La deuxième commande compilera l’application React et exécutera le mini serveur Web en l’affichant dans le navigateur..
Essayez d'apporter des modifications à votre application React. Chaque fois que vous enregistrez les modifications, votre application est recompilée et la fenêtre du navigateur se met automatiquement à jour pour refléter la nouvelle version de votre application..
Lorsque vous voulez construire votre projet pour la distribution, exécutez simplement la commande suivante.
npm run build
Tout au long de cette série de didacticiels, nous avons étudié plusieurs manières d’adapter la configuration des applications React, chacune d’elles nécessitant progressivement davantage de tâches de configuration. Mais l'avantage à long terme est que vous avez beaucoup plus de contrôle et de flexibilité sur la manière dont le projet est mis en place..
Une fois que vous aurez maîtrisé la configuration de React, je pense que développer des applications est très amusant. J'aimerais entendre vos commentaires. Faites-moi savoir ce que vous comptez construire par la suite avec React!
