Usando React para manejar la parte visual e interactiva de nuestra aplicación

Clase 9 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Resumen

¡No olvides instalar styled-components!

npm install --save styled-components

Screen reader support enabled.

Juan Castro

teacher•

Este código:

export { default as X } from '...';

Es equivalente a este otro:

import X from '...';

export { X };

¡Solo es un atajo! :grimacing::wink:

GEORGIE WLADIMIR DUARTE CADENAS

student•

lo que no entiendo es porque es necesario en el archivo index, si cuando esta declarando el componente ya esta haciendo el export default

Juan Castro

teacher•

@GeoD En este artículo se explica muy bien: https://medium.com/hackernoon/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed. :wink:

Cesar Galindo

student•

Si alguien le aparece este mensaje

Error in "/Users/home/Documents/Desarrollo/gatsby/Gatsby-platzi/node_modules/gatsby-plugin-manifest/gatsby-node.js": Cannot find module 'gatsby/dist/utils/create-content-digest'

recomiendo eliminar el node_modules y package-lock y reinstalar, aunque según Kyle (creador de Gatsby) es mejor utilizar yarn

Gera Meraki

student•

Si el proyecto no les compila cuando usan el comando

gatsby develop

Hay que borrar la carpeta node_modules y el archivo package-lock.json y volver a instalarlos con el comando

npm install

volvemos a levantar el servidor y listo

William Meza

student•

Prueben eliminar el package-lock.json y la carpeta node_modules si tienen error en instalación

Rafael Soriano Ramírez

student•

¿se puede integrar typescript en Gatsby?

Korpi delfin

student•

Te dejo la documentación que muestra cómo integrarlos :D

Javier Romero

student•

no entiendo porque me sale así, vean la imagen por favor

Danelia Sanchez Sanchez

student•

Lo que me está gustando de Gatsby es que al guardar cambios, automáticamente se reflejan en el navegador.

Rafael Soriano Ramírez

student•

Aunque previamente en la carrera de React se han visto algunos temas de todo lo que compone Gatsby, sería importante recalcar algunos y sugerirlos como tema de estudio, a lo que voy viendo el proyecto incluye:

styled components
graphql
pretier Sería bueno ahondar en estos temas de manera resumida o al menos referencial.

John Alexander Agudelo Galeano

student•

El component SEO es del core de Gatsby?

Daniel Páez

student•

No, es un componente que configuras usando librerias como react-helmet con lo cual puedes modifcar el title, description y meta tags de tu página. Viene por defecto en algunas plantillas de gastby pero no es nativo.

Te dejo documentación:

andrés eduardo betancourt bescanza

student•

Si les aparece la imagen media cortada vayan a styles/components y en StyledJumbo en la parte de &:before: borren el border-radius y top

Carlos Gelvez

student•

a mi me funciono quitando el transform: rotate(-19deg);

Ernesto Briceño

student•

Es importante aprender Styled Components para estilizar nuestro sitio

Ezequiel Luján Escobar

student•

Me sale este erro al ejecutar gatsby develop Error: error:0308010C:digital envelope routines::unsupported

Ezequiel Luján Escobar

student•

Como soluiono este error al ejecutar gatsby develop

andrés eduardo betancourt bescanza

student•

Cual es la funcionalidad del componente index.js? Porque no se importacta Jumbo directamente desde la pages de index.js?

Javier Romero

student•

alguien de ustedes me puede enseñar un plugin del editor que me ayude a autocompletar el código de jsx en Gatsby ? Gracias espero respuestas.

Erik Elyager

student•

Yo he visto que lo que hacen es darle soporte de emmet al JSX, algo así.

Josueth Acevedo

student•

Hola, buen curso,

La dependencia Style Component me dispara un error en la consola. Voy avanzar sin este plugin para ver que pasa.

Juan Castro

teacher•

¿Qué error te muestra? Puedes mostrarnos y te ayudamos a encontrar una solución. :muscle:

Rob Arroyo

student•

¿Este error se muestra al darle estilos a un componente o al instalarla?

David Flores Medrano

student•

Cuál es el snippet para crear rfc ??

Ricardo Kevin

student•

es una extension de vscode, no recuerdo el nombre completo pero tiene react/graphql/ algo más algo largo, esa extensión te da esos snippets

andrés eduardo betancourt bescanza

student•

Aqui lo tienes.

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

Jaime Fernando Ordóñez peña

student•

Para los que le salen **error ** al aplicar el gatsby develop deben **actualizar ** las dependencias de los plugin en el pakage.josn

Omar Leal

student•

Si al momento de compilar les salta el mensaje en consola de System limit for number of file watchers reached, pueden solucionarlo con la siguiente línea de comando:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Bernardo Ayala Montezuma

student•

¿A alguien más le pasa esto al ejecutar gatsby develop?:

Juan Diego Silva Garcia

student•

Coloca el trace de la consola, al parecer no encuentra el componente Jumbo en el objeto IndexPage o te falta dependencias de React si es así debes ejecutar $ npm i o yarn install

Omar Fernando López Olivas

student•

Al parecer el IndexPage no tiene un export default.

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Introducción a Gatsby

¿Por qué Gatsby? Seguridad y Velocidad

¿Qué es Gatsby?

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

Requisitos previos y herramientas de desarrollo

Gatsby y Gatsby CLI y Starters

Configuración de ESLint

Fundamentos de Gatsby

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

Ecosistema de plugins

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

Router en Gatsby y Componente Link

Layout en Gatsby

Graphql en Gatsby

¿Cómo funciona GraphQL en Gatsby?

Accediendo a nuestros datos en Gatsby desde GraphQL

Queries, Edges (conexiones) y Nodos en Gatsby

Consultas en GraphQL desde React

Usando plugins en Gatsby

Instalación y configuración de plugins

Imágenes como fuente de datos

Plugins de transformación

Estilizando nuestros componentes con styled-components

Estilos Globales con styled-components

Stripe checkout

Introducción a la API de Stripe Checkout

Agregando productos a nuestra tienda en línea

Productos en React

Generando páginas programáticamente

Creando páginas en función de los datos

Manejo de Gatsby Templates

Terminando la Vista de Detalle de los Productos

StaticQuery vs. useStaticQuery

Construyendo el Carrito de Compras: useContext

Construyendo el Carrito de Compras: Vista

Construyendo el Carrito de Compras: Agregar productos al carrito

Comprando productos

Gatsby a producción

Gatsby build para compilar nuestro proyecto

Deploy a Netlify