React.JS para maniquíes principiantes, usando a biblioteca ao escribir robots comerciais

Que é React JS para maniquíes principiantes, que é, tutoriais, instalación, documentación: como instalar e usar a biblioteca React JS ao escribir robots comerciais. Moitas veces, nos anuncios de emprego para especialistas en informática, podes atopar un requisito que di que tes habilidades na biblioteca de JavaScript. Si, e esperan coñecemento de React non só dos desenvolvedores de software, senón tamén dos programadores que se dedican ao desenvolvemento interno do sitio, e non ao deseño externo. Que tipo de biblioteca é esta, que oportunidades dá no traballo e onde comeza a familiarizarse un principiante? Imos descubrir isto neste artigo.

Biblioteca JavaScript – React: que é

React.JS é unha biblioteca da popular
linguaxe de programación JavaScript , formada pola rede social en liña Facebook co fin de mellorar e simplificar o proceso de desenvolvemento do shell externo de sitios e aplicacións, a interface coa que interactúa o usuario. A principal característica da biblioteca son os compoñentes e os estados. Un compoñente é unha parte dun conxunto dixital que é responsable da aparición dunha determinada parte do sistema que se está a deseñar.

Nota! Tales compoñentes pódense aniñar.

Un estado é unha colección de todos os datos sobre os detalles dunha interface, incluíndo a súa representación representativa. Usando exemplos, descubriremos con máis detalle e con claridade que é o que. A imaxe de abaixo mostra algúns dos principais compoñentes: publicacións nunha rede social en liña, unha sección con información xeral e mostrando fotos. Cada parte inclúe compoñentes máis pequenos, que son os compoñentes. Por exemplo, unha publicación contén texto, fotografías, o nome do usuario que publica a información, etc. A sección de imaxes inclúe imaxes individuais e a sección de información xeral contén información breve.
Cada un destes compoñentes (compoñentes) ten un estado. É dicir, a sección con información xeral terá un aspecto diferente nos distintos dispositivos, o elemento “gústame” cambia de cor ao premer e o número responsable do número total de “gústame”; a publicación, pola súa banda, poderá abreviar o texto ou transmitilo na súa totalidade.

Así, exprésase a flexibilidade de React.JS: o compoñente da interface escríbese unha vez, e despois dáselles todos os estados posibles.

Por que é necesaria a biblioteca React?

React.JS é unha das opcións posibles para escribir código JS ou HTML nun formato conveniente, facer copias do mesmo e facelo visual. Os compoñentes aquí están escritos nunha linguaxe de sistema especial – JSX, que inclúe elementos da linguaxe de programación JavaScript e a linguaxe de marcado HTML estandarizada.
O código escrito en JSX é bastante específico. Tamén é importante que o navegador web non teña que entender este idioma do sistema: o código React.JS transfírese a JS, que calquera navegador percibe sen problemas. Para iso, o que se crea na biblioteca pasa por compiladores especializados (un dos máis populares hoxe en día é Babel js), que converten códigos en linguaxes de programación menos coñecidas en representacións de JavaScript.
Ao principio pode parecer que o sistema de uso é sumamente ilóxico, pero despois dun tempo te acostumas a el e decátaste de por que o mecanismo está deseñado así. A biblioteca JavaScript ten unha serie de vantaxes importantes:

• a linguaxe de programación do sistema é máis fácil de recoñecer que o coñecido JavaScript e, en consecuencia, levará varias veces menos tempo para soportar o código e eliminar os erros nel (a velocidade de escritura de novos códigos e programas aumentará en consecuencia);
• Aquí constrúese un sistema cómodo e práctico de elementos constituíntes : partes repetitivas do código que se usan en varias etapas de escritura e en diferentes programas, e tamén cambian segundo o contexto;
• cada elemento constituínte está subordinado só ao seu estado , polo que é máis fácil corrixir as deficiencias do código se de súpeto se atopa un erro no seu traballo na práctica; momentos incorrectos flotan á superficie: un elemento que funciona correctamente seguirá funcionando de forma estable neste modo, a non ser que, por suposto, se use un estado incorrecto en relación con el.

Así, podemos concluír que a biblioteca React.JS permítelle aforrar tempo significativamente, facer o código máis específico, organizar a secuencia na orde correcta e volver utilizar bloques grandes. Estas vantaxes permiten reducir o custo do proceso de creación de interfaces de usuario, así como acelerar o tempo deste mesmo proceso. Tendo as habilidades para usar a linguaxe de programación JS e HTML, aprender a usar o sistema JSX é sinxelo: só uns días para dominalo.

Nota! É racional utilizar a biblioteca cando se traballa con grandes proxectos, cando é necesario escribir un gran número de páxinas dinámicas. Un sitio de pequenas empresas non precisa tales complexidades.

Curso fundamental de React JS da A á Z: https://youtu.be/GNrdg3PzpJQ

Coñecementos para principiantes: conceptos básicos

Ola mundo!

Ao acceder á primeira páxina da biblioteca, o usuario verá un título de benvida como un pequeno exemplo: “Ola mundo!”.

Fundamentos da linguaxe do sistema JSX

JSX é unha linguaxe de programación do sistema, unha extensión do coñecido JavaScript. Inclúe unha combinación de dúas linguaxes: programación JA e linguaxe de marcado HTML estandarizado. Os desenvolvedores utilízano para axustar o concepto para mostrar a React exactamente como debería ser a interface de usuario. JSX crea as “partes” da biblioteca.

Que é JSX?

A biblioteca React adhírese á lóxica de que a esencia da representación está directamente relacionada coa lóxica da interface de usuario: como se procesan os eventos, como cambia o estado nun período determinado e como se prepara a información para a súa presentación. A biblioteca JS pódese usar sen a súa linguaxe de sistema, pero un gran número de desenvolvedores considera que é valiosa debido á súa claridade e concreción ao traballar cunha interface de usuario xerada a partir de código JavaScript. Ademais, a extensión facilita que React xere notificacións de erros e momentos non válidos.

Formación de expresións na linguaxe do sistema

JSX permítelle utilizar calquera expresión JavaScript ben escrita dentro de chaves nun proceso.

JSX tamén é unha expresión Unha vez que o código fonte está codificado por bytes, calquera expresión JSX convértese nunha chamada de función JS estándar que se dirixe á categoría JavaScript. Diso pódese entender que a extensión do sistema da linguaxe oficial de programación pode utilizarse dentro do manual if e por períodos.

JSX é Obxectos Os obxectos representados pola extensión chámanse elementos React. Aclaran o resultado que o desarrollador quere ver na pantalla. A biblioteca recoñece estes obxectos e utilízaos no proceso de xeración e mantemento do Document Object Model.

Representación detallada

Os detalles son os moitos pequenos bloques que constitúen os programas React.
Os detalles son a imaxe que o programador quere ver ao final no monitor. En comparación cos elementos do modelo de obxectos de documento, os elementos da biblioteca son sinxelos e non ocupan moitos recursos. Os elementos son os constituíntes dos compoñentes.

Compoñentes e atrezzo

Os compoñentes permiten dividir a IU en partes independentes, que son máis fáciles de traballar por separado. Pódense combinar e usar varias veces. Na súa maior parte, a funcionalidade dos compoñentes é similar á funcionalidade da propia linguaxe de programación JavaScript. Levan información de entrada, que se chama accesorios, e devolven elementos React que indican o modelo de desenvolvemento que o desenvolvedor quere ver no monitor.

Variedades de compoñentes: funcionais e de clase

É máis doado referirse a un compoñente da biblioteca como función.
Os compoñentes tamén se poden representar no formato de clase ES6.

Interesante! A biblioteca React define estes dous tipos de compoñentes como similares.

atrezzo

Os atrezzos son obxectos inmutables que son de só lectura. Polo tanto, un compoñente non debe escribir nada nos seus atrezzos, independentemente do tipo ao que pertenza.

Estado e ciclo de vida

En primeiro lugar, imos descubrir como aplicar correctamente o estado no traballo. Hai tres cousas importantes que debes saber sobre o estado dos compoñentes:

1. Non cambie o estado directamente, use o método setState. Lembra que a única área onde podes cambiar o estado directamente é o construtor.
2. É posible que as actualizacións de estado non sexan sincrónicas.
3. O fluxo de información ten unha dirección. Na construción de compoñentes, ningún deles sabe se o estado está asignado a outro compoñente. Non importa como se formou este ou aquel elemento funcional independente, utilizando unha ferramenta funcional ou de clasificación. Isto chámase fluxo de datos “abaixo”. Un estado defínese sempre para algún elemento, e as asociacións estruturais deste estado só poden afectar ás partes que están situadas “inferior” na orde xerárquica.

Normalmente, o estado denomínase “local”, “interno” ou oculto. Só é visible para o propio elemento funcional e invisible para outras partes de React. Nos programas de biblioteca, que un elemento funcional independente estea ou non dotado dun estado determinado é un desenvolvemento interno desa parte, que pode cambiar co paso do tempo. Tamén é interesante que no traballo poidas combinar compoñentes con e sen estado.

Análise de eventos

O proceso de análise de eventos nos compoñentes de React é semellante ao manexo de eventos nos elementos do modelo de obxecto de documento. Non obstante, hai varias características que os distinguen entre si:

1. Os eventos da biblioteca JavaScript chámanse cun estilo diferente ao estándar.
2. Usando a linguaxe de programación estendida do sistema, o programador pasa unha subrutina como un controlador de eventos en lugar de unha cadea.

Representación condicional de elementos

A biblioteca JavaScript permite romper a lóxica do desenvolvemento de elementos en compoñentes independentes. Poden mostrarse para a súa visualización xeral ou ocultarse, dependendo do estado do que estean dotados no momento. A representación condicional dos elementos funciona co mesmo principio que as expresións condicionais baseadas na linguaxe de programación JavaScript. Ás veces ocorre que a biblioteca require unha explicación de como afecta o estado á ocultación ou á representación dalgúns elementos. Aquí é máis lóxico usar un axudante JS condicional ou expresións similares a if.

Cambio de compoñentes

Pódense engadir elementos da biblioteca de React ás variables. Esta é unha solución práctica cando algunha condición indica se se debe debuxar algunha parte do compoñente ou non ten sentido, mentres que o resto da parte permanece sen cambios.

Listas e chaves

Esta sección inclúe varios compoñentes:

1. Debuxar varios elementos . O usuario pode formar un conxunto de elementos e incorporalo na linguaxe de programación do sistema usando chaves.
2. Lista elemental de elementos . Moitas veces, os usuarios e desenvolvedores axustan as listas directamente dentro dunha parte compoñente.

Chaves

Unha clave da biblioteca React JavaScript indica unha ferramenta especializada que debe introducirse ao xerar unha lista de compoñentes. As claves axudan á biblioteca de JavaScript a identificar os elementos que se axustaron, engadiron ou eliminaron. É importante marcalos para que React poida correlacionar os compoñentes dos datos estruturais despois de que transcorra un certo tempo.

Formularios

Na biblioteca JS, os elementos da linguaxe de marcas estandarizadas funcionan de forma un pouco diferente aos compoñentes do modelo de obxectos do documento, porque os elementos do formulario teñen inicialmente un estado oculto.

Elementos xestionados

Nunha linguaxe de marcado estandarizada, formularios como input , select , textarea tenden a autoxestionar o seu estado e actualizalo cando o programador introduce nova información. O estado de React.js sempre define o valor dos campos de entrada nun elemento de composición xestionado. Aínda que isto indica que o usuario debe escribir un pouco máis que o código orixinal dado, agora é posible pasar este valor a outras partes da interface de usuario.

O ascenso do Estado

O levantamento do estado é un modelo estandarizado que todo desenvolvedor debería coñecer e poder aplicar no proceso de traballo. Usalo eliminará patróns de xestión estatal complexos e normalmente inútiles.

Por que é tan necesario controlar o auxe do Estado?

Elevar o estado ao nivel dos compoñentes pasados ​​para aquelas partes que o requiran é necesario para que todos os elementos poidan participar do estado. Un nivel estable de estado facilitará a súa distribución entre todos os compoñentes que dependen del.

Composición vs herdanza

React.js inclúe un modelo de composición forte, polo que se recomenda utilizar o proceso de construción dun todo a partir de partes en lugar de herdanza para reutilizar o código escrito anteriormente entre elementos. Así, os atrezzos e a capacidade de crear unha única composición enteira a partir de partes compoñentes, proporcionan ao desenvolvedor a flexibilidade necesaria para crear a capa e o comportamento do elemento dun xeito específico e seguro.

Recordatorio! Os compoñentes poden levar accesorios non relacionados, incluíndo pezas elementais que constitúen bibliotecas ou funcións.

No caso de que necesites usar unha función sen aspecto para traballar con compoñentes unha segunda ou terceira vez, extráea nun módulo JS separado. Moveo a un compoñente e utiliza a función xerada sen máis expansión. React ou Vue ou Angular, que escoller: https://youtu.be/Nm8GpLCAgwk

Principios de React.js

Toda a filosofía da biblioteca JavaScript está oculta na guía de React. Parece que isto é longo e non ten tanta importancia, con todo, moitos usuarios afirman que despois de ler todo quedou no seu lugar. A documentación é bastante antiga, pero aínda ten un gran valor e relevancia –
https://ru.reactjs.org/docs/thinking-in-react.html . Tutorial de React js https://ru.reactjs.org/tutorial/tutorial.html

Funcionalidade da biblioteca React.js

Usando a biblioteca de JavaScript, o usuario ten a oportunidade de prestar toda a súa atención directamente ao proceso de desenvolvemento da IU e aos compoñentes da aplicación, e menos distraído pola formación e as posibles deficiencias do código escrito. A biblioteca permite desenvolver programas máis rápido, facilita a configuración e edición dos compoñentes e do proceso de todo o proxecto no seu conxunto. Así, React.js contén elementos responsables da comunicación na rede global, a interface de usuario, o control do estado do programa e a capacidade de resolver outros problemas complexos. A biblioteca tamén ten as seguintes características funcionais:

1. Practicidade . React.js está dispoñible en formato reducido. Este paquete compacto non necesita estar claramente configurado. Xa inclúe unha función de división de código que reduce o tempo que leva abrir a versión do navegador do sitio, xa que esta opción impide que os compoñentes se representen ao mesmo tempo.
2. Ecosistema bombeado e cumprimento . Na biblioteca está dispoñible un gran número de ferramentas, apoiadas por outros sitios, o que permite ao usuario desenvolver novos programas complexos para calquera propósito.
3. Funcionalidade completa . A principal vantaxe da biblioteca JavaScript é que todas as novas versións da plataforma cumpren os requisitos das antigas, polo que podes usar tanto a versión antiga como a actualizada, todas elas compatibles e relevantes ata hoxe. As versións publicadas anteriormente non quedan obsoletas despois das últimas actualizacións.

Uso práctico

Na páxina principal da biblioteca, nas instrucións para os usuarios, hai varios exemplos ilustrativos do uso de React na práctica. Podes corrixilos manualmente e tentar executalos. Aínda que sexas un usuario novo e non entendas a esencia e a lóxica da biblioteca, axusta o código ao teu gusto e mira o resultado.

Aplicación práctica de React ao escribir robots comerciais en JavaScript

É importante entender que un programador non programa JS, senón que escribe scripts (scripts). polo tanto, usando a biblioteca, un desenvolvedor pode escribir código para un robot comercial posterior usado para fins comerciais e tamén seguir deseñando a súa aparencia baseándose nesta plataforma. De feito, un robot de negociación para o comercio tamén é unha aplicación, da que un gran número se está a desenvolver mediante React.js. Non obstante, algunhas funcións e a parte interna do bot aínda terán que facerse noutros sitios que proporcionen ferramentas adecuadas para iso.

GitHub e React.js

GitHub é unha plataforma que alberga todas as versións de proxectos. O usuario conecta a aloxamento, pasa polo procedemento de rexistro no sitio web oficial de GitHub e despois crea un repositorio en liña onde transfire todos os ficheiros de Git.
Git é o servizo de control de versións do proxecto máis popular e relevante na actualidade, e GitHub é un repositorio de código remoto.

Referencia! Só aqueles usuarios que recibiron a ligazón adecuada con permiso teñen acceso á edición e descarga de ficheiros.

Documentación

Todos os titoriais e materiais actualizados sobre a biblioteca de JavaScript están actualizados coa última actualización. Os desenvolvedores tamén compilan e publican para a lectura xeral versións antigas da documentación, publicadas nunha páxina separada da biblioteca. Polo tanto, será máis fácil para os principiantes dominar as habilidades da xestión do sitio: material antigo e novo: todo está aquí, o acceso é gratuíto para todos.

Nota! Non esquezas ler os manuais. Polo menos, bótalle unha ollada: xa a maior parte do que parecía incomprensible quedará no seu lugar.

A biblioteca React é unha plataforma popular e relevante hoxe en día. A súa versatilidade permite aos desenvolvedores facer proxectos de mellor calidade e en menos tempo. Ademais, coñecer a plataforma e ter as habilidades para utilizala fai que un especialista sexa máis demandado no mercado laboral.