8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

Search...

React Tutorial React Exercise React Basic Concepts React Components React Props React Hooks React Router React Advanced R

React Tutorial
Last Updated : 07 Aug, 2025

React is a powerful JavaScript library for building fast, scalable front-end applications. Created by
Facebook, it's known for its component-based structure, single-page applications (SPAs), and
virtual DOM,enabling efficient UI updates and a seamless user experience.

2/6

https://www.geeksforgeeks.org/reactjs/react/ 1/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

Note: The latest stable version of React is 19.1.0.

Why Learn React?

Before React, front-end development struggled with:

Manual DOM Manipulation: Traditional JavaScript directly modified the DOM, slowing down the
performance.
Complex State Management: Maintaining UI state became messy and hard to debug.
Tight Coupling in Frameworks: Frameworks like Angular introduced complex two-way data
binding that made code harder to manage.

React solved these issues with a modern and modular approach.

Core Features

Virtual DOM: React updates only the changed parts of the DOM, resulting in faster rendering.
One-Way Data Binding: Ensures predictable and easy to debug data flow.
Component-Based Architecture: Breaks UI into reusable pieces, improving the code reusability
and scalability.

React Tutorial Prerequisites: HTML, CSS and JavaScript

React Hello World Program

To start with React, you need to install it. Follow the steps below to install it on your system.

1. How to Install ReactJS on Windows

https://www.geeksforgeeks.org/reactjs/react/ 2/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

2. How to Install ReactJS on MacOS

3. How to Install ReactJS on Linux

After installing React, let's write your first React program. Here's a simple code example:

import React from 'react';

function App() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}

export default App;

In this example:

import React from 'react': Imports the React library to use React features in the component.
function App() { ... }: Defines a React functional component called App.
return ( ... ): The return statement renders HTML-like code (JSX) inside the component.
<div><h1>Hello World</h1></div>: Displays a div element containing a heading (h1) with the
text "Hello World."
export default App: Exports the App component so it can be used in other files.

Getting Started with React: A Beginner’s Guide

This React tutorial provides you with a step-by-step learning journey for mastering React. You will
start with React fundamentals and then move on to advanced topics. By the end of this tutorial, you
will have a solid foundation in React and be ready to build scalable and maintainable web
applications.
https://www.geeksforgeeks.org/reactjs/react/ 3/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

1. React Basics
Mastering React fundamentals, which will lay the groundwork for building dynamic and efficient
applications.

Introduction
Import and Export
JSX Introduction
Components
Conditional Rendering
Virtual DOM
Quiz 1: React Fundamentals
PropTypes
Prop Drilling
React Lists
Context API
React Redux
Quiz 2: Props and State Management

2. React Hooks
Different hooks to access and mange state and lifecycle in functional components.

Hooks Introduction
useState Hook
useEffect Hook
useRef Hook
useMemo Hook

https://www.geeksforgeeks.org/reactjs/react/ 4/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

useContext Hook
Quiz: React Hooks

3. React DOM Events

Handle DOM events in react like mouse, keyboard and form events.

React Events Introduction

onclickcapture Event
onMouseDown Event
onDoubleClick Event
onSubmit Event
onScroll Event
onBlur Event
Quiz: React DOM events

4. Lifecycle of Components
The lifecycle of react components from creation, mounting and unmounting to manage the different
phases.

Introduction to lifecycle of components

componentDidMount
componentWillUnmount
componentDidCatch
componentDidUpdate
shouldComponentUpdate
Quiz: Lifecycle of Components

https://www.geeksforgeeks.org/reactjs/react/ 5/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

5. Routing in React
Manage navigation and routing within the single page application.

React JS Router
What is react-router-dom?
React JS Types of Routers
React-Router Hooks
Learn Navigation and Routing in React Apps
Link and NavLink components in React-Router-Dom
Quiz: Routing in React

6. Packages for Enhancing React Application

Additional libraries for styling and state management to enhance your react projects.

Redux
Material UI
react-bootstrap
Tailwind
Framer Motion

7. React Interview Questions

React Interview questions categorised for different levels including most asked questions.

Beginner Level Interview Questions

Intermediate Level Interview Questions
Advanced Level Interview Questions
7 Most Asked ReactJS Interview Questions
https://www.geeksforgeeks.org/reactjs/react/ 6/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

8. React Online Practice Exercise

The best way to learn React is by practising what you have learned so far. Our practice section is
designed specifically to help you apply what you've learned through interactive quizzes and hands-
on coding tasks.

Whether you're just getting started or you want to test your knowledge, you’ll find these exercises
suited to every level.

Start exploring our free react exercises and take your skills to the next level
Free Online React Exercises.

9. React Complete References

Refer to the following articles to have a quick glance at all the important key concepts which are
helpful while developing web applications using React

Basic Concepts Reference

Components Complete Reference
Props Reference
Events Reference
Hooks Reference
Advanced Guide Reference

If you want to have a simple, quick reference to commonly used React methods you can refer to
ReactJS Cheat Sheet article

Advantages of React

https://www.geeksforgeeks.org/reactjs/react/ 7/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

Composable: React allows building reusable components, improving code organization and
maintainability.
Declarative: React’s declarative approach makes it easy to design interactive UIs by changing
component states, with React handling the DOM updates.
SEO-Friendly: React’s Single Page Application (SPA) setup can be optimized for SEO by
rendering and indexing content properly.
Large Community: React has a strong community and is widely used by major companies like
Meta, Netflix, making it easier to find resources and support.
Easy to Learn: React uses JSX, which resembles HTML, making it simple for developers with
basic knowledge of HTML, CSS, and JavaScript.
Easy Debugging: React’s unidirectional data flow simplifies debugging by ensuring that data
moves in a clear, predictable direction within components.

If you want to learn more refer to this article React JS Advantages

Best Approach to Learn React

You can complete this React tutorial in approximately 8 weeks with consistent learning and hands-
on practice.

In Week 1, you'll cover React basics, including components, JSX syntax, and topics like
conditional rendering, prop-types, React lists, and React Redux for state management.
Week 2 focuses on React Hooks, where you'll learn about useState, useEffect, useRef, and
useContext for state management and performance optimization in functional components.
In Week 3, you’ll learn how to handle DOM events like clicks, keyboard input, and form
submissions in React.

https://www.geeksforgeeks.org/reactjs/react/ 8/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

Week 4 dives into the lifecycle of components, explaining lifecycle methods in class components
and their equivalent in functional components using hooks.
Week 5 will teach you React Routing with react-router-dom, managing navigation and routes in
single-page applications.
In Week 6, you'll explore important React packages like Redux, Material UI, React-Bootstrap,
Tailwind, and Framer Motion for styling and animations.
Week 7 covers React interview questions for different levels, helping you prepare for job
interviews.
In Week 8, you'll apply everything you've learned by building real-world React projects,
consolidating your knowledge.

By the end of 8 weeks, you’ll be proficient in React and ready to build dynamic web applications.

List of Companies Using React

These are some popular companies that use React in their workflow:

Company Description

Facebook React was developed by Facebook and is widely used for their web and mobile
applications.

Instagram Instagram, owned by Facebook, uses React for the front-end of its web application.

https://www.geeksforgeeks.org/reactjs/react/ 9/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

Company Description

Netflix Uses React to build user interfaces for its streaming platform to ensure a fast,
responsive experience.

Airbnb Uses React to develop dynamic user interfaces for their booking platform.

Uber Uber uses React for building its interactive and high-performance web interfaces.

WhatsApp
WhatsApp uses React to create the web version of its messaging platform.
Web

Atlassian Atlassian, the creator of tools like Jira and Confluence, uses React for its web
applications.

Dropbox Dropbox uses React to enhance the performance and interactivity of its web-based
file storage system.

Spotify Spotify uses React for building its interactive UI components for both web and
mobile platforms.

New York
The New York Times uses React to manage its dynamic content on the web.
Times

https://www.geeksforgeeks.org/reactjs/react/ 10/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

Career & Jobs in React

React offers a wide range of career opportunities, as it is one of the most popular front-end libraries
used in web development, particularly for building dynamic and responsive user interfaces. React is
widely adopted for both web and mobile applications, making it a highly sought-after skill in the
industry. Here are some top career paths for React developers:

Career Average Salary (INR) Per Average Salary (USD) Per

Annum Annum

React Developer ₹6,00,000 - ₹15,00,000 $10,000 - $40,000

Frontend Developer
₹5,00,000 - ₹12,00,000 $8,000 - $35,000
(React)

React Native Developer ₹7,00,000 - ₹16,00,000 $12,000 - $45,000

Full Stack Developer

₹8,00,000 - ₹18,00,000 $12,000 - $50,000
(React)

UI/UX Developer (React) ₹5,50,000 - ₹13,00,000 $9,000 - $40,000

https://www.geeksforgeeks.org/reactjs/react/ 11/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

React
Introduct

ReactJS
Function
Compone

useState
Hook in
ReactJS

Updating
Objects

React Introduction Visit Course

Comment More info Advertise with us Next Article

React Introduction

Similar Reads
React Tutorial
React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its
component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user…
7 min read

https://www.geeksforgeeks.org/reactjs/react/ 12/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks

React Fundamentals

Components in React

React Lifecycle
In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key
moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage…
7 min read

React Hooks

Routing in React

Advanced React Concepts

React Projects

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)

https://www.geeksforgeeks.org/reactjs/react/ 13/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company Languages DSA Data Science & ML Web Technologies Python Tutorial
About Us Python DSA Tutorial Data Science With HTML Python Programming
Legal Java Basic DSA Problems Python CSS Examples
Privacy Policy C++ DSA Roadmap Data Science For JavaScript Python Projects
In Media PHP Top 100 DSA Interview Beginner TypeScript Python Tkinter
Contact Us GoLang Problems Machine Learning ReactJS Python Web Scraping
Advertise with us SQL DSA Roadmap by ML Maths NextJS OpenCV Tutorial
GFG Corporate Solution R Language Sandeep Jain Data Visualisation Bootstrap Python Interview
Placement Training Android Tutorial All Cheat Sheets Pandas Web Design Question
Program Tutorials Archive NumPy Django
NLP
Deep Learning

Computer Science DevOps System Design Inteview School Subjects GeeksforGeeks

Operating Systems Git High Level Design Preparation Mathematics Videos
Computer Network Linux Low Level Design Competitive Physics DSA
Database Management AWS UML Diagrams Programming Chemistry Python
System Docker Interview Guide Top DS or Algo for CP Biology Java
Software Engineering Kubernetes Design Patterns Company-Wise Social Science C++
Digital Logic Design Azure OOAD Recruitment Process English Grammar Web Development
Engineering Maths GCP Commerce Data Science
https://www.geeksforgeeks.org/reactjs/react/ 14/15
8/14/25, 10:24 PM React Tutorial - GeeksforGeeks
Software Development DevOps Roadmap System Design Company-Wise CS Subjects
Software Testing Bootcamp Preparation
Interview Questions Aptitude Preparation
Puzzles

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

https://www.geeksforgeeks.org/reactjs/react/ 15/15