React.JS per a maniquís principiants, utilitzant la biblioteca per escriure robots comercials

Què és React JS per a maniquís principiants, què és, tutorials, instal·lació, documentació: com instal·lar i utilitzar la biblioteca React JS quan escriu robots comercials. Sovint, als anuncis de feina per a especialistes en informàtica, podeu trobar un requisit que digui que teniu habilitats a la biblioteca de JavaScript. Sí, i esperen coneixements de React no només dels desenvolupadors de programari, sinó també dels programadors que es dediquen al desenvolupament intern del lloc, i no al disseny extern. Quin tipus de biblioteca és aquesta, quines oportunitats ofereix en el treball i on comença a conèixer-se un principiant? Anem a esbrinar-ho en aquest article.

Biblioteca JavaScript – React: què és

React.JS és una biblioteca del popular
llenguatge de programació JavaScript , formada per la xarxa social en línia Facebook per tal de millorar i simplificar el procés de desenvolupament de l’intèrpret d’ordres extern de llocs i aplicacions, la interfície amb la qual l’usuari interactua. La característica principal de la biblioteca són els components i els estats. Un component és una part d’un conjunt digital que és responsable de l’aparició d’una determinada part del sistema que s’està dissenyant.

Nota! Aquestes parts components es poden imbricar.

Un estat és una col·lecció de totes les dades sobre els detalls d’una interfície, inclosa la seva representació. Mitjançant exemples, descobrirem amb més detall i clarament què és què. La imatge següent mostra alguns dels components principals: publicació a una xarxa social en línia, una secció amb informació general i mostrant fotos. Cada part inclou components més petits, que són els components. Per exemple, una publicació conté text, fotografies, el nom de l’usuari que publica la informació, etc. La secció d’imatges inclou imatges individuals, i la secció d’informació general conté informació breu.
Cadascun d’aquests components (components) té un estat. És a dir, la secció amb informació general es veurà diferent en diferents dispositius, l’element “m’agrada” canvia de color quan es prem i el número responsable del nombre total de m’agrada; la publicació, al seu torn, pot escurçar el text o transmetre’l íntegrament.

Així, s’expressa la flexibilitat de React.JS: el component de la interfície s’escriu una vegada i, després, se li donen tots els estats possibles.

Per què és necessària la biblioteca React?

React.JS és una de les opcions possibles per escriure codi JS o HTML en un format convenient, fer-ne còpies i fer-lo visual. Els components aquí estan escrits en un llenguatge especial del sistema: JSX, que inclou elements del llenguatge de programació JavaScript i el llenguatge de marques HTML estandarditzat.
El codi escrit en JSX és força específic. També és important que el navegador web no hagi d’entendre aquest idioma del sistema: el codi React.JS es transfereix a JS, que qualsevol navegador percep sense problemes. Per fer-ho, el que es crea a la biblioteca es passa a través de compiladors especialitzats (un dels més populars actualment és Babel js), que converteixen codis en llenguatges de programació menys coneguts en representacions de JavaScript.
Al principi pot semblar que el sistema d’ús és extremadament il·lògic, però al cap d’un temps t’hi acostumes i t’adones per què el mecanisme està dissenyat així. La biblioteca JavaScript té una sèrie d’avantatges importants:

• el llenguatge de programació del sistema és més fàcil de reconèixer que el conegut JavaScript i, en conseqüència, es necessitarà diverses vegades menys temps per admetre el codi i eliminar-hi errors (la velocitat d’escriptura de nous codis i programes augmentarà en conseqüència);
• Aquí s’inclou un sistema pràctic i còmode d’elements constitutius : parts repetitives del codi que s’utilitzen en diverses etapes d’escriptura i en diferents programes, i també canvien segons el context;
• cada element constituent només està subordinat al seu estat , per tant, és més fàcil corregir les mancances del codi si de sobte es troba un error en el seu treball a la pràctica; moments incorrectes suren a la superfície: un element que funcioni correctament continuarà funcionant de manera estable en aquest mode, tret que, per descomptat, s’utilitzi un estat incorrecte en relació amb ell.

Així, podem concloure que la biblioteca React.JS us permet estalviar temps significativament, fer el codi més específic, organitzar la seqüència en l’ordre correcte i tornar a utilitzar blocs grans. Aquests avantatges permeten reduir el cost del procés de creació d’interfícies d’usuari, així com accelerar el temps d’aquest mateix procés. Tenint les habilitats per utilitzar el llenguatge de programació JS i HTML, aprendre a utilitzar el sistema JSX és fàcil: només uns dies per dominar-lo.

Nota! És racional utilitzar la biblioteca quan es treballa amb grans projectes, quan cal escriure un gran nombre de pàgines dinàmiques. Un lloc de petites empreses no necessita aquestes complexitats.

Curs fonamental de React JS de la A a la Z: https://youtu.be/GNrdg3PzpJQ

Coneixement per a principiants: conceptes bàsics

Hola món!

En accedir a la primera pàgina de la biblioteca, l’usuari veurà un encapçalament de benvinguda com a petit exemple: “Hola món!”.

Fonaments del llenguatge del sistema JSX

JSX és un llenguatge de programació del sistema, una extensió del conegut JavaScript. Inclou una combinació de dos llenguatges: programació JA i llenguatge de marques HTML estandarditzat. Els desenvolupadors l’utilitzen per ajustar el concepte per mostrar a React exactament com hauria de ser la interfície d’usuari. JSX crea les “parts” de la biblioteca.

Què és JSX?

La biblioteca React s’adhereix a la lògica que l’essència de la representació està directament relacionada amb la lògica de la interfície d’usuari: com es processen els esdeveniments, com canvia l’estat en un període determinat i com es prepara la informació per a la presentació. La biblioteca JS es pot utilitzar sense el seu llenguatge de sistema, però un gran nombre de desenvolupadors la troben valuosa per la seva claredat i concreció quan es treballa amb una interfície d’usuari generada a partir de codi JavaScript. A més, l’extensió facilita que React generi notificacions d’error i moments no vàlids.

Formació d’expressions en el llenguatge del sistema

JSX us permet utilitzar qualsevol expressió JavaScript ben escrita dins de claus en un procés.

JSX també és una expressió Una vegada que el codi font està codificat per bytes, qualsevol expressió JSX es converteix en una crida de funció JS estàndard que s’orienta a la categoria JavaScript. D’això es pot entendre que l’extensió del sistema del llenguatge de programació oficial es pot utilitzar dins del manual if i per períodes.

JSX és Objectes Els objectes representats per l’extensió s’anomenen elements React. Aclareixen el resultat que el desenvolupador vol veure a la pantalla. La biblioteca reconeix aquests objectes i els utilitza en el procés de generació i manteniment del model d’objectes de document.

Representació de detalls

Els detalls són els molts petits blocs de construcció que formen els programes React.
Els detalls són la imatge que el desenvolupador vol veure al final al monitor. En comparació amb els elements del model d’objectes de document, els elements de la biblioteca són senzills i no ocupen molts recursos. Els elements són els components dels components.

Components i accessoris

Els components permeten dividir la interfície d’usuari en parts independents, que són més fàcils de treballar per separat. Es poden combinar i utilitzar diverses vegades. En la seva major part, la funcionalitat dels components és similar a la funcionalitat del propi llenguatge de programació JavaScript. Prenen informació d’entrada, que s’anomena accessoris, i retornen elements React que indiquen el model de desenvolupament que el desenvolupador vol veure al monitor.

Varietats de components: funcionals i de classe

El més fàcil és referir-se a un component de biblioteca com a funció.
Els components també es poden representar en format de classe ES6.

Interessant! La biblioteca React defineix aquests dos tipus de components com a similars.

accessoris

Els accessoris són objectes immutables que són només de lectura. Per tant, un component no hauria d’escriure res als seus accessoris, independentment del tipus al qual pertanyi.

Estat i cicle de vida

Primer, esbrineu com aplicar correctament l’estat a la feina. Hi ha tres coses importants que cal saber sobre l’estat dels components:

1. No canvieu l’estat directament, utilitzeu el mètode setState. Recordeu que l’única àrea on podeu canviar l’estat directament és el constructor.
2. És possible que les actualitzacions d’estat no siguin sincròniques.
3. El flux d’informació té una direcció. En la construcció de components, cap d’ells sap si l’estat està assignat a un altre component. No importa com es va formar aquest o aquell element funcional independent, utilitzant una eina funcional o de classificació. Això s’anomena flux de dades “avall”. Un estat sempre es defineix per a algun element, i les associacions estructurals d’aquest estat només poden afectar les parts que es troben “inferior” en l’ordre jeràrquic.

Normalment, l’estat es coneix com a “local”, “intern” o ocult. Només és visible per al propi element funcional i invisible per a altres parts de React. En els programes de biblioteca, si un element funcional independent està dotat d’un estat determinat o no és un desenvolupament intern d’aquesta part, que pot canviar amb el temps. També és interessant que a l’obra es puguin combinar components amb i sense estat.

Anàlisi d’esdeveniments

El procés d’anàlisi d’esdeveniments als components de React és similar a la gestió d’esdeveniments als elements del model d’objectes del document. Tanmateix, hi ha diverses característiques que els distingeixen entre ells:

1. Els esdeveniments de la biblioteca JavaScript s’anomenen amb un estil diferent de l’estàndard.
2. Utilitzant el llenguatge de programació estès del sistema, el desenvolupador passa una subrutina com a controlador d’esdeveniments en lloc d’una cadena.

Representació condicional dels elements

La biblioteca JavaScript permet trencar la lògica del desenvolupament d’elements en components independents. Es poden mostrar per a una visualització general o ocultar-se, depenent de l’estat amb què estiguin dotats en aquest moment. La representació condicional d’elements funciona amb el mateix principi que les expressions condicionals basades en el llenguatge de programació JavaScript. De vegades passa que la biblioteca requereix una explicació de com l’estat afecta l’amagat o la representació d’alguns elements. Aquí és més lògic utilitzar un ajudant JS condicional o expressions semblants a if.

Canvi de components

Els elements de la biblioteca de React es poden afegir a les variables. Aquesta és una solució pràctica quan alguna condició indica si s’ha de dibuixar alguna part del component, o no té sentit, mentre que la resta de la part roman sense canvis.

Llistes i claus

Aquesta secció inclou diversos components:

1. Dibuixant múltiples elements . L’usuari pot formar un conjunt d’elements i inserir-lo en el llenguatge de programació del sistema mitjançant claus.
2. Llista elemental d’elements . Sovint, els usuaris i desenvolupadors ajusten les llistes directament dins d’un component.

Claus

Una clau de la biblioteca React JavaScript indica una eina especialitzada que s’ha d’introduir quan es genera una llista de components. Les claus ajuden la biblioteca de JavaScript a identificar quins elements s’han ajustat, afegit o eliminat. És important marcar-los perquè React pugui correlacionar els components de les dades estructurals després d’haver passat un cert temps.

Formes

A la biblioteca JS, els elements del llenguatge de marques estandarditzats funcionen de manera una mica diferent que els components del model d’objectes del document, perquè els elements del formulari tenen inicialment un estat ocult.

Elements gestionats

En un llenguatge de marcatge estandarditzat, formularis com ara input , select , textarea tendeixen a autogestionar el seu estat i actualitzar-lo quan el desenvolupador introdueix informació nova. L’estat de React.js sempre defineix el valor dels camps d’entrada en un element de composició gestionat. Tot i que això indica que l’usuari ha d’escriure una mica més que el codi original donat, ara és possible passar aquest valor a altres parts de la interfície d’usuari.

L’ascens de l’estat

L’aixecament de l’estat és una plantilla estandarditzada que tots els desenvolupadors haurien de conèixer i ser capaços d’aplicar en el procés de treball. El seu ús eliminarà els patrons de gestió de l’estat complexos i normalment inútils.

Per què és tan necessari controlar l’auge de l’estat?

Elevar l’estat al nivell dels components passats per aquelles parts que ho requereixin és necessari perquè tots els elements puguin participar de l’estat. Un nivell d’estat estable facilitarà la distribució entre tots els components que en depenen.

Composició vs herència

React.js inclou un model de composició fort, per la qual cosa es recomana utilitzar el procés de construcció d’un tot a partir de parts en lloc de l’herència per reutilitzar el codi escrit anteriorment entre els elements. Així, els accessoris i la capacitat de crear una única composició sencera a partir de components, proporcionen al desenvolupador la flexibilitat necessària per crear la carcassa i el comportament de l’element d’una manera específica i segura.

Recordatori! Els components poden tenir accessoris no relacionats, incloses les parts elementals que formen biblioteques o funcions.

En cas que necessiteu utilitzar una funció sense aspecte per treballar amb components una segona o tercera vegada, extreu-la en un mòdul JS independent. Mou-lo a un component i utilitza la funció generada sense més expansió. React o Vue o Angular, què triar: https://youtu.be/Nm8GpLCAgwk

Principis de React.js

Tota la filosofia de la biblioteca JavaScript s’amaga a la guia React. Sembla que això és llarg i no té tanta importància, però, molts usuaris afirmen que després de llegir-ho tot va quedar al seu lloc. La documentació és força antiga, però encara té un gran valor i rellevància:
https://ru.reactjs.org/docs/thinking-in-react.html . Tutorial de React js https://ru.reactjs.org/tutorial/tutorial.html

Funcionalitat de la biblioteca React.js

Mitjançant la biblioteca JavaScript, l’usuari té l’oportunitat de prestar tota la seva atenció directament al procés de desenvolupament de la interfície d’usuari i als components de l’aplicació, menys que tot es distregui amb la formació i possibles mancances del codi escrit. La biblioteca permet desenvolupar programes més ràpidament, facilita la configuració i l’edició dels components i el procés de tot el projecte en conjunt. Així, React.js conté elements responsables de la comunicació a la xarxa global, la interfície d’usuari, el control de l’estat del programa i la capacitat de resoldre altres problemes complexos. La biblioteca també té les següents característiques funcionals:

1. Practicitat . React.js està disponible en format minificat. Aquest paquet compacte no cal que estigui configurat clarament. Ja inclou una funció de divisió de codi que redueix el temps que triga a obrir la versió del navegador del lloc, ja que aquesta opció evita que els components es representin al mateix temps.
2. Ecosistema bombat i compliment . Hi ha una gran quantitat d’eines disponibles a la biblioteca, amb el suport d’altres llocs, que permeten a l’usuari desenvolupar nous programes complexos per a qualsevol propòsit.
3. Funcionalitat completa . El principal avantatge de la biblioteca de JavaScript és que totes les noves versions de la plataforma compleixen els requisits de les antigues, de manera que podeu utilitzar tant la versió antiga com la versió actualitzada, totes són compatibles i són rellevants fins als nostres dies. Les versions publicades anteriorment no queden obsoletes després de les últimes actualitzacions.

Ús pràctic

A la pàgina principal de la biblioteca, a les instruccions per als usuaris, hi ha diversos exemples il·lustratius de l’ús de React a la pràctica. Podeu corregir-los manualment i intentar executar-los. Encara que siguis un usuari nou i no entens l’essència i la lògica de la biblioteca, ajusta el codi al teu gust i veu el resultat.

Aplicació pràctica de React per escriure robots comercials en JavaScript

És important adonar-se que un desenvolupador no programa JS, sinó que escriu scripts (scripts). per tant, utilitzant la biblioteca, un desenvolupador pot escriure codi per a un robot comercial posterior utilitzat amb finalitats comercials i també seguir dissenyant la seva aparença basant-se en aquesta plataforma. De fet, un robot comercial per al comerç també és una aplicació, de la qual un gran nombre s’estan desenvolupant amb React.js. Tanmateix, algunes funcions i la part interna del bot encara s’hauran de fer en altres llocs que proporcionin eines adequades per a això.

GitHub i React.js

GitHub és una plataforma que allotja totes les versions de projectes. L’usuari connecta l’allotjament, passa pel procediment de registre al lloc web oficial de GitHub i després crea un repositori en línia on transfereix tots els fitxers de Git.
Git és el servei de control de versions de projectes més popular i rellevant avui dia, i GitHub és un dipòsit de codi remot.

Referència! Només els usuaris que han rebut l’enllaç adequat amb permís tenen accés per editar i descarregar fitxers.

Documentació

Tots els tutorials i materials actualitzats sobre la biblioteca de JavaScript estan actualitzats amb l’última actualització. Els desenvolupadors també compilen i publiquen per a la lectura general versions antigues de la documentació, publicades en una pàgina separada de la biblioteca. Per tant, serà més fàcil per als principiants dominar les habilitats de gestió del lloc: tant material antic com nou: tot és aquí, l’accés és gratuït per a tothom.

Nota! No oblideu llegir els manuals. Almenys fes-hi una ullada: ja la majoria del que semblava incomprensible s’ajustarà al seu lloc.

La biblioteca React és una plataforma popular i rellevant avui dia. La seva versatilitat permet als desenvolupadors fer projectes de millor qualitat i en menys temps. A més, conèixer la plataforma i tenir les habilitats per utilitzar-la fa que un especialista sigui més demandat en el mercat laboral.