Qué es React JS para principiantes, qué es, tutoriales, instalación, documentación: cómo instalar y usar la biblioteca React JS al escribir robots comerciales. A menudo, en los anuncios de trabajo para especialistas en informática, puede encontrar un requisito que dice que tiene habilidades en la biblioteca de JavaScript. Sí, y esperan el conocimiento de React no solo de los desarrolladores de software, sino también de los programadores que se dedican al desarrollo interno del sitio, y no al diseño externo. ¿Qué tipo de biblioteca es esta, qué oportunidades ofrece en el trabajo y dónde comienza a familiarizarse un principiante? Vamos a averiguarlo en este artículo.
- Biblioteca JavaScript – React: qué es
- ¿Por qué se necesita la biblioteca React?
- Conocido para principiantes: conceptos básicos.
- Hola Mundo!
- Fundamentos del lenguaje del sistema JSX
- ¿Qué es JSX?
- Formación de expresiones en el lenguaje del sistema.
- Representación detallada
- Componentes y accesorios
- Variedades de componentes: funcionales y de clase.
- accesorios
- Estado y ciclo de vida
- Análisis de eventos
- Representación condicional de elementos
- Cambio de componentes
- Listas y claves
- Llaves
- Formularios
- Elementos administrados
- El surgimiento del estado
- ¿Por qué es tan necesario controlar el surgimiento del Estado?
- Composición vs Herencia
- Principios de React.js
- Funcionalidad de la biblioteca React.js
- Uso práctico
- Aplicación práctica de React al escribir robots comerciales en JavaScript
- GitHub y React.js
- Documentación
Biblioteca JavaScript – React: qué es
React.JS es una biblioteca del popular
lenguaje de programación JavaScript , formada por la red social en línea Facebook para mejorar y simplificar el proceso de desarrollo del caparazón externo de sitios y aplicaciones, la interfaz con la que interactúa el usuario. La característica principal de la biblioteca son los componentes y los estados. Un componente es una parte de un conjunto digital que es responsable de la apariencia de cierta parte del sistema que se está diseñando.
¡Nota! Dichos componentes se pueden anidar.
Un estado es una colección de todos los datos sobre los detalles de una interfaz, incluida su representación representativa. Usando ejemplos, descubriremos con más detalle y claramente qué es qué. La siguiente imagen muestra algunos de los componentes principales: publicación en una red social en línea, una sección con información general y fotos. Cada parte incluye componentes más pequeños, que son los componentes. Por ejemplo, una publicación contiene texto, fotografías, el nombre del usuario que publica la información, etc. La sección de imágenes incluye imágenes individuales y la sección de información general contiene información breve.
Por lo tanto, se expresa la flexibilidad de React.JS: el componente de la interfaz se escribe una vez y luego se le dan todos los estados posibles.
¿Por qué se necesita la biblioteca React?
React.JS es una de las opciones posibles para escribir código JS o HTML en un formato conveniente, formar copias y hacerlo visual. Los componentes aquí están escritos en un lenguaje de sistema especial: JSX, que incluye elementos del lenguaje de programación JavaScript y el lenguaje de marcado HTML estandarizado.
- el lenguaje de programación del sistema es más fácil de reconocer que el conocido JavaScript y, en consecuencia, llevará varias veces menos tiempo admitir el código y eliminar errores en él (la velocidad de escritura de nuevos códigos y programas aumentará en consecuencia);
- aquí se construye un sistema conveniente y práctico de elementos constituyentes : partes repetitivas del código que se usan en varias etapas de escritura y en diferentes programas, y también cambian según el contexto;
- cada elemento constitutivo está subordinado solo a su estado , por lo tanto, es más fácil corregir las deficiencias en el código si de repente se encuentra un error en su trabajo en la práctica; los momentos incorrectos flotan a la superficie: un elemento que funciona correctamente continuará funcionando de manera estable en este modo, a menos, por supuesto, que se use el estado incorrecto en relación con él.
Por lo tanto, podemos concluir que la biblioteca React.JS le permite ahorrar mucho tiempo, hacer que el código sea más específico, organizar la secuencia en el orden correcto y usar bloques grandes nuevamente. Estas ventajas permiten reducir el costo del proceso de creación de interfaces de usuario, así como acelerar el tiempo de este mismo proceso. Teniendo las habilidades para usar el lenguaje de programación JS y HTML, aprender a usar el sistema JSX es fácil, solo unos días para dominarlo.
¡Nota! Es racional usar la biblioteca cuando se trabaja con proyectos grandes, cuando es necesario escribir una gran cantidad de páginas dinámicas. Un sitio de pequeña empresa no necesita tales complejidades.
Curso fundamental de React JS de la A a la Z: https://youtu.be/GNrdg3PzpJQ
Conocido para principiantes: conceptos básicos.
Hola Mundo!
Al acceder a la primera página de la biblioteca, el usuario verá un encabezado de bienvenida como un pequeño ejemplo: «¡Hola mundo!».
Fundamentos del lenguaje del sistema JSX
JSX es un lenguaje de programación de sistemas, una extensión del conocido JavaScript. Incluye una combinación de dos lenguajes: programación JA y el lenguaje de marcado HTML estandarizado. Los desarrolladores lo usan para ajustar el concepto para mostrar a React exactamente cómo debería verse la interfaz de usuario. JSX crea las «partes» de la biblioteca.
¿Qué es JSX?
La biblioteca React se adhiere a la lógica de que la esencia de la representación está directamente relacionada con la lógica de la interfaz de usuario: cómo se procesan los eventos, cómo cambia el estado en un período determinado y cómo se prepara la información para su presentación. La biblioteca JS se puede usar sin su lenguaje de sistema, pero una gran cantidad de desarrolladores la encuentran valiosa debido a su claridad y concreción cuando se trabaja con una interfaz de usuario generada a partir de código JavaScript. Además, la extensión facilita que React genere notificaciones de errores y momentos no válidos.
Formación de expresiones en el lenguaje del sistema.
JSX le permite usar cualquier expresión de JavaScript bien escrita dentro de llaves en un proceso.
JSX también es una expresión Una vez que el código fuente está codificado en bytes, cualquier expresión JSX se convierte en una llamada de función JS estándar que apunta a la categoría de JavaScript. De esto se puede entender que la extensión del sistema del lenguaje de programación oficial puede usarse dentro del manual de if y por períodos.
JSX es Objetos Los objetos representados por la extensión se denominan elementos React. Aclaran el resultado que el desarrollador quiere ver en la pantalla. La biblioteca reconoce estos objetos y los utiliza en el proceso de generación y mantenimiento del modelo de objetos del documento.
Representación detallada
Los detalles son los muchos pequeños bloques de construcción que componen los programas React.
Componentes y accesorios
Los componentes permiten dividir la interfaz de usuario en partes independientes, en las que es más fácil trabajar por separado. Se pueden combinar y usar varias veces. En su mayor parte, la funcionalidad de los componentes es similar a la funcionalidad del propio lenguaje de programación JavaScript. Toman información de entrada, que se denomina props, y devuelven elementos React que indican el modelo de desarrollo que el desarrollador quiere ver en el monitor.
Variedades de componentes: funcionales y de clase.
Es más fácil referirse a un componente de biblioteca como una función.
¡Interesante! La biblioteca React define estos dos tipos de componentes como similares.
accesorios
Los accesorios son objetos inmutables que son de solo lectura. Por lo tanto, un componente no debe escribir nada en sus accesorios, sin importar a qué tipo pertenezca.
Estado y ciclo de vida
Primero, averigüemos cómo aplicar correctamente el estado en el trabajo. Hay tres cosas importantes que debe saber sobre el estado de los componentes:
- No cambie el estado directamente, use el método setState. Recuerda que la única área donde puedes cambiar el estado directamente es el constructor.
- Las actualizaciones de estado pueden no ser sincrónicas.
- El flujo de información tiene una dirección. En la construcción de componentes, ninguno sabe si el estado está asignado a otro componente. No importa cómo se formó este o aquel elemento funcional independiente, utilizando una herramienta funcional o de clasificación. Esto se denomina flujo de datos «aguas abajo». Un estado siempre se define para algún elemento, y las asociaciones estructurales de este estado solo pueden afectar a las partes que están ubicadas «más abajo» en el orden jerárquico.
Por lo general, el estado se denomina «local», «interno» u oculto. Solo es visible para el elemento funcional en sí e invisible para otras partes de React. En los programas de biblioteca, si un elemento funcional independiente está dotado o no de un estado particular, es un desarrollo interno de esa parte, que puede cambiar con el tiempo. También es interesante que en el trabajo puedas combinar componentes con y sin estado.
Análisis de eventos
El proceso de análisis de eventos en los componentes de React es similar al manejo de eventos en los elementos del modelo de objeto de documento. Sin embargo, hay varias características que los distinguen entre sí:
- Los eventos en la biblioteca de JavaScript se nombran en un estilo diferente al estándar.
- Usando el lenguaje de programación extendido del sistema, el desarrollador pasa una subrutina como controlador de eventos en lugar de una cadena.
Representación condicional de elementos
La biblioteca de JavaScript permite dividir la lógica de desarrollo de elementos en componentes independientes. Pueden mostrarse para exhibición general u ocultarse, según el estado en el que se encuentren en ese momento. La representación condicional de elementos funciona según el mismo principio que las expresiones condicionales basadas en el lenguaje de programación JavaScript. A veces sucede que la biblioteca requiere una explicación de cómo el estado afecta el ocultamiento o la representación de algunos elementos. Aquí es más lógico usar un auxiliar JS condicional o expresiones similares a if.
Cambio de componentes
Los elementos de la biblioteca React se pueden agregar a las variables. Esta es una solución práctica cuando alguna condición indica si se debe dibujar alguna parte del componente, o no tiene sentido, mientras que el resto de la parte permanece sin cambios.
Listas y claves
Esta sección incluye varios componentes:
- Dibujo de varios elementos . El usuario puede formar un conjunto de elementos e incrustarlo en el lenguaje de programación del sistema usando llaves.
- Lista elemental de elementos . A menudo, los usuarios y desarrolladores ajustan las listas directamente dentro de una pieza de componente.
Llaves
Una clave en la biblioteca React JavaScript denota una herramienta especializada que debe ingresarse al generar una lista de componentes. Las claves ayudan a la biblioteca de JavaScript a identificar qué elementos se han ajustado, agregado o eliminado. Es importante marcarlos para que React pueda correlacionar los componentes de los datos estructurales después de que haya pasado una cierta cantidad de tiempo.
Formularios
En la biblioteca JS, los elementos del lenguaje de marcado estandarizado funcionan de manera un poco diferente a los componentes del modelo de objeto del documento, porque los elementos del formulario inicialmente tienen un estado oculto.
Elementos administrados
En un lenguaje de marcado estandarizado, formularios como input , select , textarea tienden a autogestionar su estado y actualizarlo cuando el desarrollador ingresa nueva información. El estado de React.js siempre define el valor de los campos de entrada en un elemento de composición administrado. Aunque esto indica que el usuario debe escribir un poco más que el código original proporcionado, ahora es posible pasar este valor a otras partes de la interfaz de usuario.
El surgimiento del estado
El levantamiento de estados es una plantilla estandarizada que todo desarrollador debe conocer y poder aplicar en el proceso de trabajo. Usarlo eliminará patrones de administración de estado complejos y generalmente inútiles.
¿Por qué es tan necesario controlar el surgimiento del Estado?
Elevar el estado al nivel de los componentes pasados para aquellas partes que lo requieran es necesario para que todos los elementos puedan participar del estado. Un nivel de estado estable facilitará su distribución entre todos los componentes que dependen de él.
Composición vs Herencia
React.js incluye un modelo de composición sólido, por lo que se recomienda utilizar el proceso de creación de un todo a partir de partes en lugar de la herencia para reutilizar código escrito previamente entre elementos. Por lo tanto, los accesorios y la capacidad de crear una sola composición completa a partir de partes componentes brindan al desarrollador la flexibilidad necesaria para crear el caparazón y el comportamiento del elemento de una manera específica y segura.
¡Recordatorio! Las partes de los componentes pueden tomar accesorios no relacionados, incluidas las partes elementales que forman bibliotecas o funciones.
En el caso de que necesite usar una función sin aspecto para trabajar con componentes por segunda o tercera vez, extráigala en un módulo JS separado. Muévalo a un componente y use la función generada sin más expansión. React o Vue o Angular, qué elegir: https://youtu.be/Nm8GpLCAgwk
Principios de React.js
Toda la filosofía de la biblioteca de JavaScript está oculta en la guía de React. Parece que esto es largo y no tiene tanta importancia, sin embargo, muchos usuarios afirman que después de leer todo encajó. La documentación es bastante antigua, pero sigue siendo de gran valor y relevancia:
https://ru.reactjs.org/docs/thinking-in-react.html . Tutorial de React js https://ru.reactjs.org/tutorial/tutorial.html
Funcionalidad de la biblioteca React.js
Usando la biblioteca de JavaScript, el usuario tiene la oportunidad de prestar toda su atención directamente al proceso de desarrollo de la interfaz de usuario y los componentes de la aplicación, y menos distraído por la formación y las posibles deficiencias del código escrito. La biblioteca le permite desarrollar programas más rápido, facilita la configuración y edición de los componentes y el proceso de todo el proyecto en su conjunto. Por lo tanto, React.js contiene elementos responsables de la comunicación en la red global, la interfaz de usuario, el control del estado del programa y la capacidad de resolver otros problemas complejos. La biblioteca también tiene las siguientes características funcionales:
- Practicidad . React.js está disponible en formato reducido. Este paquete compacto no necesita estar claramente configurado. Ya incluye una función de división de código que reduce el tiempo que se tarda en abrir la versión del navegador del sitio, ya que esta opción evita que los componentes se rendericen al mismo tiempo.
- Ecosistema bombeado y cumplimiento . Una gran cantidad de herramientas están disponibles en la biblioteca, respaldadas por otros sitios, lo que permite al usuario desarrollar nuevos programas complejos para cualquier propósito.
- Funcionalidad completa . La principal ventaja de la biblioteca de JavaScript es que todas las versiones nuevas de la plataforma cumplen con los requisitos de las antiguas, por lo que puede usar tanto la versión anterior como la actualizada, todas son compatibles y son relevantes hasta el día de hoy. Las versiones publicadas anteriormente no se vuelven obsoletas después de las últimas actualizaciones.
Uso práctico
En la página principal de la biblioteca, en las instrucciones para los usuarios, hay varios ejemplos ilustrativos del uso de React en la práctica. Puede corregirlos manualmente e intentar ejecutarlos. Incluso si es un usuario nuevo y no comprende la esencia y la lógica de la biblioteca, ajuste el código a su gusto y vea el resultado.
Aplicación práctica de React al escribir robots comerciales en JavaScript
Es importante darse cuenta que un desarrollador no programa JS, sino que escribe scripts (scripts). por lo tanto, al usar la biblioteca, un desarrollador puede escribir código para un robot comercial posterior utilizado con fines comerciales y también continuar diseñando su apariencia en función de esta plataforma. De hecho, un robot comercial para el comercio también es una aplicación, de la cual un gran número se está desarrollando utilizando React.js. Sin embargo, algunas funciones y la parte interna del bot aún deberán realizarse en otros sitios que brinden herramientas adecuadas para esto.
GitHub y React.js
GitHub es una plataforma que aloja todas las versiones de proyectos. El usuario conecta el alojamiento, realiza el procedimiento de registro en el sitio web oficial de GitHub y luego crea un repositorio en línea donde transfiere todos los archivos de Git.
Git es el servicio de control de versiones de proyectos más popular y relevante en la actualidad, y GitHub es un repositorio de código remoto.
¡Referencia! Solo aquellos usuarios que hayan recibido el enlace apropiado con permiso tienen acceso a la edición y descarga de archivos.
Documentación
Todos los tutoriales y materiales actualizados sobre la biblioteca de JavaScript están actualizados con la última actualización. Los desarrolladores también compilan y publican para lectura general versiones antiguas de la documentación, publicadas en una página separada de la biblioteca. Por lo tanto, será más fácil para los principiantes dominar las habilidades de administración del sitio: tanto material antiguo como nuevo: todo está aquí, el acceso es gratuito para todos.
¡Nota! No olvides leer los manuales. Al menos eche un vistazo: ya la mayor parte de lo que parecía incomprensible encajará.
La biblioteca React es una plataforma popular y relevante en la actualidad. Su versatilidad permite a los desarrolladores realizar proyectos de mejor calidad y en menor tiempo. Además, conocer la plataforma y tener las habilidades para usarla hace que un especialista sea más demandado en el mercado laboral.
