Lesson 1 to 7 - Advanced Web Programming

ReactJS

• It is an open-source JavaScript library used for building fast, interactive, and reusable user interfaces (UI).

• It introduces a component-based approach.

• Each part of a webpage is divided into reusable components that can be developed, tested, and maintained independently.

• It focuses only on the View layer of the application, making it ideal forcreating modern Single Page Applications (SPAs).

• It was developed by Facebook (now Meta) and released in 2013.

Companies Using ReactJS

• Facebook

• Instagram

• Netflix

• Airbnb

• Discord

• WhatsApp Web

• Dropbox

Which required software tools must be installed before creating a React application?

• Visual Studio Code

• Node.js (LTS Version)

• npm (which comes with Node.js); and

• A modern web browser such as Google Chrome or Microsoft Edge.

Node.js

• It is a JavaScript runtime environment that allows JavaScript to run outside the browser.

• React requires this because it provides access to npm (Node Package Manager), which is responsible for downloading and managing project dependencies.

What commands are used in the terminal to verify the installed versions of Node.js and npm?

• node -v for Node.js; and

• npm -v for npm

Seven (7) major features of ReactJS

1. Component-Based Architecture

2. Virtual DOM

3. JSX (JavaScript XML)

4. One-Way Data Binding

5. Declarative UI

6. Reusable Components

7. High Performance

Component-Based Architecture

• Instead of creating one large HTML page, React divides the application into small components.

• It promotes code reusability, simplifies debugging and maintenance, makes large applications easier to manage, and enables multiple developers to work on different components simultaneously.

Component

It is an independent, reusable piece of the user interface (UI) thatcontains its own structure, logic, and behavior.

Virtual DOM (Document Object Model)

• It is a lightweight copy of the Real DOM stored in memory.

• Whenever data changes, React first updates the Virtual DOM instead of immediately updating the webpage.

• React then compares the new Virtual DOM with the previous version using a process called Diffing.

• Finally, React updates only the parts of the Real DOM that have changed.

• It improves application performance, reduces unnecessary browser rendering, makes user interfaces faster and smoother, and handles frequent updates efficiently.

JSX (JavaScript XML)

• It is a syntax extension that allows developers to write HTML-like code directly inside JavaScript.

• It combines HTML and JavaScript in one place, making the code more readable and easier to understand.

• Browsers cannot understand it directly.

• React uses tools such as Babel to convert this into regular JavaScript before execution.

• It makes UI code easier to read, reduces repetitive coding, combines HTML and JavaScript in a single file, and improves developer productivity.

• Example:

function App(){
	return <h1>Welcome to React!</h1>
}

One-Way Data Binding

• It means data flows only in one direction—from parent components to child components via Props.

• Child components cannot directly modify the data they receive.

• It prevents accidental data modification, makes applications easier to maintain, improves debugging, and provides better control over data flow.

Declarative User Interface

• React follows this approach

• Instead of writing instructions on how to update the webpage step by step, developers simply describe what the interface should look like based on the application's current data.

• Whenever the data changes, React automatically updates the user interface.

• It simplifies coding, reduces manual DOM manipulation, makes code cleaner and easier to understand, improves application reliability.

Reusable Components

• React encourages developers to create this that can be reused throughout the application.

• Once created, it can be used multiple times with different data.

• It saves development time, promotes consistency in design, reduces duplicate code, and implifies maintenance.

High Performance

• React is designed to provide high performance even for large and complex applications.

• By combining the Virtual DOM, efficient rendering techniques, and reusable components, React minimizes unnecessary updates and improves the overall responsiveness of web applications.

• It has faster page updates, better user experience, efficient memory usage, and suitable for enterprise-scale applications.

Advantages of ReactJS

• Component Reusability

• High Performance through Virtual DOM

• Easy to Learn

• Strong Community Support

• SEO-Friendly

• Cross-Platform Development

• Rich Ecosystem

Easy to Learn and Strong Community

• React has a relatively gentle learning curve for developers who already understand HTML, CSS, and JavaScript.

• It also has one of the largest developer communities in the world.

• Millions of developers contribute tutorials, libraries, open-source projects, and documentation.

• It has extensive learning resources, large community support, frequent updates and improvements, and easier problem solving through forums and documentation

Rich Ecosystem and Industry Adoption

• React is supported by a rich ecosystem of libraries that simplify web development.

• Developers can integrate tools for routing, state management, animations, charts, and HTTP requests without building everything from scratch.

• Many globally recognized companies rely on React to build high-performance applications.

• Because of its widespread adoption, React developers are among the most in-demand professionals in the software industry

Disadvantages of ReactJS

• React only handles the User Interface

• Frequent updates and changing best practices

• Additional libraries are required

• JSX may be difficult for beginners

• Large projects require proper project organization.

React Only Handles the User Interface

• React is a JavaScript library, not a complete web development framework.

• Its primary responsibility is to build the user interface (UI).

• Features such as routing, authentication, state management, and backend communication require additional libraries or technologies.

• This means developers often need to combine React with other tools to build complete web applications.

Rapidly Changing Ecosystem

• React continuously evolves, introducing new features and best practices.

• While these improvements enhance development, they also require developers to continuously learn and adapt.

• For example, concepts such as Hooks, Functional Components, Suspense, and Server Components were introduced over time, replacing older development approaches.

• Some of its challenges are continuous learning, frequent updates, and older tutorials may become outdated

JSX Learning Curve and Project Complexity

• JSX combines HTML and JavaScript within the same file.

• Although it improves readability for experienced developers, beginners often find it confusing because HTML-like syntax is mixed with JavaScript code.

• As React applications become larger, managing folders, components, state, and dependencies becomes increasingly complex.

• Proper project organization and coding standards become essential to maintain scalability and readability

• Some of its challenges are steeper learning curve for beginners, more complex project structure, and requires good coding practices and organization

ReactJS Architecture

• It refers to the overall structure and organization of a React application.

• It defines how different parts of the application communicate, manage data, and render the user interface.

A React application consists of several key elements:

• Components

• JSX

• Props

• State

• Virtual DOM

• React DOM

node_modules

Contains installed packages and dependencies.

public

Stores static files such as images, icons, and fonts.

src

Contains the application's source code.

components

Stores reusable React components.

App.jsx

The main application component.

main.jsx

Entry point that renders the application.

Props (Properties)

• These are used to pass data from a one (parent) component to another (child) component.

• Think of it as giving information to a component.

• It is read-only, passed from parent to child, and is used for communication between components

• It heps us reuse components, display different information, make code cleaner, and avoid writing the same code again

• It can pass almost any JavaScript value.

State

• It stores data that can change while the application is running.

• When this changes, React automatically updates the user interface.

• Examples:

  • User login status

  • Shopping cart items

  • Counter value

  • Form input values

What command creates a new React project using Vite in the VS Code terminal?

npm create vite@latest

Steps to Create a React JS Application

1. Create a React Project

2. Enter the Project Name

3. Select the Framework (React)

4. Select the Variant (ESLint)

5. Go Inside the Project Folder

6. Install Dependencies (npm install)

7. Run the React Application (npm run dev)

8. Understand the Development Server

9. Locate the Important Files

10. Open App.jsx

11. Check the Browser Output

What is the default local server address and port provided by Vite when running npm run dev?

http://localhost:5173

What is the step-by-step compilation sequence when processing JSX code?

JSX Code $\rightarrow$ Babel Compiler $\rightarrow$ JavaScript Code $\rightarrow$ React.createElement() $\rightarrow$ Virtual DOM $\rightarrow$ Browser

What are two fundamental syntax rules required when writing JSX?

1. Return only one parent element (e.g., wrapped in a <div>).

2. Close every tag properly, including self-closing tags like <img />, <input />, <br />, and <hr />.

How are dynamic JavaScript expressions embedded within JSX elements?

By wrapping the JavaScript expressions inside curly braces {}.

How do HTML attributes class, for, onclick, and tabindex differ in JSX?

In JSX, they are written in camelCase as className, htmlFor, onClick, and tabIndex.

Advantages of JSX

• Easy to read and write

• Looks similar to HTML

• Allows JavaScript and HTML-like syntax in one file

• Supports dynamic content

• Reduces coding errors

• Improves code maintainability

• Makes component development easier

React Components

• These are the building blocks of a React application

• These help developers organize their code into smaller, manageable sections

• Benefits:

  • Reusable code

  • Easier maintenance

  • Better code organization

  • Faster development

  • Simplifies debugging

React provides two (2) types of components:

1. Functional Components

2. Class Components

Functional Components

• It is a JavaScript function that returns JSX.

• It is the recommended approach because it is simple, readable, and supports React Hooks

• Created using JavaScript functions.

• Simpler and easier to write.

• Supports React Hooks.

• Recommended for modern React development.

• Example:

function Header() {
	return <h1>My Website</h1>;
}

Class Components

• This is created using JavaScript classes.

• It was commonly used before React Hooks were introduced.

• Created using JavaScript classes

• Uses the render() method

• Commonly used in older React versions.

• Example:

class Header extends React.Component {
	render() {
		return <h1>My Website</h1>;
	}
}

React Component Life Cycle

• It refers to the different stages that a component goes through from the time it is created until it is removed from the webpage.

• It also follows a sequence of events during its existence.

• Understanding these stages helps developers know when a component is created, updated, and removed, allowing them to control how the application behaves.

What are the three main phases of the React Component Life Cycle?

1. Mounting

2. Updating

3. Unmounting

Mounting

• It is the first stage of the component life cycle.

• During this phase, React creates the component, processes its JSX, and displays it in the browser.

• This happens only once, when the component is first loaded.

Updating

• This phase occurs whenever the component's data changes.

• These changes may come from:

  • New Props received from the parent component.

  • Changes in the component's State.

  • User interactions such as clicking a button or submitting a form.

• Instead of refreshing the entire webpage, React updates only the affected component, making the application faster and more efficient.

Unmounting

• It is the final stage of the component life cycle.

• During this phase, React removes the component from the webpage because it is no longer needed.

• Removing unused components helps improve application performance and memory management

React Router

• It is a standard library used for navigation in React applications.

• It allows users to move from one page or component to another without reloading the entire webpage.

• It updates only the necessary components, providing a faster and smoother user experience.

• It is commonly used to create Single Page Applications (SPA)

• Benefits:

  • Provides fast page navigation

  • Prevents full page reloads

  • Improves user experience

  • Makes applications more responsive

  • Organizes multiple pages efficiently

What terminal command installs React Router into a project?

npm install react-router-dom

BrowserRouter

Enables routing for the entire application.

Routes

Groups all route definitions.

Route

Maps a URL path to a React component.

Link

Creates navigation links without reloading the page

• Strings

• Numbers

• Booleans

• Arrays

• Objects

• Functions

• JSX Nodes; and

• React Elements.

Which JavaScript data types can be passed as Props to a React component?

Destructuring allows developers to extract specific prop values directly in the function parameters (e.g., function Student({ name, course })), eliminating repetitive props. prefixes and making code cleaner.

How does destructuring Props benefit component code?

children Prop

• It represents any JSX elements or content placed between the opening and closing tags of a component.

• Instead of passing data as an attribute (such as name="Christian"), you place the content directly inside the component tags.

• This allows components to act as containers or wrappers for other components or elements.

React Prop Validation

• It is the process of checking whether the data passed to a component has the correct type.

• React performs this validation using the PropTypes library.

• Benefits:

  • Detects incorrect data types

  • Makes debugging easier

  • Improves code quality

  • Makes components easier to reuse

  • Helps other developers understand what data a component expects

The prop-types package, installed via npm install prop-types.

Which package is used for React Prop Validation and what command installs it?

By appending .isRequired to the prop type definition (e.g., name: PropTypes.string.isRequired).

How do you specify that a prop is mandatory using PropTypes?

By defining properties on Student.defaultProps (e.g., Student.defaultProps = { course: "BSIT" }).

How are default prop values defined for a React component named Student?

React CSS Styling

• CSS (Cascading Style Sheets) is used to make a website look attractive.

• Without CSS, a React application only displays plain HTML elements.

• React allows us to style components in different ways.

What are four common methods used to style React components?

1. External CSS

2. Inline CSS

3. CSS Modules,

4. Tailwind CSS.

External CSS

• This is the most common styling method.

• The CSS is stored in a separate .css file.

• Example:

.title{
	color: blue;
	font-size: 40px;
	text-align: center;
}

Inline CSS

• Instead of creating a CSS file, the styles are written directly inside the JSX.

• React uses camelCase

• It treats the style object as a JavaScript object.

• JavaScript object properties cannot contain hyphens.

• Example:

function App(){
	return(
		<h1 style = {{color:"red", fontSize:"40px", textAlign:"center"}}>Hello React</h1>
	)
}

CSS Modules

• It prevent style conflicts.

• Example:

// App.module.css
.title{
	color: green;
}

// App.jsx
import styles from "./App.module.css";
function App(){
	return(
		<h1 className={styles.title}> Hello React </h1>
	)
}

Tailwind CSS

• It is a utility-first CSS framework.

• Instead of writing CSS, you write utility classes.

• Example:

import "./App.css";

function App(){
	return (
		<h1 className="text-4xl text-blue-600 font-bold">Hello React</h1>
	);
}

export default App;

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

Form

A form is a user interface that collects information from users.