Kom i gang med React

Bibliotekene til JavaScript som har ansvaret for å manipulere visningene og måten de viser informasjonen på, i økende grad inkluderer flere funksjoner som gjør applikasjonsutvikling enklere for utvikleren og mer behagelig for brukerne som bruker dem.

Blant disse bibliotekene har vi Reagere, som er et bibliotek av JavaScript åpen kildekode fokusert hovedsakelig på opprettelsen av brukergrensesnitt for enkeltsidede applikasjoner eller enkeltsideapplikasjoner som brukes av Facebook og Instagram å håndtere alt som refererer til visninger, løse problemet med store applikasjoner der dataene som vises til brukeren endres konstant.

Reager funksjoner

For å løse dette problemet som vi nevnte Reagere baserer sin filosofi på følgende egenskaper:

EnkelDenne egenskapen uttrykker hvordan søknaden vår skal se ut på et bestemt punkt og på hvilken måte den gjør det, og hva den gjør Reagere er at den automatisk håndterer alle oppdateringer til brukergrensesnittet når grunnleggende endringer gjøres i applikasjonen.
DeklarativNår informasjonen endres i søknaden vår Reagere utfører funksjonen til å oppdatere siden vår, men bare der informasjonen er endret.
Konstruksjon av kombinerbare komponenterNår vi snakker om Reagere, vi snakker hovedsakelig om konstruksjon av gjenbrukbare komponenter, faktisk med dette biblioteket er det vi gjør mesteparten av tiden å bygge komponenter, og takket være det faktum at de er innkapslet, gjør de gjenbruk av kode, tester og separasjon av funksjoner ekstremt enkel.

Komme i reaksjon

Nå som vi vet hva det består av Reagere og dens egenskaper, skal vi skaffe den nyeste versjonen av biblioteket og utføre en enkel implementering for å vise den berømte Hello World.

For å få den nyeste versjonen, laster vi ned et nettbrett med biblioteket på følgende lenke. Etter nedlasting pakker vi ut og plasserer innholdet i en mappe som heter Hello_React og inne lager vi en fil som heter hello_react.html som vil inneholde følgende innhold:

Som vi kan se, er det en ganske enkel kode som lar oss gjengi en tekst i hovedvisningen takket være inkluderingen av react.js. I tillegg bruker vi JSX hva er syntaks XML i vår JavaScript og deretter gjøre transformasjonen i nettleseren, som vi kan bruke takket være implementeringen av det andre biblioteket som heter JSXTransformer.js

I tillegg til dette kan vi gjøre koden vår mer lesbar og modulær ved å skille dens logikk, vi kan oppnå dette ved å lage to filer, for dette lager vi en som heter hello_react.js og vi legger inn følgende kode:

 React.render (, document.getElementById ('example_react'));

Deretter i vår HTML det vi gjør er å inkludere vår .js -fil inne i skriptetiketten, og vi vil ha den samme operasjonen:

La oss se når vi kjører vårt eksempel i nettleseren, svaret på det:

Som vi kan se, var manipulasjonen av dataene ganske enkel, men det er en bedre måte å implementere Reagere, siden måten vi gjør det på, bruker koden transformatoren til JSX i nettleseren som vi vil se i meldingen vi mottar gjennom konsollen.

Denne konsollmeldingen gir oss løsningen på denne lille advarselen, og den er for å utføre en forhåndskompilering av vår .js-kode, for dette vil vi bruke pakkelederen for Node.js for denne oppgaven, så hvis vi ikke har dette miljøet installert på vår PC, går vi til den offisielle siden og laster det ned i tilfelle vi jobber i Windows, og i tilfelle vi jobber i Linux kan vi følge trinnene i denne opplæringen.

Forhåndskompilerer koden vår

For å utføre denne oppgaven går vi til vår Node.js -konsoll og ved hjelp av npm vi installerte verktøyet Reagere for kommandokonsoll kalt reagere-verktøy som vi bare trenger å utføre denne linjen:

 npm install -g react -tools

Det vi gjør er å oversette koden vår til JavaScript ren som følger:

 jsx -se på hello_react.js

Dette oversetter ikke bare koden vår, men genererer filen automatisk hello_react.js Hver gang det gjøres en endring i applikasjonen vår, la oss se svaret fra konsollen når vi kjører denne kommandoen:

Til slutt endrer vi vår HTML fjerne inkluderingen av biblioteket JSXTransformer.js siden vi ikke trenger det, og vi tar med skriptet vårt på en konvensjonell måte, la oss se:

 Hei React!

Som vi nevnte, genererer den siste operasjonen vi utfører gjennom konsollen filen automatisk hver gang vi gjør en endring i applikasjonen vår, så hvis vi har gjort endringer, vil konsollen varsle oss som følger:

Som vi kan se, har vi to varsler om at det ble gjort endringer i filen, som faktisk var de vi gjorde med hensyn til å fjerne biblioteket og gjøre den konvensjonelle inkluderingen av en JavaScript -fil.

Slik fullførte vi denne opplæringen, der vi kunne ta våre første skritt Reagere og implementeringen i applikasjonene våre, dette for å hjelpe oss med konstruksjonen av komponenter for visualisering av data i våre synspunkter, og bekrefte at det ikke bare er enkelt, men at det gir oss verktøy som vil gjøre utviklingen mye enklere.