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

Tech Hub by Alex
2 min readMar 15, 2023
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.

--

--

Tech Hub by Alex

Software engineer. Passionate about DevOps, full stack development and blockchain. Enjoy coffee and economics.