Module-2 on Ghafoor's Personal Blog

Module Summary

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 10:15:14 +0000

This document summarizes the essential concepts from Module 2, including arrays in components, the virtual DOM, and styling approaches in React. It provides a structured overview of how these features enable dynamic, efficient, and maintainable user interfaces.

Module Summary

Function Components

Function components are the primary building blocks in React, defined as JavaScript functions that return JSX. They are simple, reusable, and support hooks for state and side effects.

Styles

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 09:27:38 +0000

Styles in React

In React, styles can be applied to components in various ways, including inline styles, CSS stylesheets, CSS modules, and styled-components. Each method has its own use cases and advantages.

Inline Styles

Inline styles are defined directly within the component using a JavaScript object. This method is useful for dynamic styles that depend on component state or props.

 1function MyComponent() {
 2 const style = {
 3 color: 'blue',
 4 backgroundColor: 'lightgray',
 5 padding: '10px',
 6 borderRadius: '5px'
 7 }
 8
 9 return <div style={style}>Hello, World!</div>
10}
11// Or
12function MyComponent() {
13 return (
14 <div
15 style={{
16 color: 'blue',
17 backgroundColor: 'lightgray',
18 padding: '10px',
19 borderRadius: '5px'
20 }}
21 >
22 <p style={{ margin: 0 }}>Hello, World!</p>
23 </div>
24 )
25}

Inline styles are defined as a JavaScript object.
Property names are written in camelCase (e.g., backgroundColor).
Values are specified as strings.

CSS Modules

CSS Modules allow you to write CSS that is scoped locally to the component, preventing style conflicts. They are implemented as a file with a .module.css extension.

Vdom in React

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 09:22:38 +0000

This document covers the virtual DOM in React, including its structure, how it optimizes updates, the reconciliation process, and the key differences and advantages over the normal DOM.

Introduction to the DOM

The Document Object Model (DOM) is an interface for web pages that represents HTML as a tree-like structure. Each node in the tree corresponds to elements, attributes, or text in the document. The DOM enables programs to access and manipulate content, structure, and style dynamically.

Arrays in Component

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 08:40:18 +0000

This document covers how to declare, traverse, and manage arrays in React components, including state management, rendering lists, and using array methods like map, forEach, and splice for dynamic UIs.

Arrays in React Components

Arrays are fundamental data structures in JavaScript, used to store multiple values in a single variable. In React, arrays are essential for managing lists of data and building dynamic user interfaces.

Declaring and Managing Arrays

Arrays can be declared using array literal notation:

Component Testing

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 08:30:45 +0000

This document covers the fundamentals of testing React components, including the advantages and disadvantages, testing approaches, Arrange-Act-Assert pattern, and popular tools like Jest and React Testing Library.

Introduction to Component Testing

Testing is the process of reviewing how code executes, either line-by-line or through suites that verify application behavior. It ensures that applications work as intended and helps prevent regressions.

Advantages and Disadvantages of Testing

Advantages:

Prevents unexpected regressions
Allows developers to focus on current tasks
Enables modular construction of complex applications
Reduces the need for manual verification

Disadvantages:

Function Comp Lifecycle

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 08:16:33 +0000

This document covers the four phases of the React function component lifecycle—mounting, updating, unmounting, and error handling—explaining how hooks like useState and useEffect enable similar control as class lifecycle methods.

Function Component Lifecycle in React

React function components are the core building blocks for user interfaces. Understanding their lifecycle is essential for managing state, side effects, and cleanup throughout a component’s existence.

Lifecycle Phases Overview

React function components experience four main phases:

State Management

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 08:11:02 +0000

This document covers state management in React function components, including the useState hook, syntax, and practical examples for managing and updating dynamic data in the UI.

State Management in React Function Components

State management allows React components to handle data that changes over time. The state of a component determines its behavior and how it renders at any given moment.

What is State

State refers to the condition or data of a component at a specific time. It holds information that influences the component’s behavior and rendering.

Component Composition

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 07:54:24 +0000

This document explores how React component composition enables building complex UIs from smaller, reusable function components. It covers abstraction, reusability, hierarchy, props, children, and higher-order components, with practical examples for clarity.

Component Composition in React

Component composition is the process of combining multiple smaller components to create more complex functionality and larger UI structures. This approach allows developers to build applications using small, focused building blocks.

Principles of Function Component Composition

Abstraction: Create reusable components that encapsulate specific UI features, breaking down large interfaces into manageable pieces.
Reusability: Avoid code duplication by reusing components across different parts of the application.
Hierarchy: Arrange components in parent-child relationships, supporting modular and organized design.
Props and Children: Pass data and even entire components as props or children, enabling flexible composition.
Higher-Order Components (HOCs): Write functions that accept components as input or return enhanced components, adding features like state management or logic without modifying the original implementation.

Example: Composing a Blog Post UI

Below is a practical example demonstrating these principles. Each component encapsulates a specific feature of a blog post, such as title, author, type, and description.

Function Component

noreply@example.com (AG Sayyed) — Tue, 29 Jul 2025 07:41:04 +0000

This document explores how React function components use props to pass data, set default values, and handle events. It covers the principles of reusability, unidirectional data flow, customization, and composition, as well as practical event handling and conditional rendering techniques.

Working with Function Components – Props and Event Handling

Function components in React use properties, known as props, to pass data from parent to child components. Props are similar to objects and store the attributes of a component. They are immutable, meaning their values cannot be changed by the child component.