Articles → REACTJS → Create Our First React.Js Application From Scratch

Create Our First React.Js Application From Scratch

In this article, we will create our first react.js application from scratch.

Create Your React.Js Project

First, create a new project using the following command.

npx create-react-app myfirstreactjsapp

Once the project is created, delete everything from the src folder.

Adding New File Inside The Src Folder

Inside the src folder, add a new file index.js. Inside the index.js, write the following code.

import React from 'react';
import ReactDOM from 'react-dom'

const element = <h1>Hello World</h1>;

ReactDOM.render(element, document.getElementById('root'));

Run The Application

Run the react application, you will get the following output

Picture showing the output of the first react.js application from scratch

Click to Enlarge

Render Method

In the above example, you have seen the render method. The purpose of the render method is to render the HTML to a web page.

The render method contains 2 parameters: -

JSX Code (converted to HTML code using Babel)
HTML element

The HTML element is the container to render the HTML code. In the above example

ReactDOM.render(element, document.getElementById('root'));

The element contains the JSX code and the root is the container where you will display the HTML code.

Posted By -	Karan Gupta

Posted On -	Wednesday, July 28, 2021

Updated On -	Tuesday, August 3, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**