Aprende React Desde Cero - Curso de React Con Proyectos

Sobre esta lección

Aprende los fundamentos de React en este curso desde cero. Crearás cuatro proyectos paso a paso y aprenderás los fundamentos para comenzar a crear aplicaciones web interactivas con React. ✏️ Curso creado por: Estefania Cassingena Navone. Síguela en Twitter https://twitter.com/EstefaniaCassN. 💻 Código en GitHub: 🔗 Proyecto 1: https://github.com/estefaniacn/testimonios-freecodecamp 🔗 Proyecto 2: https://github.com/estefaniacn/contador-de-clics-freecodecamp 🔗 Proyecto 3: https://github.com/estefaniacn/calculadora-react-freecodecamp 🔗 Proyecto 4: https://github.com/estefaniacn/aplicacion-tareas-react 🔗 Proyecto 1 Componentes de Clase :https://github.com/estefaniacn/testimonios-freecodecamp-clase 🔗 Proyecto 2 Componentes de Clase: https://github.com/estefaniacn/contador-de-clics-clase 📌 Aprende a programar gratis con freeCodeCamp: https://www.freecodecamp.org/espanol/ 💡 Cursos: HTML y CSS: https://www.youtube.com/watch?v=XqFR2lqBYPs JavaScript: https://www.youtube.com/watch?v=ivdTnPl1ND0 ⭐️ Contenido ⭐️ 00:00:00 Introducción 00:00:36 Proyectos 00:02:20 Estructura del curso 00:04:05 Conocimiento previo necesario para el curso 00:04:45 ¿Qué es React? Ventajas de React 00:07:49 Conceptos Básicos para React 00:23:52 Descargar e Instalar Node.js 00:28:58 Documentación Oficial de React 🔹 Introducción a JSX 00:29:35 ¿Qué es JSX? 00:34:18 Elemento en React 00:34:51 Diferencias entre elemento y componente 00:36:19 Introducción a react-dom y DOM 00:38:09 Elementos HTML que se pueden usar 00:39:05 Cómo reconocer elementos y componentes 00:40:09 Atributos 00:47:45 Estructura JSX con elementos anidados 00:49:01 Cómo renderizar componentes y elementos 00:52:47 Self-closing tags 00:53:59 Insertar JavaScript en JSX 🔹 Estructura Inicial 00:56:59 Crear la Estructura Básica con create-react-app. 🔹 Proyecto 1: Clon de Testimonios de freeCodeCamp 01:26:22 Inicio del Proyecto 01:26:55 Crear la Estructura Inicial 01:29:27 Identificar los Componentes 01:32:04 Crear un Componente 01:42:28 Preparar el Proyecto 01:50:17 Mostrar un Componente 01:53:14 Importar un Componente 01:54:40 Exportar un Componente 01:58:28 Herramientas de React 01:59:16 Exportación Nombrada 02:01:26 Asignar Estilos con CSS 02:21:01 Recibir props en un Componente 02:25:59 Pasar props a un Componente 02:29:32 Personalizar la Imagen 02:36:56 Texto en Negrita 02:42:07 Revisión Final y Herramientas de React 🔹 Proyecto 2: Contador de Clics 02:49:19 Inicio del Proyecto 02:50:56 Crear la aplicación 02:53:32 Prepara el proyecto 02:55:58 Importar imágenes 03:00:06 Asignar Estilos con CSS 03:05:07 Crear el Botón 03:06:45 props del Botón 03:07:21 Sintaxis de Desestructuración 03:08:31 Clase Basada en Condición 03:11:46 Asignar Event Listener 03:14:50 Crear los Botones 03:17:39 Definir función en un componente 03:20:15 Pasar función como prop 03:24:36 Probar las funciones 03:25:28 Estilos para los botones 03:31:04 Componente contador 03:33:40 Agregar el contador 03:39:05 Herramientas de React 03:39:37 Actualizar el contador 03:49:29 Retos y Comentarios Finales 🔹 Proyecto 3: Calculadora Interactiva 03:52:03 Inicio 03:53:32 Crear la aplicación 03:55:30 Adaptar el proyecto 03:58:25 Comenzar el proyecto 04:05:23 Contenedor principal 04:08:16 Estructura de la calculadora 04:09:43 Crear los componentes 04:11:27 props.children 04:15:20 Atributos de Botón 04:19:15 Definir una Función 04:21:06 Probar el Botón 04:24:11 Estilo para el Botón 04:29:03 Crear los Botones 04:33:37 Componente Pantalla 04:38:37 Estilo para la pantalla 04:43:06 Botón clear 04:46:56 Estilo para el botón clear 04:51:08 Mostrar input en la pantalla 04:55:31 Asignar event listener 05:02:44 Event Listener para el botón clear 05:06:38 Calcular el resultado 05:13:52 Manejar input vacío 05:17:48 Retos y comentarios finales 🔹 Proyecto 4: Aplicación de Tareas 05:26:43 Inicio del Proyecto 05:28:22 Crear la aplicación 05:30:44 Adaptar el proyecto 05:33:22 Logo y color de fondo 05:37:02 Estilo inicial 05:41:38 Lista de tareas 05:45:09 Confirmar familia tipográfica 05:46:10 Componente tarea 05:50:00 Estilo para tarea 05:55:59 react-icons 06:03:18 props completada 06:05:23 Estilo para tarea completada 06:07:09 Componente formulario 06:10:30 Estilo para el formulario 06:14:12 Agregar un formulario 06:15:42 Componente lista de tareas 06:17:07 Fragmentos 06:19:11 Estilo para lista de tareas 06:21:51 Estado de lista de tareas 06:23:30 Mostrar la lista de tareas 06:26:28 Nuevos props para tarea 06:30:32 Agregar tarea 06:34:22 Manejar cambio 06:39:59 Manejar envío 06:43:29 Generar ids para las tareas 06:52:39 Key para cada tarea 06:54:47 Colores para las tareas 06:56:27 Actualización Automática 06:57:29 Eliminar tarea 07:00:37 Tarea Completada 07:04:56 Retos y comentarios finales 🔹 Componentes de Clase 07:11:58 Introducción a los componentes de clase 07:29:25 Proyecto testimonios freeCodeCamp con componentes de clase 07:42:34 Proyecto contador de clics con componentes de clase 08:10:16 Final de curso