Friday, November 15, 2024
Google search engine
HomeLanguagesBuild a Basic React App that Display “Hello World!”

Build a Basic React App that Display “Hello World!”

React is a Javascript Library that was created by Facebook for building better User Interface(UI) web applications and mobile applications. It is an open source library for creating interactive and dynamic applications.

In this article, we will see how to build a basic react app that shows hello world.

  • To create a react application, Node.js version of at least 10 or higher need to be installed on your system. If it is installed you can check by using the following command in your command line.
node -v 

  • Make sure you have a code editor for working on your project files.

Let’s create our first react application:

To build a react application follow the below steps:

Step 1:  Create a react application using the following command 

npx create-react-app foldername

It takes a couple of minutes to install the packages.

Step 2:  Once it is done change your directory to the newly created application using the following command 

cd foldername

Project Structure: It is created as shown below.

Project file structure

Step 3: Now inside App.js and write down the following code as shown below:

Javascript




import React from 'react';
import './App.css';
 
function App() {
    return (
        <h1> Hello World! </h1>
    );
}
 
export default App;


Step to run the application: Enter the following command to run the application.

npm start

Output: You will see the following output in your browser.

Congratulations,  you have created your first React app. You have learned something new today. Don’t stop learning Go ahead. Learn React.js

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments