NextJS: Login en GitHub con Firebase y más Styled JSX
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
-~-~~-~~~-~~-~-
Видео NextJS: Login en GitHub con Firebase y más Styled JSX канала midudev
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
-~-~~-~~~-~~-~-
Видео NextJS: Login en GitHub con Firebase y más Styled JSX канала midudev
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Creando la página Home y configurando ESLINT y PRETTIER en nuestro proyectoEntrevista a GUILLERMO RAUCH, CEO de Vercel ▲ 💬Aprendiendo NextJS, el framework de React con Server Side RenderingMis DESASTROSOS inicios en la PROGRAMACIÓN 😱 - ¿No sirvo para programar? (Experiencia REAL)💬 ¡Descubre las TENDENCIAS en CSS! Hablamos de STATE of CSS 2020 🖼NextJS + Firebase Tutorial 🔥 // Hooks, Firestore, Authentication & Functions!💥 FRONTEND 2021 y Desarrollo Web [Tecnologías, lenguajes de Programación y Tendencias]Cómo hacer un login con Passport y Node.js - TutorialCómo usar React.memo, mejorar el rendimiento y hacer deploy con Vercel de nuestra app de ReactRedux Thunk, middleware para tratar código asíncrono en React Redux (FullStack Bootcamp JavaScript)TESTING en REACT 🧪 ¡Aprende DESDE CERO! Con react-testing-library y Jest (FullStack Bootcamp JS)Subiendo imágenes a Cloud Storage y creando un Timeago de forma nativa sin Moment.jsRutas dinámicas y Data Fetching con NextJS y usando Firebase Admin 🔥CSS en JS y Styled Components con Emotion y ReactRedux desde cero - ¡Primeros pasos e introducción a Redux en español! (FullStack Bootcamp)Mi Espacio de Trabajo 👨💻 como Desarrollador Web 🖥 + Setup de Youtuber (Studio Tour 2020)Create Login Form, Handle Post Request on Server in Next.jsJWT + Next.js Authentication Demo: Master Next.js Tutorial #17Formularios y Action Creators 🎒 en Redux (FullStack Bootcamp)