100%

Lets build a site using gatsbyjs!

✓ Published0🌍 Public

Last edited Apr 26, 2018

Created on Apr 26, 2018

This example builds a GatsbyJS site using React, demonstrating how to scaffold and develop a static site with the Gatsby framework. It covers project initialization and dependency management with the Yarn and npm package managers, showing both basic commands and development workflows. The repo links to supporting libraries including Prettier for formatting, Standard for linting, and UIkit for styling, as well as deployment options like GitHub Pages and Surge.

AI-generated description

Lets build a site using gatsbyjs!

Requirements

Node.js

You can get nodejs through

Your favorite node package manager

npm (included with node)
yarn (I will be using)

Your favorite editor

yarn/npm commands

new bare project

yarn init
npm init

add dependency

yarn add <dep>
npm -i <dep>

add dev dependency

yarn add -D <dep>
npm -i -D <dep>

run script listed in package.json

yarn run <script-name>
npm run <script-name>

Links to stuff used

Similar vizzes

Loading thumbnail…

React Starter

A React starter template renders the text “Hello React” in a blank browser window. The example demonstrates the minimal setup required to integrate React with a visualization gallery, using `ReactDOM.render` to mount a functional component into a `#root` div. It loads React 16.9.0 and ReactDOM from CDN links in `index.html`, with the main logic contained in `index.js`. The code shows no data or interactive behavior, serving solely as a foundation for building React-based examples within the gallery.

SSabin Bhandari

67% match

Loading thumbnail…

React Starter

This example demonstrates the minimal setup for a React application that renders a static “Hello React!” message inside a web page. It uses the React and ReactDOM libraries loaded from a CDN, with an `index.html` file that includes the root `<div>` and a compiled `bundle.js` script. The `index.js` file defines a simple functional component and calls `ReactDOM.render` to mount it into the `#root` element, showing how to wire React’s declarative components into an HTML page.

DDeborah Ong

67% match

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders static text, serving as a starter template for integrating React with D3. The code loads React, ReactDOM, and D3 v6 from a CDN, then uses ReactDOM.render to mount a simple component displaying “Hello React!”. It establishes the foundational structure of a D3-based React project without implementing any data visualization logic, making it a starting point for developers building charting applications.

JJohn Huang

67% match

Loading thumbnail…

React Starter

This example demonstrates a minimal React setup that renders a static message to the webpage. It shows the basic structure of an HTML file loading a bundled JavaScript file, which uses `document.getElementByID` to target a paragraph element and assign the text "hello world" via the `textContent` property. The code relies on React and a bundler like webpack to compile the `index.js` file into `bundle.js`. The visualization is not data-driven but rather a simple proof-of-concept for integrating React in a front-end workflow.

Jjmcgough31

67% match

Loading thumbnail…

React Starter

This example demonstrates minimal setup for a React application that includes D3.js. The `index.html` loads the d3.v5 library from a CDN, and `index.js` defines a React component that renders a simple paragraph saying “lets”. The code uses `ReactDOM.render` to mount the component into the `#root` div, but does not yet use any D3 functionality. It serves as a starting point for integrating D3 visualizations into a React component structure, with the `bundle.js` file referenced in the HTML indicating a build process.

Ffnfbraga

67% match

Loading thumbnail…

Untitled

This example demonstrates a minimal React starter page that renders a static HTML document. It uses CSS for basic styling and JavaScript for dynamic behavior, though the visible output is a simple layout with a title and paragraph. The framework leverages React’s component-based structure, but currently shows no interactive visualizations or data-driven graphics. The code references a bare-bones HTML structure, with no external libraries like D3 or Three.js, focusing instead on foundational web technologies. It serves as a clean template for building more complex React applications.

Aarjun-lab663

66% match

Loading thumbnail…

Untitled

This example demonstrates a minimal React-powered HTML page that combines CSS styling with JavaScript functionality. It showcases the fundamental structure of a web application using the React library, with index.html serving as the entry point and README.md documenting the setup. The code directly imports React components and renders them into the DOM, illustrating how React manages UI state and updates without requiring additional visualization libraries. No specific data visualization technique is applied; instead, the focus is on establishing a basic React project scaffold as referenced by the React Starter example.

SSomu1433

66% match

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React” inside a web page. It uses React 16.9 and ReactDOM to mount a single functional component into a root `<div>` element. The rendering approach relies on `ReactDOM.render()` with a JSX component, while the HTML file loads the React libraries from a CDN and references a compiled `bundle.js`. No data source or visualization is present beyond the static text output.

Jjulesgentry

66% match