quiz 5 reviewer advanced web

React Layout Component

A reusable component that defines the overall structure of a webpage. It organizes shared sections like the Header, Navigation Menu, Sidebar, Main Content, and Footer to eliminate repetitive code across pages.

React Advanced Components

Reusable components and external third-party libraries that simplify and speed up modern web development, allowing developers to implement complex features instead of building from scratch.

React Pagination

A technique that divides large datasets into smaller, separate pages to avoid rendering hundreds of records at once on a single crowded page.

Benefits of Pagination

Reduces the volume of data shown at once, improves page readability and navigation, organizes large datasets, and optimizes web application performance.

React Material UI (MUI)

An open-source React component library implementing Google's Material Design, providing pre-built components like Button, Card, TextField, AppBar, Alert, Dialog, Table, and Grid.

MUI Installation Commands

• Core: npm install @mui/material @emotion/react @emotion/styled

• Icons: npm install @mui/icons-material

React Bootstrap

A library that rebuilds Bootstrap components specifically for React. It replaces Bootstrap's default JavaScript behaviors with pure React state logic and eliminates the need for jQuery.

React Bootstrap Installation & CSS Import

• Install: npm install react-bootstrap bootstrap

• Import: import "bootstrap/dist/css/bootstrap.min.css"; (in main.jsx)

React Map

A feature used to render interactive maps and geographic information (such as school campuses, hospitals, hazard zones, evacuation centers, and delivery routes).

React Leaflet

A library that provides React bindings for the Leaflet mapping library, allowing map functionalities to be used directly through React components.

React Leaflet Installation & CSS Import

• Install: npm install leaflet react-leaflet

• Import: import "leaflet/dist/leaflet.css";

React Table

A component used to display structured information organized into rows and columns (e.g., student records, employee data, sales reports, and inventory).

TanStack Table

A headless table library that manages complex table logic (sorting, searching, pagination, filtering) while allowing developers full control over design, HTML markup, and styling.

TanStack Table Installation

npm install @tanstack/react-table

Common Advanced Table Features

Search, Sorting, Filtering, Pagination, Row selection, Data formatting, Editable rows, and Delete actions.