🧠 Introduction to React (with Real-Life Examples) : React Topic 1

✅ What is React?

React is a JavaScript library used to build user interfaces (UI) — especially for single-page applications (SPA).

Think of React as a smart helper that makes your website fast, dynamic, and interactive without reloading the page again and again.

🏠 Real-Life Example:

Imagine you are using Zomato. You click on a restaurant, it opens the menu — but the entire page doesn’t reload. That’s React in action! It loads only the part of the page that needs to change.

🤔 Why use React?

🆚 Difference from JavaScript / jQuery:

React is perfect when you're building large web apps — like eCommerce, dashboards, social media sites, etc.

🌐 What is SPA (Single Page Application)?

SPA means your whole website runs in a single HTML page.
Only the content inside changes as you click around — not the whole page.

🧑‍💻 Real-Life Example:

When you use Gmail, you click on Inbox, Sent, Drafts — but the URL changes slightly and the page updates without reloading.

React makes this magic happen using React Router (we’ll learn that later).

⚙️ Setting Up the Environment

To start working with React, you need to set up a few tools.

1. Install Node.js

• Go to https://nodejs.org

• Download & install the LTS version

2. Install VS Code (Code Editor)

• Go to https://code.visualstudio.com

• Download and install it

• Add the "ES7+ React/Redux Snippets" extension (for fast coding)

🚀 Create First React App

We use a tool called Create React App (CRA) to quickly set up a basic React project.

👉 Steps:

1. Open terminal or command prompt

2. Type this:

npx create-react-app my-first-app

3. It will take a few minutes to set up

4. Go to the folder:

cd my-first-app

5. Start the development server:

npm start

🎉 What Happens Next?

• Your browser will open at http://localhost:3000

• You’ll see a spinning React logo — your first React app is ready!

📦 What’s Inside the React App Folder?

• public/: Contains the HTML file

• src/: Where your React code lives (JSX, components, etc.)

• App.js: Main component shown first

• index.js: Entry point of the application

✅ Summary

• React is a powerful JS library for building modern web apps

• It’s faster and more scalable than traditional JS or jQuery

• It allows building SPAs — smooth, fast, and user-friendly websites

• Setup is easy using create-react-app

Would you like to:

Continue to Topic 2: JSX next in the same format. go ahead ⬇️⬇️.

Awesome! Let's continue with React Topic 2: JSX (JavaScript XML).

⚛️ JSX (JavaScript XML) — React Topic 2

✅ What is JSX?

JSX stands for JavaScript XML.

JSX is a syntax extension that allows us to write HTML-like code inside JavaScript — used mainly in React.

JSX makes writing UI components easier and cleaner. Instead of using React.createElement, we can write code that looks like HTML.

🔍 Real-Life Example:

You write:

//jsx//
<h1>Hello, world!</h1>
//ye aapko jsx file me likhna he , jsx he and niche jo example he vo norMAL HTML HE//

Instead of:

//js//
React.createElement("h1", null, "Hello, world!")

Much cleaner and readable, right? That’s why we use JSX.

🧠 Why use JSX in React?

• Easier to write UI components

• Looks like HTML — easy for beginners to learn

• Helps catch errors during compilation

• More readable and manageable for large codebases

✏️ JSX Syntax Rules

JSX looks like HTML, but it has some important differences:

1. Return one parent element

In JSX, your component must return only one parent element.

✅ Correct:

//jsx//
return (
  <div>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </div>
);

❌ Wrong:

//jsx//
return (
  <h1>Hello</h1>
  <p>Welcome!</p>
);

2. Use className instead of class

Since class is a reserved keyword in JS, JSX uses className.

//jsx//
<p className="message">Hello</p>

3. Use camelCase for attributes

HTML: onclick → JSX: onClick

//jsx//
<button onClick={handleClick}>Click me</button>

🧮 Embedding Expressions in JSX

You can add JavaScript expressions inside {} curly braces in JSX.

Example:

//jsx//
const name = "Amit";
return <h1>Hello, {name}</h1>;

You can also do calculations or call functions:

//jsx//
return <p>2 + 3 = {2 + 3}</p>;

✅ Note: You can use expressions (like variables, functions), but not statements (like if, for) inside {}.

🔄 Difference Between HTML and JSX

🧑‍🏫 Real-World Analogy

Think of JSX like a mix of HTML + JS — it looks like HTML, but it behaves like JavaScript.

For working professionals: JSX improves code readability, testing, and debugging — very helpful in complex UIs.

✅ Summary

• JSX is a syntax that lets us write HTML-like code in React

• It must follow special rules (like className, one parent, etc.)

• We can embed dynamic content using {} curly braces

• JSX is not HTML, but it is very similar — with some key differences

Ready for the next one?
If you'd like to move on to React Topic 3: Components .
follow this series in sequence wise.

🔔 Stay Connected

If you found this article helpful and want to receive more such beginner-friendly and industry-relevant React notes, tutorials, and project ideas —
📩 Subscribe to our newsletter by entering your email below.

And if you're someone who wants to prepare for tech interviews while having a little fun and entertainment,
🎥 Don’t forget to subscribe to my YouTube channel – Knowledge Factory 22 – for regular content on tech concepts, career tips, and coding insights!

Stay curious. Keep building. 🚀