Learning By Doing— Use Gatsby to Create your First Site
Tags: gatsby, react, beginners, javascript
Published: 2021-07-20 11:59:36

Last week, our company launched a new project, it is set up with Gatsby — React (frontend), Laravel (backend), SQL (database).

In the beginning, I thought I would have a headache because, with my 1-year coding experience, I had only heard about GatsbyJS but never really worked with it deeply. But after reading the official docs patiently, I found that it was not as complicated as I imagined.

I want to share the basic steps in this article because everything must start with building a solid foundation.

*From a technical point of view, GatsbyJS is a hybrid system of React, react-router, webpack, babel, and GraphQL to achieve a complete separation of the data - and the UI layer to create a fast website without losing the modern front-end development model of SEO.*

1) Install Gatsby CLI via npm globally by running

>npm install -g gatsby-cli

2) Create a Gatsby site from a starter

>gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

3) Go to director and Start the development mode

>The command **gatsby develop** starts a development server.

Open up your browser and navigate to **http://localhost:8000/**
![1_P2FU5DDn7OusBmQT9C67zQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4xwspnxkj6ogpkrzwyp.png)

🙌🏻 Yup!🙃

In your code editor, take a look at the different directories and files contained in the ‘HELLO-WORLD’ directory (sorry about my screenshot with the half-hidden text). It should look something like this:
![1_dgjulvV2KfhhVqHNZoLBXA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htdxbwqdtiv3enrw6457.png)
>VS code screenshot
  
Now go to **pages/index.js** and change **“Hello world!”** to “Hello you!”, save the file and you should see that changes are reflected almost instantly in the browser.

Gatsby uses **hot reloading** to speed up your development process. Essentially, when you’re running a Gatsby development server, the Gatsby site files are being “watched” in the background — any time you save a file, your changes will be immediately reflected in the browser.
Let’s add an image, this page is too boring 🌨
![1_JZzmp69ZL366Z0-EaqYv8A](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k78is7mn4xn07lmp5jly.png)
>In this case, a random image from Unsplash

Save the file: 
![1_7Pe8EtiClTW3igWRVQhrXg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fjpvk0tn1cx8ylko15v.png)
 

>This is what you should see ⭐️

Yeah! A small success! 🌸

Now, let’s using **Page components**（🌈 The premise is that you are familiar with the basic structure of **React**).

Any React component defined in **src/pages/*.js** will automatically become a page, in our case **pages/index.js** is the **default page.**

4) Create a new file “secondPage.js” at src/pages and write some simple code like below, save it.
![1_SU-0zEMP1JGXoaJ5A-k6lQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpfezebqn0uqnxe18cy0.png)
 

>This is our second page

Let’s say the default page and the second page both got quite large and you were rewriting a lot of things. You can use **sub-components** to break the UI into reusable pieces. Both of your pages may contain a **header** — create a component that will describe a **Header.** 👇

5) Create a “components” folder at /src, then a “Header” folder within it, which contains a “Header.js” file

*(I am used to creating files with the same name in each folder, so that it’s simple and clear, for example, Header.js and Header.module.scss inside the Header folder…)*

6) Give the Header some text
![1_B3PoJYGn6bVppfDWFdlpTg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lflrrcb9lufej1hsw5rf.png)

>A very simple Header Component

7) Import this Header from page (/secondPage.js) like below
![1_J1rl9XoFcPhMJm7jdIpqBQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1pfhdq83b6nsk1ec9mh.png)

>Import Header Component from page

Now our second page is updated! 💫
Please ignore the inline style here, I generally do not recommend using it. Instead, using **scss module** for each file would be much better, but in this case, just keep it simple with inline style. ⭐️ 
![1_I0W5IMr4COyJX4pmTGu5wA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lyynepihs5cac1e6wlu.png)

>Second page contains Header component which we created and imported

🌹 Yeah! Another tiny success! Now let’s play a bit with *props* in a React way.

8) Give the Header a “title” prop inside pages/secondPage.js like below
Ignore the **Link** for now. 
![1_iz05j71DuhsZvWGRGbWI0Q](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nor26p7b2be4neuip0my.png)
>Give a title prop to Child Header

9) Update Header Component in a React basic way
![1_zJOmkCjO-__OUv5BnTY1yg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcm2jx9bd9blqq71oozj.png)
>Using title prop from Parent secondPage

Save and see 🍭

![1_AVGuEaFqPJwdwTqm3gKB6A](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd2p7xt7oz1t8meb62n0.png)

That was easy! Now you could create more pages and sub-components and play around with props! 🔍⏱⏳ … 

Remember we had a **<Link />** component which we ignored before at step 8? That is what we want to discover now, it is used to link between pages.

**👉 Important!** The Gatsby <Link /> component is for linking between pages within your site. For external links to pages not handled by your Gatsby site, use the regular HTML **<a>** tag, or you could try it and take a look at the error in the console.

10) Open the index page component (src/pages/index.js), import the <Link /> component from Gatsby, and give it a “to” property with the value of "/secondPage" for the pathname.
![1_7eeQe8zdfXYNYmzabARSAA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dycbh6h96ut9y2aliwj.png)
>Import Link from Gatsby

Now the **default page** should look like this ( I gave the **Header** another **title prop** which contains **“Default page”** and pink colour to make it clearer).

![1_BKVjRRblSXSERt8T-GIxnw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqkh0ne55j6xdry5kthb.png)
 
>Click on the link at the bottom, you will be linked to your second page which we created before
 
🎢 You can add the Link on your second page which maybe links to the default page, see screenshot at step 8.
![1_OJrH4zzoFjWO8E1Aj1LQ3w](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rls5cfulat2t6e2vtewp.png)
>Click on the link at bottom, you will be linked to default page

**💎 That’s it! We created two simple pages that can be linked to each other, there is not much styling, but that is out of scope in this article.**

But wait … just bear in mind, a website has four parts: HTML, CSS, JavaScript, and **DATA** — “everything that lives outside a React component”.

Often, we want to store data **outside** components and then bring the data into the component as needed. Data can live in file types like **Markdown**, **CSV**, etc. as well as **databases** and **APIs** of all sorts.

📝 There are many options for loading data into React components, one of the most popular and powerful of these is **GraphQL** which I’m learning currently.

The following are some of my thoughts in the current in-depth study. Below is just a brief introduction. I will try to introduce their usage in the next article.
There are two commonly used configuration files:

📍 /gatsby-config.js is basically used to configure two things:

- siteMetadata puts some global information, which can be obtained through GraphQL on every page, like a constent title …
- plugins configuration plugins, this can be obtained according to the plugin documentation when used

📍 /gatsby-node.js can call Gatsby node APIs to do some automation.

There are generally two common scenarios:

📍 Add additional configuration, such as generating a custom path for Markdown articles.

📍 Generate page files other than /src/pages, such as generating page files for each Markdown article.

The purpose of sharing those steps was to make my thoughts clearer and understand the basic usage of Gatsby, and I am still continuing to learn.

Thank you very much for taking the time to read this article！

If there is something that needs to be corrected, please contact me, I will be very glad to improve them!