Загрузка страницы

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
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
1 августа 2020 г. 2:02:36
01:56:27
Другие видео канала
Creando la página Home y configurando ESLINT y PRETTIER en nuestro proyectoCreando la página Home y configurando ESLINT y PRETTIER en nuestro proyectoEntrevista a GUILLERMO RAUCH, CEO de Vercel ▲ 💬Entrevista a GUILLERMO RAUCH, CEO de Vercel ▲ 💬Aprendiendo NextJS, el framework de React con Server Side RenderingAprendiendo NextJS, el framework de React con Server Side RenderingMis DESASTROSOS inicios en la PROGRAMACIÓN 😱 - ¿No sirvo para programar? (Experiencia REAL)Mis DESASTROSOS inicios en la PROGRAMACIÓN 😱 - ¿No sirvo para programar? (Experiencia REAL)💬 ¡Descubre las TENDENCIAS en CSS! Hablamos de STATE of CSS 2020 🖼💬 ¡Descubre las TENDENCIAS en CSS! Hablamos de STATE of CSS 2020 🖼NextJS + Firebase Tutorial 🔥 // Hooks, Firestore, Authentication & Functions!NextJS + Firebase Tutorial 🔥 // Hooks, Firestore, Authentication & Functions!💥 FRONTEND 2021 y Desarrollo Web [Tecnologías, lenguajes de Programación y Tendencias]💥 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 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 ReactCó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)Redux 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)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.jsSubiendo 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 🔥Rutas dinámicas y Data Fetching con NextJS y usando Firebase Admin 🔥CSS en JS y Styled Components con Emotion y ReactCSS en JS y Styled Components con Emotion y ReactRedux desde cero - ¡Primeros pasos e introducción a Redux en español! (FullStack Bootcamp)Redux 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)Mi Espacio de Trabajo 👨‍💻 como Desarrollador Web 🖥 + Setup de Youtuber (Studio Tour 2020)Create Login Form, Handle Post Request on Server in Next.jsCreate Login Form, Handle Post Request on Server in Next.jsJWT + Next.js Authentication Demo: Master Next.js Tutorial #17JWT + Next.js Authentication Demo: Master Next.js Tutorial #17Formularios y Action Creators 🎒 en Redux (FullStack Bootcamp)Formularios y Action Creators 🎒 en Redux (FullStack Bootcamp)
Яндекс.Метрика