Build a React Restaurant Website using Styled Components

Learn how to build a simple React restaurant website using styled components and React hooks. The website is just the front end and is fully responsive. Feel free to refactor the code and add additional pages for the navigation links.

I've included the source code for this project down 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, simply create a React app in your terminal

npx create-react-app react-pizza-website-v1

Once it finishes loading, you can cd into your project.

cd react-pizza-website-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 .

Now you're ready to start coding.

You will need to install these dependencies for this project. I will show you how to do this in my video tutorial below, but if you'd like to install them early, you can copy the following lines of code in your terminal.

yarn add styled-components react-router react-icons

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

Random Errors?

I've noticed lately that React has been acting weird and showing errors on your browser for no reason. If that happens, try deleting your node_modules folder, then run either

yarn

Or run npm if you don't have yarn

npm install

and see if that fixes your issue. I showed this exact process in my tutorial on how I solved my error.

I created a full step by step tutorial showing exactly how I built this website.

Watch the full 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