React Website Using Styled Components and Smooth Scroll

Learn how I built this website in React using styled components and smooth scroll. We will be using React Hooks and React Router for this project.

You can buy the complete source code down below.

The main design of this website contains a video background as the hero section. The sections below contain reusable components where you can switch out the positioning of the image and text.

In order to start this project, you will need to create a react app.

npx create-react-app react-website-smooth-scroll

Then, you can cd into your project.

cd react-website-smooth-scroll

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.

I created a full step by step tutorial showing 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

Important Update: Video not playing on iPhone?

Note, some people noticed that the video isn't auto-playing on iPhones. If you have a newer iPhone, make sure to check if your phone is in low battery mode. If it is, then turn that off and try to view the video again.

If you have an older iPhone, then add this "playsInline" into the VideoBg component.

<VideoBg playsInline autoPlay loop muted src={Video} type="video/mp4" />

Once you add "playsInline" to the VideoBg component, it should autoplay the video.

If you want to help support the channel, so I can continue making free videos, then you can purchase the full source code below. You will get access to the exact code I used to create the React Smooth Scroll website.