Build a Basic React App

In this article, we will share with you how to create the 'Hello World' application in ReactJs. currently, in web development, many JS frameworks use for frontend and ReactJS is one of the very popular JS framework in market.

Before, write our first 'Hello World' application in ReactJs, we should first know how to create ReactJs application in our local system. don't worry just follow the link.

Create a New React App

Run the following command in your terminal to create a new fresh React.js application.

sudo npx create-react-app helloworldapp --use-npm

After done or create React.js application in your local system. application structure looks like bellow.

helloworldapp
├── build
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── .gitignore
├── package.json
└── README.md

After creating our new fresh project, the reactJS application structure looks like above. but now we change something in structure and delete all the files located in src folder. then our new ReactJS application structure looks like.

helloworldapp
├── build
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── index.js
├── .gitignore
├── package.json
└── README.md

Write the first Code

Now, open src/index.js file and write the following 'Hello World' code into the file.

// import the react and the reactDOM libraries
import React from 'react';
import ReactDOM from 'react-dom';

// Create react component
const App = () => {
	return <div>Hello World!</div>;
};

// Take the react component and show it on the screen
ReactDOM.render(
	<App />,
	document.querySelector('#root')
);

After done changes then how to run it? just run the following command in the terminal.

sudo npm start

We, hope it can help you.