Lesson 4 & 5 React Event, States Management and Components

React Event

An action performed by the user or the browser (such as clicking a button, hovering a mouse, or pressing a key) that React listens for to execute a function.

onClick

A React event listener triggered when a user clicks an element.

onDoubleClick

A React event listener triggered when a user double-clicks an element.

onChange

A React event listener triggered when an input value changes.

onSubmit

A React event listener triggered when a form is submitted.

onMouseEnter

A React event listener triggered when the mouse enters an element.

onMouseLeave

A React event listener triggered when the mouse leaves an element.

onKeyDown

A React event listener triggered when a key is pressed.

onKeyUp

A React event listener triggered when a key is released.

camelCase

In Event handling syntax, React uses __ for event names.

React State

A built-in React object that stores data that may change over time, automatically updating the UI and re-rendering the component whenever it changes.

Without State

• Data cannot change dynamically.

• UI remains static.

• User interactions have no visible effect.

With State

• Counters update.

• Forms respond instantly.

• Shopping carts change.

• Dashboards refresh automatically.

useState()

A React Hook that allows functional components to store and update data, automatically updating the screen whenever the stored data changes.

Class Components

Before Hooks existed, React mainly used ____.

setState()

A method used in React Class Components to update state using this.setState().

Stateless Component

A React component (also called a Presentational Component) that does not manage its own state, but instead receives data from its parent component through Props and presents the UI.

Layout Component

A reusable component that defines the overall structure of a webpage, organizing common sections like the Header, Navigation Menu, Sidebar, Main Content, and Footer.

React Advanced Components

Reusable components and libraries (such as Navigation Bars, Sidebars, Cards, Tables, Maps, and Pagination) that simplify and accelerate the development of web applications.

Pagination

A technique that divides a large amount of data into smaller pages, controlling how many rows or records are displayed at once to improve navigation and performance.

Why Use Pagination?

• Reduces the amount of information displayed at one time.

• Makes a page easier to read.

• Improves navigation.

• Organizes large datasets.

• Can improve application performance.

• Prevents long and crowded pages.

Material UI (MUI)

An open-source React component library that implements Material Design and provides pre-built components like Button, Card, TextField, AppBar, Alert, Dialog, Table, and Grid.

To install Material UI

npm install @mui/material @emotion/react @emotion/styled

For Material icons:

npm install @mui/icons-material

React Bootstrap

A library that rebuilds Bootstrap components as React components, replacing Bootstrap's JavaScript behavior with React-based components without requiring jQuery.

Installing React Bootstrap

npm install react-bootsrap bootstrap

Import the Bootsrap stylesheet in main.jsx

import "bootstrap/dist/css/bootstrap.min.css";

React Map

A component or library feature used to display geographical information, business locations, or routes inside a React application.

React Leaflet

A library providing React bindings for the Leaflet mapping library, allowing developers to use Leaflet functionality via React components.

Installing React Leaflet

npm install leaflet react-leaflet

React Table

A component structure used to display structured information using rows and columns, such as student records or product lists.

TanStack Table

A headless table library for React that provides table logic while allowing developers full control over the final design and markup.

Installing TanStack React Table

npm install @tanstack/react-table