Header Ads Widget

Ticker

6/recent/ticker-posts

Crear un elemento React desde cero

 Crear un elemento React desde cero


En este tutorial vamos a crear un React Element desde cero. Esto nos mostrará un poco acerca de por qué primero importamos React y ReactDOM, así como también cómo una expresión JSX se convierte en un objeto para que lo use el navegador. Estamos haciendo uso de la aplicación Create React, sin embargo, eliminaremos el componente de bienvenida y comenzaremos por el principio. Vamos a escribir un código de React desde cero, así que lo primero que debemos hacer es eliminar todo lo que hay en la srccarpeta. ¡Aquí va!

reaccionar desde cero

Lo siguiente que debe hacer es agregar un archivo index.js en blanco en la srccarpeta como tal.
index js en la aplicación react

Con eso, tenemos esta emocionante pizarra en blanco desde la que comenzar a codificar.
archivo js de índice fresco


Importando React y ReactDOM

Lo primero que queremos hacer es importar un par de módulos en la parte superior del archivo. Debemos importar React y ReactDOM usando estas dos líneas.


Definición de un elemento en React

El siguiente paso es definir un elemento usando la palabra clave const. Asignaremos una expresión JSX a la constante a continuación. La línea resaltada contiene el JSX que se envía a través del compilador de Babel para convertirlo a JavaScript puro para que los navegadores lo lean. El JavaScript resultante tendrá llamadas a la función React.createElement (). Es por eso que vemos la declaración de importación de React en la parte superior del archivo. Aunque no vemos llamadas a React.createElement () en el código que escribimos, habrá llamadas a React.createElement () una vez que Babel haga su trabajo y es por eso que necesitamos importar React de la forma en que lo hacemos.


Inspeccionando nuestro elemento

Ahora cierre la sesión de ese elemento que contiene la expresión JSX de arriba.

Aquí podemos comenzar a comprender cómo JSX se convierte en un objeto en JavaScript. En las herramientas para desarrolladores de Chrome, veamos la pestaña de la consola y veamos este objeto.
Objeto JSX en memoria
Lo que vemos es un Objeto. Este objeto es el resultado de la expresión JSX una vez que Babel lo ha compilado para su uso en el navegador. Es un elemento de reacción. Esto nos lleva al dom virtual. El dom virtual es una versión ligera en memoria de la interfaz de usuario real. Entonces, este Objeto que vemos aquí es parte del dom virtual. Cada vez que cambie el estado de este objeto, React obtendrá un nuevo React Element y comparará los dos para determinar cualquier cambio. Una vez que esto se completa, el DOM real (la UI) se actualiza automáticamente. Todo esto sucede en una fracción de segundo.


Representación en el DOM real

Ahora podemos renderizar este elemento React en el DOM real. Este es el propósito de importar ReactDOM como lo hicimos en línea 2. Para renderizar nuestro elemento, usamos este código resaltado aquí.

El primer argumento de la función ReactDOM.render () es el elemento que queremos representar. El segundo argumento es la ubicación en el DOM real donde queremos que se represente el elemento. Ahora, borramos todos los archivos en la carpeta src pero no borramos el contenido de la carpeta pública. En esa carpeta pública hay un archivo index.html que tiene el elemento raíz de una aplicación de reacción. Lo podemos ver aquí.
reaccionar elemento div raíz

El div con el id de root es el contenedor de la aplicación de reacción. Por lo tanto, aquí es donde se renderizará nuestro elemento. De hecho, ¡miremos ahora el navegador y veamos nuestro nuevo elemento!
hola reacciona

Podemos mirar dentro de las herramientas de desarrollo para ver un poco más de cerca cómo este elemento de reacción se representa en el navegador. Observe el div con el id de root, y dentro de ese div está el elemento que creamos con JSX. Vemos el elemento h2 con el texto configurado en Hello React!
elemento de reacción dentro del div raíz


Crear un elemento React desde cero

Comience importando React y ReactDOM. El siguiente paso es definir un elemento y asignar una expresión JSX a ese elemento. Después de esto, agregue una llamada a la función ReactDOM.render () para insertar el elemento en el DOM real. ¡Eche un vistazo a su navegador y herramientas de desarrollo y benefíciese de su nuevo React Element creado desde cero!

Publicar un comentario

0 Comentarios