React-Learn
Crafting Dynamic UIs with React: A Beginner’s Journey

Crafting Dynamic UIs with React: A Beginner’s Journey

Yash Sakhareliya's photo
Yash Sakhareliya
·

13 min read

Table of contents

1. Introduction to React

  • What is React?
    React is an open-source JavaScript library developed by Facebook for building user interfaces (UIs), primarily for single-page applications. It excels at handling complex UIs with dynamic, interactive features through a component-based architecture.

  • Who Created React?
    React was created by Jordan Walke in 2011 while working at Facebook. It was open-sourced in 2013, allowing developers worldwide to use and contribute to its growth.

  • React’s Unique Value:
    React enables developers to build scalable and high-performance web applications with a focus on reusable components and virtual DOM for optimized rendering.

2. React's Foundation

  • React’s Declarative Nature:
    React allows developers to build UI components that describe how the interface should appear based on the application state. Instead of manually manipulating the DOM, React takes care of updating the UI when the state changes. This approach makes the code more readable and easier to maintain.

  • Component-Based Architecture:
    React breaks down the UI into small, reusable components. Each component has its own logic and state, making it easier to develop, maintain, and test. Components can be nested within other components to create complex UIs.

  • Unidirectional Data Flow:
    React uses a one-way data flow where data is passed from parent components to child components through props. This ensures that the flow of data is predictable, making it easier to manage and debug. State can be managed locally within a component or globally using state management libraries like Redux.

3. Setting Up Your First React Project

  • Using Create React App (CRA):
    CRA is a tool that sets up everything you need for a React project, including Webpack, Babel, and other configurations. To get started with CRA, you can use the following commands:

      bashCopyEditnpx create-react-app my-app
  cd my-app
  npm start

    This will create a new React project with all the dependencies installed and run it on localhost:3000.

  • Using Vite for Faster Builds:
    Vite is a modern build tool that is faster than CRA due to its optimized development server. To set up a React project with Vite:

      bashCopyEditnpm create vite@latest my-app --template react
  cd my-app
  npm install
  npm run dev

    Vite will start a development server on localhost:3000, and your app will be up and running with fast hot module replacement (HMR).

  • Manual Setup (Advanced):
    For more control over your project, you might want to set up React from scratch. This involves configuring Webpack, Babel, and other tools yourself.

4. Understanding React's Core Workflow

  • Entry Point (index.js):
    The entry point in a React application is usually index.js. Here, React renders the root component (typically App.js) into the DOM using ReactDOM.createRoot or ReactDOM.render. Example:

      javascriptCopyEditimport React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);

  • React’s Virtual DOM:
    React creates a lightweight Virtual DOM, which is a representation of the actual DOM in memory. When the state or props change, React compares the current Virtual DOM with the previous one (diffing) and only updates the parts of the real DOM that have changed. This minimizes performance bottlenecks by reducing unnecessary DOM manipulations.

  • Component Lifecycle:
    React components go through various lifecycle phases: mounting, updating, and unmounting. React provides lifecycle methods like componentDidMount (called after the component is rendered) and componentDidUpdate (called after the component updates). Hooks like useEffect can be used to manage side effects in functional components.

5. JSX: Writing UI in JavaScript

  • What is JSX?
    JSX is a syntax extension for JavaScript that allows developers to write HTML-like code inside JavaScript. Although it looks like HTML, JSX is compiled into React.createElement calls behind the scenes, which React uses to create elements in the virtual DOM.

  • How JSX Works:
    JSX allows embedding JavaScript expressions within {}. For example:

      jsxCopyEditconst name = "Yash";
  const element = <h1>Hello, {name}!</h1>;

    This JSX code will be compiled into:

      javascriptCopyEditReact.createElement('h1', null, 'Hello, Yash!');

  • Embedding Expressions:
    Use curly braces {} to embed JavaScript expressions in JSX:

      jsxCopyEditconst sum = 10 + 5;
  const element = <h1>The sum is {sum}</h1>;

  • Attributes in JSX:
    JSX uses camelCase for attributes instead of HTML-style attributes. For example:

      jsxCopyEdit<button onClick={handleClick}>Click Me</button>

6. The Render Method in React

  • Purpose:
    The render method is the most crucial part of a React component. It describes how the component’s UI should look, given the current state and props.

  • Return Types:
    The render method must return either a React element (single or wrapped set of elements), null, or false if there's no UI to render.

    • React elements can be primitive HTML tags or custom components.

    • If multiple elements are returned, they must be wrapped in a parent element (like a <div> or React.Fragment).

  • React.Fragment:
    Use React.Fragment to group multiple elements without adding extra nodes to the DOM:

      jsxCopyEditrender() {
    return (
      <React.Fragment>
        <h1>Title</h1>
        <p>Subtitle</p>
      </React.Fragment>
    );
  }

7. How React.createElement() Works

Definition:

React.createElement() is a JavaScript function that creates React elements. This is what JSX gets converted into during the compilation process. It accepts three arguments: type, props, and children.

Example:

  •   javascriptCopyEditReact.createElement('h1', { className: 'title' }, 'Hello, React!');

  • JSX to React.createElement():
    When you write JSX like:

      jsxCopyEdit<h1 className="greeting">Hello, React!</h1>

    It gets compiled to:

      javascriptCopyEditReact.createElement('h1', { className: 'greeting' }, 'Hello, React!');

8. React Basics Recap

  • Virtual DOM: React’s Virtual DOM ensures that only the necessary parts of the real DOM are updated when state changes, leading to better performance.

  • State vs Props: State is local to a component, while props are used to pass data between components.

  • Declarative vs Imperative: React promotes a declarative approach to UI development, where you describe the UI, and React takes care of the rendering.

9. What is React Virtual DOM?

Definition:

The Virtual DOM is a lightweight copy of the real DOM. It is a JavaScript object that React uses to efficiently update the UI by comparing the new Virtual DOM tree with the previous one.

The React Virtual DOM is a lightweight representation of the actual DOM. It serves as a virtual copy of the UI and acts as an intermediary layer between the React application and the browser’s real DOM.

How It Works:

  1. React creates a Virtual DOM tree that mirrors the actual DOM.

  2. When a state or prop changes, React updates the Virtual DOM.

  3. React compares the old and new Virtual DOM trees (diffing).

  4. Only the differences ("patches") are applied to the real DOM.

Advantages:

  • Efficient Updates: React avoids direct DOM manipulations, which are slower.

  • Improved Debugging: Easier to trace changes in the UI.

  • Simplifies debugging as React handles efficient rendering internally.

Interview Perspective:

  • Question: Why does React use a Virtual DOM? Answer: To improve performance and provide an optimized way of updating the UI without directly interacting with the slow real DOM.

10. What is React Fiber, and How is it Used?

Definition:

React Fiber is the updated reconciliation algorithm introduced in React 16. It allows React to handle rendering tasks asynchronously, improving performance and user experience.

Key Features:

  • Purpose:
    Fiber was designed to enable incremental rendering, allowing React to break rendering work into smaller chunks and prioritize updates. This helps in improving the responsiveness of applications.

  • Why Fiber?
    The older reconciliation algorithm (stack-based) processed updates synchronously, meaning updates to large applications could block the UI thread and cause performance issues. Fiber solves this by enabling asynchronous rendering.

  • Concurrency: Breaks rendering work into smaller chunks.

  • Prioritization: Handles critical updates like animations before less important tasks.

  • Error Boundaries: Improves debugging and error handling.

  • Features:

    1. Concurrent Rendering:
      Allows React to interrupt rendering work when a higher-priority update (like user input) comes in.

    2. Scheduling and Prioritization:
      React Fiber assigns a priority to updates and schedules them accordingly. For example, an animation update may be prioritized over a data fetch.

Use Cases:

  • Enables features like Suspense for lazy loading and Concurrent Mode for smoother rendering.

  • Improves rendering performance in applications with complex UIs.

How It Works:

  • React Fiber divides the Virtual DOM into units of work called "fibers."

  • Each fiber contains information about the component and its updates.

  • React processes these fibers incrementally, pausing and resuming rendering as needed.

Interview Perspective:

  • Question: How does Fiber improve React’s rendering process? Answer: Fiber enables asynchronous rendering and prioritizes updates, ensuring smoother user interactions even during heavy computations.

11. What are React Hooks?

Definition:

Hooks are functions that let you use React features like state and lifecycle methods in functional components.

React Hooks are functions introduced in React 16.8 that allow functional components to manage state and lifecycle features, which were previously only possible in class components.

Key Features of Hooks:

  1. No Need for Classes:
    Hooks allow you to use state and other React features in functional components.

  2. Built-in Functions:
    React provides several built-in hooks like useState, useEffect, and useContext.

  3. Custom Hooks:
    Developers can create their own hooks to reuse logic across components.

Why Hooks?

  • Simpler and cleaner code without the need for class components.

  • Share stateful logic easily with custom hooks.

  • Better organization of component logic (e.g., separating UI logic from side effects).

Key Hooks:

  1. useState: For state management.

  2. useEffect: For side effects like API calls.

  3. useContext: For accessing context without prop drilling.

  4. useReducer: Similar to useState but better for complex state logic.

  5. useRef: Returns a mutable ref object, often used for accessing DOM elements.

Example:

import React, { useState } from 'react';

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

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

Interview Perspective:

  • Question: Why were Hooks introduced in React? Answer: Hooks simplify component logic, reduce boilerplate code, and make it easier to reuse stateful logic.

12. When Should We Use Hooks?

Usage Scenarios:

  1. Stateful Logic in Functional Components: Replace class components with functional components using useState and useEffect.

  2. Sharing Logic: Custom hooks make it easy to reuse stateful logic across components.

  3. Side Effects: Use useEffect for tasks like fetching data or subscribing to events.

Example:

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Time: {seconds}s</p>;
}

When Not to Use Hooks?

  1. Static Data:
    If the data does not change or does not need to be reactive, avoid unnecessary state or hooks.

  2. Global State Outside Context:
    Use state management libraries like Redux or Zustand for complex global state instead of relying solely on hooks.

  3. Performance-Critical Areas:
    Hooks like useEffect can lead to performance bottlenecks if used improperly (e.g., missing dependency arrays).

Interview Perspective:

  • Question: Can you use Hooks in class components? Answer: No, Hooks are exclusive to functional components.

13. Is the React Library Mandatory to Import?

Answer:

No, as of React 17+, you no longer need to import React to use JSX. Modern React uses an automatic JSX runtime.

Scenarios Where React Import Is Still Required:

  1. Using older React versions (<17).

  2. Directly calling React.createElement.

  3. Using custom JSX transformation settings.

Interview Perspective:

  • Question: Why was the need for importing React removed in React 17+? Answer: React 17 introduced an automatic JSX runtime that eliminates the reliance on React.createElement.

14. What are React Props?

Definition:

Props are immutable inputs passed from parent to child components to make them dynamic and reusable.

Props (short for Properties) are a way to pass data from one component to another in React. Props are immutable, meaning they cannot be changed by the receiving component—they are read-only.

Why Use Props?

  1. Data Communication: Props allow passing data between components, making them dynamic.

  2. Reusability: Components can be reused with different props to handle various data inputs.

  3. Separation of Concerns: Keeps the parent component responsible for data logic and the child focused on rendering.

Key Characteristics:

  • Immutable: Props cannot be modified in the child component.

  • Unidirectional Flow: Props flow from parent to child in a top-down manner.

  • Dynamic: The parent component can update the props, and React will re-render the child component with the updated props.

  • Reusable: Props make components more flexible and reusable by allowing them to work with dynamic data.

Common Mistakes

  1. Mutating Props:
    Avoid modifying props in the child component. For state changes, use useState in the child.

  2. Not Passing Required Props:
    Ensure essential props are always passed. Use PropTypes to validate:

Example:

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

function App() {
  return <Greeting name="Yash" />;
}

Interview Perspective:

  • Question: How do props differ from state? Answer: Props are passed to a component by its parent, while state is managed within the component itself.

15. Virtual DOM, Fiber, and Reconciliation

Relationship:

  • The Virtual DOM is a lightweight representation of the real DOM.

  • Fiber optimizes the reconciliation process for better performance.

  • Reconciliation ensures only the necessary updates are applied to the DOM.

Virtual DOM

  1. Definition:
    The Virtual DOM (VDOM) is a lightweight representation of the actual DOM. It exists as a JavaScript object that React uses to optimize UI updates.

  2. How It Works:

    • When the state of a React component changes, a new Virtual DOM tree is created.

    • React compares the new Virtual DOM with the previous version to determine the differences (a process called diffing).

    • Only the parts of the real DOM that have changed are updated (patching).

  3. Advantages:

    • Efficiency: Reduces costly DOM manipulation by batching updates.

    • Predictability: Makes the UI updates predictable and bug-free.

    • Improved Performance: Prevents direct interaction with the DOM, which is slower.

React Fiber

  1. Definition:
    React Fiber is a complete rewrite of React’s reconciliation algorithm, introduced in React 16. It allows React to break rendering work into chunks and pause/resume them as needed.

  2. Why Fiber Was Introduced:

    • To handle asynchronous rendering.

    • Improve user experience by prioritizing important tasks (like animations) over less critical updates.

  3. Key Features:

    • Concurrency: React can pause, resume, and abort rendering tasks.

    • Prioritization: Critical updates (e.g., user input) are prioritized over less urgent tasks.

    • Improved Debugging: Fiber makes error handling more robust.

  4. How It Works:

    • Fiber breaks the Virtual DOM tree into smaller units called "fibers."

    • Each fiber represents a node in the tree and contains information about its state and updates.

    • React processes fibers incrementally to prevent blocking the main thread.

Reconciliation

  1. Definition:
    Reconciliation is the process React uses to update the DOM efficiently by determining the differences between the current Virtual DOM and the new one.

  2. How It Works:

    • Diffing Algorithm: React uses an efficient diffing algorithm to compare Virtual DOM trees.

    • Key Importance: To optimize updates, React relies on the key prop in lists to identify elements.

  3. Steps in Reconciliation:

    • Update Virtual DOM: React creates a new Virtual DOM tree based on state/prop changes.

    • Compare Trees: The new Virtual DOM is compared with the previous one to identify changes.

    • Patch Changes: Only the modified elements are updated in the actual DOM.

  4. Optimizations:

    • Keys in Lists: Helps React identify which elements have changed.

        jsxCopyEditconst items = ['Apple', 'Banana', 'Cherry'];
  return items.map((item, index) => <li key={index}>{item}</li>);

    • Batching Updates: React batches multiple state updates to minimize re-renders.

Example:

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

Interview Perspective:

  • Question: What is the main purpose of the reconciliation process? Answer: To efficiently update the real DOM by applying only the changes detected in the Virtual DOM.
ReactJavaScriptDOMFoundationJSX