React Website Using Hooks and Router with Reusable Components

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

The main sections of the website are created with reusable components, so you can customize them and place them anywhere on your site. Feel free to refactor my code and let me know how to make it better.

You can access the complete source code down below.

The design of each section has an image and text. You are able to switch the position of the text and image using a data file. This makes it extremely easy to customize your site without having to repeat and hard code everything.

I used SVG illustrations for this design, but you are welcome to switch those out with regular pictures. I got my illustrations from a site called undraw.

If you plan on using images or want to find free images to use for your website, then you can google Pixabay, Pexels or Unsplashed.

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

npx create-react-app react-website

Next, navigate into your project

cd react-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 two hour 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