Komplett React Boilerplate bemutató - A nullától a hősig

Amikor elkezdjük megtanulni a React-ot, a projektjeink elkészítéséhez egy nulláról kell készítenünk egy kazánlapot, vagy fel kell használnunk a közösség által biztosítottakat. Szinte mindig a create-reagál-alkalmazás , amelyet felhasználtunk olyan alkalmazás létrehozásához, amelynek nincs konfigurációs konfigurációja. Vagy csak elkészítjük a saját egyszerű kazánunkat a semmiből.

Ebből az jut eszembe: miért ne készítene egy kazántáblát minden olyan függőséggel, amelyet mindig használok, és készen hagyom? A közösség is így gondolkodott, így most több közösség által létrehozott kazán van. Egyesek összetettebbek, mint mások, de mindig ugyanaz a céljuk, hogy megtakarítsák a maximális időt.

Ez a cikk megtanulja, hogyan készítheti el saját kazánját a semmiből a fő függőségekkel, amelyeket a React közösség ma használ. Néhány modern funkciót használunk, amelyek manapság a legelterjedtebbek, és innen tetszés szerint testre szabhatja.

A cikk által létrehozott kazán itt lesz elérhető!

Elkezdeni

Először is létrehozunk egy mappát a kazántáblánk elindításához. Akkor nevezd meg, amit akarsz, fogom nevezni az enyém reagál-bolt .

Nyissa meg a terminált, és hozza létre így:

mkdir react-bolt

Most lépjen a létrehozott mappába, és írja be a következő parancsot:

npm init -y

Az NPM létrehoz egy package.jsonfájlt az Ön számára, és minden telepített függőség és a parancsok ott lesznek.

Most elkészítjük a kazántáblánk alap mappaszerkezetét. Egyelőre ilyen lesz:

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

Webpack

A Webpack manapság a legismertebb modul-csomag a JavaScript-alkalmazásokhoz. Alapvetően az összes kódot összekapcsolja, és egy vagy több csomagot generál. Itt többet megtudhat róla.

Ebben a kazánban fogjuk használni, ezért telepítse ezeket a függőségeket:

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

Most a configmappánkban létrehozunk egy másik nevű mappát webpack, majd a webpackmappán belül hozzon létre 5 fájlt.

Hozzon létre egy nevű fájlt paths.js. A fájl belsejében lesz az összes kimeneti fájl célkönyvtára.

Tegye bele ezt a kódot:

Most hozzon létre egy másik nevű fájlt rules.js, és tegye oda a következő kódot:

Ezt követően további 3 fájlt fogunk létrehozni:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Alapvetően a webpack.common.babel.jsfájlunkban beállítottuk a bejegyzés és a kimenet konfigurációját, és belefoglaltuk az összes szükséges plugint. A webpack.dev.babel.jsfájlban a módot fejlesztésre állítottuk be. A fájlunkban pedig a webpack.prod.babel.jsgyártás módját állítottuk be.

Ezt követően a gyökérmappánkban létrehozzuk az utolsó meghívott webpack fájlt, webpack.config.jsés beírjuk a következő kódot:

A webpack konfigurációnk készen áll, ezért most a kazán többi részén fogunk dolgozni Babel, ESLint, Prettier stb.

Bábel

Úgy gondolom, hogy szinte mindenki, aki a React-lel dolgozik, valószínűleg hallott már Bábelről és arról, hogy ez az egyszerű transzpiler hogyan segíti az életünket. Ha nem tudod, mi az, a Babel alapvetően egy transzpiler, amely a JavaScript kódodat egyszerű régi ES5 JavaScript-vé alakítja, amely bármely böngészőben futtatható.

Egy csomó Babel beépülő modult fogunk használni, ezért a gyökérmappánkba telepítse:

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]

Ezután létrehozunk egy fájlt a gyökér mappánkban, .babelrcés a fájl belsejében a következő kódot fogjuk elhelyezni:

Most a projektünket a Babel állította össze, és problémamentesen használhatjuk a következő generációs JavaScript szintaxist.

ESLint

A szöszölési projektek manapság leggyakrabban használt eszköze az ESLint. Nagyon hasznos megtalálni a hibák bizonyos osztályait, például a változó hatókörével, a be nem jelentett változókhoz való hozzárendeléssel stb.

Először telepítse a következő függőségeket:

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 

Ezután a gyökérmappánkban hozzon létre egy nevű fájlt, .eslintrc és tegye oda a következő kódot:

Szebb

A szebb alapvetően kódformázó. Elemzi a kódot, és újból kinyomtatja saját szabályaival, amelyek figyelembe veszik a maximális sorhosszat, szükség esetén csomagolják a kódot.

Csak telepítenie kell:

npm install --save-dev prettier

A gyökérmappánkban hozzon létre egy nevű fájlt, .prettierrc és tegye oda a következő kódot:

Reagál

A React egy nyílt forráskódú JavaScript alkalmazáskönyvtár felhasználói felületek létrehozására. A Facebook fejlesztette ki, és hatalmas közösség áll a háta mögött. Ha ezt a cikket olvassa, feltételezem, hogy már ismeri a React-et, de ha többet szeretne megtudni róla, itt olvashat.

A következő függőségeket telepítjük:

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

A mappánkban srcpedig létrehozunk egy egyszerű HTML fájlt, index.htmlés beírjuk a következő kódot:

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!