React is a powerful UI library, but it doesn’t come with built-in components like buttons, modals, or dropdowns. To build polished, accessible, and consistent interfaces, developers often rely on component libraries. Two modern libraries that stand out in this space are Shadcn UI and Radix UI.

This module introduces both libraries, explains their relationship, and shows how they work together to help developers build fast, accessible, and customizable interfaces without reinventing the wheel.

Overview

• Radix UI is a low-level component library focused on accessibility and behavior.
• Shadcn UI is a styled, higher-level UI system that wraps Radix primitives using Tailwind CSS, offering beautiful, ready-to-use components.

1. What is Radix UI?

Radix UI provides unstyled, accessible primitives for building components. These are headless (logic only) building blocks, giving developers full control over how components look while offering a robust, accessible structure.

Why Use Radix UI?

• Accessibility First: Components follow WAI-ARIA standards by default.
• Headless Approach: Full control over styling and composition.
• Composability: Components like Dialog, Popover, and Tabs are built to work with React composition patterns.
• No Style Imposition: You’re free to use Tailwind, CSS-in-JS, or plain CSS.

Popular Primitives in Radix UI

• @radix-ui/react-dialog: Accessible modal dialogs.
• @radix-ui/react-popover: Tooltips and popovers.
• @radix-ui/react-tabs: Keyboard-navigable tab interfaces.
• @radix-ui/react-switch: Toggle switches with ARIA support.
• @radix-ui/react-toast: Notifications and alerts.

Installation Example:

npm install @radix-ui/react-dialog

Usage Example:

import * as Dialog from '@radix-ui/react-dialog';

const Modal = () => (
  <Dialog.Root>
    <Dialog.Trigger>Open Modal</Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Overlay className="fixed inset-0 bg-black/50" />
      <Dialog.Content className="bg-white p-4 rounded-lg shadow">
        <Dialog.Title>Edit Profile</Dialog.Title>
        <Dialog.Description>Make changes to your profile here.</Dialog.Description>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
);

You can style the components however you want using Tailwind or any other system.

2. What is Shadcn UI?

Shadcn UI is a library that provides pre-styled, Tailwind-powered, Radix-based components. Think of it as a production-ready UI kit that combines the accessibility of Radix with the utility-first design of Tailwind CSS.

Why Shadcn UI?

• Built on Radix UI: All components inherit Radix’s accessibility and behavior.
• Uses Tailwind CSS: Seamless utility-based styling.
• Fully Customizable: Components are generated into your codebase — you own and modify them.
• Beautifully Designed: Comes with thoughtful spacing, typography, and animations.
• Non-opaque: No vendor lock-in, no hidden styles or behaviors.

Installing Shadcn UI

To set up Shadcn UI in a React + Tailwind project:

npx shadcn-ui@latest init

It will ask questions like:

• Framework (e.g., Next.js)
• CSS framework (e.g., Tailwind)
• UI preferences (e.g., radix support, component directory)

After setup, you can add components like:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog

Example Button Component (Shadcn UI)

import { Button } from "@/components/ui/button";

export default function App() {
  return (
    <Button variant="outline" size="lg">
      Click Me
    </Button>
  );
}

Behind the scenes, this is a Tailwind-styled component using Radix primitives, generated into your codebase at components/ui/button.tsx.

3. Shadcn UI vs Radix UI: When to Use What?

4. When to Use Them Together

You don’t need to choose one or the other — Shadcn UI uses Radix UI under the hood. Use Shadcn when you want speed and polish, and drop down to Radix if you need more control or want to build a highly custom interaction.

Example:

• Use shadcn/ui for most common components (Button, Dialog, Tabs, Tooltip).
• Use @radix-ui/react-* directly for custom behavior with your own design system.

5. Recommended Practices

• Install Only What You Need: Shadcn allows you to add components individually.
• Customize Early: Don’t treat Shadcn as a black box — modify and tailor components as per your design needs.
• Extend Components: You can wrap base components to create variants, themes, or logic extensions.
• Stay Updated: Both libraries evolve rapidly — keep an eye on changelogs and updates.

Conclusion

Radix UI and Shadcn UI bring together accessibility, modularity, and developer ergonomics. They give you a modern workflow to build UI components in React that are both beautiful and accessible out of the box. Whether you’re building a quick MVP or a production-grade system, this combination gives you the flexibility and control to do it right.

Tailwind CSS is a utility-first CSS framework that has gained widespread adoption due to its simplicity and flexibility. Instead of writing custom CSS for every element, Tailwind encourages the use of utility classes directly in the markup to style elements. This approach speeds up development by reducing the need to define styles in separate CSS files and allows for more consistency across the application.

In this module, we will explore how to integrate Tailwind CSS into your React application and leverage its utility-first approach effectively.

What is Utility-First CSS?

Utility-first CSS refers to the practice of using predefined utility classes (e.g., p-4, bg-blue-500, text-center) directly in your HTML or JSX to style elements. Instead of writing custom classes and styles, you apply small, reusable classes that control individual aspects of styling, such as padding, colors, margins, and typography.

Why Utility-First?

• Faster Development: With utility classes, you can style elements quickly without having to create custom CSS rules for each component.
• No Context Switching: Instead of writing CSS in separate files, the styling is directly in your JSX, making it easier to visualize how a component looks.
• Consistency: Using a predefined set of utility classes leads to more consistent designs because you’re working from a unified set of classes for your entire application.
• Responsive Design: Tailwind makes it easy to apply responsive styles by adding breakpoints as classes, such as sm:bg-red-500, md:p-6, etc.

Setting Up Tailwind CSS in React

Before using Tailwind CSS in your React app, you need to set it up. Here’s how you can do it:

1. Install Tailwind CSS: First, install the necessary dependencies: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init
2. Configure Tailwind: After initializing Tailwind, configure it by editing the tailwind.config.js file to point to your React files:
   module.exports = { content: [ './src/**/*.{html,js,jsx,ts,tsx}', // Tailwind should scan all these files for class names ], theme: { extend: {}, }, plugins: [], };
3. Include Tailwind in Your CSS: In your src/index.css or src/App.css file, include Tailwind’s base, components, and utilities:
   /* index.css */ @tailwind base; @tailwind components; @tailwind utilities;
4. Start Using Tailwind in Your Components: Now, you can start using Tailwind utility classes directly in your JSX elements.

Basic Utility Classes in Tailwind CSS

Tailwind comes with a large set of utility classes for controlling layout, typography, colors, spacing, borders, and more. Here are some of the most commonly used ones:

Layout Utilities

• container: Sets the maximum width of an element to match the layout container.
• flex: Enables flexbox layout.
• grid: Enables grid layout.
• block, inline, inline-block: Controls the display type of elements.

Spacing Utilities

• p-4, px-4, py-4: Padding utilities (all sides, horizontal, vertical).
• m-4, mx-4, my-4: Margin utilities (all sides, horizontal, vertical).
• space-x-4, space-y-4: Spacing between child elements (horizontal or vertical).

Typography Utilities

• text-lg, text-xl, text-2xl: Text size utilities.
• font-bold, font-light: Font weight utilities.
• text-center, text-left, text-right: Text alignment utilities.

Color Utilities

• bg-blue-500: Background color.
• text-white: Text color.
• border-gray-300: Border color.

Responsive Utilities

• sm:bg-blue-500, md:text-xl, lg:p-8: Utilities that apply styles at specific breakpoints.
• sm:: Styles applied on small screens.
• md:: Styles applied on medium screens.
• lg:: Styles applied on large screens.

Using Tailwind CSS in React Components

One of the core advantages of using Tailwind CSS in React is the ability to apply utility classes directly within JSX. This makes it easy to design and style components without leaving the component file.

Example of Tailwind CSS in a React Component

import React from 'react';

const Button = () => {
  return (
    <button className="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600 focus:outline-none">
      Click Me
    </button>
  );
};

export default Button;

Explanation:

• bg-blue-500: Sets the background color to a shade of blue.
• text-white: Sets the text color to white.
• p-4: Adds padding of 1rem on all sides.
• rounded-lg: Adds rounded corners.
• hover:bg-blue-600: Changes the background color on hover.
• focus:outline-none: Removes the default focus outline.

This concise and readable code demonstrates the power of Tailwind CSS to apply styles directly in JSX.

Best Practices for Using Tailwind CSS in React

While Tailwind CSS allows for quick styling, it’s important to follow best practices to keep your codebase clean and maintainable:

1. Avoid Overuse of Utility Classes: While utility classes can be convenient, overusing them in JSX can lead to cluttered and hard-to-read code. Try to keep utility classes to a reasonable amount and refactor when necessary.
2. Component Abstraction: If you find yourself repeating utility classes across multiple components, consider creating reusable components that encapsulate those classes. This can prevent duplication and improve maintainability. Example:
   const Card = ({ title, content }) => { return ( <div className="bg-white p-6 rounded-lg shadow-md"> <h2 className="text-xl font-bold">{title}</h2> <p>{content}</p> </div> ); };
3. Using Tailwind’s @apply Directive: Tailwind allows you to use the @apply directive in your CSS files to group common utility classes into reusable CSS classes. This helps reduce repetition in JSX.
   /* styles.css */ .card { @apply bg-white p-6 rounded-lg shadow-md; } .card-title { @apply text-xl font-bold; } And in JSX: <div className="card"> <h2 className="card-title">Card Title</h2> <p>Card content</p> </div>
4. Leverage Tailwind’s Configuration: Tailwind’s configuration file (tailwind.config.js) allows you to customize the default theme, extend it with your own color palette, spacing, fonts, etc. This can be helpful for keeping your design consistent across your app. Example:
   // tailwind.config.js module.exports = { theme: { extend: { colors: { customBlue: '#1D4ED8', }, }, }, };

Optimizing Tailwind CSS for Production

One of the key considerations when using Tailwind CSS is ensuring that your production build doesn’t include unused CSS classes. Tailwind CSS comes with a built-in purge feature that helps with this.

To enable purging of unused classes:

1. Configure Purge in tailwind.config.js: Tailwind CSS will purge unused CSS classes when you build your app for production. Make sure your configuration includes the correct paths to your source files.
   module.exports = { content: [ './src/**/*.{html,js,jsx,ts,tsx}', // Add all relevant file paths ], };
2. Build for Production: When you build your React app for production, use the following command to minify and purge unused CSS:
   npm run build

This process significantly reduces the size of your final CSS file, improving your app’s load times and performance.

Summary

In this module, we’ve learned how to use Tailwind CSS in React:

• Utility-first: Tailwind uses utility classes to style elements directly in JSX, reducing the need for custom CSS.
• Setup: We covered the steps to install and configure Tailwind CSS in your React app.
• Common Utilities: We explored basic utility classes such as layout, spacing, typography, and colors.
• Best Practices: We discussed how to keep your code clean by using reusable components and @apply for common styles.
• Production Optimization: We explored how to purge unused CSS classes to optimize performance.

Tailwind CSS is a powerful tool for React developers looking to speed up development and create responsive, consistent, and maintainable user interfaces.

Styling React components is one of the core aspects of building user interfaces. While traditional CSS styles can be applied globally, the modern approach focuses on component-scoped styles to improve maintainability and scalability. In this module, we will explore three popular styling techniques for React applications: CSS Modules, Styled-Components, and Tailwind CSS. Each of these approaches has its own strengths and can be chosen based on the needs of your project.

What Are CSS Modules?

CSS Modules are a way to scope CSS at the component level. Unlike traditional CSS where styles are applied globally, CSS Modules ensure that styles are scoped to the component that imports them. This prevents class name conflicts and makes styling more modular and maintainable.

How CSS Modules Work

• When using CSS Modules, each class name is locally scoped to the component that imports the CSS file. The class names are transformed into unique identifiers during the build process.
• This ensures that styles defined for one component don’t accidentally override or conflict with styles in another component.

Setting Up CSS Modules

1. Create a .module.css file: Create a CSS file with the .module.css extension.

/* styles.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

2. Import and use the styles in a React component:

import React from 'react';
import styles from './styles.module.css';

const Button = () => {
  return <button className={styles.button}>Click Me</button>;
};

export default Button;

Advantages of CSS Modules:

• Local scoping: Styles are scoped to the component, reducing the risk of global conflicts.
• No global namespace pollution: Since the styles are scoped, there are no issues with styles leaking into other parts of the application.
• Familiar syntax: If you’re already familiar with traditional CSS, CSS Modules are easy to learn and use.

What Are Styled-Components?

Styled-components is a popular library for styling React components using tagged template literals in JavaScript. It allows you to define styles inside JavaScript files, which means your styles are scoped to the component and written in JavaScript.

How Styled-Components Work

• Styled-components allows you to define styled elements directly within your JavaScript code.
• You can use props and theme values within styled components to make styles dynamic.

Setting Up Styled-Components

1. Install styled-components:

npm install styled-components

2. Define styled components:

import React from 'react';
import styled from 'styled-components';

// Create a styled button
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;

  &:hover {
    background-color: darkblue;
  }
`;

const App = () => {
  return <Button>Click Me</Button>;
};

export default App;

Advantages of Styled-Components:

• CSS-in-JS: Styles are written directly in JavaScript, making it easy to dynamically apply styles based on props or state.
• Component scoping: Just like CSS Modules, styles are scoped to the component, preventing conflicts with other styles.
• Support for theming: Styled-components allows you to easily manage themes for your application by using the ThemeProvider component.

What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to style elements directly in your JSX. Instead of writing traditional CSS or creating separate styled components, you apply utility classes like text-center, bg-blue-500, p-4, and more directly to your JSX elements.

How Tailwind CSS Works

• Tailwind CSS is based on utility classes that can be applied to HTML elements. It doesn’t require creating separate component files for styling; instead, you directly apply classes to the HTML elements in your JSX.
• This approach speeds up development by reducing the need to manage separate CSS files or styled components.

Setting Up Tailwind CSS

1. Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Configure Tailwind:

In your tailwind.config.js file:

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',  // Add your React file extensions here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Use Tailwind classes in JSX:

import React from 'react';
import './App.css';  // Import Tailwind CSS in your main CSS file

const App = () => {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100">
      <button className="bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600">
        Click Me
      </button>
    </div>
  );
};

export default App;

Advantages of Tailwind CSS:

• Utility-first: Tailwind encourages the use of utility classes to quickly style components without writing custom CSS.
• Highly customizable: Tailwind’s configuration allows you to create a custom design system, adjusting the spacing, colors, typography, etc.
• No naming conflicts: Since you’re using utility classes, there’s no risk of class name collisions.
• Faster development: Tailwind speeds up styling by allowing you to write fewer lines of code and apply styles directly in the JSX.

Comparison of the Three Techniques

Choosing the Right Styling Approach

Each of the three styling techniques—CSS Modules, Styled-Components, and Tailwind CSS—has its strengths. Here are some guidelines for choosing the right approach:

• Use CSS Modules if you prefer traditional CSS but want to scope styles to components to avoid global conflicts.
• Use Styled-Components if you prefer to have your styles written in JavaScript and want dynamic styling that can change based on props and state.
• Use Tailwind CSS if you want to quickly prototype or prefer a utility-first approach, reducing the need to write custom CSS altogether.

Summary

In this module, we’ve covered three popular styling techniques in React:

• CSS Modules: A way to scope your CSS locally to your components.
• Styled-Components: A CSS-in-JS solution that allows you to define styled elements within JavaScript using template literals.
• Tailwind CSS: A utility-first CSS framework that provides a set of utility classes to quickly style components without writing custom CSS.

Each of these techniques provides different ways to approach styling in React, so you can choose the one that best fits your project needs.

Atomic Design is a methodology for creating design systems in a structured way. It divides the user interface into five distinct levels of abstraction: Atoms, Molecules, Organisms, Templates, and Pages. In React, adopting the Atomic Design methodology can help break down the user interface into smaller, more manageable components, making it easier to maintain and scale.

In this module, we will focus on how to implement the Atoms, Molecules, and Organisms levels in React.

What is Atomic Design?

Atomic Design is a methodology coined by Brad Frost that divides UI design into five distinct levels:

1. Atoms: The smallest building blocks, such as buttons, inputs, and labels.
2. Molecules: Groups of atoms functioning together, like a form group (label, input, and button).
3. Organisms: Groups of molecules and atoms forming more complex UI components, like a navigation bar or a card.
4. Templates: Layouts made up of organisms and placeholders.
5. Pages: Final rendered pages that represent real content and data.

In this module, we will explore Atoms, Molecules, and Organisms and how to use them in React to build scalable, reusable components.

Atoms in Atomic Design

What are Atoms?

Atoms are the basic building blocks of a design system. They cannot be broken down into smaller pieces without losing their functionality. Examples of atoms include:

• Buttons
• Input fields
• Icons
• Labels
• Headings

In React, atoms are usually simple, self-contained components that accept props for customization.

Example of an Atom in React:

import React from 'react';

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

Explanation:

• The Button component is a simple, reusable atomic component. It accepts two props: label (the text inside the button) and onClick (a function to handle click events).
• Atoms like this are the foundation of your UI and are typically shared across your application.

Other Examples of Atoms:

// Label Atom
const Label = ({ text }) => <label>{text}</label>;

// Input Atom
const Input = ({ value, onChange }) => (
  <input value={value} onChange={onChange} />
);

Molecules in Atomic Design

What are Molecules?

Molecules are groups of atoms that function together as a unit. A molecule is a simple combination of atoms to form a more complex UI element. For example:

• A form field consisting of an input (atom) and a label (atom).
• A button with an icon (atom) inside it.

Example of a Molecule in React:

import React from 'react';
import Input from './Input';
import Label from './Label';

const InputField = ({ label, value, onChange }) => {
  return (
    <div>
      <Label text={label} />
      <Input value={value} onChange={onChange} />
    </div>
  );
};

export default InputField;

Explanation:

• The InputField component is a molecule because it combines an Input atom and a Label atom to create a more complex UI element.
• The InputField component is reusable and accepts props for label, value, and onChange to customize the form field.

Other Examples of Molecules:

// Button with icon (Molecule)
import Button from './Button';
import Icon from './Icon';

const IconButton = ({ icon, label, onClick }) => (
  <Button onClick={onClick}>
    <Icon name={icon} />
    {label}
  </Button>
);

Organisms in Atomic Design

What are Organisms?

Organisms are groups of molecules and atoms that form distinct sections of an interface. They are more complex components that usually contain multiple molecules. Organisms are typically responsible for managing their own state and interactions. For example:

• A navigation bar containing links (molecules).
• A product card that displays an image, a title, and a description (molecules and atoms).

Example of an Organism in React:

import React from 'react';
import InputField from './InputField';
import Button from './Button';

const SearchForm = ({ query, onQueryChange, onSubmit }) => {
  return (
    <form onSubmit={onSubmit}>
      <InputField label="Search" value={query} onChange={onQueryChange} />
      <Button label="Submit" onClick={onSubmit} />
    </form>
  );
};

export default SearchForm;

Explanation:

• The SearchForm component is an organism because it combines multiple molecules (InputField and Button) to create a form.
• It handles the form submission and the query state, making it more complex than the individual molecules.

Other Examples of Organisms:

// Navigation Organism
import NavItem from './NavItem';

const Navbar = () => {
  return (
    <nav>
      <NavItem label="Home" href="/" />
      <NavItem label="About" href="/about" />
      <NavItem label="Contact" href="/contact" />
    </nav>
  );
};

Best Practices for Atomic Design in React

When applying Atomic Design principles to React, consider the following best practices:

1. Component Modularity: Break your UI into small, reusable components (atoms, molecules, organisms) that can be easily managed and tested.
2. Props for Customization: Use props to make components flexible and customizable. Atoms, molecules, and organisms should accept props that allow you to alter their behavior and appearance.
3. Avoid Tight Coupling: Ensure that your components are decoupled and reusable. For example, avoid hardcoding data or styles inside components, and pass them through props instead.
4. Component Responsibility: Follow the Single Responsibility Principle. Each component should have one job, whether it’s an atom that renders a button, a molecule that groups an input and a label, or an organism that handles form submission.
5. Component Nesting: Organisms can contain multiple molecules, and molecules can contain atoms. Avoid nesting too deeply as it can make the component tree harder to manage.

Summary

In this module, we’ve explored:

• Atoms: The smallest, reusable components like buttons and inputs.
• Molecules: Combinations of atoms that create more complex UI elements like form fields or buttons with icons.
• Organisms: Larger UI components made up of multiple molecules and atoms, such as a search form or a navigation bar.

By using Atomic Design principles, you can structure your React application to be more modular, maintainable, and scalable.

Component composition and reusability are two of the most powerful features in React. They allow you to build complex UIs by combining smaller, reusable components, leading to more maintainable and scalable applications. This module will focus on how to effectively compose components and make them reusable across your React application.

What is Component Composition?

Component composition refers to combining smaller, more focused components to create more complex UI elements. Rather than having large monolithic components, React encourages breaking down the UI into smaller, reusable components, which can then be composed together to create the final output.

Benefits of Component Composition:

• Modularity: It allows you to break down the application into smaller, more manageable pieces.
• Maintainability: Smaller components are easier to maintain, test, and debug.
• Reusability: By composing components, you can easily reuse parts of your UI in different places in your application.
• Separation of Concerns: Each component has a single responsibility, making it easier to reason about the code.

Example of Component Composition:

import React from 'react';

// Card Component
const Card = ({ title, content }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
};

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <Card title="Card 1" content="This is the first card." />
      <Card title="Card 2" content="This is the second card." />
      <Card title="Card 3" content="This is the third card." />
    </div>
  );
};

export default Dashboard;

Explanation:

• The Card component is simple and reusable. It takes title and content as props and displays them.
• The Dashboard component is responsible for composing multiple Card components, passing different props to each.
• This composition allows you to reuse the Card component wherever needed, improving reusability and maintainability.

Making Components Reusable

Reusable components are those that can be used in multiple places with different props or content. This is key to building scalable applications in React. Let’s explore some strategies for making components reusable.

1. Use Props for Flexibility

The key to making a component reusable is to make it flexible by passing dynamic content through props. Avoid hardcoding content directly in the component; instead, use props to pass values.

import React from 'react';

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

Explanation:

• The Button component is reusable because it accepts a label and an onClick function as props.
• You can now use the Button component in multiple places with different labels and actions.

2. Children as Props for Nested Components

React allows you to pass content inside a component using the special children prop. This makes it easy to compose components with flexible content.

import React from 'react';

const Modal = ({ title, children }) => {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <div className="modal-content">{children}</div>
    </div>
  );
};

export default Modal;

Example Usage of Modal:

import React from 'react';
import Modal from './Modal';

const App = () => {
  return (
    <div>
      <Modal title="Important Information">
        <p>This is some important information displayed inside the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

Explanation:

• The Modal component is flexible because it accepts children as a prop. This allows it to be used with any content inside.
• You can pass different content inside the Modal component based on where it’s used.

Higher-Order Components (HOCs) for Reusability

A Higher-Order Component (HOC) is a function that takes a component and returns a new component with additional functionality. HOCs are often used to add shared functionality to multiple components without repeating code.

Example of a Simple HOC:

import React from 'react';

// HOC to add logging functionality
const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering component:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

const Button = ({ label }) => {
  return <button>{label}</button>;
};

// Wrap Button component with HOC
const ButtonWithLogging = withLogging(Button);

export default ButtonWithLogging;

Explanation:

• The withLogging function is a higher-order component that adds logging functionality to any component.
• The ButtonWithLogging component is the Button component wrapped with the withLogging HOC. Every time the ButtonWithLogging component is rendered, a log is generated.

Custom Hooks for Reusability

React Hooks are a powerful way to add reusable functionality to your components. You can create custom hooks to encapsulate logic that can be reused across multiple components.

Example of a Custom Hook:

import { useState } from 'react';

// Custom hook for managing form inputs
const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange
  };
};

export default useFormInput;

Example of Using the Custom Hook:

import React from 'react';
import useFormInput from './useFormInput';

const Form = () => {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', nameInput.value);
    console.log('Email:', emailInput.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" {...nameInput} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" {...emailInput} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

Explanation:

• The useFormInput custom hook encapsulates the logic for handling form input, making it reusable in different forms.
• By using this custom hook, you can manage the state of form inputs in a clean, reusable way.

Composition Patterns for Reusable UI Elements

React offers various patterns for composing and reusing components. A few of the most common patterns include:

1. Container/Presentational Pattern: Separate the logic (container) and presentation (presentational) into two components. The container handles the logic and passes data to the presentational component.
   const TodoContainer = () => { const todos = ['Learn React', 'Build an app', 'Deploy to production']; return <TodoList todos={todos} />; }; const TodoList = ({ todos }) => { return ( <ul> {todos.map((todo, index) => ( <li key={index}>{todo}</li> ))} </ul> ); };
2. Compound Components Pattern: Use a parent component that manages state and several child components that are tightly related.
   const Accordion = ({ children }) => { const [openIndex, setOpenIndex] = useState(null); return ( <div> {React.Children.map(children, (child, index) => React.cloneElement(child, { isOpen: index === openIndex, onToggle: () => setOpenIndex(index === openIndex ? null : index), }) )} </div> ); }; const AccordionItem = ({ title, isOpen, onToggle, children }) => { return ( <div> <h3 onClick={onToggle}>{title}</h3> {isOpen && <div>{children}</div>} </div> ); };

Summary

In this module, we covered:

• Component composition: How to combine smaller components to create more complex UIs.
• Reusable components: Making components flexible and reusable using props, children, HOCs, and custom hooks.
• Composition patterns: Container/presentational and compound component patterns to keep components maintainable and modular.

Mastering component composition and reusability will allow you to build scalable, maintainable applications in React.