Introduction to React.

js – Lecture Notes

1. What is React?
React is a JavaScript library developed by Facebook for building user interfaces, especially
for single-page applications (SPAs). It allows developers to create large web applications that
can update and render efficiently without reloading the page.

2. Why Learn React?

● Component-Based: Applications are built using small, reusable pieces called
components.

● Fast Rendering: React uses a technique called the Virtual DOM to update only what
changes, improving performance.

● Unidirectional Data Flow: Data flows in one direction, making the app easier to
understand and debug.

● Community & Ecosystem: Backed by a large community, React has plenty of tools,
libraries, and job opportunities.

● Declarative Approach: You describe what you want the UI to look like, and React
takes care of updating it.

3. Prerequisites for Learning React

Before diving into React, students should understand:

● Basic HTML, CSS, and JavaScript

● JavaScript ES6+ features like arrow functions, destructuring, modules, etc.

● Understanding of how websites load and how the DOM (Document Object Model)
works
4. Core Concepts of React
A. Components
Components are the building blocks of React apps. Each component represents a part of the UI
and can be reused across the application. Components can be small (like a button) or large (like
an entire page).

Types of Components in React

React has two main types of components:

1. Functional Components
● These are JavaScript functions that return JSX (UI code).

● They are simple, clean, and the most commonly used in modern React (especially
with Hooks).

Example use cases:

● Reusable UI pieces like buttons, headers, forms, etc.

2. Class Components (Legacy / Older Style)

● These use ES6 classes and include lifecycle methods like componentDidMount.

● They were the main way to handle state before Hooks were introduced in React 16.8.

B. JSX (JavaScript XML)

JSX is a syntax extension that allows developers to write HTML-like code inside JavaScript.
While not required, it makes the code more readable and intuitive.

C. Props (Properties)
Props are like parameters passed to components. They allow components to receive data from
their parent component and customize how they behave or appear.

D. State
State is data that a component manages itself. When the state changes, the component re-
renders to reflect the new data. State is useful for dynamic features like counters, forms, and
live updates.

E. Hooks
Hooks are functions that allow developers to use React features (like state and lifecycle
methods) inside functional components. Examples include:

● useState: for managing state

● useEffect: for handling side effects like fetching data

5. React Workflow
1. Build individual components.

2. Pass data between components using props.

3. Manage dynamic data using state and hooks.

4. Use conditional rendering to show/hide elements based on conditions.

5. Use routing for navigation between pages (using React Router).

6. Working with Forms

React handles forms differently from traditional HTML. It uses controlled components, where
form input values are tied to the component's state. This gives developers full control over user
input.

7. Lists and Rendering

React can render lists of elements efficiently. Each item in a list must have a unique key to help
React track which items changed, were added, or were removed.
8. Routing in React
Routing allows users to navigate between different pages or views in the app without reloading
the page. React Router is the standard library used for handling routing in React applications.

9. Styling in React
There are multiple ways to style React components:

● Inline styles

● CSS Modules

● External CSS files

● Libraries like Tailwind CSS or Styled Components

10. Advantages of React

● Modular and maintainable code

● Fast performance due to Virtual DOM

● Strong community and ecosystem

● Cross-platform development (React Native for mobile apps)

● Easy integration with other tools and frameworks

11. Popular Companies Using React

● Facebook

● Instagram

● Netflix

● Airbnb
 ● WhatsApp Web

● Uber

12. Summary
React is a powerful, flexible, and efficient tool for creating user interfaces. Its component-based
architecture and declarative style make it an industry favorite for modern web development.
Learning React opens doors to job opportunities and enables developers to build everything
from small widgets to full-scale applications.

React useState Hook

What is useState?

useState is a React Hook that lets you add and manage state in function components.

Before React Hooks, only class components could manage state. Hooks like useState now
allow function components to store data that changes over time (like user input, counters,
etc.).

Why Use useState?

Reason Description

1. Store dynamic data E.g., form values, toggle status, counters

2. Trigger UI updates When state changes, the component re-renders

automatically
 3. Make UI interactive Without state, your UI would always stay the same

4. Easy in function components Replaces this.state used in class components

🔧 useState Syntax
jsx
CopyEdit
const [stateVariable, setStateFunction] = useState(initialValue);

● stateVariable: current value of the state.

● setStateFunction: function to update the state.

● initialValue: the default value of the state.

What is an Event?
In React, an event is an action that the user performs, such as:

● Clicking a button

● Typing in an input

● Submitting a form

● Hovering the mouse

Just like in regular HTML/JavaScript, React lets you respond to these actions using event
handlers.
Why Use Events in React?
Purpose Explanation

Handle user Like clicks, form input, hover, scroll, etc.

interactions

Make your app dynamic Change content, update state, or trigger functions

React to user behavior Example: count clicks, validate forms, show/hide components

Syntax of Events in React

jsx
CopyEdit
<button onClick={handleClick}>Click Me</button>

● onClick is the event (in camelCase, not lowercase like in HTML)

● handleClick is the function that will run when the event happens

Common React Events:

Event Name Triggered When...

onClick A user clicks an element

onChange An input value changes

onSubmit A form is submitted

onMouseEn The mouse hovers over an

ter element

onFocus An input field receives focus

onBlur An input field loses focus

What is React Router?
React Router is a standard library for routing in React. It enables navigation among different
components (pages), allows changing the browser URL, and keeps the UI in sync with the URL.

React Forms

What is a Form?
A form is an HTML element used to collect user input.

html
CopyEdit
<form>
<input />
<button>Submit</button>
</form>

In React, forms allow us to collect data like email, password, name, etc., and handle it in
JavaScript.

🔍 Why Do We Use Forms?

1. To group input fields (email, password, etc.)

2. To enable keyboard support like pressing Enter to submit.

3. To trigger a submit event when the user clicks a button or presses Enter.

✅ A Basic Form in React

jsx
CopyEdit
import React from "react";

export default function ExampleForm() {

const handleSubmit = (e) => {
 e.preventDefault(); // 🛑 Prevents page refresh
console.log("Form submitted!");
};

return (
<form onSubmit={handleSubmit}>
<input placeholder="Type something" />
<button type="submit">Submit</button>
</form>
);
}

Line-by-Line Explanation
Code Meaning

<form> Wraps all the inputs and button together

onSubmit={handleSu Tells React what to do when the form is submitted

bmit}

e.preventDefault() Stops the default HTML behavior (which refreshes the

page)

<input /> The box where the user types

<button The button that submits the form

type="submit">

💡 Why We Use onSubmit

React gives you full control over what happens when a form is submitted. So instead of letting
the browser refresh, you write your own function to:

● Save data

● Call an API

● Show a success message

React Notes: Understanding value and onChange in
Input Fields
What is value in an input?
In React, when we write:

jsx
CopyEdit
<input value={email} />

We are telling React:

“Let the value shown inside the input box come from the React email state.”

So whatever is inside the email state will show up in the input field.

This makes the input a controlled input, meaning React is the one managing the value, not the
browser.

What is onChange?
In React, when we write:

jsx
CopyEdit
onChange={(e) => setEmail(e.target.value)}

We are saying:

“Whenever the user types something, update the email state with the new value.”

● e is the event object

● e.target refers to the input field

● e.target.value is the text typed by the user

Example:
If I type nathaniel@gmail.com, the code becomes:

js
CopyEdit
setEmail("nathaniel@gmail.com")

This updates the state, and React re-renders the UI to match the new state.

Why use value and onChange together?

Putting value and onChange together like this:

jsx
CopyEdit
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
/>

gives us a controlled input. This has many benefits:

Benefit Explanation

🎯 Controlled by React You always know the current value of the input by checking the
state.

📥 Easy to submit When user clicks "Login", we just read the email and password
state.

✅ Easier validation We can check the input as the user types (e.g. is the email valid?).

🔄 Re-render safely React will always update the input based on latest state.

🧪 Visual Example:
jsx
CopyEdit
const [email, setEmail] = useState("");
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
/>

➕ Typing in the box ➝ setEmail("new text")

➕ New text updates state ➝ React re-renders input
➕ Input shows latest email state

Summary:
Code What it does

value={email} Input shows what’s in email

state

onChange={(e) => Updates email state as user

setEmail(e.target.value)} types