Lesson 1 — What is React JS?

by

React JS is one of the most popular JavaScript libraries used to build modern, fast, and interactive user interfaces. In this lesson, we will understand what React is, why it was created, and why it is so widely used in today’s web development world.

This lesson is the first part of the React JS tutorial series on CodeSanskriti.com, designed especially for beginners.

📌 What You Will Learn in This Lesson

By the end of this lesson, you will understand:

  • What React JS is
  • Why React was created
  • Problems with traditional JavaScript development
  • How React solves those problems
  • Where React is used in real-world applications

🔹 What is React JS?

React JS is an open-source JavaScript library developed by Facebook (Meta) for building user interfaces, especially single-page applications (SPAs).

React focuses on the View layer of an application and helps developers create reusable UI components.

👉 In simple words:
React helps you build dynamic and fast web pages using reusable components.

🔹 Why Was React Created?

Before React, developers used plain JavaScript, jQuery, or server-side rendering to update the UI. This caused several problems.

❌ Problems with Traditional JavaScript UI Development

  • Manual DOM manipulation
  • Complex and messy code
  • Poor performance for large applications
  • Difficult to maintain and scale

Example:

document.getElementById("count").innerHTML = count;

As applications grew bigger, managing UI updates became slow and error-prone.

🔹 How React Solves These Problems

React introduced a new way of thinking about UI development.

✅ Key Solutions Provided by React

  • Component-based architecture
  • Virtual DOM for faster updates
  • Declarative UI
  • Reusable code

Instead of manually updating the DOM, React automatically updates the UI when the state changes.

🔹 What is a Component in React?

A component is a small, reusable piece of UI.

Example:

  • Button
  • Header
  • Footer
  • Login Form

Each component has:

  • Its own logic
  • Its own UI
  • Its own state (data)

💡 This is very similar to Classes and Objects in OOP, which you studied in the OOP via .NET series.

🔹 React is Declarative (Very Important)

In React, you describe what the UI should look like, and React takes care of how to update it.

Example:

<h1>Hello, React!</h1>

You don’t need to write code for:

  • Creating elements
  • Updating content
  • Re-rendering manually

React handles everything behind the scenes.

🔹 What is Virtual DOM?

The Virtual DOM is a lightweight copy of the real DOM.

How it Works:

  1. React creates a Virtual DOM
  2. Changes are applied to the Virtual DOM
  3. React compares it with the previous version (diffing)
  4. Only the required changes are updated in the real DOM

Benefits:

  • Faster UI updates
  • Better performance
  • Smooth user experience

🔹 React vs Plain JavaScript (Simple Comparison)

FeatureJavaScriptReact
UI UpdatesManualAutomatic
Code ReusabilityLowHigh
PerformanceSlowerFaster
MaintenanceDifficultEasy

🔹 Where is React Used?

React is used by many top companies:

  • Facebook
  • Instagram
  • Netflix
  • Airbnb
  • WhatsApp Web

React is ideal for:

  • Dashboards
  • Admin panels
  • E-commerce sites
  • Survey & form-based apps
  • Real-time applications

🔹 Is React a Framework or Library?

👉 React is a library, not a framework.

  • React handles UI only
  • You can choose your own:
    • Routing
    • State management
    • API libraries

This flexibility makes React very powerful.

🔹 Who Should Learn React?

React is best for:

  • Web developers
  • JavaScript developers
  • Frontend engineers
  • Full-stack developers

If you already know JavaScript, learning React becomes much easier.

🔹 Real-Life Analogy (OOP Style Explanation)

Think of a car dashboard:

  • Speed meter = Component
  • Fuel indicator = Component
  • AC control = Component

Each component works independently but together they form the complete dashboard.

React works the same way.

🧠 Interview Questions (Beginner Level)

Q1. What is React JS?

React is an open-source JavaScript library used for building user interfaces.

Q2. Who developed React?

React was developed by Facebook (Meta).

Q3. What problem does React solve?

React simplifies UI updates and improves performance using components and Virtual DOM.

🎯 Summary of Lesson 1

  • React is a JavaScript library for UI
  • It uses component-based architecture
  • Virtual DOM improves performance
  • React makes applications easier to build and maintain

👉 Next Lesson

➡ Lesson 2: Why React is Popular? Key Features & Benefits

Leave a Comment