React.js – Complete Beginner Overview

React.js is a popular JavaScript library used to build user interfaces (UI) for web applications. It was developed by Meta and is based on a component-driven architecture, making applications easier to build, maintain, and scale.

Why Use React?

• Creates reusable UI components
• Improves application performance with Virtual DOM
• Makes code easier to manage and maintain
• Provides a rich ecosystem and community support
• Used for building modern Single Page Applications (SPAs)

1. Components

Components are the building blocks of a React application. A component is a reusable piece of UI that can contain its own structure, logic, and styling.

Example:

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

In this example, Welcome is a component that displays a heading.

2. Props (Properties)

Props are used to pass data from a parent component to a child component. They make components dynamic and reusable.

Example:

function User({ name }) {
  return <h2>Hello, {name}</h2>;
}

function App() {
  return (
    <div>
      <User name="John" />
      <User name="Alice" />
      <User name="David" />
    </div>
  );
}

Output:

Hello, John

Hello, Alice

Hello, David

3. JSX

JSX (JavaScript XML) allows developers to write HTML-like syntax inside JavaScript. React converts JSX into regular JavaScript behind the scenes.

Example:

const element = <h1>Hello React</h1>;

JSX makes React code more readable and easier to write.

4. State

State is used to store data that can change during the lifecycle of a component. When state changes, React automatically updates the UI.

Example:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Every time the button is clicked, the count value increases and the UI updates automatically.

5. Events

Events allow React applications to respond to user actions such as clicks, typing, mouse movements, and form submissions.

Example:

function App() {
  function handleClick() {
    alert("Button Clicked!");
  }

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

When the button is clicked, the handleClick function executes.

6. Hooks

Hooks are special functions that allow developers to use React features such as state and lifecycle methods inside functional components.

Common Hooks:

• useState – Manage component state
• useEffect – Handle side effects
• useContext – Share data globally
• useRef – Access DOM elements directly

Example:

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Component Loaded");
  }, []);

  return <h1>React Hooks Example</h1>;
}

7. Virtual DOM

React uses a Virtual DOM, which is a lightweight copy of the real DOM. Instead of updating the entire page, React updates only the changed parts, resulting in better performance.

8. Benefits of React

• Reusable Components
• Fast Rendering with Virtual DOM
• Easy State Management
• SEO-Friendly with Modern Frameworks
• Large Community and Ecosystem
• Scalable for Large Applications

Typical React Project Structure

src/
│
├── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│
├── App.jsx
├── main.jsx

Conclusion

React.js is a powerful JavaScript library for building modern user interfaces. By using Components, Props, State, Events, and Hooks, developers can create fast, interactive, and maintainable web applications with ease.