React Website Using Hooks and Router with Reusable Components
Written by Brian
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
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)
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