React Website Tutorial - Beginner React JS Project Fully Responsive

Introduction

In this tutorial, you'll learn how to build a fully responsive React website from scratch using React Hooks and React Router. This guide is designed for beginners and will walk you through the entire process, from setting up your environment to creating components and pages. By the end, you will have a functional website and the knowledge to customize it further.

Step 1: Create a React App

1. Open your terminal or command prompt.
2. Run the following command to create a new React application:

   npx create-react-app my-website
   

3. Navigate into your project directory:

   cd my-website
   

Step 2: Get the Source Files

1. Download the starter files from the GitHub repository provided in the video:
   • GitHub Source Code
2. Extract the files and place them in the src folder of your React app.

Step 3: Create the Button Component

1. In the src folder, create a new file named Button.js.
2. Define the Button component using the following code:

   import React from 'react';
   
   const Button = ({ text, onClick }) => {
       return (
           <button onClick={onClick} className="my-button">
               {text}
           </button>
       );
   };
   
   export default Button;
   

3. Style your button in CSS as desired.

Step 4: Create the Hero Component

1. Create a new file named Hero.js in the src folder.
2. Define the Hero component:

   import React from 'react';
   
   const Hero = () => {
       return (
           <header className="hero">
               <h1>Welcome to My Website</h1>
               <Button text="Get Started" onClick={() => console.log('Clicked!')} />
           </header>
       );
   };
   
   export default Hero;
   

Step 5: Create Your Pages

1. Create a new folder named pages in the src directory.
2. Inside the pages folder, create the following files for your pages:
   • Home.js
   • About.js
   • Contact.js
3. Define each page component similarly to the Hero component:

   import React from 'react';
   
   const Home = () => {
       return <div>Home Page Content</div>;
   };
   
   export default Home;
   

Step 6: Create the Card Components

1. Create a new file named Card.js in the src folder.
2. Define the Card component:

   import React from 'react';
   
   const Card = ({ title, content }) => {
       return (
           <div className="card">
               <h3>{title}</h3>
               <p>{content}</p>
           </div>
       );
   };
   
   export default Card;
   

Step 7: Create the Footer Component

1. Create a new file named Footer.js.
2. Define the Footer component:

   import React from 'react';
   
   const Footer = () => {
       return <footer>© 2023 My Website</footer>;
   };
   
   export default Footer;
   

Step 8: Replace Video Background with Image

1. Identify the section where the video background is implemented.
2. Replace the video tag with an image tag:

   <img src="path/to/your/image.jpg" alt="Background" className="background-image" />
   

Conclusion

You have successfully built a fully responsive React website! You've created essential components such as buttons, headers, cards, and footers while learning how to structure a React application. As a next step, consider customizing the styles and adding more functionality using React Router for navigation. Happy coding!