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