Creating a Basic ReactJS Home Page: A Beginner’s Guide

react

In this tutorial, we’ll create a simple ReactJS project with a basic home page. We will use create-react-app to set up the project, and then we'll create a simple home page with a header, some text, and an image.

Prerequisites:

• Node.js and npm installed on your computer. If you don’t have them, you can download them from https://nodejs.org/.
• Basic understanding of HTML, CSS, and JavaScript.

Step 1: Set up the project

1. Open your terminal or command prompt and run the following command to install create-react-app globally:

npm install -g create-react-app

1. Create a new React project by running:

create-react-app simple-react-homepage

1. Navigate to the project directory:

cd simple-react-homepage

1. Start the development server:

npm start

Your default web browser should automatically open with the default React app at http://localhost:3000/.

Step 2: Clean up the default project

1. Open the project folder in your favorite code editor.
2. Delete the src/App.css, src/App.test.js, src/logo.svg, and src/setupTests.js files, as we won't be using them.
3. Update the src/App.js file to remove the references to the deleted files, and replace the content with the following code:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

1. Update the src/index.js file to remove the reference to the deleted src/App.css file.

Step 3: Create the home page

1. Create a new folder inside the src folder called components.
2. Inside the components folder, create a new file called HomePage.js.
3. Open the HomePage.js file and add the following code:

import React from 'react';

const HomePage = () => {
  return (
    <div>
      <header>
        <h1>My Simple React Home Page</h1>
      </header>
      <main>
        <p>Welcome to my simple React home page! This is a basic example of a React project.</p>
        <img src="https://via.placeholder.com/300" alt="Placeholder" />
      </main>
    </div>
  );
}

export default HomePage;

1. Import and use the HomePage component in the src/App.js file:

javascriptCopy code

import React from 'react';
import HomePage from './components/HomePage';

function App() {
  return (
    <div>
      <HomePage />
    </div>
  );
}
export default App;

Now, if you look at your browser, you should see the simple home page with a header, some text, and a placeholder image. Congratulations! You’ve successfully created a simple React project with a home page.