Code360 powered by Coding Ninjas X Code360 powered by Coding Ninjas X
Last Updated: Mar 27, 2024

Getting started with React

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM


React.js is an open-source, frontend JavaScript library used to build UI components It was created by Jordan Walke, a software engineer at Facebook, in 2013.  React became famous because of the excellent community support, flexibility, improved efficiency, simplicity, and reusable components. Companies like WhatsApp, Facebook, Netflix, Instagram, etc., are currently using React for their products.

Are you confused about whether to learn React? Check out the blog ReactJS.

This blog will discuss the basic concepts for getting started with React, creating the React starter app, React folder structure, etc. We will also look into the working, features, advantages, and disadvantages of React.

Also See, Dropdown in React JS, Hooks in React JS

How does React work?

While building client-side apps, when any change is made, the whole model has to be changed. This made the process slow and cumbersome. To solve this issue, React uses something called virtual DOM(Document Object Model). Virtual DOM is the copy of the current version of the browser DOM. When any change is made, another virtual DOM is created, and a comparison is made between the previous and current virtual DOM. Then the virtual DOM will find the most efficient way to update the browser's DOM by changing only a few parts.



In the above example, only the h1 tag is changed instead of the whole DOM.


React elements are plain objects and are easier to create, unlike the browser DOM elements. React DOM takes care of the DOM manipulation to match the React elements. This is because JavaScript is very fast, and a DOM tree is kept in it to speed up its manipulation.

Explore our other blog, Complete Introduction to ReactJS - for a complete understanding of ReactJS.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job

Prerequisites before getting started with React

There are some prerequisites for getting started with React. We need to have NodeJS installed on the system to install React-based dependencies. An editor is also required to write the code, preferably VS Code.

Check out the blog 7 Best Open Source HTML & CSS Editors and select one of the editors suitable for you.

After installing NodeJS, check whether NodeJS was installed or not with the following command. It gives you the version if the NodeJS is correctly installed on the system.


Node version


Using React Directly in HTML

This is the quickest way to start with React. In this, three scripts are added to the head tag. Let's look at how this is done.


<!DOCTYPE html>
   <!-- to write React code in JavaScript -->
   <script src="" crossorigin></script>
   <script src="" crossorigin></script>
   <!-- to write JSX syntax and ES6 in older browsers. -->
   <script src=""></script>
   <div id="container"></div>
   <script type="text/babel">
     function Hello() {
       return <h1>Hello World!</h1>;
     ReactDOM.render(<Hello />, document.getElementById('container'))




Getting started with React

Let's now set up the React environment. To create React applications, we will install the create-react-app package. Install it globally so that it can be used from anywhere on the system. After installation, check the version as we did for NodeJS.


// install globally
npm install -g create-react-app


// check the version
npx create-react-app --version


Note: npx (Node Package Execute) is a package runner command included within npm (Node Package Manager).

create-react-app version


Now let's create a react application and run it using the following commands.


// create app
npx create-react-app my-react-app


// navigate to the application directory
cd my-react-app


// start the application
npm start


If the above operations are successful, the following output will be displayed on the browser.




Check out the blog Top 10 React.Js books to enhance your web development skills.

Project Structure

Now let's explore the folder structure of the React project we have created above.



Folder structure



It contains the project dependencies that have been downloaded and installed using npm. Instead of using script tags as traditional HTML, we install these modules as part of the application. To access the code from a particular module, the import statement is used. 



This is where our bundled code goes. When we build the application for production, the final files go in here. It is uploaded to a web server so that users can see our app via a URL. This folder mainly contains the HTML, JavaScript, and CSS files.


The "index.html" is the entry point which the web browser loads when a user navigates to the URL. The body of the HTML file contains the "root" div. React dynamically converts the React code into HTML and loads it in the "root" div.



The JavaScript implementation of the React application is found in this folder. By default, the implementation of the App component is found in the "App.js" file. The corresponding unit test case implementation is present in "App.test.js." The "index.js" contains the code, which is the starting point of the React application.

The First Hello World Program

Let's write our first Hello World program in React. Within the project directory, go to "src/index.js" and replace the contents as follows:



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

// import the app component
import App from './App';

   <App />,


The react module is used to write the HTML code within JavaScript/JSX. React is for the components, and react-dom is for rendering the components in the DOM. We will be discussing the ReactDOM.render() method in detail in the next section.

Now let's check out the code for the App component.

In "App.js," after importing React, we will declare a function using ES6 arrow functions. This function is a component with some logic and markup. This component can be imported into other files and used there. Like in this case, we import the App component in the index.js folder. 

Within the function, we add what has to be returned from this component in return(). It contains the markup, which gets converted and rendered as HTML. Finally let's add a <div> tag with a <h1> tag inside it. 



import React from "react";

const App = () => {
 return (
      <h1>Hello World</h1>

export default App;


This might look like basic HTML, but it is actually JSX that allows us to mix JavaScript and HTML. Now let's check the output.





ReactDOM.render method

The ReactDOM.render() method consists of the following two arguments:

  • The first argument specifies which element has to be rendered. This can be a component or a simple tag like h1, p, etc. This argument is called the element.
  • The second argument specifies where the element has to be rendered. Normally, it's a div element with the id of "root." JavaScript DOM API is used to identify this element. This argument is called the container.



ReactDOM.render(the element to be rendered, the location where the element has to be rendered);


The ReactDOM.render() method cannot have two-parent elements in the first argument. Consider the following code,

   <h1>First Element</h1>
   <h1>Second Element</h1>,





In the above scenario, an error occurs. The h1 tags can be wrapped in the div tag like the code below to solve this issue.

   <h1>First Element</h1>
   <h1>Second Element</h1>

Check out Advantages of React JS here.

Also Read, Front End Web Development

Frequently Asked Questions

1. Explain DOM.

Ans:- The DOM (Document Object Model) is an application programming interface (API) for HTML (HyperText Markup Language) and XML (Extensible markup language) documents. DOM defines the logical structure of the document and the way a document is accessed and manipulated.


2. React follows declarative paradigm or imperative paradigm?

Ans:- React uses a declarative paradigm. Developers write the code, and React will efficiently update and render the suitable component when the data changes. In short, React takes charge of the declared code and performs all the DOM manipulations to get us to our desired result. The approach makes the code more predictable and easier to debug.


3. What is JSX?

Ans:- JavaScript XML (JSX) is a form of markup that allows developers to write HTML code in React by converting the HTML tag into React element. These elements are then rendered to the DOM.


4. How to run tests in React?

Ans:- By default, the folder contains some basic unit test cases defined in "src/App.test.js." To execute those tests, use the following command:

npm run test


5. How to build the React application for production?

Ans:- We can build the React application for production, and the result is made available in the "build" folder. To build the application, use the following command:

npm run build

Key Takeaways


This blog covered the basic concepts for getting started with React, creating the React starter app, React folder structure, etc. The features, advantages, and disadvantages of React were also discussed in this blog.

Developers, if you are preparing for the next interview, check out the blogs 15 Most Frequently Asked React JS Interview Questions and 10 Best ReactJS Interview Questions. And if you are a beginner, check out the Top 5 skills to learn before you start with ReactJs to know the prerequisites to learn React.

You can also consider our React Js Course to give your career an edge over others.

We hope you found this blog useful. Feel free to let us know your thoughts in the comments section.



Topics covered
How does React work?
Prerequisites before getting started with React
Using React Directly in HTML
Getting started with React
Project Structure
The First Hello World Program
ReactDOM.render method
Frequently Asked Questions
Key Takeaways