🚀 React Basics Explained with Clean & Real Examples

⭐ 1. What is React?

React is a JavaScript library for building fast and interactive user interfaces. It uses a component-based structure — breaking UI into small reusable pieces.

✔ Example Component

function Welcome() {
  return <h1>Welcome to React 🚀</h1>;
}

export default Welcome;
        

Use it like HTML:

<Welcome />
        

⭐ 2. Virtual DOM

The Virtual DOM is a copy of the real DOM. React updates the virtual DOM first → calculates the difference → updates the real DOM only where needed.

✔ Why it matters?

• Faster UI updates
• Better performance
• Smooth rendering

⭐ 3. Creating a React App

✔ Vite (faster modern bundler)

npm create vite@latest my-app
npm install
npm run dev
        

Vite is recommended for new projects.

⭐ 4. What is a Module in JavaScript?

A module is a file that exports something (variable, function, component) so another file can import it.

✔ Example

math.js

export const add = (a, b) => a + b;        

index.js

import { add } from "./math.js";
console.log(add(2, 3)); // 5        

⭐ 5. Default Export vs Named Export

✔ Named Export

export const Button = () => {};
export const Card = () => {};
        

Import:

import { Button, Card } from "./UI";
        

✔ Default Export

export default Button;
        

Import:

import Button from "./Button";
        

⭐ 6. React Components

Component is a reusable piece of UI that can be created as a simple JavaScript function that returns JSX.

✔ Example

function Profile() {
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: Ragu</p>
    </div>
  );
}        

Use:

<Profile />        

⭐ 7. React Fragments

Fragments let you wrap multiple elements without adding extra <div>s.

✔ Example

<>
  <h1>Title</h1>
  <p>Description</p>
</>
        

⭐ 8. JSX – What and Why?

JSX stands for JavaScript XML. It allows you to write HTML-like syntax inside JavaScript.

✔ Example (JSX)

const element = <h1>Hello JSX!</h1>;
        

JSX makes React code cleaner and easier to write.

⭐ 9. What is Babel?

Babel is a JavaScript compiler that converts JSX and modern JavaScript (ES6+) into browser-compatible code.

📌 React cannot understand JSX directly → Babel converts it.

⭐ 10. What is Webpack?

Webpack is a bundler. It takes all your files:

• JS
• CSS
• Images
• JSX
• Modules

and bundles them into one final optimized file for the browser.

✔ Example

It converts:

/src  
  App.jsx  
  index.js  
  styles.css  
  utils.js  
  images/
        

Into:

/dist  
  bundle.js  
  index.html
        

📌 CRA or Vite automatically handles Webpack (you don’t need to configure manually).

⭐ 11. Events?

Events help us detect user actions like click, type, submit.

Example:

function App() {
  const handleClick = () => {
    alert("Hi");
  };

  return <button onClick={handleClick}>Click</button>;
}
        

✔ onClick runs your function when the button is clicked. ✔ We pass handleClick (not handleClick()) so it won’t run immediately.

⭐ 12. Props?

Props are used to pass data from parent to child.

Example:

<App />
<User name="Ragu" />
        

Child component:

function User(props) {
  return <h3>{props.name}</h3>;
}
        

✔ Props make components reusable. ✔ You can pass text, numbers, arrays, objects, even functions.

⭐ Final Summary

React becomes easier when you understand these basics:

✔ Components ✔ Props ✔ JSX ✔ Babel ✔ Webpack ✔ Modules ✔ Exports ✔ Virtual DOM ✔ App creation (CRA/Vite) ✔ Fragments ✔Events ✔ Props

These concepts form the foundation for advanced React topics like Hooks, State Management, Routing, and Performance Optimization.