de Leonardo Maldonado

Un tutorial complet React Boilerplate – De la zero la erou

Un tutorial complet React Boilerplate De la zero la

Când începem să învățăm React, pentru a ne realiza proiectele, trebuie să facem o placă de la zero sau să folosim unele furnizate de comunitate. Aproape de fiecare dată este creați-reacționați-aplicație pe care îl folosim pentru a crea o aplicație fără configurație de compilare. Sau pur și simplu ne facem propriul cazan simplu de la zero.

Din aceasta, îmi vine în minte: de ce să nu fac un cazan cu toate dependențele pe care le folosesc mereu și să-l las gata? De asemenea, comunitatea a gândit așa, așa că acum avem mai multe cazane create de comunitate. Unele sunt mai complexe decât altele, dar au întotdeauna același obiectiv de a economisi timpul maxim.

Acest articol vă va învăța cum vă puteți construi propriul cazan de la zero cu principalele dependențe utilizate în comunitatea React de astăzi. Vom folosi unele dintre funcțiile moderne cele mai comune în zilele noastre și de acolo o puteți personaliza în orice fel doriți.

Platoul creat de acest articol va fi disponibil aici!

Noțiuni de bază

Mai întâi de toate, vom crea un folder pentru a porni placa noastră. Îl poți numi oricum vrei, eu o voi numi pe a mea react-bolt.

Deschideți terminalul și creați-l astfel:

mkdir react-bolt

Acum, accesați folderul creat și tastați următoarea comandă:

npm init -y

NPM va crea un package.json fișier pentru dvs. și toate dependențele pe care le-ați instalat și comenzile dvs. vor fi acolo.

Acum, vom crea structura de bază a folderelor pentru placa noastră. Va fi așa deocamdată:

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

Webpack

Webpack este cel mai renumit module-bundler pentru aplicațiile JavaScript din zilele noastre. Practic, include toate codurile și generează unul sau mai multe pachete. Puteți afla mai multe despre asta Aici.

În această boilerplate o vom folosi, așa că instalați toate aceste dependențe:

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

Acum în config folder, vom crea un alt folder numit webpack, apoi în interiorul acestuia webpack folder creează 5 fișiere.

Creați un fișier numit paths.js. În interiorul acelui fișier va fi directorul țintă pentru toate fișierele de ieșire.

În interior, puneți tot acest cod:

Acum, creați un alt fișier numit rules.js, și puneți următorul cod acolo:

După aceea, vom crea încă 3 fișiere:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Practic, în webpack.common.babel.js fișier, am configurat configurația noastră de intrare și ieșire și am inclus și toate pluginurile necesare. În webpack.dev.babel.js fișier, am setat modul la dezvoltare. Și în al nostru webpack.prod.babel.js fișier, am setat modul la producție.

După aceea, în folderul nostru rădăcină, vom crea ultimul fișier webpack numit webpack.config.js și introduceți următorul cod:

Configurarea noastră webpack este gata, așa că acum vom lucra pe alte părți ale cazanului cu Babel, ESLint, Prettier etc.

Babel

Cred că aproape toată lumea care lucrează cu React a auzit probabil despre Babel și despre modul în care acest simplu transpiler ne ajută viața. Dacă nu știți ce este, Babel este practic un transpilator care vă convertește codul JavaScript în JavaScript vechi simplu ES5 care poate rula în orice browser.

Vom folosi o grămadă de pluginuri Babel, așa că în folderul nostru rădăcină, instalați:

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 babel-core@7.0.0-bridge.0

După aceasta, vom crea un fișier în folderul nostru rădăcină numit .babelrc și în interiorul acelui fișier, vom pune următorul cod:

Acum proiectul nostru este compilat de Babel și putem folosi sintaxa JavaScript de generația următoare fără probleme.

ESLint

Cel mai folosit instrument pentru proiectele de linting în zilele noastre este ESLint. Este foarte util să găsiți anumite clase de bug-uri, cum ar fi cele legate de domeniul variabil, atribuirea variabilelor nedeclarate și așa mai departe.

Mai întâi, instalați următoarele dependențe:

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 

Apoi, în folderul nostru rădăcină, creați un fișier numit .eslintrc și puneți următorul cod acolo:

Mai frumoasă

Prettier este practic un formatator de cod. Acesta analizează codul dvs. și îl reimprimă cu propriile reguli care iau în considerare lungimea maximă a liniei, împachetând codul atunci când este necesar.

Trebuie doar să-l instalați:

npm install --save-dev prettier

Și în folderul nostru rădăcină, creați un fișier numit .prettierrc și puneți următorul cod acolo:

Reacţiona

React este o bibliotecă de aplicații JavaScript open-source pentru a construi interfețe utilizator. A fost dezvoltat de Facebook și are în spate o comunitate imensă. Dacă citești acest articol, presupun că știi deja despre React, dar dacă vrei să afli mai multe despre el, poți citi mai departe Aici.

Vom instala următoarele dependențe:

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

Și în interiorul nostru src folder, vom crea un fișier HTML simplu index.html și introduceți următorul cod:

După aceea, vom crea un proiect simplu React. În interiorul nostru src folder, creați un index.js fișier așa:

În interiorul nostru src folder vom avea următoarea structură:

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

Creați un fișier numit App.js în interiorul components și introduceți următorul cod:

Redux

Redux facilitează gestionarea stării aplicației dvs. Un alt mod de a privi acest lucru este că vă ajută să gestionați datele afișate și cum răspundeți la acțiunile utilizatorului. În zilele noastre, mulți oameni preferă alte opțiuni, cum ar fi MobX sau doar setState în sine, dar o să rămân cu Redux pentru acest cazan.

În primul rând, vom instala câteva dependențe:

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

Apoi, vom crea magazinul nostru Redux și vom pune starea acolo. În a noastră store folder, creați un fișier index.js fișierul și puneți următorul cod acolo:

Acum, în interiorul nostru reducers folder creați un index.js și puneți următorul cod:

În sfârșit, vom merge la noi index.js în a noastră src și înfășurați codul cu <Provider /> și pass our depozitați ca recuzită pentru a o pune la dispoziția aplicației noastre.

Va fi așa:

Totul este gata. Magazinul nostru Redux este configurat și gata de utilizare.

React Router

React Router este biblioteca standard de rutare pentru React. Practic, ea păstrează interfața de utilizare sincronizată cu adresa URL. Îl vom folosi în boilerplate, așa că instalați-l:

npm install --save react-router-dom

După aceea, du-te la index.js în a noastră src folder și înfășurați tot codul acolo cu <BrowserRouter>.

Al nostru index.js în a noastră src dosar va sfârși astfel:

Componente stilizate

Componentele stilate fac CSS ușor pentru toată lumea, deoarece vă ajută să vă organizați proiectul React. Obiectivul său este de a scrie mai multe componente mici și reutilizabile. O vom folosi și, dacă doriți să aflați mai multe despre aceasta, citiți Aici.

Mai întâi, instalați-l:

npm install --save styled-components

Apoi, în App.js fișier în interiorul nostru components folder, vom crea un titlu simplu folosind Componente stilizate. Titlul nostru va fi așa:

Și în interiorul fișierului nostru, trebuie să importăm componente stilizate, astfel încât fișierul nostru va ajunge astfel:

Biblioteca de testare Jest & React

Jest este o bibliotecă open-source de testare JavaScript de pe Facebook. Facilitează testarea aplicației dvs. și ne oferă multe informații despre ceea ce oferă rezultatul corect și ce nu. React Testing Library este o soluție foarte ușoară pentru testarea componentelor React. Practic, această bibliotecă este un înlocuitor pentru Enzyme.

Fiecare aplicație are nevoie de un fel de teste. Nu voi scrie teste în acest articol, dar vă voi arăta cum puteți configura aceste instrumente pentru a începe să vă testați aplicațiile.

Mai întâi, le vom instala pe ambele:

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

După aceea, accesați package.json și puneți la urma urmelor următoarele:

Apoi, du-te la config folder, iar în interiorul acestuia a creat un alt folder numit tests și în interiorul acelui folder, creați 2 fișiere.

Mai întâi, creați un fișier numit jest.config.js și introduceți următorul cod:

Apoi, creați un fișier numit rtl.setup.js și introduceți următorul cod:

Totul este gata. Cazanul nostru este gata de utilizare și îl puteți folosi acum.

Acum mergi la dosarul nostru package.json și introduceți următorul cod:

Acum, dacă executați comanda npm start și du-te la localhost:8080, ar trebui să vedem aplicația noastră funcționând bine!

Dacă doriți să vedeți codul meu final, placa de cazan creată de acest articol este disponibilă aici!

Am câteva idei pentru câteva caracteristici pe care mi-ar plăcea să le includ în boilerplate, așa că vă rugăm să nu ezitați să contribuiți!

? Furmează-mă pe Twitter!
Furmează-mă pe GitHub!

Caut o oportunitate la distanță, așa că, dacă am vreunul, aș vrea să aud despre asta, așa că vă rog să mă contactați