Header Ads Widget

Ticker

6/recent/ticker-posts

Introducción a React.js

 

Bueno, hola mundo de los desarrolladores web. Comenzando con este tutorial, comenzaremos a investigar React.js, una biblioteca de JavaScript de código abierto ridículamente popular. Antes de embarcarnos en nuestro viaje React.js, será útil repasar un poco ES6 y varios conceptos de JavaScript como variables, objetos y matrices. React.js, por supuesto, usa funciones y clases en JavaScript. Además, aprenderemos sobre la naturaleza declarativa del uso de React. Declarativo significa que usted describe lo que quiere que suceda y la herramienta hace el trabajo por usted. El lenguaje SQL es el ejemplo más popular del estilo declarativo. ¡Comencemos con React.js ahora!


¿Por qué React.js es tan popular?

Ciertamente, ha oído hablar de React.js antes de consultar este tutorial. De hecho, WordPress ahora aprovecha la biblioteca React.js en su propio Gutenberg editor. React se centra en la creación de interfaces de usuario. La interfaz de usuario es, por supuesto, lo que se presenta a los usuarios finales para interactuar con una aplicación, ya sea basada en web o móvil. React.js usa JavaScript, por lo que es perfecto para interfaces de usuario web y móviles. En React.js, el desarrollador describe la interfaz de usuario. Este es un aspecto clave de React.js que lo hace popular. El diseñador puede decirle a React.js lo que quiere y React.js hace el trabajo pesado por nosotros. React.js permite a los desarrolladores crear interfaces de usuario complejas sin hacer todo desde cero utilizando JavaScript y API nativas. Esto es lo que significa ser declarativo. En otras palabras, le decimos a la herramienta lo que queremos, no cómo hacerlo. Trabajar directamente con la API DOM es difícil. En cambio, React.js usa un dom virtual que es más amigable que el real. Habiendo reaccionado. js Skills es ideal para aplicaciones móviles iOS y Android, así como para navegadores de escritorio. Además, React.js es bastante pequeño, por lo que una vez que tenga la API básica, su conocimiento de JavaScript le permitirá hacer cosas muy productivas con la biblioteca.


3 conceptos básicos de React.js

En React.js, hay tres conceptos básicos para comprender. El primero son los componentes.


1. Componentes

Las interfaces de usuario en React se describen usando ComponentesPiense en un componente como una simple función de JavaScript. Al igual que en otros lenguajes de programación, las funciones se invocan con alguna entrada y, con suerte, obtenemos alguna salida. En React.js, esto funciona de manera un poco diferente. Un componente de React.js no se invoca realmente. Simplemente escríbalo de una manera similar a como escribiría html estándar.
reaccionar es declarativo

Los componentes son:

  • Funciones similares
  • Entrada: apoyos, estado | Salida: UI
  • Reutilizable y compostable
  • <Componente />
  • Puede administrar un estado privado

2. Actualizaciones reactivas

El segundo gran concepto con React.js es el de Reactive Updates. Cuando el estado de un componente de React, esto puede considerarse como la entrada de ese componente, cambia, entonces la interfaz de usuario que representa, la salida, también cambiará. Cada vez que ocurren estos cambios, el html en el árbol dom debe regenerarse. Al usar React.js, simplemente reaccionará a los cambios en el estado de un componente y actualizará automáticamente las partes del DOM que deben actualizarse.
reaccionar para generar html

Para actualizaciones reactivas:

  • Reaccionar reaccionará
  • Lleva actualizaciones al navegador

3. El DOM virtual

El tercer concepto importante que debemos tener en cuenta con respecto a React.js es el DOM virtual. ¿Qué es el DOM virtual? Puede considerarse como una representación virtual de puntos de vista en la memoria. En React.js, genera su marcado html usando JavaScript. Cuando una aplicación web recibe datos del servidor a través de AJAX, necesita algo más que HTML para trabajar con esos datos. Aquí es donde React.js usa una representación virtual de vistas HTML en la memoria, también conocido como algoritmo de reconciliación de árbol. React usa el DOM virtual para comparar versiones de la interfaz de usuario en la memoria antes de que actúe sobre ellas. Puede obtener más información sobre el DOM virtual aquí.

Para el DOM virtual:

  • Genera HTML usando JavaScript
  • Sin lenguaje de plantilla HTML.
  • Reconciliación de árboles

Construyamos un componente React

Está bien con el bla bla, construyamos un componente React.js simple para ver cómo funciona.


React.js


html


salida

reaccionar hola mundo

En el código anterior hay un componente de función React simple llamado HelloreactEste componente devuelve un div no tiene entrada. Para mostrar un componente de React en el navegador, necesitamos decirle a la biblioteca ReactDOM cómo hacerlo. Podemos usar la función ReactDOM.render (), que toma dos argumentos. El primer argumento es el componente a representar. En este ejemplo, es el componente Helloreact . El segundo argumento de la función ReactDOM.render () es el elemento DOM en el navegador donde deseamos que aparezca el componente React. Aquí es donde se montará el componente.


Instalación de la aplicación Create React

La forma más fácil de empezar a trabajar con algún código React.js en su máquina local es utilizar la aplicación Create React disponible instalándola usando NPMSiempre que ya tenga Node instalado, puede ejecutar algunos comandos simples como estos.

npm creo-reaccionar-aplicación
npx crear-reaccionar-aplicación hola-reaccionar
cd hola-reaccionar
npm inicio

¡Luego visite http: // localhost: 3000 / y sea testigo de una nueva aplicación React.js en todo su esplendor!

Puede abrir la carpeta de su aplicación en un editor como Visual Studio Code y aparecerá similar a esto.
crear código de estudio visual de la aplicación de reacción

Ahora, para asegurarnos de que entendemos lo que está sucediendo aquí, podemos deshacernos de todo en App.js y reemplazarlo con este código aquí.

¡Esto nos da un botón simple que no hace nada cuando hacemos clic en él!
botón reactjs sin estado


Cómo usar un React Hook

Ahora vamos a ponernos un poco más elegantes con nuestro botón. Queremos hacer uso de algún tipo de estado. Actualicemos el código a este que se encuentra aquí.

El código anterior hace uso de una función especial en React.js llamada useState . Si siguiera ese enlace, vería que esta función es en realidad un State Hook en React.js. La función useState devuelve dos elementos cuando se llama. El primer elemento es un objeto de estado y el segundo es una función para cambiar ese objeto de estado . El objeto de estado puede ser de cualquier tipo, como una cadena, un número, una matriz u otra cosa. En este ejemplo es un número. El objeto de estado tiene un nombre countermientras que el nombre de su función de actualización es setCounterEn el código estamos usando la desestructuración de JavaScript. para capturar estas dos variables en una línea. El resto del código nos muestra bastante bien lo que está sucediendo. Cuando se hace clic en el botón, el contador se incrementa en uno. ¡Podemos ver eso aquí!


Flujo de datos unidireccional en React

En React, los datos se mueven de un componente a otro. Veamos eso en acción aquí.

En el código anterior, ahora estamos usando un flujo de datos unidireccional entre componentes. Solo ese componente puede acceder al estado de un componente de React. Para que el estado del contador sea accesible para ambos componentes, necesitamos crear un componente principal . Para eso está el nuevo Appcomponente. Por lo tanto, useState ahora es parte del componente de la aplicación. Con el estado del contador ahora en el componente Aplicación, que es el padre del Presentationcomponente, los datos ahora pueden fluir del padre al hijo. Nuestro objetivo es hacer counterfluir el valor del Presentationcomponente. Esto se hace con el objeto propsPara pasar un accesorio a un componente, especifica un atributo similar a cómo lo hace en HTML. El Presentationcomponente recibe un accesorio llamadomessage, y el valor de ese mensaje es la variable de contador que proviene del gancho useState . El componente de presentación ahora puede usar su objeto de accesorios. Todos los componentes de la función reciben este objeto, incluso cuando no tienen atributos. Eso significa que el Buttoncomponente está recibiendo actualmente su objeto de accesorios, y ese objeto hasta ahora ha estado vacío. Dado que un componente puede recibir varios atributos, el objeto props tendrá un par clave-valor para cada atributo. Esto significa para acceder a la propiedad del mensaje y colocar su valor dentro del div de Presentación que usamos {props.message}.

En el Appcomponente hay una nueva función llamada incrementCounterEsta función actualiza el Appestado del contador del componente para incrementar el valor del contador utilizando el valor del contador anterior. Para permitir que el Buttoncomponente a ser capaz de invocar la incrementCounterfunción en el Appcomponente, podemos pasar una referencia a incrementCounteral Buttoncomponente como un prop . Las funciones son solo objetos en JavaScript, y dado que puede pasar cualquier valor de objeto como un accesorio, esto funciona bien. El onClickFunctionconsigue un valor de incrementCounter, que es una referencia a la función definida en el App componente. Podemos utilizar este nuevo comportamiento transmitido directamente en el onClickvalor. Será un accesorio en este componente, por lo que podemos acceder a él con props.onClickFunctionLa propiedad de la función onClick permitió que el botón invocara la función incrementCounter del componente de la aplicación. Es como si al hacer clic en ese botón, el componente Botón se estuviera acercando al componente Aplicación y dijera "¡Oye, invoca esa función incrementCounter!" Eso nos da una idea básica de cómo los datos fluyen en una dirección en React usando accesorios.


Introducción al resumen de React.js

En este tutorial comenzamos a aprender sobre los conceptos básicos de React.js, una de las bibliotecas de JavaScript más populares disponibles en la actualidad. Una aplicación de React consta de componentes reutilizables, y esos componentes son como funciones. Eso significa que toman entradas y luego generan una descripción de una interfaz de usuario en forma de un elemento React. Para renderizar esos elementos en el navegador usamos ReactDOM. Luego, volverá a renderizar los componentes cada vez que haya un cambio de estado. Para que esto suceda, usamos una sintaxis especial de React llamada JSXLa entrada para un componente es un conjunto de propiedades a las que se accede dentro del componente con su primer objeto de argumento llamado props, así como un conjunto de elementos de estado a los que un componente puede conectarse con la función especial useState. Cada vez que un componente cambia de estado, React lo vuelve a renderizar automáticamente.



Publicar un comentario

0 Comentarios