Visas „React“ katilinės pamoka - nuo nulio iki herojaus

Kai mes pradedame mokytis reaguoti, norėdami įgyvendinti savo projektus, turime nugriebti katilinę arba naudoti kai kurias bendruomenės teikiamas paslaugas. Beveik visą laiką tai yra programa „sukurk-reaguok“, kurią naudojame kurdami programą be konstravimo konfigūracijos. Arba mes tiesiog gaminame savo paprastą katilinę iš naujo.

Iš to kyla mintis: kodėl gi nepagaminus katilinės su visomis priklausomybėmis, kurias visada naudoju, ir palieku ją paruoštą? Bendruomenė taip pat galvojo, todėl dabar turime keletą bendruomenės sukurtų katilų. Kai kurie yra sudėtingesni nei kiti, tačiau visada siekiama to paties tikslo - sutaupyti kuo daugiau laiko.

Šis straipsnis išmokys jus, kaip jūs galite sukurti savo katilinę nuo nulio su pagrindinėmis priklausomybėmis, naudojamomis šiandien „React“ bendruomenėje. Panaudosime kai kurias šiuolaikines savybes, labiausiai paplitusias šiais laikais, ir iš ten galėsite tinkinti bet kokiu noru.

Pagal šį straipsnį sukurtą katilinę bus galima rasti čia!

Darbo pradžia

Visų pirma, mes sukursime aplanką, kad paleistume savo katilinę. Galite tai pavadinti kaip tik norite, aš pavadinsiu mano reagavimo varžtą.

Atidarykite terminalą ir sukurkite jį taip:

mkdir reaguoti-varžtas

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

npm inicialas -y

NPM sukurs jums failą package.json, ten bus visos jūsų įdiegtos priklausomybės ir komandos.

Dabar mes sukursime pagrindinę mūsų katilo aplanko struktūrą. Tai bus dabar:

reaguoti-varžtas
    | --konfigūracija
    | --src
    | - bandymai

Internetinė pakuotė

„Webpack“ yra garsiausias šių dienų „Java“ programų modulių rinkinys. Iš esmės jis susieja visą jūsų kodą ir sugeneruoja vieną ar daugiau paketų. Sužinokite daugiau apie tai čia.

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

npm diegimas - taupomasis devpaketas webpack-cli webpack-dev-serveris webpack-merge html-webpack-plugin švarus-webpack-plugin img-loader url-loader failo-krautuvas

Dabar savo konfigūracijos aplanke mes sukursime kitą aplanką, vadinamą „webpack“, tada toje „Webpack“ aplanke sukurkite 5 failus.

Sukurkite failą pavadinimu paths.js. To failo viduje bus visų jūsų išvesties failų aplankas.

Įdėkite visą šį kodą:

Dabar sukurkite kitą failą pavadinimu taisyklės.js ir įdėkite šį kodą:

Po to mes sukursime dar 3 failus:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Iš esmės savo faile webpack.common.babel.js mes nustatėme įvesties ir išvesties konfigūraciją ir įtraukėme visus reikalingus papildinius. Faile webpack.dev.babel.js nustatėme kūrimo režimą. Savo faile webpack.prod.babel.js nustatėme, kad režimas būtų gaminamas.

Po to, savo šakniniame aplanke, sukursime paskutinį internetinės pakuotės failą pavadinimu webpack.config.js ir įvesime šį kodą:

Mūsų internetinės pakuotės konfigūracija yra paruošta, todėl dabar mes dirbsime prie kitų katilo dalių su „Babel“, „ESLint“, „Prettier“ ir kt.

Babelis

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

Mes naudosime krūvą „Babel“ papildinių, todėl šakniniame aplanke įdiekite:

npm įdiegti - išsaugoti-dev @ babel / core @ babe / cli @ babel / node @ babel / plugin-pasiūlymas-klasės savybės @ babel / plugin-pasiūlymas-objektas-rest-spread @ babel / plugin-syntax-dynamic- importas @ babelis / įskiepis-sintaksė-importas-meta @ babelis / įskiepis-transformuojamas-asinchroninis-į generatorių @ babelis / įskiepis-transformuojamas-vykdomasis laikas @ babel / preset-env @ babel / preset-react @ babel / register @ babel / runtime babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

Po to mes sukursime failą šakniniame aplanke pavadinimu .babelrc, o to failo viduje įdėsime šį kodą:

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

ESLint

Šiais laikais labiausiai naudojama priemonė dažyti projektus yra ESLint. Tikrai naudinga rasti tam tikras klaidas, pavyzdžiui, susijusias su kintama apimtimi, priskyrimu nedeklaruotiems kintamiesiems ir pan.

Pirmiausia įdiekite šias priklausomybes:

npm įdiegti - išsaugoti-dev eslint eslint-config-airbnb eslint-config-gražiau eslint-loader

Tada savo šakniniame aplanke sukurkite failą pavadinimu .eslintrc ir įdėkite šį kodą:

Gražiau

Gražesnė iš esmės yra kodų formavimo priemonė. Jis išanalizuoja jūsų kodą ir pakartotinai išspausdina jį pagal savo taisykles, kuriose atsižvelgiama į maksimalų eilutės ilgį, prireikus apvyniojant kodą.

Jums tiesiog reikia ją įdiegti:

ppm įdiegti - taupiau naudoti

Šakniniame aplanke sukurkite failą pavadinimu .prettierrc ir įdėkite šį kodą:

Reaguokite

„React“ yra atvirojo kodo „Java“ 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“, bet jei norite sužinoti daugiau apie tai, galite perskaityti čia.

Įdiegsime šias priklausomybes:

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

Src aplanke mes sukursime paprastą HTML failą index.html ir įves šį kodą:

Po to mes sukursime paprastą „React“ projektą. Savo src aplanke sukurkite index.js failą taip:

„Src“ aplanke bus tokia struktūra:

src
    | --akcijos
    | - komponentai
    | - reduktoriai
    | - reduktoriai
    | --store

Komponentų aplanke sukurkite failą pavadinimu „App.js“ ir įdėkite šį kodą:

Redux

„Redux“ leidžia lengvai valdyti jūsų programos būseną. Kitas būdas tai įvertinti yra tai, kad jis padeda valdyti rodomus duomenis ir tai, kaip reaguojate į vartotojo veiksmus. Šiomis dienomis daugelis žmonių renkasi kitas parinktis, tokias kaip „MobX“ ar tik pačią „setState“, tačiau aš šiam katilinės skyriui pasirinksiu „Redux“.

Pirmiausia įdiegsime keletą priklausomybių:

npm įdiegti - išsaugokite redux react-redux redux-thunk

Tada mes sukursime savo „Redux“ parduotuvę ir įdėsime joje keletą valstijų. Mūsų parduotuvės aplanke sukurkite failą index.js ir įdėkite šį kodą:

Dabar mūsų reduktorių aplanke sukurkite index.js ir įdėkite šį kodą:

Galiausiai pateksime į savo src aplanką index.js ir apvyniokime kodą ir perduokime parduotuvę kaip rekvizitus, kad jis būtų prieinamas mūsų programai.

Tai bus taip:

Viskas padaryta. Mūsų „Redux“ parduotuvė sukonfigūruota ir paruošta naudoti.

Reaguoti maršrutizatorius

„React Router“ yra standartinė „React“ maršruto parinkimo biblioteka. Iš esmės tai palaiko jūsų vartotojo sąsajos sinchronizavimą su URL. Mes jį naudosime savo katilinėje, todėl įdiekite:

Npm įdiegti - išsaugokite reaguoti-maršrutizatorius-dom

Po to eikite į savo src aplanką į index.js ir apvyniokite visą kodą ten .

Mūsų src aplanke esantis index.js bus baigtas taip:

Stiliaus komponentai

Dėl stiliaus komponentų CSS tampa lengva kiekvienam, nes tai padeda organizuoti „React“ projektą. Jos tikslas yra parašyti daugiau mažų ir daugkartinio naudojimo komponentų. Naudosimės ja, jei norite sužinoti daugiau apie tai, perskaitykite čia.

Pirmiausia įdiekite:

npm install - išsaugokite stiliaus komponentus

Tada „App.js“ faile, esančiame komponentų aplanke, mes sukursime paprastą pavadinimą naudodami „Styled Components“. Mūsų pavadinimas bus toks:

Į savo failą turime importuoti stiliaus komponentus, taigi failas baigsis taip:

„Jest & React“ testavimo biblioteka

„Jest“ yra atvirojo kodo „Java“ testavimo biblioteka iš „Facebook“. Tai palengvina jūsų programos išbandymą ir suteikia mums daug informacijos apie tai, kas suteikia reikiamą rezultatą, o kas ne. „React“ testavimo biblioteka yra labai lengvas „React“ komponentų testavimo sprendimas. Iš esmės ši biblioteka yra Enzyme pakaitalas.

Kiekvienai programai reikia tam tikrų testų. Aš nerašysiu testų šiame straipsnyje, bet parodysiu, kaip galite sukonfigūruoti šiuos įrankius, kad galėtumėte išbandyti savo programas.

Pirmiausia įdiegsime abu:

npm install --save-dev jest jest-dom reaguoja-testuoja-biblioteka

Po to eikite į mūsų package.json ir sudėkite šiuos dalykus:

Tada eikite į mūsų konfigūravimo aplanką, o jo viduje buvo sukurtas kitas aplankas, vadinamas testai, o to aplanko viduje - sukurkite 2 failus.

Pirmiausia sukurkite failą pavadinimu jest.config.js ir įdėkite šį kodą:

Tada sukurkite failą pavadinimu rtl.setup.js ir įdėkite šį kodą:

Viskas padaryta. Mūsų katilas yra paruoštas naudoti ir jūs galite juo naudotis dabar.

Dabar eikite į failą package.json ir įdėkite šį kodą:

Jei paleisite komandą npm start ir eikite į localhost: 8080, turėtume pamatyti, kad mūsų programa veikia puikiai!

Jei norite pamatyti mano galutinį kodą, pagal šį straipsnį sukurtą katilinę galite rasti čia!

Turiu idėjų, susijusių su kai kuriomis funkcijomis, kurias norėčiau įtraukti į kaitlentę, todėl nedvejodami prisidėkite!

Sekite mane Twitteryje!
Sekite paskui mane „GitHub“!

Aš ieškau nuotolinės progos, taigi, jei norėčiau sužinoti apie tai, prašau susisiekti su manimi!