NextJS: Login en GitHub con Firebase y más Styled JSX
Sigue así. Cada lección te acerca más a tu certificado.
Sobre esta lección
Para avanzar en nuestro clon de Twitter vamos a empezar a crear los primeros componentes con Styled JSX y afinar el diseño de nuestra aplicación con un diseño mobile-only. Y avanzaremos también en el login, para que el usuario tenga que iniciar sesión con GitHub. Veremos cómo lo manejamos en nuestra app de NextJS. REPOSITORIO 📝: https://github.com/midudev/curso-nextjs-twitter-clone SEGMENTOS 📹 00:00 - Bienvenida y presentación de la clase y recursos 03:35 - Diseño mobile-only 04:55 - Instalando la última versión de NextJS 06:55 - Extensión vscode-styled-jsx para usar con styled jsx 09:53 - Creando la carpeta styles para extraer los tokens del theme 12:32 - Creando el fondo con CSS y background radial gradient 20:12 - Caja flotante para el contenido de la app usando display grid 26:37 - Extrayendo estilos de styled jsx a un fichero externo 29:50 - Extrayendo estilos globales de styled jsx 32:48 - Preguntas y respuestas I 38:57 - Añadiendo el logo de nuestra app y creando la home 44:15 - ¡Truco! Crea un archivo en VSCode dentro de una carpeta fácilmente 44:55 - Creando el componente Button 48:05 - Transformar un SVG a un componente de React 52:06 - Estilar en styled jsx elementos que son children 56:19 - Preguntas y respuestas II 01:00:00 - ¿Cuándo usar div y cuándo usar React.Fragment? 01:01:36 - Diferencias entre em y rem 01:02:59 - ¿Qué es Firebase? 01:04:59 - Iniciando nuestro proyecto de Firebase y GitHub Auth 01:10:52 - Registrando nuestra app en Firebase y obteniendo la config 01:12:13 - Instalando y añadiendo Firebase en nuestra app de React 01:18:04 - Login en GitHub al hacer click en el botón 01:25:27 - Problema de Firebase y React Fast Refresh 01:28:00 - La estrategia de carga del contenido que seguiremos 01:29:40 - Mostrar el botón de Login sólo cuando es necesario 01:49:40 - Preguntas y respuestas III -~-~~-~~~-~~-~- ¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore" https://www.youtube.com/watch?v=8ZA2p1SBssk -~-~~-~~~-~~-~-
Sobre este curso
Vamos ido construyendo paso a paso y desde cero un clon de Twitter usando NextJS, el framework de React de Vercel, y Firebase.
Lo que aprenderás en este curso:
- Dominar la sintaxis moderna de JavaScript (ES6+)
- Manipular el DOM y gestionar eventos del navegador
- Trabajar con funciones asíncronas, promesas y APIs
- Implementar estructuras de datos y algoritmos en JavaScript