SAULSOTELOS-REACT

 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 ( "" ) ; }...

 Se agregaron ganchos a React en la versión 16.8. Los ganchos permiten que los componentes de función tengan acceso al estado y a otras características de React. Por este motivo, los componentes de clase ya no suelen ser necesarios. Aunque los Hooks generalmente reemplazan los componentes de clase, no hay planes de eliminar clases de React. Los ganchos nos permiten "engancharnos" a las características de React, como los métodos de estado y ciclo de vida. A continuación se muestra un ejemplo de Hook. No se preocupe si no tiene sentido. Lo explicaremos con más detalle en la siguiente sección . import React , { useState } from "react" ; import ReactDOM from "react-dom/client" ; function FavoriteColor ( ) { const [ color , setColor ] = useState ( "red" ) ; return ( < > < h1 > My favorite color is { color } ! </ h1 > < button type = " button " onClick = { ( ) ...

 Cree un archivo Sass de la misma manera que crea archivos CSS, pero los archivos Sass tienen la extensión de archivo.scss En los archivos Sass puedes usar variables y otras funciones Sass: mi-sass.scss: Crea una variable para definir el color del texto: $myColor : red; h1 { color : $myColor ; } Importa el archivo Sass de la misma manera que importaste un archivo CSS: índice.js: import React from 'react' ; import ReactDOM from 'react-dom/client' ; import './my-sass.scss' ; const Header = ( ) => { return ( < > < h1 > Hello Style! </ h1 > < p > Add a little style!. </ p > </ > ) ; } const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ; root . render ( < Header /> ) ; cd

  Hay muchas formas de darle estilo a React con CSS. En este tutorial analizaremos en profundidad tres formas comunes: Estilo en línea Hojas de estilo CSS Módulos CSS Estilo en línea Para darle estilo a un elemento con el atributo de estilo en línea, el valor debe ser un objeto JavaScript: Insertar un objeto con la información de estilo: const Header = ( ) => { return ( < > < h1 style = { { color : "red" } } > Hello Style! </ h1 > < p > Add a little style! </ p > </ > ) ; } Nota: En JSX, las expresiones de JavaScript se escriben dentro de llaves y, dado que los objetos de JavaScript también usan llaves, el estilo en el ejemplo anterior se escribe dentro de dos conjuntos de llaves {{}}. Nombres de propiedades en mayúsculas y minúsculas Dado que el CSS en línea está escrito en un objeto JavaScript, las propiedades con separadores de guion, como background-color, deben escribirse con sintaxis camel cas...

 Su uso memohará que React omita la representación de un componente si sus propiedades no han cambiado. Esto puede mejorar el rendimiento. Esta sección utiliza React Hooks. Consulta la sección React Hooks para obtener más información sobre Hooks. Problema En este ejemplo, el Todos componente se vuelve a renderizar incluso cuando las tareas pendientes no han cambiado. import { useState } from "react" ; import ReactDOM from "react-dom/client" ; import Todos from "./Todos" ; const App = ( ) => { const [ count , setCount ] = useState ( 0 ) ; const [ todos , setTodos ] = useState ( [ "todo 1" , "todo 2" ] ) ; const increment = ( ) => { setCount ( ( c ) => c + 1 ) ; } ; return ( < > < Todos todos = { todos } /> < hr /> < div > Count: { count } < button onClick = { increment } > + </ button > ...