Kom igång med React

Biblioteken av JavaScript som är ansvariga för att manipulera vyer och hur de visar informationen inkluderar allt fler funktioner som gör applikationsutvecklingen enklare för utvecklaren och trevligare för de användare som använder dem.

Bland dessa bibliotek har vi Reagera, som är ett bibliotek av JavaScript av öppen källkod fokuserade främst på skapandet av användargränssnitt för enkelsidiga applikationer eller enkelsidiga applikationer som används av Facebook och Instagram att hantera allt som hänvisar till vyer, lösa problemet med stora applikationer där data som visas för användaren ändras ständigt.

Reagera funktioner

För att lösa detta problem som vi nämnde Reagera baserar sin filosofi på följande egenskaper:

EnkelDenna egenskap uttrycker hur vår applikation ska se ut vid en viss punkt och på vilket sätt den gör den, och vad den gör Reagera är att den automatiskt hanterar alla uppdateringar av användargränssnittet när grundläggande ändringar görs i applikationen.
DeklarativNär informationen ändras i vår ansökan Reagera utför funktionen att uppdatera vår sida men endast där informationen har ändrats.
Konstruktion av kombinerbara komponenterNär vi pratar om Reagera, vi pratar främst om konstruktion av återanvändbara komponenter, faktiskt med det här biblioteket är det vi gör mest av tiden att bygga komponenter och tack vare att de är inkapslade gör de återanvändning av kod, tester och separering av funktioner mycket enkel.

Att få reagera

Nu när vi vet vad det består av Reagera och dess egenskaper, kommer vi att skaffa den senaste versionen av biblioteket och genomföra en enkel implementering för att visa den berömda Hello World.

För att få den senaste versionen laddar vi ner en surfplatta med biblioteket på följande länk. Efter nedladdning packar vi upp och placerar innehållet i en mapp som heter Hello_React och inuti skapar vi en fil som heter hello_react.html som kommer att innehålla följande innehåll:

Som vi kan se är det en ganska enkel kod som gör att vi kan återge en text i vår huvudvy tack vare införandet av react.js. Dessutom använder vi JSX vad är syntax XML inom vår JavaScript och sedan göra omvandlingen i webbläsaren, som vi kan använda tack vare implementeringen av det andra biblioteket som heter JSXTransformer.js

Utöver detta kan vi göra vår kod mer läsbar och modulär genom att separera dess logik, vi kan uppnå detta genom att göra två filer, för detta skapar vi en som heter hello_react.js och vi sätter följande kod:

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

Sedan i vår HTML vad vi gör är att inkludera vår .js -fil i skripttaggen och vi kommer att ha samma operation:

Låt oss se när vi kör vårt exempel i webbläsaren dess svar:

Som vi kan se var manipulationen av data ganska enkel, men det finns ett bättre sätt att implementera Reagera, eftersom sättet vi gör det använder koden transformatorn av JSX i webbläsaren som vi kommer att se i meddelandet vi får via konsolen.

Detta konsolmeddelande ger oss lösningen på denna lilla varning, och det är att utföra en förkompilering av vår .js-kod, för detta kommer vi att använda pakethanteraren för Node.js för den här uppgif.webpten, så om vi inte har denna miljö installerad på vår dator går vi till den officiella sidan och laddar ner den om vi arbetar i Windows och om vi arbetar i Linux kan vi följa stegen i denna handledning.

Förkompilerar vår kod

För att utföra denna uppgif.webpt går vi till vår Node.js -konsol och med hjälp av npm vi installerade verktyget Reagera för kommandokonsol anropad reaktionsverktyg för vilken vi bara behöver köra den här raden:

 npm installera -g reagera -verktyg

Vad vi nu gör är att översätta vår kod till JavaScript rent enligt följande:

 jsx -titta på hej_reakt.js

Detta översätter inte bara vår kod utan genererar filen automatiskt hello_react.js Varje gång en ändring görs i vår applikation, låt oss se svaret från konsolen när vi kör det här kommandot:

Slutligen ändrar vi vår HTML ta bort inkluderingen av biblioteket JSXTransformer.js eftersom vi inte behöver det och vi tar med vårt manus på ett konventionellt sätt, låt oss se:

 Hej React!

Som vi nämnde genererar den senaste åtgärden vi utför genom konsolen filen automatiskt varje gång vi gör en ändring i vår applikation, så om vi har gjort ändringar meddelar konsolen oss enligt följande:

Som vi kan se har vi två meddelanden om att ändringar gjordes i filen, vilket faktiskt var de vi gjorde när det gäller att ta bort biblioteket och göra den konventionella inkluderingen av en JavaScript -fil.

Så här avslutade vi denna handledning, där vi kunde ta våra första steg Reagera och dess implementering i våra applikationer, detta för att hjälpa oss med konstruktionen av komponenter för visualisering av data i våra åsikter, verifiera att det inte bara är enkelt utan att det ger oss verktyg som kommer att göra vår utveckling mycket enklare.