Build a Responsive Website Using React, Gatsby and GraphQL with Animations

Learn how to build a responsive website using React, Gatsby, and GraphQL. We will use React hooks, Gatsby image, and styled components.

You can buy the full source code and videos below.

I recommend you understand the basics of React in order to follow along with this tutorial. If you've never used styled components before, then it might be difficult to follow along. If you find it difficult, you can check out their official docs or watch additional tutorials on styled components.

In order to get started, you will need to have the Gatsby CLI installed.

npm install -g gatsby-cli

Next, we will create a gatsby site using one of their default starter templates.

gatsby new react-gatsby-travel-v1 https://github.com/gatsbyjs/gatsby-starter-default

Next, we can navigate into the project.

cd react-gatsby-travel-v1

If you are using VS code and have the auto open set up, then you can type this to automatically open your code editor

code .

Then, we can start up the website by running the code below.

gatsby develop

Now you're ready to start coding.

We will use styled components to design this project. You can copy the line of code below to install styled components for Gatsby. I show everything in the tutorial, so you can add it during the video or install it now.

yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components

If you don't have yarn, you would replace "yarn add" with npm install.

Code not working?

Sometimes Gatsby doesn't update automatically when you add new code or refresh the page. If that happens, you can stop the server by typing the line below in your terminal.

ctrl + c

Then, you can run gatsby develop again.

gatsby develop

If that still doesn't work, you can try using this line.

gatsby clean

Then, run gatsby develop again.

I created a tutorial showing how I made the website on Youtube.

Watch the tutorial on Youtube here

Also, I'm documenting everything I'm learning and the projects I'm building on my Youtube channel. If you want to follow me along my coding journey, be sure to subscribe here

If you want to help support the channel, so I can continue making content, then you can purchase the full tutorial below. You will get access to the exact code used to create the site and the full videos.