Kom i gang med React

Bibliotekerne af JavaScript der har ansvaret for at manipulere visningerne og den måde, hvorpå de viser oplysningerne, omfatter i stigende grad flere funktioner, der gør applikationsudvikling lettere for udvikleren og mere behagelig for de brugere, der bruger dem.

Blandt disse biblioteker har vi Reagere, som er et bibliotek af JavaScript af open source fokuseret hovedsageligt på oprettelsen af ​​brugergrænseflader til applikationer på én side eller enkeltsideapplikationer, der bruges af Facebook og Instagram at håndtere alt, der refererer til visninger, løse problemet med store applikationer, hvor de data, der vises til brugeren, konstant ændres.

Reager funktioner

For at løse dette problem, som vi nævnte Reagere bygger sin filosofi på følgende egenskaber:

EnkelDenne egenskab udtrykker, hvordan vores anvendelse skal se ud på et bestemt punkt, og på hvilken måde den gør det, og hvad den gør Reagere er, at den automatisk håndterer alle opdateringer til brugergrænsefladen, når der foretages grundlæggende ændringer i applikationen.
DeklarativNår oplysninger ændres i vores ansøgning Reagere udfører funktionen til at opdatere vores side, men kun hvor oplysningerne er ændret.
Konstruktion af kombinerbare komponenterNår vi taler om Reagere, vi taler hovedsageligt om konstruktion af genanvendelige komponenter, faktisk med dette bibliotek er det, vi gør det meste af tiden, at bygge komponenter, og takket være det faktum, at de er indkapslet, gør de genbrug af kode, test og adskillelse af funktionaliteter ekstremt ekstremt enkel.

At reagere

Nu hvor vi ved, hvad det består af Reagere og dens egenskaber, vil vi få den nyeste version af biblioteket og udføre en enkel implementering for at vise den berømte Hello World.

For at få den nyeste version downloader vi en tablet med biblioteket på følgende link. Efter download udpakker vi og placerer indholdet i en mappe kaldet Hello_React og indeni opretter vi en fil kaldet hello_react.html som vil indeholde følgende indhold:

Som vi kan se, er det en ret simpel kode, der giver os mulighed for at gengive en tekst i vores hovedvisning takket være inddragelsen af react.js. Derudover bruger vi JSX hvad er syntaks XML inden for vores JavaScript og derefter foretage transformationen i browseren, som vi kan bruge takket være implementeringen af ​​det andet bibliotek, der kaldes JSXTransformer.js

Ud over dette kan vi gøre vores kode mere læsbar og modulær ved at adskille dens logik, vi kan opnå dette ved at lave to filer, til dette opretter vi en kaldet hello_react.js og vi sætter følgende kode:

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

Så i vores HTML hvad vi gør er at inkludere vores .js -fil inde i script -tagget, og vi vil have den samme operation:

Lad os se, når vi kører vores eksempel i browseren dets svar:

Som vi kan se, var manipulationen af ​​dataene ganske enkel, men der er en bedre måde at implementere på Reagere, da måden vi gør det på, bruger koden transformatoren af JSX i browseren, som vi vil se i den meddelelse, vi modtager via konsollen.

Denne konsolmeddelelse giver os løsningen på denne lille advarsel, og den er til at udføre en forhåndskompilering af vores .js-kode, til dette vil vi bruge pakkelederen af Node.js til denne opgave, så hvis vi ikke har dette miljø installeret på vores pc, går vi til den officielle side og downloader det, hvis vi arbejder i Windows, og hvis vi arbejder i Linux, kan vi følge trinene i denne vejledning.

Forudkompilerer vores kode

For at udføre denne opgave går vi til vores Node.js -konsol og ved hjælp af npm vi installerede værktøjet Reagere til kommandokonsol kaldet reageringsværktøjer som vi kun behøver at udføre denne linje:

 npm installer -g react -tools

Det vi gør nu er at oversætte vores kode til JavaScript ren som følger:

 jsx -se hello_react.js

Dette oversætter ikke kun vores kode, men genererer filen automatisk hello_react.js Hver gang der foretages en ændring af vores applikation, lad os se svaret fra konsollen, når vi kører denne kommando:

Endelig ændrer vi vores HTML fjernelse af inkluderingen af ​​biblioteket JSXTransformer.js da vi ikke har brug for det, og vi gør inkluderingen af ​​vores script på en konventionel måde, lad os se:

 Hej React!

Som vi nævnte, genererer den sidste operation, vi udfører via konsollen, filen automatisk, hver gang vi foretager en ændring i vores applikation, så hvis vi har foretaget ændringer, meddeler konsollen os følgende:

Som vi kan se, har vi to meddelelser om, at der blev foretaget ændringer i filen, hvilket faktisk var dem, vi gjorde med hensyn til at fjerne biblioteket og foretage den konventionelle inkludering af en JavaScript -fil.

Sådan afsluttede vi denne vejledning, hvor vi kunne tage vores første skridt med Reagere og dens implementering i vores applikationer, dette for at hjælpe os med konstruktionen af ​​komponenter til visualisering af data i vores synspunkter, og verificere, at det ikke kun er enkelt, men at det giver os værktøjer, der vil gøre vores udvikling meget lettere.