Cómo funciona React – React Vernacular Movement 05

Cómo funciona reaccionar

Prefacio

React es uno de los paquetes de JavaScript más populares para desarrollar interfaces web y móviles.Desarrollado por Meta (anteriormente Facebook), React permite a los desarrolladores crear componentes reutilizables para completar páginas de inicio.

Sin embargo, cabe señalar aquí que, estrictamente hablando, React no es un marco. Esto se debe a que solo es responsable de representar los elementos de la interfaz de usuario. Sin embargo, React proporciona otra solución para marcos como Angular y Vue, lo que nos permite completar funciones complejas de la página de inicio con él.

Este artículo explicará cómo funciona React, sus características y los beneficios de usar React.js para desarrolladores front-end.

¿Por qué necesitas un marco front-end?

Al responder a esta pregunta, también podría pensar en una pregunta: ¿por qué necesitamos utilizar un marco de interfaz de usuario? En el campo del desarrollo web, el marco front-end es de hecho una herramienta moderna y, sin importar qué tecnología o herramienta sea, está desarrollada para resolver un determinado problema. En las páginas web antiguas, se necesita HTML, CSS e incluso algo de JavaScript para completar una página estática.

Sin embargo, a medida que la tecnología se desarrolla cada vez más y más personas utilizan Internet, las funciones de las páginas web se vuelven cada vez más complejas, ya sea el registro de miembros, el inicio de sesión, la función de mapa, la función de publicación en foros, etc. Tarea sencilla. La página web puede solucionarlo.

Por lo tanto, hay ingenieros de front-end e ingenieros de back-end. Los ingenieros de front-end son responsables de UI\UX, interfaz visual, visualización de datos y estado, etc. Los ingenieros de backend son responsables del procesamiento de datos, operaciones de bases de datos, gestión de servidores, desarrollo de API... etc.

Además, debido a que las páginas se vuelven cada vez más complejas, ya no existe una manera de manejar varios estados complejos de front-end usando JavaScript o Jquery, por lo que nació el marco.

React, Vue y Angular se desarrollaron para manejar estados front-end complejos.

¿Qué es reaccionar JavaScript?

React es una potente suite de JavaScript que puede crear interfaces front-end de forma modular. Revolucionó el desarrollo de la interfaz de usuario al introducir enfoques declarativos y modulares.

A diferencia de la manipulación de DOM en jQuery, React usa Virtual DOM para optimizar el rendimiento. React JavaScript (o React.js) puede manejar pantallas frontales complejas, proporcionando a los desarrolladores un enfoque estructurado y eficiente.

Cómo funciona reaccionar?

React presenta JSX, un azúcar sintáctico que combina a la perfección código JavaScript y HTML. Las etiquetas JSX son similares a XML, pero tienen algunas diferencias.

Por ejemplo: React usa className en lugar del atributo de clase tradicional de CSS. Los valores numéricos y las expresiones están entre llaves y las comillas representan cadenas, similar a JavaScript.

Reaccionar elementos

React puede crear varios DOM HTML (modelo de objetos de documento) a través de sus funciones integradas, así que primero revisemos la sintaxis HTML básica.

				
					<body> 
    <h1><span class="ez-toc-section" id="hello-world"></span>Hola Mundo<span class="ez-toc-section-end"></span></h1> 
    <ul> 
        <li>perro</li> 
        <li>gato</li> 
    </ul> 
</body>
				
			

A partir de la estructura HTML anterior, podemos saber que el monitoreo de elementos HTML está conectado en una estructura de árbol y que hay un elemento raíz (elemento raíz) con dos elementos secundarios (el primer elemento secundario es). h1, el segundo elemento hijo es ul, y si uno mira ul En términos de lista,ul También es un elemento padre, que contiene dos li elementos secundarios.

Usamos estos DOM para que el navegador sepa cómo se ve nuestra página, por lo que el concepto de React es el mismo. A través de las funciones desarrolladas por React, creamos estos elementos y luego los combinamos en un HTML grande y mostramos la página. .

Reaccionar DOM

Después de crear un elemento, necesitamos representar el DOM creado en la página. A esta acción la llamamos Renderizar. Podemos usar el renderizado integrado de ReactDOM para renderizar los elementos de React que hemos creado en el navegador.

				
					const plato = React.createElement("h1", "Hola mundo"); ReactDOM.render(plato, document.getElementById("raíz"));
				
			

A través del código JavaScript anterior, primero se creará un elemento HTML de la siguiente manera:Y pase este elemento a HTML.

				
					<div id="root"> 
    <h1><span class="ez-toc-section" id="hello-world-2"></span>Hola Mundo<span class="ez-toc-section-end"></span></h1> 
</div>
				
			

Por supuesto, lo anterior es un DOM único y relativamente simple. Aquí también proporcionamos un ejemplo HTML creado por el método de lista de renderizado en ReactDOM.

				
					const hola = React.createElement("h1", "Hola") const mundo = React.createElement("h1", "Mundo") ReactDOM.render([hola, mundo], document.getElementById("raíz"))
				
			

¿Por qué utilizar React.js?

Cientos de grandes empresas de todo el mundo están utilizando React para construir sus propios sistemas. Las ventajas de utilizar React se presentarán brevemente a continuación.

Fácil de usar

Generalmente, los ingenieros de desarrollo web con habilidades en JavaScript pueden aprender rápidamente a usar React, porque se basa en JavaScript puro y también tiene conceptos modulares y orientados a objetos, por lo que es relativamente fácil comenzar.

Si necesita aprender más sobre JavaScript, muchos sitios web ofrecen tutoriales gratuitos. Primero puede comprender los conceptos básicos de JavaScript y luego leer React para simplificar el proceso de desarrollo front-end.

componentes reutilizables

React te permite reutilizar componentes como componentes en otras aplicaciones. Por ejemplo: si desarrolla un formulario para una determinada página, si necesita usarlo en otras páginas, puede usar directamente los componentes del formulario sin tener que desarrollarlo nuevamente.

Además, React puede seguir utilizando componentes más pequeños dentro de otros componentes para completar funciones complejas sin demasiado código grueso. Cada componente de React tiene su propio estado, lo que facilita su mantenimiento.

Implementación simple de componentes front-end

React combina objetos JavaScript con sintaxis y marcado HTML. También puede escribir componentes y agregar React a páginas HTML existentes a través de JSX (este término se analizará en capítulos posteriores). JSX simplifica la presentación multifuncional y mantiene el código simple sin limitar la funcionalidad del sistema.

alto rendimiento

Virtual Dom permite a React actualizar rápidamente el árbol DOM. A través de mecanismos y algoritmos especiales, React puede evitar una repetición excesiva, que afecta el rendimiento.

Optimización de motores de búsqueda

React mejora la latencia y promueve la optimización de motores de búsqueda (SEO) al aumentar el rendimiento y acortar los tiempos de carga del código JavaScript. La implementación de Virtual DOM ayuda a acelerar las páginas.

También puede optimizar el SEO a través del lado del servidor. Aborda uno de los desafíos que enfrentan los sitios web que solo utilizan JavaScript, ya que los motores de búsqueda a menudo encuentran que rastrear estos sitios es difícil y requiere mucho tiempo.

Conclusión

Este artículo ingresa oficialmente al mundo de React y explica cómo funciona React, incluido cómo generar HTML DOM a través de JavaScript y convertirlo en una página.

Las mejoras continuas del equipo de React hacen que React sea más fácil de usar e integrar con una variedad de tecnologías, incluidas Bootstrap, Tailwind CSS, Axios, Redux y Firebase.

Implementar aplicaciones React en VPS también es fácil con la ayuda de Node.js y NGINX.

Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!

Si le gusta esta serie de artículos, no dude en hacer clic en Me gusta y compartir para que más personas puedan verla ~

Cita

Reaccionar movimiento vernáculo 06-Reaccionar principio de funcionamiento

Reaccionar serie de deportes vernáculos

Funciones de alto orden de JavaScript: React Vernacular Movement 04

JavaScript Async Await - Reaccionar movimiento vernáculo 03

Objeto JavaScript ES6 - Reaccionar movimiento vernáculo 02

JavaScript ES6 - Reaccionar movimiento vernáculo 01

es_ESEspañol