Išsami „React Boilerplate“ pamoka - nuo nulio iki herojaus

Kai pradedame mokytis „React“, norėdami sukurti savo projektus, turime pagaminti katilą nuo nulio arba naudoti kai kuriuos, kuriuos teikia bendruomenė. Beveik visą laiką tai yra programa „reaguok-reaguok“ , kurią naudojame kurdami programą be komponavimo konfigūracijos. Arba mes tiesiog gaminame savo paprastą katilą nuo nulio.

Iš to kyla mintis: kodėl gi nepadarius katilo su visomis priklausomybėmis, kurias aš visada naudoju, ir palikdamas jį paruoštą? Bendruomenė taip pat mąstė, todėl dabar turime keletą bendruomenės sukurtų katilų. Kai kurie yra sudėtingesni nei kiti, tačiau jie visada turi tą patį tikslą sutaupyti maksimalų laiko kiekį.

Šis straipsnis išmokys jus, kaip galite sukurti savo katilą nuo nulio su pagrindinėmis priklausomybėmis, kurios šiandien naudojamos „React“ bendruomenėje. Mes naudosime kai kurias šiuolaikinėmis funkcijomis, kuriomis dažniausiai pasitaiko šiais laikais, ir galėsite jas pritaikyti bet kokiu būdu.

Šiame straipsnyje sukurtą katilą bus galima rasti čia!

Darbo pradžia

Visų pirma, mes sukursime aplanką, kad galėtume paleisti katilą. Jūs galite pavadinti tai, ką norite, aš pavadinsiu mano reakcijos varžtą .

Atidarykite terminalą ir sukurkite jį taip:

mkdir react-bolt

Dabar eikite į sukurtą aplanką ir įveskite šią komandą:

npm init -y

NPM sukurs package.jsonjums failą ir bus visos įdiegtos priklausomybės bei komandos.

Dabar mes sukursime pagrindinę mūsų katilinės aplankų struktūrą. Kol kas bus taip:

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

Internetinė pakuotė

„Webpack“ yra žymiausias šių dienų „JavaScript“ programų modulių paketas. Iš esmės jis sujungia visą jūsų kodą ir sugeneruoja vieną ar daugiau paketų. Daugiau apie tai galite sužinoti čia.

Šioje katilinėje mes ją naudosime, todėl įdiekite visas šias priklausomybes:

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

Dabar mūsų configaplanke sukursime dar vieną aplanką, vadinamą webpack, tada to webpackaplanko viduje sukursime 5 failus.

Sukurkite failą, pavadintą paths.js. Šio failo viduje bus visų jūsų išvesties failų tikslinis katalogas.

Į jį įdėkite visą šį kodą:

Dabar sukurkite kitą failą, pavadintą rules.jsir įdėkite šį kodą:

Po to sukursime dar 3 failus:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Iš esmės savo webpack.common.babel.jsfaile nustatėme įvesties ir išvesties konfigūraciją ir įtraukėme visus reikalingus papildinius. Į webpack.dev.babel.jsfailą, mes nustatyti režimą į plėtrą. Savo webpack.prod.babel.jsfaile mes nustatėme gamybos režimą.

Po to, savo šakniniame aplanke, mes sukursime paskutinį žiniatinklio paketo failą, kurį iškvietėme, webpack.config.jsir įdėsime šį kodą:

Mūsų internetinės pakuotės konfigūracija yra paruošta, todėl dabar ketiname dirbti su kitomis katilo dalimis su „Babel“, „ESLint“, „Prettier“ ir kt.

Babelis

Manau, kad beveik visi, dirbantys su „React“, tikriausiai yra girdėję apie „Babel“ ir kaip šis paprastas transpileris padeda mūsų gyvenimams. Jei nežinote, kas tai yra, „Babel“ iš esmės yra transpileris, kuris paverčia jūsų „JavaScript“ kodą į paprastą seną „ES5 JavaScript“, kuris gali veikti bet kurioje naršyklėje.

Mes naudosime daugybę „Babel“ papildinių, todėl šakniniame aplanke įdiekite:

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]

Po to sukursime failą savo šakniniame aplanke, vadinamame, .babelrcir tame faile įdėsime šį kodą:

Dabar mūsų projektą sudarė „Babel“ ir be problemų galime naudoti naujos kartos „JavaScript“ sintaksę.

ESLint

Šiuo metu dažniausiai naudojamas įrankis pūkavimui yra ESLint. Tikrai naudinga rasti tam tikras klaidų klases, pavyzdžiui, susijusias su kintamos apimties, priskyrimo nedeklaruotiems kintamiesiems ir pan.

Pirmiausia įdiekite šias priklausomybes:

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 

Tada pagrindiniame aplanke sukurkite failą, pavadintą .eslintrc ir įdėkite šį kodą:

Gražiau

Gražiau iš esmės yra kodo formatavėjas. Jis išanalizuoja jūsų kodą ir vėl spausdina naudodamasis savo taisyklėmis, kurios atsižvelgia į maksimalų eilutės ilgį, prireikus įvyniodami kodą.

Jums tereikia jį įdiegti:

npm install --save-dev prettier

Mūsų šakniniame aplanke sukurkite failą, pavadintą .prettierrc ir įdėkite šį kodą:

Reaguoti

„React“ yra atvirojo kodo „JavaScript“ programų biblioteka, skirta kurti vartotojo sąsajas. Jį sukūrė „Facebook“ ir už jo yra didžiulė bendruomenė. Jei skaitote šį straipsnį, manau, kad jūs jau žinote apie „React“, tačiau jei norite sužinoti daugiau apie tai, galite perskaityti čia.

Įrengsime šias priklausomybes:

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

Mūsų srcaplanke sukursime paprastą HTML failą index.htmlir įvesime šį kodą:

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!