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: https://www.gatsbyjs.org/docs/add-seo-component/

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.