Aan de slag met React

De bibliotheken van JavaScript die instaan ​​voor het manipuleren van de views en de manier waarop ze de informatie weergeven bevatten steeds meer functionaliteiten die applicatieontwikkeling makkelijker maken voor de ontwikkelaar en prettiger voor de gebruikers die ze gebruiken.

Onder deze bibliotheken hebben we: Reageer, dat is een bibliotheek van JavaScript van open source vooral gericht op het creëren van gebruikersinterfaces voor toepassingen met één pagina of enkele pagina-applicaties die worden gebruikt door Facebook en Instagram om alles af te handelen dat betrekking heeft op weergaven, het oplossen van het probleem van grote applicaties waarbij de gegevens die aan de gebruiker worden getoond constant veranderen.

Reageerfuncties

Om dit probleem op te lossen dat we noemden: Reageer baseert zijn filosofie op de volgende kenmerken:

GemakkelijkDit kenmerk drukt uit hoe onze applicatie er op een bepaald punt uit zou moeten zien en op welke manier het dat doet, en wat het doet Reageer is dat het automatisch alle updates van de gebruikersinterface afhandelt wanneer er fundamentele wijzigingen in de applicatie worden aangebracht.
declaratiefWanneer informatie verandert in onze applicatie Reageer vervult de functie van het vernieuwen van onze pagina, maar alleen waar de informatie is gewijzigd.
Constructie van combineerbare componentenAls we het hebben over Reageer, we praten vooral over de constructie van herbruikbare componenten, sterker nog, met deze bibliotheek doen we meestal componenten en dankzij het feit dat ze zijn ingekapseld, maken ze het hergebruik van code, tests en de scheiding van functionaliteiten extreem gemakkelijk.

Reageren

Nu we weten waar het uit bestaat Reageer en zijn kenmerken, we gaan de nieuwste versie van de bibliotheek verkrijgen en een eenvoudige implementatie uitvoeren om de beroemde Hello World te laten zien.

Om de nieuwste versie te verkrijgen, downloaden we een tablet met de bibliotheek via de volgende link. Na het downloaden pakken we de inhoud uit en plaatsen we de inhoud in een map met de naam Hallo_Reageren en binnenin maken we een bestand met de naam hallo_react.html die de volgende inhoud zal bevatten:

Zoals we kunnen zien, is het een vrij eenvoudige code waarmee we een tekst in onze hoofdweergave kunnen weergeven dankzij de opname van reageren.js. Daarnaast gebruiken we JSX wat is syntaxis? XML binnen onze JavaScript en maak vervolgens de transformatie in de browser, die we kunnen gebruiken dankzij de implementatie van de tweede bibliotheek genaamd JSXTransformer.js

Daarnaast kunnen we onze code leesbaarder en modulair maken door de logica te scheiden, we kunnen dit bereiken door twee bestanden te maken, hiervoor maken we er een met de naam hallo_react.js en we zetten de volgende code:

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

Dan in onze HTML wat we doen is ons .js-bestand in de scripttag opnemen en we zullen dezelfde bewerking uitvoeren:

Laten we eens kijken wanneer we ons voorbeeld in de browser uitvoeren als reactie:

Zoals we kunnen zien, was de manipulatie van de gegevens vrij eenvoudig, maar er is een betere manier om te implementeren Reageer, aangezien de manier waarop we het doen, de code de transformator van gebruikt JSX van de browser zoals we zullen zien in het bericht dat we via de console ontvangen.

Dit consolebericht geeft ons de oplossing voor deze kleine waarschuwing, en het is om een ​​pre-compilatie van onze .js-code uit te voeren, hiervoor gebruiken we de pakketbeheerder van Node.js voor deze taak, dus als we deze omgeving niet op onze pc hebben geïnstalleerd, gaan we naar de officiële pagina en downloaden deze in het geval dat we in Windows werken en in het geval dat we in Linux werken, kunnen we de stappen volgen in deze les.

Onze code vooraf compileren

Om deze taak uit te voeren gaan we naar onze Node.js-console en met behulp van npm we hebben de tool geïnstalleerd Reageer voor opdrachtconsole genaamd reageer-tools waarvoor we alleen deze regel hoeven uit te voeren:

 npm install -g react-tools

Wat we nu doen, is onze code vertalen naar: JavaScript zuiver als volgt:

 jsx --bekijk hallo_react.js

Dit vertaalt niet alleen onze code, maar genereert ook automatisch het bestand hallo_react.js Elke keer dat er een wijziging wordt aangebracht in onze applicatie, laten we het antwoord van de console zien wanneer we deze opdracht uitvoeren:

Eindelijk passen we onze HTML het verwijderen van de opname van de bibliotheek JSXTransformer.js omdat we het niet nodig hebben en we de opname van ons script op een conventionele manier doen, laten we eens kijken:

 Hallo Reageren!

Zoals we al zeiden, genereert de laatste bewerking die we via de console uitvoeren het bestand automatisch elke keer dat we een wijziging in onze toepassing aanbrengen, dus als we wijzigingen hebben aangebracht, zal de console ons als volgt op de hoogte stellen:

Zoals we kunnen zien, hebben we twee meldingen dat er wijzigingen in het bestand zijn aangebracht, wat in feite de wijzigingen waren die we hebben gedaan met betrekking tot het verwijderen van de bibliotheek en het conventioneel opnemen van een JavaScript-bestand.

Zo hebben we deze tutorial afgerond, waar we onze eerste stappen mee konden zetten Reageer en de implementatie ervan in onze applicaties, dit om ons te helpen bij de constructie van componenten voor de visualisatie van gegevens in onze visies, om te verifiëren dat het niet alleen eenvoudig is, maar dat het ons tools biedt die onze ontwikkeling veel gemakkelijker zullen maken.