useState Hook

 React useStateHook nos permite rastrear el estado en un componente de función. El estado generalmente se refiere a datos o propiedades que deben rastrearse en una aplicación.

ImportaruseState

Para utilizar el useStateHook, primero debemos importarlo en nuestro componente. En la parte superior de su componente, importel useStategancho.

import { useState } from "react";

Tenga en cuenta que estamos desestructurando useStateya react que es una exportación con nombre.Para obtener más información sobre la desestructuración, consulte la sección ES6 .

Inicializar useState

Inicializamos nuestro estado llamando useStatea nuestro componente de función.

useState acepta un estado inicial y devuelve dos valores:

  • El estado actual.
  • Una función que actualiza el estado.

Inicializar el estado en la parte superior del componente de función.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

Tenga en cuenta que nuevamente estamos desestructurando los valores devueltos de useState.


El primer valor, color, es nuestro estado actual.


El segundo valor, setColor, es la función que se utiliza para actualizar nuestro estado.

Estos nombres son variables que pueden tener cualquier nombre que desees.

Por último, establecemos el estado inicial en una cadena vacía:useState("")


Leer Estado

Ahora podemos incluir nuestro estado en cualquier lugar de nuestro componente.


Utilice la variable de estado en el componente renderizado.


dfdf

Comentarios

Publicar un comentario

Entradas populares de este blog

1-react-intro

React es una biblioteca JavaScript para construir interfaces de usuario. React se utiliza para construir aplicaciones de una sola página. React nos permite crear componentes de interfaz de usuario reutilizables. Es una libreria de javascript para crear interfaces de usuarios en una sola pagina index.html  Estructura react: import React from 'react' ; import ReactDOM from 'react-dom/client' ; function Hello ( props ) { return < h1 > Hello World! </ h1 > ; } const container = document . getElementById ( "root" ) ; const root = ReactDOM . createRoot ( container ) ; root . render ( < Hello /> ) ;   Crear aplicación de reacción Para aprender y probar React, debe configurar un entorno de reacción sobre tu computadora. Este tutorial utiliza la create-react-app. El create-react-app herramienta es una forma de apoyar oficialmente para crear aplicaciones de React. Node.js está obligado a utilizar create-react-app . Abra su term...
Leer más

2-react-Reactar Render HTML

El objetivo de React es en muchos sentidos renderizar HTML en una página web. Reacta hace HTML a la página web mediante el uso de una función llamada createRoot() y su método render() . La función de la bota de creación El createRoot()función toma una argumento, un elemento HTML . El propósito de la función es definir el elemento HTML donde se debe mostrar un componente de React. El método de renderizar El render() A continuación, se llama al método para definir el componente de React que debe  renderizar . Pero renderizar dónde? Hay otra carpeta en el directorio raíz de su proyecto React, llamado " púbólico ". En esta carpeta, hay un Archivo index.html. Notarás un sencillo. <div> en el cuerpo de este archivo. Aquí es donde nuestra aplicación React se entregará. Mostrar un párrafo dentro de un elemento con el identificador de " root ": const container = document.getElementById( 'root' );  const root = ReactDOM.createRoot( container );  root.render(...
Leer más

Componentes

Imagen
Los componentes son como funciones que devuelven elementos HTML. Componentes de React Los componentes son fragmentos de código independientes y reutilizables. Cumplen la misma función que las funciones de JavaScript, pero funcionan de forma aislada y devuelven HTML. Los componentes vienen en dos tipos, componentes de clase y componentes de función, en este tutorial nos concentraremos en los componentes de función. En las bases de código de React más antiguas, es posible que encuentres que se utilizan principalmente componentes de clase. Ahora se sugiere utilizar componentes de función junto con ganchos, que se agregaron en React 16.8. Hay una sección opcional sobre componentes de clase para tu referencia. Crea tu primer componente Al crear un componente React, el nombre del componente DEBE comenzar con una letra mayúscula. Componente de clase Un componente de clase debe incluir la extends React.Component declaración. Esta declaración crea una herencia para React.Component y le otorga a...
Leer más