Gatsby es un marco gratuito y de código abierto basado en React que ayuda a los desarrolladores a crear sitios web y aplicaciones increíblemente rápidos. Los sitios de Gatsby son aplicaciones React completamente funcionales, por lo que puede crear aplicaciones web dinámicas que sean rápidas, receptivas y seguras.
Crear una nueva aplicación Gatsby
Paso 1: Ejecute el siguiente código en la terminal para crear un nuevo sitio de Gatsby.
npm init gatsby
Asigne el nombre ‘gfg’ al proyecto de aplicación.
Paso 2: muévase a la nueva carpeta ‘gfg’ usando el siguiente comando.
cd gfg
Estructura del proyecto:
¿Qué son los diseños?
En diseño gráfico, el diseño de página es la disposición de los elementos visuales en una página. Cuando se trata de crear un sitio web, uno de los aspectos más importantes es el diseño. El diseño de su sitio web determinará qué tan fácil es para los visitantes navegar y encontrar la información que buscan.
Independientemente del tipo de diseño que elija, es importante recordar que su objetivo es facilitar que los visitantes encuentren la información que buscan. Al usar un diseño claro y fácil de navegar, puede asegurarse de que su sitio web sea exitoso.
Diseño de página compartida
En Gatsby, puede crear fácilmente un diseño de página y usarlo en diferentes páginas. Esto ayudará a los desarrolladores a trabajar rápido sin repetir el mismo código una y otra vez.
Para crear un diseño compartido, crearemos una nueva carpeta llamada ‘componentes’ dentro de nuestro directorio src. Dentro de la carpeta ‘componentes’, cree un nuevo archivo llamado ‘layout.js’ con el siguiente contenido.
Layout.js
import React from "react"
export default function Layout({ children }) {
return (
<div>
<h3>This is the content of the shared layout file.</h3>
{children}
</div>
)
}
Ahora usaremos este diseño en nuestra página de inicio. Así que agregue el siguiente contenido en el archivo ‘index.js’.
index.js
import * as React from "react"
import Layout from "../components/Layout"
const IndexPage = () => {
return (
<main >
<Layout>
<h3>GeeksforGeeks - This is page content</h3>
</Layout>
</main>
)
}
export default IndexPage
Ejecute la aplicación: use el siguiente código en la terminal para iniciar la aplicación.
npm run develop
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA