React Mastery / Introduction to React

Features of React

🧩 Component-Based Architecture

  • The UI is divided into small, reusable pieces called components (e.g., buttons, forms, cards).

  • Each component manages its own state and logic, making development modular and maintainable.

The diagram is a visual representation of how a webpage is broken down into different reusable components in React.

🧠 JSX (JavaScript XML)

  • JSX is a syntax extension that lets you write HTML-like code inside JavaScript.

  • It’s not mandatory, but widely used in React because it makes code more readable and expressive.

⚡ React implements a virtual DOM for better performance

  • React uses a virtual DOM, which is a lightweight copy of the real DOM. DOM stands for Document Object Model. It is a programming interface provided by the browser that allows developers to interact with and manipulate the content, structure, and style of a web page.

  • When something changes, React updates the virtual DOM first, compares it to the previous version (diffing), and updates only the changed part of the actual DOM.

  • This results in faster performance and better user experience.

🔗 React follows one-way data binding

  • React follows a unidirectional data flow, meaning data moves from parent to child components.

  • This makes state changes more predictable and easier to debug.

✅ Declarative UI

  • React allows you to describe the UI based on the current state of your application.

  • It handles updating and rendering the right components when your data changes.

  • You focus on the "what", and React handles the "how".

🪝 React provides built-in hooks for managing state and side effects

  • Hooks were introduced in React 16.8.

  • They let you use state and lifecycle features inside functional components.

  • Popular hooks include:

    • useState – to manage local state

    • useEffect – to handle side effects (like fetching data)

    • useContext, useRef, useMemo, etc.