Cómo crear un sitio web con Reactjs y Gatsbyjs

Para crear o desarrollar un sitio web, existen múltiples frameworks y tecnologías que ofrecen las herramientas necesarias a los desarrolladores, entre estos destacan GatsbyJS y ReactJS, dos tecnologías que trabajan con el lenguaje JavaScript.

¿Qué es Gatsby? En su página web oficial, lo definen como: “Gatsby es el marco rápido y flexible que hace que la creación de sitios web con cualquier CMS, API o base de datos sea divertida nuevamente. Crea e implementa sitios web sin cabeza que generen más tráfico, conviertan mejor y obtengan más ingresos”.

React o ReactJS es un marco de JavaScript que permite a los desarrolladores crear interfaces de usuario de forma rápida y eficiente mediante la inclusión de archivos Java en su HTML. Es una de las bibliotecas de Java más populares del mundo y es utilizada por enormes plataformas como Netflix, Airbnb e incluso Walmart.

Desarrollar un sitio web con GatsbyJS y ReactJS

En un tutorial, compartido por el portal especializado Medium, ofrecieron una guia para desarrollar un sitio web utilizando Gatsby y React. Primero, instalamos Gatsby ingresando este comando en nuestra terminal:

$ npm install -g gatsby-cli

Luego creamos el proyecto:

$ gatsby new website

El siguiente paso sería entrar a la carpeta y fijar la versión de Nodejs utilizada para crear el sitio web y tener más control de las dependencias y flujo de trabajo:

$ cd website
$ echo "8.11.0" >> .nvmrc && nvm use

Luego, para utilizar el hot-reloading que tiene integrado GatsbyJS, se corre nuestro servidos y abrilos la página que nos pide: 

$ gatsby develop
// También se puede utilizar npm o yarn
$ yarn develop
$ npm start develop
// Nos dará al finalizar las siguientes líneas
You can now view gatsby-starter-default in the browser.
http://localhost:8000/
View GraphiQL, an in-browser IDE, to explore your site's data and schema
http://localhost:8000/___graphql
Note that the development build is not optimized.
To create a production build, use gatsby build

Después de esto, ya se puede visualizar desde la terminal nuestro sitio web inicial:

Al dar click en el enlace que aparece al inicio, se puede ver las rutas definidas:

Como pudiste notar, en la ruta aparece escrito localhost:8000/page-2, algo que ahorrará trabajo cuando toque crear las rutas, debido a que GatsbyJS lee el directorio src/pages dentro de la raíz y agrega las rutas de manera automática que están en el proyecto:

src/
  pages/
    index.js
    page-2.js
    404.js

Añadir una página extra al sitio web

Dentro de la carpeta pages debes agregar el archivo nosotros.js, con el contenido:

import React from 'react'
import Link from 'gatsby-link'
const NosotrosPage = () => (
  <div>
    <h1>Hola desde nosotros</h1>
    <p>Bienvenido a la página de nosotros</p>
    <Link to="/">Regresa al inicio</Link>
  </div>
)
export default NosotrosPage

Se creó un componente que lleva por nombre NosotrosPage, para que Gatsby lo registre y pueda saber de qué se trata. La línea import Link from ‘gatsby-link’ deja que utilicemos el componente Link para rutear el sitio web, se prueba abriendo localhost:8000/nosotros en el navegador. Debe mostrarnos la siguiente pantalla:

Con esto ya tenemos el sitio web creado utilizando Gatsby Js y React. 

Desarrollo Gatsby Js en Panamá

En Rootstack hemos trabajado con Gatsby Js en varios proyectos de nuestros clientes en Panamá y el resto del mundo, con esta tecnología hemos podido crear sitios web estáticos y de múltiples funciones. Esta útil herramienta también se puede integrar con otras tecnologías populares, como ReactJS, Webpack, GraphQL, ES6 moderno + JavaScript y CSS.

En la empresa la utilizamos para mejorar el rendimiento de la página web, al integrarla con Drupal y así agregar funcionalidades extras, lo que ha contribuido con la rapidez de la actualización de contenido y la experiencia del usuario. 

Te recomendamos en video