React JS Basics Explained in Simple Language

React JS · Beginner Friendly

React JS Basics Explained in Simple Language

AK Ankit Kaushik · Lead Trainer, Data Engineering & AI | Updated 12 November 2026 | 13 min read Free · React Basics

React apps are trees of components — each smaller piece is reusable and does one job well.

Quick summary — React basics in plain English

React is a JavaScript library for building user interfaces out of small, reusable pieces called components. Each component is a function that returns UI — and React takes care of updating the screen when data changes.

In this guide you will learn:

What a component is — no jargon.
What JSX is — and why it looks like HTML.
Props vs State — the biggest beginner confusion.
Hooks — why they exist and how they help.
Interview Q&A + quiz to test your understanding.

SECTION 01What a component is

A component is just a JavaScript function that returns some HTML. That's it. When React sees a component, it calls the function, gets the HTML back, and renders it to the screen.

// The simplest possible React component
function Welcome() {
  return <h1>Hello, world!</h1>;
}

// Use it like HTML
<Welcome />

// A reusable component with different data
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Reuse with different data
<Greeting name="Ankit" />
<Greeting name="Priya" />
<Greeting name="Rahul" />

components.jsx

Key insight: If you know how to write a JavaScript function that returns HTML, you already know how to write a React component. That's really it.

SECTION 02What JSX is (and why it looks like HTML)

JSX is a syntax that lets you write HTML-like code inside JavaScript. It's not HTML and it's not a string — it's a shorthand that gets compiled to JavaScript function calls.

What you write (JSX)	What it compiles to (JS)
`<h1>Hello</h1>`	`React.createElement("h1", null, "Hello")`
`<Greeting name="Ankit" />`	`React.createElement(Greeting, { name: "Ankit" })`
`<div className="box">...</div>`	`React.createElement("div", { className: "box" }, ...)`

// JSX — looks like HTML, but it's JavaScript
function ProductCard({ product }) {
  return (
    <div className="card">
      <h2>{product.name}</h2>
      <p>₹{product.price}</p>
      <button onClick={() => alert(product.name)}>
        Buy now
      </button>
    </div>
  );
}

// What JSX actually compiles to (simplified)
function ProductCard({ product }) {
  return React.createElement(
    "div",
    { className: "card" },
    React.createElement("h2", null, product.name),
    React.createElement("p", null, `₹${product.price}`),
    React.createElement(
      "button",
      { onClick: () => alert(product.name) },
      "Buy now"
    )
  );
}

jsx-example.jsx

Key insight: JSX is just a shortcut. You could write React without it (using React.createElement), but nobody does because JSX is so much easier to read.

SECTION 03Props vs State — the difference

This is the most common beginner confusion. The simple difference:

Props — data passed into a component from the parent. Read-only. Like arguments to a function.
State — data owned by a component that can change over time. It's what makes the UI reactive.

Aspect	Props	State
Who controls it	Parent component	The component itself
Can it change?	No — read-only	Yes — via setState / useState
Analogy	Function parameters	Local variable that triggers re-render
Where it's used	Config, data passed in	User input, toggle, counters, fetched data
Triggers re-render?	Yes (if parent passes new values)	Yes (when you call the setter)

// Props — data from parent, read-only
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Parent passes props
<Greeting name="Ankit" />
<Greeting name="Priya" />

import { useState } from "react";

// State — data the component owns
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

props-vs-state.jsx

Key insight: Props go in, state lives here. If a component needs to change data over time, it uses state. If it receives data from its parent, it uses props.

SECTION 04Hooks — why they exist

Hooks are functions that let you "hook into" React features from a function component. Before hooks (pre-2019), you had to write class components to use state or lifecycle methods. Hooks made everything simpler.

Hook	What it does	Common use
useState	Adds local state to a function component	Counters, forms, toggles
useEffect	Runs side effects (fetch, timers)	Data fetching, subscriptions
useContext	Access shared values without prop drilling	Themes, auth state
useRef	Hold a mutable reference between renders	DOM refs, timers
useMemo	Memoise expensive computations	Sorting large lists
useCallback	Memoise function references	Preventing re-renders

import { useState } from "react";

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

import { useState, useEffect } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Runs once on mount
    fetch("/api/users")
      .then((r) => r.json())
      .then((data) => setUsers(data));

    // Optional cleanup
    return () => {
      console.log("component unmounted");
    };
  }, []); // empty array = run only once

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

hooks.jsx

Key insight: You'll use useState and useEffect in 90% of components. Learn those two first and you can build real apps.

SECTION 05Common beginner mistakes

Trying to modify props — props are read-only; pass a setter function instead.
Forgetting key in lists — always add a stable key when rendering arrays.
Missing dependencies in useEffect — always include everything the effect uses in the array.
Using class components first — start with function components and hooks; class is legacy.
Overusing state — if a value can be computed from state, don't store it in state.
Not using TypeScript — even for beginners, TypeScript catches more bugs than you'd expect.

SECTION 06Interview Q&A — React basics

Q1What's the difference between props and state?

Props are data passed from parent to child — read-only. State is data owned by a component that can change over time. Props are like function arguments; state is like a local variable that triggers re-renders when it changes.

Q2What is JSX?

JSX is a syntax extension that lets you write HTML-like code in JavaScript. Under the hood, JSX compiles to React.createElement() calls. It's not HTML and it's not a string — it's a shorthand React understands.

Q3Why do we use useState instead of a regular variable?

A regular variable doesn't trigger a re-render when it changes. useState tells React "this value matters — re-render when it changes." That's what makes the UI reactive.

Q4What does useEffect do?

It runs side effects after the component renders — like fetching data, setting timers, or subscribing to events. The dependency array controls when it runs: [] means run once, missing array means run every render, and [dep] means run when dep changes.

Q5What's a component?

A component is a JavaScript function that returns JSX. It's the fundamental building block of React apps. Components can be composed — smaller ones combine into larger ones, forming a tree.

SECTION 07Test yourself — React basics quiz

Five questions. No sign-up.

0 / 5

Pick an answer to see why it is right or wrong.

SECTION 08Frequently asked questions

Do I need to know JavaScript before React?

Yes. You need to be comfortable with functions, arrays, objects, destructuring, map/filter, and arrow functions. About 3–4 weeks of JavaScript is enough to start React.

Should I learn class components or function components?

Function components + hooks. Class components are legacy — new React code almost never uses them. Focus on function components and useState/useEffect.

What's the difference between React and Next.js?

React is a UI library. Next.js is a framework built on React that adds routing, server-side rendering, and API routes. Learn React first; Next.js later if you want server-side features.

How long does it take to learn React basics?

With solid JavaScript, 2–3 weeks to learn the basics (components, props, state, hooks), and another 2–4 weeks to be comfortable with real projects. Most people take 6–8 weeks to build something they're proud of.

Should I learn React or Vue or Angular?

React has the largest job market and the broadest ecosystem. Vue is easier for beginners. Angular is strong in enterprise. For most people starting fresh in 2026, React is the safest bet — more jobs, more community, more resources.

What I would do in the first 30 daysLayoff · 14 min Why sending 500 resumes won't workJob Search · 14 min Rebuild your resume for the AI job marketResume · 15 min Which skills to learn before applyingSkills · 14 min 90-day career recovery roadmapRecovery · 16 min How AI can help you prepare for interviewsAI · 11 min

Classroom & online · Noida

Learn React from scratch

Our React JS Frontend Programme covers JavaScript, React basics, hooks, routing, and real projects — with interview prep and placement support.

₹15,500 · full programme ~~₹24,000~~

Explore the course Download the syllabus

React + hooks + routing
Real frontend projects
Interview prep
Weekday & weekend batches

React JS Basics Explained in Simple Language