SECCION 2 : PRIMEROS PASOS CON REACT

 5. Introducción a React

6. Qué es React y sus ventajas

7. Primeros pasos

7.1-funcion tipo flecha

7.3-funcion tipo fleha 2

Callback Function


8. React Developer Tools

9. JSX

9-Componentes en React-estado

9.1-componente

9.2-Componente React con Props de Tipo Cadena







10.Tipos de Componentes

10.1-Estado en React - Explicación Sencilla

 10.2-Explicación de qué es un ESTADO en React

10.3-Ciclo de Vida de un Componente React - Explicación PRÁCTICA

10.4-¿Qué es DESMONTAR un Componente en React

10.5-Análisis de Estados Locales en tu Código 

10.6-Cómo evitar perder datos al desmontar componentes en React

10.7-El estado ES tasks, NO setTasks

11. Props

Tutorial: Aplicación React para Agregar Tareas-minimalista

11.1-eventos

7.1-funcion tipo flecha

7.3-funcion tipo fleha 2

Callback Function





Pasar propiedades de hijo a padre en React

1. Método Básico: Callback Function

Analogía Sencilla

Tutorial: Aplicación React para Agregar Tareas-minimalista

12-Hooks en React

12. Hook: useState

13. Hook: useEffect

13.1-useEffect para Llamadas a APIs: Guía Práctica

14. React Router Dom

15. React Router Dom dinámico

Comentarios

Publicar un comentario

Entradas más populares de este blog

9.3-Tutorial de Componentes React con Props -SSS

  Tutorial Sencillo de Componentes React con Props Ejemplo 1: Componente Saludo (simple) Componente Padre: App.js jsx function App () {    return (      < div >        < Saludo nombre = "Ana" edad ={ 25 } />        < Saludo nombre = "Carlos" edad ={ 30 } />      </ div >    ); } Componente Hijo: Saludo.js jsx function Saludo ( props ) {    return (      < div style ={{       border : '1px solid gray' ,       padding : '10px' ,       margin : '10px' ,       borderRadius : '5px'      }}>        < h3 > Hola { props . nombre }</ h3 >        < p > Tienes { props . edad } años ...
Leer más

9.6-Ciclo de Vida de un Componente React

  Ciclo de Vida de un Componente React Fases del Ciclo de Vida: 1. Montaje (Mounting) El componente se crea y se inserta en el DOM. 2. Actualización (Updating) El componente se re-renderiza debido a cambios en props o estado. 3. Desmontaje (Unmounting) El componente se elimina del DOM. Diagrama Completo del Ciclo de Vida En Componentes de Clase: javascript class MiComponente extends React . Component {    // 1. CONSTRUCTOR (montaje)    constructor ( props ) {      super ( props );      this . state = { contador : 0 };     console . log ( 'constructor' );    }    // 2. getDerivedStateFromProps (montaje/actualización)    static getDerivedStateFromProps ( props , state ) {     console . log ( 'getDerivedStateFromProps' );      return null ; // Retorna nuevo estado o null    }    // 3. RENDER (montaje/act...
Leer más

9-Componentes en React-estado

Concepto Básico Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen: Cómo debe verse una parte de la UI (estructura HTML) Cómo debe comportarse (lógica y funcionalidad) Analogía Imagina que estás construyendo una casa: Componente = Habitación (cocina, baño, dormitorio) Cada habitación tiene su propio diseño y función Puedes reutilizar el mismo diseño de dormitorio varias veces Juntas todas las habitaciones para formar la casa completa Tipos de Componentes 1. Componentes Funcionales (Recomendados actualmente) // Componente como función function Saludo ( props ) {    return < h1 > Hola , { props . nombre } !</ h1 > ; } ******************************************** // Con arrow function const Boton = ({ texto , onClick }) => {    return < button onClick = { onClick } > { texto } </ button > ; }; 2. Componentes de Clase (Legacy) javascript class Co...
Leer más