React · Lesson 1 of 7

React introduction

What React is, why teams use it, and rendering your first component.

React is a JavaScript library for building user interfaces out of small, reusable pieces called components. Instead of changing the page by hand with DOM calls, you describe what the screen should look like for the current data, and React updates the page for you when the data changes.

It is one of the most requested frontend skills in Kerala job posts, usually alongside JavaScript, HTML/CSS and a tool such as Vite or Next.js.

How the example works

A real project is created with a build tool (for example npm create vite@latest). To keep this lesson self-contained, the example loads React from a CDN and uses Babel in the browser to understand JSX. createRoot(...).render(...) puts your component into the #root element.

Try it yourself

Code editor

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

React builds UIs from components.
You describe the UI; React updates the DOM.
Real apps use a build tool such as Vite or Next.js.

Quick check

What does React mainly help you build?

Databases User interfaces Operating systems Web servers

Practice task

Change Welcome so it shows your name in an <h1> and a <p> with the role you are preparing for.

Interview corner

What is the virtual DOM?

An in-memory description of the UI. When state changes React builds a new description, compares it with the previous one and applies only the needed changes to the real DOM.

Library or framework?

React calls itself a library: it focuses on rendering UI. Routing, data fetching and builds come from other tools or frameworks such as Next.js.