Un didacticiel complet sur la chaudière React - De zéro à héros

Lorsque nous commençons à apprendre React, pour réaliser nos projets, nous devons créer un passe-partout à partir de zéro ou utiliser certains fournis par la communauté. Presque tout le temps, c'est l'application create-react-app que nous utilisons pour créer une application sans configuration de construction. Ou nous fabriquons simplement notre propre passe-partout simple à partir de zéro.

De cela, il me vient à l'esprit: pourquoi ne pas créer un passe-partout avec toutes les dépendances que j'utilise toujours et le laisser prêt? La communauté a également pensé de cette façon, donc maintenant nous avons plusieurs passe-partout créés par la communauté. Certains sont plus complexes que d'autres, mais ils ont toujours le même objectif de gagner un maximum de temps.

Cet article vous apprendra comment créer votre propre passe-partout à partir de zéro avec les principales dépendances utilisées dans la communauté React aujourd'hui. Nous allons utiliser certaines des fonctionnalités modernes les plus courantes de nos jours et à partir de là, vous pouvez les personnaliser comme vous le souhaitez.

Le passe-partout créé par cet article sera disponible ici!

Commencer

Tout d'abord, nous allons créer un dossier pour démarrer notre passe-partout. Vous pouvez le nommer tout ce que vous voulez, je vais moi le nom réagir boulon .

Ouvrez votre terminal et créez-le comme ceci:

mkdir react-bolt

Maintenant, allez dans votre dossier créé et tapez la commande suivante:

npm init -y

NPM créera un package.jsonfichier pour vous, et toutes les dépendances que vous avez installées et vos commandes seront là.

Nous allons maintenant créer la structure de base des dossiers pour notre passe-partout. Ça va être comme ça pour l'instant:

react-bolt |--config |--src |--tests

Webpack

Webpack est de nos jours le bundle de modules le plus connu pour les applications JavaScript. Fondamentalement, il regroupe tout votre code et génère un ou plusieurs bundles. Vous pouvez en savoir plus ici.

Dans ce passe-partout, nous allons l'utiliser, alors installez toutes ces dépendances:

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader 

Maintenant, dans notre configdossier, nous allons créer un autre dossier appelé webpack, puis dans ce webpackdossier, créez 5 fichiers.

Créez un fichier appelé paths.js. À l'intérieur de ce fichier se trouvera le répertoire cible de tous vos fichiers de sortie.

À l'intérieur, mettez tout ce code:

Maintenant, créez un autre fichier appelé rules.jset mettez-y le code suivant:

Après cela, nous allons créer 3 autres fichiers:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Fondamentalement, dans notre webpack.common.babel.jsfichier, nous avons mis en place notre configuration d'entrée et de sortie et inclus également tous les plugins nécessaires. Dans le webpack.dev.babel.jsfichier, nous avons défini le mode développement. Et dans notre webpack.prod.babel.jsfichier, nous avons mis le mode en production.

Après cela, dans notre dossier racine, nous allons créer le dernier fichier Webpack appelé webpack.config.jset insérer le code suivant:

Notre configuration webpack est prête, donc maintenant nous allons travailler sur d'autres parties du passe-partout avec Babel, ESLint, Prettier, etc.

Babel

Je pense que presque tous ceux qui travaillent avec React ont probablement entendu parler de Babel et de la façon dont ce simple transpilateur aide nos vies. Si vous ne savez pas ce que c'est, Babel est essentiellement un transpilateur qui convertit votre code JavaScript en un ancien JavaScript ES5 qui peut fonctionner dans n'importe quel navigateur.

Nous allons utiliser un tas de plugins Babel, donc dans notre dossier racine, installez:

npm install --save-dev @babel/core @babe/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/register @babel/runtime babel-eslint babel-jest babel-loader [email protected]

Après cela, nous allons créer un fichier dans notre dossier racine appelé .babelrcet à l'intérieur de ce fichier, nous allons mettre le code suivant:

Maintenant, notre projet est compilé par Babel, et nous pouvons utiliser la syntaxe JavaScript de nouvelle génération sans aucun problème.

ESLint

L'outil le plus utilisé pour les projets de peluchage de nos jours est ESLint. Il est vraiment utile de trouver certaines classes de bogues, telles que celles liées à la portée des variables, l'affectation à des variables non déclarées, etc.

Tout d'abord, installez les dépendances suivantes:

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react 

Ensuite, dans notre dossier racine, créez un fichier appelé .eslintrc et mettez-y le code suivant:

Plus jolie

Prettier est essentiellement un formateur de code. Il analyse votre code et le réimprime avec ses propres règles qui prennent en compte la longueur de ligne maximale, enveloppant le code si nécessaire.

Il vous suffit de l'installer:

npm install --save-dev prettier

Et dans notre dossier racine, créez un fichier appelé .prettierrc et mettez-y le code suivant:

Réagir

React est une bibliothèque d'applications JavaScript open source pour créer des interfaces utilisateur. Il a été développé par Facebook et a une énorme communauté derrière lui. Si vous lisez cet article, je suppose que vous connaissez déjà React, mais si vous voulez en savoir plus à ce sujet, vous pouvez le lire ici.

Nous allons installer les dépendances suivantes:

npm install --save react react-dom cross-env

Et dans notre srcdossier, nous allons créer un simple fichier HTML index.htmlet insérer le code suivant:

After that, we’re going to create a simple React project. Inside our src folder, create a index.js file like this:

Inside our src folder we’re going to have the following structure:

src |--actions |--components |--reducers |--reducers |--store

Create a file called App.js inside the components folder, and put in the following code:

Redux

Redux makes it easy to manage the state of your application. Another way of looking at this is that it helps you manage the data you display and how you respond to user actions. These days a lot of people prefer other options like MobX or just the setState itself, but I’m gonna stick with Redux for this boilerplate.

First, we’re going to install some dependencies:

npm install --save redux react-redux redux-thunk

Then, we’re going to create our Redux store, and put some state there. In our store folder, create an index.js file and put that following code there:

Now, inside our reducers folder create an index.js and put the following code:

Last, we’re gonna to our index.js in our src folder, and wrap the code with the /> and pass our store as props to make it available to our application.

It’s going to be like this:

All done. Our Redux store is configured and ready to go.

React Router

React Router is the standard routing library for React. Basically, itkeeps your UI in sync with the URL. We’re gonna use it in our boilerplate, so install it:

npm install --save react-router-dom

After that, go to our index.js in our src folder and wrap all the code there with the

r>.

Our index.js in our src folder it’s going to end up like this:

Styled Components

Styled Components makes CSS easy for everyone, as it helps you organize your React project. Its objective is to write more small and reusable components. We’re gonna use it, and if you want to learn more about it, read up here.

First, install it:

npm install --save styled-components

Then, in our App.js file inside our components folder, we’re going to create a simple title using Styled Components. Our title is going to be like this:

And inside our file, we need to import styled components, so our file is going to end up like this:

Jest & React Testing Library

Jest is an open-source JavaScript testing library from Facebook. It makes it easy to test your application, and gives us a lot of information about what is giving the right output and what’s not. React Testing Library is a very light-weight solution for testing React components. Basically, this library is a replacement for Enzyme.

Every application needs some kind of tests. I’m not gonna write tests in this article but I’m gonna show you how you can configure these tools to start testing your applications.

First, we’re gonna install both:

npm install --save-dev jest jest-dom react-testing-library

After that, go to our package.json and put the following after all:

Then, go to our config folder, and inside it created another folder called tests and inside that folder, create 2 files.

First, create a file called jest.config.js and put in the following code:

Then, create a file called rtl.setup.js and put in the following code:

All done. Our boilerplate is ready to go and you can use it now.

Now go to our file package.json and put in the following code:

Now, if you run the command npm start and go to localhost:8080, we should see our application working fine!

If you want to see my final code, the boilerplate created by this article is available here!

I have some ideas for some features that I’d love to include in the boilerplate, so please feel free to contribute!

? Follow me on Twitter!

Follow me on GitHub!

I’m looking for a remote opportunity, so if have any I’d love to hear about it, so please contact me!

Original text