En komplet React Boilerplate-tutorial - Fra nul til helt

Når vi begynder at lære at reagere, skal vi fremstille vores projekter ved at lave en kedelplade fra bunden eller bruge nogle leveret af samfundet. Næsten alle de gange er det den create-react-app, som vi bruger til at oprette en app uden build-konfiguration. Eller vi laver bare vores egen enkle kogeplade fra bunden.

Fra dette kommer det til at tænke på: hvorfor ikke lave en kedelplade med alle afhængigheder, som jeg altid bruger, og lade den være klar? Samfundet tænkte også på den måde, så nu har vi flere fællesskabskogte kedelplader. Nogle er mere komplekse end andre, men de har altid det samme mål at spare den maksimale tid.

Denne artikel vil lære dig, hvordan du kan bygge din egen kogeplade fra bunden med de vigtigste afhængigheder, der bruges i React-samfundet i dag. Vi bruger nogle af de moderne funktioner, der er mest almindelige i disse dage, og derfra kan du tilpasse det, som du vil.

Kedelpladen oprettet af denne artikel vil være tilgængelig her!

Kom godt i gang

Først og fremmest skal vi oprette en mappe til at starte vores kedelplade. Du kan navngive det, hvad du vil, jeg kalder min reaktionsbolt .

Åbn din terminal, og opret den således:

mkdir react-bolt

Gå nu til din oprettede mappe, og skriv følgende kommando:

npm init -y

NPM opretter en package.jsonfil til dig, og alle de afhængigheder, du har installeret, og dine kommandoer vil være der.

Nu skal vi oprette den grundlæggende mappestruktur til vores kedelplade. Det bliver sådan her for nu:

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

Webpack

Webpack er den mest berømte modul-bundler til JavaScript-applikationer i dag. Dybest set samler den al din kode og genererer en eller flere bundter. Du kan lære mere om det her.

I denne kedelplade skal vi bruge den, så installer alle disse afhængigheder:

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

Nu i vores configmappe skal vi oprette en anden mappe, der kaldes webpack, og derefter webpackoprette 5 filer inde i den mappe.

Opret en fil, der hedder paths.js. Inde i den fil bliver målmappen for alle dine outputfiler.

Inde i det skal du sætte al denne kode:

Opret nu en anden fil, der hedder rules.js, og sæt følgende kode der:

Derefter opretter vi 3 flere filer:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Dybest set har vi i vores webpack.common.babel.jsfil oprettet vores indgangs- og outputkonfiguration og også inkluderet alle nødvendige plugins. I webpack.dev.babel.jsfilen har vi indstillet tilstanden til udvikling. Og i vores webpack.prod.babel.jsfil har vi indstillet tilstanden til produktion.

Derefter opretter vi i vores rodmappe den sidste kaldte webpack-fil webpack.config.jsog lægger følgende kode i:

Vores webpack-konfiguration er klar, så nu skal vi arbejde på andre dele af kedelpladen med Babel, ESLint, Prettier osv.

Babel

Jeg tror, ​​at næsten alle, der arbejder med React, sandsynligvis har hørt om Babel, og hvordan denne enkle transpiller hjælper vores liv. Hvis du ikke ved hvad det er, er Babel dybest set en transpiller, der konverterer din JavaScript-kode til almindelig gammel ES5 JavaScript, der kan køre i enhver browser.

Vi skal bruge en masse Babel-plugins, så i vores rodmappe skal du installere:

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]

Herefter opretter vi en fil i vores rodmappe, der hedder, .babelrcog inde i den fil vil vi sætte følgende kode:

Nu er vores projekt udarbejdet af Babel, og vi kan bruge næste generations JavaScript-syntaks uden problemer.

ESLint

Det mest anvendte værktøj til linting-projekter i dag er ESLint. Det er virkelig nyttigt at finde visse klasser af bugs, såsom dem, der er relateret til variabelt omfang, tildeling til sort angivne variabler osv.

Først skal du installere følgende afhængigheder:

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 

Derefter opretter du en fil, der hedder i vores rodmappe, .eslintrc og placerer følgende kode der:

Pænere

Prettier is basically a code formatter. It parses your code and re-prints it with its own rules that take the maximum line length into account, wrapping code when necessary.

You just need to install it:

npm install --save-dev prettier

And in our root folder, create a file called .prettierrc and put the following code there:

React

React is an open-source JavaScript application library to build user interfaces. It was developed by Facebook and has a huge community behind it. If you are reading this article, I assume that you already know about React, but if you want to learn more about it, you can read up here.

We’re going to install the following dependencies:

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

And inside our src folder, we’re going to create a simple HTML file index.html and put in the following code:

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 pas s 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!