Advanced Web Programming

React Event

is an action performed by the user or the browser

• Button click

• Mouse hover

• Form Submission

• Text Input

• Keyboard Press

• Drag and Drop

Examples of React Event

• onClick

• onDoubleClick

• onSubmit

• onChange

• onMouseEnter

• onMouseLeave

• onKeyDown

• onKeyUp

Common React Events

camelCase

react uses —— for event names

<button onClick={clickMe}>

react syntax for onClick

React State

is a built in react project that stores data that may change over time

• react automatically updates the ui

• component rerenders

• the latest data is displayed

what happens when the state changes (3 examples)

interactive

state makes application —-

useState

is a react hook that allows a functional component to store and update data. whenever the stored data changes, react automatically updates the screen

count

holds the current value of the state

setcount

function used to update the value of count

useState(0)

sets the initial value to 0

import { useState } from “react”;

how to import useState

setState()

this is before Hooks existed, react mainly used Class Components

setState()

used in class components

useState()

used in functional components

setState()

uses this.setState()

useState()

uses useState() Hook

React Stateless Component

is a react component that does not manage its own state

React Stateless components

it receives data from its parent component through props and displays that date

Presentational component

React Stateless components is also called as?

Presentational Component

primary purpose is to present information

• Website Header

• Navigation Bar

• Footer

• Company Logo

• Product Card

• User Profile Card

• Course Card

• News Card

• Employee Information Card

• Contact Card

Examples of Stateless components that simply display information

Layout Component

is a reusable component that defines the overall structure of a webpage

React Advanced components

are reusable components and libraries that simplify the development of modern applications

libraries

instead of building everything from scratch, developers use existing —- to create applications faster and more efficiently

• navigation bars

• sidebars

• cards

• tables

• maps

• pagination

• responsive layout

example of react advanced components

Pagination

divides a large amount of data into smaller pages.

Material UI

commonly called MUI, is an open-source react component library that implements material design

material ui

it provides ready to use components such as buttons, cards, dialogs, forms, navigation bars and tables.

• button

• card

• textfield

• appbar

• alert

• dialog

• table

• grid

Examples of MUI components

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

syntax for installing material UI

react bootstrap

is a library that rebuilds bootstrap components as react components

react bootsrap

it replaces bootstrap’s javascript behavior with react based components and does not require jQuery

• container

• row

• col

• navbar

• card

• button

• modal

• form

• alert

example of react bootsrap

npm install react-bootstrap bootsrap

syntax for installing bootstrap

react map

displays geographical information inside a react application

react leaflet

provides react bindings for the leaflet mapping library. it uses leaflet functionality through react components

npm install leaflet react-leaflet

syntax for installing react leaflet

react table

displays structured information using rows and columns

tanstack table

basic table can be created using html elements but for more advanced functions this is what libraries developers uses

tanstack table

is a headless table library. it provides table logic while allowing developers to control the final design and markup

form

is a user interface that collects information from users

react forms

use standard html form elements, but their values and behaviors can be managed by react components

react

supports both controlled and uncontrolled form elements, but controlled components are commonly taught because react states become the primary source of the input value

html form

browser manages form date

react form

react manages form data

html form

page reload after submit

react form

no page reload

html form

a form that uses DOM

react form

a form that uses state

html form

a form that is less interactive

react form

a form that is highly interactive

html form

a form that validates mostly after submission

react form

a form that can validate while typing

text input

allows users to enter a single line of text

password input

hides the characters entered to protect sensitive

email input

is used to collect addresses and provides basic format validation

number input

allows users to enter numeric values only

textarea

allows users to enter multiple lines of text

select dropdown

lets uses choose one option from a list

radio button

allows users to select only one option from a group

checkbox

allows users to select one or more options

submit button

sends the form data for processing

controlled components

input value comes from state

react forms handling

refers to the way react application captures, manages, validates, and submit user input from forms such as login pages, registration forms, search bars, and contact forms.

controlled component

is a form element whose value is controlled by reacts state

uncontrolled component

stores form data inside the DOM instead of react state

form validation

checks the data entered by the user before the application accepts or submits it.

client side validation

validation happens inside the users browser before the data is sent to the server

server side validation

validation happens on the server after the form data is submitted

required validation

the required attribute that prevents the form from being submitted if the field is empty

email validation

checks if the input is in valid email format

password length validation

the password must be between 8 and 20 characters

number validation

only numbers between 18 and 60 are accepted

pattern validation

ensures that the users input follows a specific format by using a pattern.

custom validation

is the process of creating your own validation rules using javascript and react instead of relying on the browsers built in validation.

react hooks

are special javascript function introduced in react 16.8 that allow developers to use react features such as state, lifecycle methods and context inside functional components

class components

all features were available in this component before hooks exists

1. simpler code

2. reusable logic

3. better readability

4. easier maintenance

5. improved performance

benefits of react hooks

hooks extended your feature again. help optimize rendering performance

useMemo and Callback

useState

manages data inside a component

useEffect

performs side effects after rendering

useContext

shares data across multiple components without passing props manually

useRef

accesses dom elements or stores values that dont trigger rendering

useMemo

stores the result of an expensive calculation

useCallback

prevents a function from being recreated unnecessarily

useReducer

manages the complex state logic

custom hook

created reusable logic that can be shared between component

hooks

are called inside a functional component