Gatsby JS: De cero a experto

Vamos a seleccionar un editor de código con el que programaremos todas nuestars apps.

Vamos a instalar extensiones en Visual Studio Code para mejorar la codificación.

Instalaremos Node JS de manera global.

Vamos a instalar YARN para poder instalar dependencias en nuestros proyectos.

Un resumen de lo que veremos en esta sección.

Veremos que es el JSX y por que es tan sencillo crear aplicaciones web con React JS.

Veremos como funciona React JS desde dentro.

Crearemos nuestra primera app con el comando create-react-app.

Veremos toda la estructura de una aplicación de React JS.

Crearemos nuestro primer componente y veremos todas sus partes.

Veremos una explicación de que son los PROPS de React y como funcionan.

Pasaremos props básicos de una componente a otro para crear componentes reutilizables.

Pasaremos variables y objetos por los props de nuestros componentes.

Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.

Veremos que es la asignación por destructuring y como no puede ayudar con el manejo de props.

Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.

Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.

Veremos que es la herramienta React Developer Tools y como nos puede ayudar en el desarrollo de aplicaciones.

Veremos el uso del hook de estado useState de React.

Veremos el uso del hook de efecto useEffect de React.

Vamos a ver que es Gatsby JS y para qué sirve.

Vamos a ver como funciona Gatsby y el fujo de datos que tiene.

Vamos a instalar Gatsby CLI para poder generar nuevos proyectos.

Vamos a crear un nuevo proyecto de Gatsby usando gatsby-cli

Vamos a revisar la estructura de carpetas y ficheros que tiene un proyecto de Gatsby.

Vamos a ver como funciona el sistema de rutas de Gatsby.

Vamos a crear nuestro propio layout

Vamos a ver como crear link para la navegación entre páginas.

Veremos como podemos potencia el SEO de nuestras web con React Helmet.

Vamos a ver como podemos añadir CSS de manera Global a nuestra app usando el fichero gatsby-browser.js

Vamos a ver como se pueden añadir ficheros de SASS a un componente de Gastby.

Vamos a ver como obtener las imágenes de nuestra app y optimizarlas.

Vamos ver como podemos usar las imágenes optimizadas que nos da Gatsby en nuestros componentes.

Vamos a crear un componente donde pasándole el nombre del fichero nos devuelva la imagen que hemos pedido.

Vamos a ver como podemos usar SVGs en nuesro proyecto.

Ya vamos a empezar con los proyectos.

Vamos a ver el resultado final de la aplicación.

Veremos donde podemos descargar el proyecto ya terminado para comparar el código.

Vamos a crear nuestra app usando Gatsby CLI.

Vamos a ver como podemos añadir una librería como React Bootstrap a nuestro proyecto.

Vamos a añadir SASS al nuestro proyecto.

Vamos a crear el layout que vamos a usar en toda la app.

Vamos a desarrollar el menú de nuestra app.

Vamos a crear el componente profile para añadir todos nuestros datos personales.

Vamos a añadir nuestro avatara al componente profile

Vamos a añadir los datos personales al compopnente Profile.

Vamos a crear un componente para poder añadir todas nuestras redes sociales.

Vamos a crear un componente para hablar un poco más sobre nosotros y poder descargar el curriculum en PDF.

Vamos a crear un componente para mostrar nuestras skills.

Vamos a mejorar el componente ListSkill para poder cambiar de color las barras etc...

Vamos a terminal de añadir todas la skills con diferentes props.

Vamos a crear una sección donde podamos mostrar todos los proyectos en los que hemos trabajado.

Vamos a crear la estructura de datos de los proyectos y los vamos a renderizar reutilizando el componente creado.

Vamos a compilar la aplicación para ver que todo funciona correctamente.

Vamos a crear nuestra base de datos en Mongo Atlas para poder guardar todo el contenido de nuestro blog.

Vamos a crear un proyecto de Strapi para usarlo para crear contenido para nuestra web.

Vamos a ver  un poco que tiene Strapi.

Vamos a habilitar GraphQL en nuestro proyecto de Strapi para poder usarlo y conectar con Gatsby.

Vamos a crear el modelo para el blog y poder crear posts.

Vamos a ver como podemos cambiar el editor de contenido que tare por defecto Strapi y añadir el CKEditor.

Vamos a crear el proyecto donde crearemos el blog.

Vamos a conectar el modelo de los post de strapi a gatsby para poder obtener todos los datos.

Vamos a añadir SASS al proyecto.

Vamos a crear el sistema de SASS para que tengamos variables reutilizables.

Vamos a añadir Semantic UI React a nuestro proyecto de Gatsby.

Vamos a crear el layout para nuestro blog.

Vamos a crear el menú lateral.

Vamos a crear el componente Social Media y así poder añadir nuestras Redes Sociales en el menú lateral.

Vamos a crear el componente Social Media y así poder añadir nuestras Redes Sociales en el menú lateral.

Vamos a crear un componente para poder listar nuestros cursos dentro del menu.

Vamos a obtener los post que hemos generado del blog.

Vamos a ver una explicación de como funciona la creación de páginas dinámicas.

Vamos a crear las páginas del blog dinámicamente para poder crear el sistema de paginación.

Vamos a obtener los post que pertenecen a la página que estamos visualizando.

Vamos a ver como podemos pintar la lista de posts en nuestro blog.

Vamos a usar Moment para formatear la fecha de creación del post.

Vamos a crear el componente paginación para poder movernos entre todas las páginas del blog.

Ahora vamos a autogenerar las páginas que tiene nuestro blog.

Vamos a pintar la página del post para poder mostrar los datos en el navegador.

Vamos a ver como podemos renderizar el video de YouTube que viene dentro del content.

Vamos a aplicar un poco de estilos a la página del post para que se vea mucho mejor.

Vamos a ver como podemos tener una web que funciones sin tener conexión a internet.

Vamos a desplegar nuestra app a Netlify de manera manual.