Gatsby JS: De cero a experto
Aprende a crear webs estáticas e increíblemente rápidas con Gatsby, GraphQL, Strapi, MongoDB, y el uso de plugins.
5,00(4 valoraciones)
Creado por Agustin Navarro Galdon
Última actualizacion: 07/2022
Comenzar ahoraContenido del curso
Introducción3 clases
Introducción
PROYECTO: Curriculum Web
PROYECTO: Blog + Strapi + GraphQL
Preparación del entorno de desarrollo4 clases
Instalando Editor de Código
Extensiones para Visual Studio Code
Instalando Node JS
Instalando Yarn
Conceptos básicos de React JS16 clases
¿Qué vamos hacer en esta sección?
Introducción a JSX
Conceptos básicos de React JS
Creando nuestra primera app en React JS
Estructura de React JS
Nuestro primer Componente en React JS
¿Que son los Props de React?
Pasando props básicos entre componentes
Pasando variables y objetos entre componentes por los props
Pasando funciones entre componente por los props
El uso de la Asignación por Destructuring
Props por defecto
Template Strings
Usando React Developer Tools
Hook de estado - useState
Hook de efecto - useEffect
Conceptos básicos de Gatsby JS16 clases
¿Que es Gatsby JS?
¿Cómo funciona Gatsby JS?
Instalando Gatsby CLI
Creando nuestra primera app con Gastby
Revisando la estructura de un proyecto de Gatsby
Sistema de rutas en Gastby
Creando un Layout
Creando links para la navegación
React Helmet
Añadiendo CSS Global
Añadiendo SASS al proyecto
Obteniendo imágenes
Componente para obtener las imagenes
Componente de imagen dinamica
Trabajar con SVG
Empezamos con las Apps
PROYECTO: Curriculum web18 clases
Resultado final de la aplicación
Repositorio de la aplicación
Generando nuestra App con Gatsby CLI
Añadiendo React Bootstrap al Proyecto
Añadiendo SASS al proyecto
Creando el Layout de la app
Creando el menu web
Componente Profile
Añadiendo nuestro avatar
Datos personales
Componente Social Media
Componente About Me y Curriculum
Componente para mostrar Skills
Mejorando el componente ListSkills
Completando las skills
Porfolio de proyectos creados
Renderizando todos los proyectos
Compilando aplicación
PROYECTO: Blog + Strapi + GraphQL31 clases
Resultado final de la aplicación
Repositorio de la aplicación
Creando la base de datos en Mongo Atlas
Crenado el proyecto de Strapi
Conocimiento un poco Strapi
Habilitando GraphQL en Strapi
Creando el modelo para el blog
Cambiando el editor Rich Text por CKEditor
Habilitando GET en el model POST
Creando el proyecto de Gatsby
Conectando Strapi con Gatsby
Añadiendo SASS al proyecto
Creando las variables de SASS reutilizables
Añadiendo Semantic UI React
Creando el sistema de layouts
Creando el Menu
1/2 - Componente Social Media
2/2 - Componente Social Media
Listado de cursos
Obteniendo todos los post del blog
[EXPLICACIÓN] Creación de paginas dinámicas
Creando sistema de paginación
Obteniendo la lista de post de la página
Pintando la lista de posts
Formateando fecha de creación del post
Componente para movernos entre las páginas
Generando una pagina por entrada en el blog
Pintando la pagina del post
Renderizando el video de youtube
Aplicando estilos a la página del post
Añadiendo SEO a la web
Gatsby Avanzado1 clases
Modo Offline
Despliegues7 clases
Desplegando Strapi en Heroku
Conectando Gatsby al servidor de Strapi en Heroku
Subiendo el proyecto de Gatsby a GitHub
Desplegando Gatsby en Netlify manualmente
Desplegando Gatsby en Netlify desde GitHub
Actualizando la web con nuevos datos actualizados
Desplegando Gatsby en Netlify con un Push en GitHub
Comentarios de los estudiantes
5.0
Valoración del curso
Este curso incluye:
96 recursos educativos
Certificado de finalizazión
Consultas al tutor gratuitas
Compatible con todos los dispositivos
Compartir
Instructor del curso
Agustin Navarro Galdon
Frontend Developer
Soy un desarrollador de aplicaciones multiplataforma, mobile y E-Commerce con más de 7 años en el mundo del desarrollo de aplicaciones de todo tipo.
Valoraciones
No se ha escrito ningún comentario para la calificación que has seleccionado.