Introduction to React

Learning objectives#

• Explain what React is and what problem it solves
• Understand components, props and state at a high level
• Know how React updates the page efficiently
• Read a first React component

Explanation#

In plain JavaScript you change the page step by step: find an element, change its text, add a class. As apps grow, keeping every element in sync with the data becomes the hardest part.

React is declarative: you write a function that returns what the UI should look like for the current data. When the data changes, React works out the minimal DOM changes for you.

Everything is a component — a function that returns markup written in JSX. Components receive inputs (props), keep their own changing data (state) and are combined into bigger components.

React compares the new output with the previous one (reconciliation) and updates only what changed, so you never touch the DOM directly.

React was created at Facebook (Meta) and is used by Netflix, Airbnb, Instagram and countless companies. React itself only handles the UI; routing, data fetching and builds come from tools like React Router and Vite.

Syntax#

1function Welcome({ name }) {
2  return <h1>Hello, {name}!</h1>;
3}

Code example: A first interactive component#

1import { useState } from 'react';
2

3function Greeting({ name }) {
4  return <h1>Hello, {name}!</h1>;
5}
6

7export default function App() {
8  const [likes, setLikes] = useState(0);
9

10  return (
11    <main>
12      <Greeting name="Asha" />
13      <p>This page has {likes} likes.</p>
14      <button onClick={() => setLikes(likes + 1)}>👍 Like</button>
15    </main>
16  );
17}

The page shows “Hello, Asha!”, “This page has 0 likes.” and a Like button. Each click increases the number; React updates only that text, not the whole page.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Greeting is a component: a function that receives props (name) and returns JSX.
2. App uses Greeting like an HTML tag: <Greeting name="Asha" />.
3. useState(0) gives App a piece of state, likes, and a function to change it.
4. Clicking the button calls setLikes; React re-runs App and updates the changed text.

Real-world use case#

Common mistakes#

Best practices#

• Think in components: split the UI into small pieces
• Keep components pure: same props → same output
• Change data, not the DOM
• Learn modern JavaScript first

Remember this#

Practice exercise#

1export default function ProfileCard({ name = 'Ravi', city = 'Pune' }) {
2  return (
3    <article>
4      <h2>{name}</h2>
5      <p>Lives in {city}</p>
6    </article>
7  );
8}
9// <ProfileCard name="Asha" city="Bengaluru" />

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.