Darbo pradžia naudojant „React.js“

React.js yra lanksti ir sudedamoji dalis „JavaScript“ biblioteka interaktyvių vartotojo sąsajų kūrimas. Tai buvo „Facebook“ sukurtas ir atviras šaltinis ir ją naudoja daugelis pirmaujančių technologijų kompanijų, tokių kaip „Dropbox“, „AirBnB“, „PayPal“ ir „Netflix“. Reaguoja leidžia kūrėjams sukurti didelės apimties programas , kurią gali būti neskausmingai atnaujinta pakartotinai pateikti tik būtinus komponentus.

Reaguoti yra Peržiūrėti sluoksnį iš MVC programinės įrangos projektavimo modelis, ir tai daugiausia dėmesys skiriamas DOM manipuliacijai. Kadangi šiais laikais visi kalba apie „React“, šiame poste mes žiūrime, kaip galite pradėti su juo.

Įdiekite React

Taip pat galite įdiegti React su „npm“ paketo valdytoju arba reikalingų bibliotekų pridėjimas rankiniu būdu į HTML puslapį. Tai rekomenduojama naudojant React su Babeliu tai leidžia jums naudoti ECMAScript6 sintaksę ir JSX į „React“ kodą.

Jeigu nori įdiegti Reaguokite rankiniu būdu, oficialūs dokumentai rekomenduoja naudoti šį HTML failą. Galite atsisiųsti puslapį spustelėję Failas> Išsaugoti puslapį kaip ... naršyklėje. Skriptai, kurių jums reikės (React, React DOM, Babel), taip pat bus atsisiųsti į reaguoti-pavyzdys_failai / aplanką. Tada pridėkite šiuos scenarijų žymas HTML dokumento dalis:

Vietoj jų atsisiuntimo galite pridėti React scenarijus iš CDN taip pat.

Taip pat galite naudoti redaguotos versijos iš pirmiau nurodytų „JavaScript“ failų:

Jei norite įdiegti React su npm, geriausias būdas yra naudoti Sukurti „React App“ „Facebook“ inkubatoriaus sukurtas „Github“ repo - tai ir sprendimas, kurį rekomenduoja „React“ dokumentai. Be React, tai taip pat yra „Webpack“, „Babel“, „Autoprefixer“, „ESLint“ ir kiti kūrimo įrankiai. Norėdami pradėti, naudokite šias CLI komandas:

 „npm“ įdiegti -g sukurkite „reaktyvaus“ programos kūrimo-reagavimo-app „mano app“ cd my-app npm pradžią

Kai būsite pasiruošę, galite prisijungti prie naujos „React“ programos ant localhost: 3000 URL:

Jei norite daugiau sužinoti apie kaip įdiegti React, patikrinkite diegimo gairės iš dokumentų.

React ir JSX

Nors tai nėra privaloma, galite naudokite JSX sintaksę „React“ programose. JSX reiškia „JavaScript XML“, ir tai įeina į įprastą „JavaScript“. Didelis JSX privalumas yra tai, kad jis leidžia į „JavaScript“ failus įtraukti HTML, todėl lengviau apibrėžia React elementus.

Štai svarbiausi dalykai, kuriuos reikia žinoti apie JSX:

Žymės pradėti mažosiomis raidėmis (apatinis kupranugaris) kaip reguliarūs HTML elementai.
Žymės pradėti nuo didžiųjų raidžių (viršutinis kupranugaris) kaip React komponentai.
Bet koks kodas parašyta garbanotais petnešomis yra aiškinami „JavaScript“.

Jei norite daugiau sužinoti kaip naudoti JSX su React patikrinkite šį puslapį iš dokumentų ir pagal numatytuosius JSX dokumentus galite pažvelgti į JSX wiki.

Sukurti React elementus

React turi a komponentų architektūra kur kūrėjai sukuria pakartotinai naudojami komponentai siekiant išspręsti įvairias problemas. React komponentas yra sudarytas iš kai kurių ar daugelio Reaguokite elementus tai yra mažiausi React programų vienetai.

Žemiau galite matyti paprastas React elemento pavyzdys į HTML puslapį įtraukiamas mygtukas „Spausk mane“. HTML įterpiame a

konteineris su „myDiv“ ID, kuris bus su React elementu. Mes sukuriame „React“ elementą a

   Mes pateikiame React elementą su ReactDOM.render () metodas kuris reikia dviejų būtinų parametrų,  Reaguoti elementą () ir savo konteinerį (document.getElementById ('myDiv')). Galite skaityti daugiau kaip veikia elementai viduje konors “Atvaizdavimo elementai” skyrių.
 Kurkite komponentus
 Reaguokite į komponentus yra pakartotinai naudoti nepriklausomi UI vienetai kurioje galite lengvai atnaujinti duomenis. Komponentas gali būti pagamintas iš vieno ar kelių React elementų. Prop yra savavališkai galite naudoti duomenims perduoti į komponentą. React komponentas veikia panašiai kaip „JavaScript“ funkcijos - kiekvieną kartą, kai jis naudojamas generuoja tam tikrą produkciją.
 Galite naudoti arba klasikinės funkcijos sintaksė arba naujas ES6 klasės sintaksė į apibrėžti React komponentą. Šiame straipsnyje aš naudosiu pastarąjį, nes „Babel“ leidžia naudoti „ECMAScript 6“. Jei domitės, kaip sukurti komponentą be ES6, pažiūrėkite į dokumentų ir komponentų puslapį.
 Žemiau galite matyti paprastas React komponentas mes ketiname sukurti kaip pavyzdį. Tai pagrindinis pranešimas, kurį vartotojas mato prisijungus prie svetainės. Tai bus trys duomenys pasikeitimas kiekvienu atveju: vartotojo vardas, pranešimų skaičius ir pranešimų skaičius, mes juos perduosime kaip rekvizitai.
  
Kiekvienas „React“ komponentas yra „JavaScript“ klasė pratęsia React.Component bazinė klasė. Mūsų komponentas bus vadinamas Statistika jis suteikia vartotojui pagrindinį statistiką. Pirma, mes sukurti Statistika klasė su klasės statistika išplečiama „React.Component“ … sintaksė, tada mes paversti jį ekranu skambindami ReactDOM.render () metodas (pastarąjį jau panaudojome ankstesniame skyriuje).
  klasės statistika išplečia React.Component render () return (  Sveiki this.props.name, turite this.props.notifications naujus pranešimus ir this.props.messages naujus pranešimus. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Pirmasis argumentas ReactDOM.render () metodas susideda iš mūsų React komponento pavadinimas () ir jo rekvizitai (vardas, pranešimus, ir pranešimus) su jų vertybėmis. Kai deklaruojame rekvizitų vertes, stygos turi būti į kabutes (Kaip "John Doe") ir skaitinės vertės garbanotais skliaustais (Kaip 3).
 Atminkite, kad dėl „JavaScript“ mes naudojamas className vietoj klasė norint perduoti HTML žymės atributą (className = "santrauka").
 Tinkamas HTML puslapis yra toks:
          
    
 „React“ dokumentuose yra daug kitų įdomių pavyzdžių kaip sukurti ir valdyti „React“ komponentus, ir ką dar žinoti apie rekvizitus.
 Papildoma literatūra
 „React“ pristatė „Facebook“ naujos rūšies sistema į priekį, kad iššūkis MV * dizaino modeliui. Jei norite geriau suprasti, kaip jis veikia ir ką galite pasiekti ir negalite pasiekti, čia rasite keletą įdomių straipsnių, kurie gali padėti:
 „Facebook“ dienoraščio pranešimas kodėl jie pastatė React.
 Andrew Ray's puikus dienoraštis apie React gerą ir blogą.
 Koduojantis kaip React ir AngularJS palyginti.
 FreeCodeCamp galvoja apie tai, ar MVC yra miręs priekyje.
 „HackerNoon“ straipsnis apie kaip optimizuoti su reakcija susijusią veiklą.