lestrades
- React :
- React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.
- Las vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar.
- Crea componentes encapsulados que manejen su propio estado, y conviértelos en interfaces de usuario complejas.
- Ya que la lógica de los componentes está escrita en JavaScript y no en plantillas, puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM.
- En React no dejamos fuera al resto de tus herramientas tecnológicas, así que podrás desarrollar nuevas características sin necesidad de volver a escribir el código existente.
- React puede también renderizar desde el servidor usando Node, así como potencializar aplicaciones móviles usando React Native.
Implementar React en un HTML:
Babel es un «compilador» (o transpilador) para JavaScript. Básicamente permite transformar código escrito con las últimas y novedosas características de JavaScript y transformarlo en un código que sea entendido por navegadores más antiguos.
Insertar babel en un docuemto HTML:
Ejemplo de código implementando Babel:
Hooks
El Hook useState es un Hook que permite añadir el estado de React a un componente funcional y sirve para manejar el estado de los elementos de un componente de manera que permite actualizar el estado de una variable y solo renderizar el tag html donde se lo use, de manera que cuando el estado cambia el componente responde volviendo a renderizar solo la parte del código afectada por la variable de estado mantenida por el hook useState.
Importación del Hook:
import { useState } from 'react';
La forma de declarar un hook de estado es:
const [count, setCount] = useState(0)
- count:Es una constante que representa el valor de estado actual del hook.
- setCount:Método para actualizar el estado, lo que se haga aquí va a definir el nuevo valor del estado.
- useState(0):Donde 0 es el valor inicial del estado. Todo hook de estado tiene que tener un valor inicial (en este caso es 0) y luego se ira actualizando.
Ejemplo de uso:
Este hook recibe como parámetro una función que se ejecutará cada vez que nuestro componente se renderice, ya sea por un cambio de estado, por recibir props nuevas o, y esto es importante, porque es la primera vez que se monta.
Importación:
import React, { useEffect } from 'react'
Forma de declararlo:
useEffect(() => {
//Código a ejecutar
return () => {
//retorno de la función
};
}, [ elementos_a_observar ]);
