React Website Travel Website Design

Learn how I built this website in React using React Hooks and React Router.

We will be creating a travel design and I will show you how to add a video background as well as an image background. We will create reusable card components as well that you can pass in custom data. Feel free to refactor my code and make it better.

You can access the complete source code down below.

The cards we will create in this tutorial are reusable and receive data that we pass through them. This means we could generate 1000's of these cards without having to hard code each of them.

This is the first website tutorial that I created with React. If you want to see some of my newer React website designs utilizing additional features, then feel free to check them out on my Youtube channel. I will have a link to it below.

To get started, go ahead and create a new react app.

npx create-react-app react-travel-website

Next, navigate into your project

cd react-travel-website

If you are using VS Code, you can automatically open your code editor by typing this line in your terminal. (You will have to set this up prior if you haven't before)

code .

If you haven't set that up yet, you can simply google VS Code code . and there should be plenty of resources showing how you can add it.

Once you've done all that, you are ready to start coding.

I created a full video tutorial showing step by step how I created everything.

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