Learn GatsbyJS by creating a tourism site -1
Tags: gatsby, react, javascript, webdev
Published: 2019-11-27 05:01:23

After creating two series with GatsbyJS — [Agency site](https://dev.to/nabendu82/creating-an-agency-site-in-gatsbyjs-1-1mdd) and [Blog Site](https://dev.to/nabendu82/creating-blog-site-using-slackbit-gatsbyjs-and-dev-1-55f0), i wanted to learn more about this awesome tech.

I found [this](https://www.udemy.com/course/gatsby-tutorial-and-projects-course/) awesome series on udemy by **John Smilga** and this huge series is based from the learning from his course.

I will be creating a site about the awesome World Heritage place in India, known as Hampi.

Let’s head over to a terminal and create a new gatsby project called **gatsbyTourism**, using the hello-world starter kit.

![Gatsby Start](https://cdn-images-1.medium.com/max/2880/1*f7akmT9eTYQVdnt8BuEIQA.png)*Gatsby Start*

Next, we will change to the directory and do gatsby develop, to start our project on localhost.

![gatsby develop](https://cdn-images-1.medium.com/max/2880/1*oKLcHQwAmahhEONPQdq2Lg.png)*gatsby develop*

It will start our basic hello-world starter, which will just show Hello World! on [http://localhost:8000/](http://localhost:8000/)

![Hello World](https://cdn-images-1.medium.com/max/2880/1*SWYRB8unqElnKc8wDEQFNw.png)*Hello World*

We will open our code in VSCode. Here, we can see that the **Hello World!** displayed in browser comes from **index.js** inside **src->pages**.

![pages folder](https://cdn-images-1.medium.com/max/2880/1*5S9mgvGXMfuNYxGuhG9xtw.png)*pages folder*

Now, any page which we create inside pages folder will become a endpoint in the browser. We don’t have to implement anything like react-router here.

We will create four pages required by our project — blog, contact, places, 404

![pages](https://cdn-images-1.medium.com/max/2880/1*TJFFBbmyZKvKHeFXVi9Vjw.png)*pages*

We can make them any type of React component, but we will make them functional components as of now for consistency.

The **index.js** and **404.js** are special pages and are displayed in home and error.

We will create the **404.js** first and then move to any non-existent page.

![Error Page](https://cdn-images-1.medium.com/max/2880/1*6CePp703oBBa_OP8aET9kg.png)*Error Page*

Moving to an non-existent page will show below.

![Preview page](https://cdn-images-1.medium.com/max/2880/1*zHeRHc9WuC_451X3lyBhcA.png)*Preview page*

On clicking on the **Preview custom 404 page**, we will get our error page.

![Error page](https://cdn-images-1.medium.com/max/2880/1*Vn-v_0v34Je64Q8IfkBz-Q.png)*Error page*

We will create the blog page next.

![Blog page](https://cdn-images-1.medium.com/max/2880/1*oODvKGsMvwSGaCIbFBEpOg.png)*Blog page*

Now, on moving to [http://localhost:8000/blog](http://localhost:8000/blog) we will see our blog page

![blog page](https://cdn-images-1.medium.com/max/2880/1*8buBnAXG2PXoma_EL6004w.png)*blog page*

We will create the **contact** and the **places** page in the similar manner.

![contact page](https://cdn-images-1.medium.com/max/2872/1*EAg-tMHSAo_RpPYuf41u8A.png)*contact page*

![places page](https://cdn-images-1.medium.com/max/2880/1*ZBSd4qTo2Dezpxy_LogT2Q.png)*places page*

Now, let’s have a **Navbar** and **Footer** component. We will make them inside a **components** folder, which will be inside **src** folder.

![Navbar.js](https://cdn-images-1.medium.com/max/2880/1*RNbdMtNltBFZ4uBbzDUCNQ.png)*Navbar.js*

![Footer.js](https://cdn-images-1.medium.com/max/2880/1*iMKd0uLL5IOb3kI1-9QLzQ.png)*Footer.js*

Now, the most common React way to show these two component on any page is to import them and show it. We will change our **index.js** as below.

![Showing Navbar and Footer](https://cdn-images-1.medium.com/max/2880/1*0e8DYOFto7Vt7eS1Lz0u7g.png)*Showing Navbar and Footer*

It will show them on the home page.

![Showing component](https://cdn-images-1.medium.com/max/2880/1*vCLXsxPDq9pGbcSM55EvBA.png)*Showing component*

Now, we can do this for every other page but Gatsby provides an easier solution. We will have a **Layout** component and include the **Navbar** and the **Footer** components there. We will be also passing the children props to the Layout component. It will be obvious in a minute on why we use it, after we use the Layout component in our pages.

So, create a **Layout.js** file inside **components** folder.

![Layout.js](https://cdn-images-1.medium.com/max/2876/1*H6V4UCR6m_oW7b_Xu61XtA.png)*Layout.js*

Next, let use it in our **index.js** file. As, you might have noticed that the **Layout** component is wrapping all the other thing, which is only **Hello World!** now. This only is the **children**, which is the props been passed to the Layout component.

![index.js](https://cdn-images-1.medium.com/max/2880/1*z2xvDyrOIHS26xyCyMPSPg.png)*index.js*

So, our Home Page is still the same.

![Same Home Page](https://cdn-images-1.medium.com/max/2880/1*vCLXsxPDq9pGbcSM55EvBA.png)*Same Home Page*

Now, we can use the reusable component Layout in all our other pages and they will show **Navbar** and **Footer** components.

![blog.js](https://cdn-images-1.medium.com/max/2872/1*0d8mapBpPdBlfeIQT0Gqbw.png)*blog.js*

![places.js](https://cdn-images-1.medium.com/max/2880/1*K6FR0w3kQb8xYjdcsJ-RjA.png)*places.js*

![contact.js](https://cdn-images-1.medium.com/max/2880/1*ncHWxKNvOZbLEfqMOF3O1Q.png)*contact.js*

![404.js](https://cdn-images-1.medium.com/max/2880/1*X2tUl5FxvUoG-Atdbkyt1w.png)*404.js*

If we go to any other path also, we will see the **Navbar** and **Footer** present.

![blog](https://cdn-images-1.medium.com/max/2880/1*7bBivKOtbFiYnJLGHR-fhg.png)*blog*

This completes part-1 of the series. Hope you learned something new. You can find the code for the same in [this](https://github.com/nabendu82/gatsbyTourism) link.

See you soon in part-2.