SECCION 7: PROYECTO: SIMULADOR DE TWEETS

47. ¿Qué vamos hacer en esta sección?

48. Creando el proyecto de React JS

49. Instalando las Dependencias

50. Creando el componente Header y los estilos

51. Creando el componente SendTweet y posicionando el botón de abrir el modal

52. Crearemos el componente ModalContainer y le pasaremos el contenido del modal

53. Creando FormSendTweet para renderizar el formulario de envío de tweets

54. Escribiendo logica para enviar el Tweet y guardarlo en el localStorage

55. Añadiendo Toast para notificar al usuario si el Tweet se ha enviado

56. Recuperando Tweets del localStorage y actualizándolos con el nuevo tweet

57. Componente para mostrar toda la lista de Tweets enviados

58. Componente Tweet que pintara el tweet

59. Función para borrar Tweets

60. Código fuente del proyecto

Comentarios

Publicar un comentario

Entradas más populares de este blog

18-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: 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/actualización)    render ()...
Leer más

20. ¿Que son los Props de React?

  Tutorial 20: ¿Qué son los Props de React? 🎯 Objetivo Aprender a pasar información entre componentes usando props en React. 📖 Introducción a los Props ¿Qué son los Props? Los props (propiedades) son la forma que tiene React de pasar información de un componente padre a un componente hijo. Analogía sencilla: Imagina que los props son como parámetros que le pasas a una función, pero en el mundo de los componentes React. 🎭 Ejemplo Visual: Flujo de Props text   ┌─────────────────┐    │     App.js      │   ← Componente PADRE    │  (tiene nombre) │    └────────┬────────┘             │ Pasa el nombre como prop             ▼    ┌─────────────────┐    │   Saludar.js    │   ← Componente HIJO    │  (usa el nombre)...
Leer más

17-Componentes en React-estado

  Componentes en React 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) javascript // 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 Contador...
Leer más