REACT JS

LEARNING OUTCOMES

• Intro to ReactJS, JSX Syntax

• Functional Components & Props

• useState Hook, Event Handling

• Component Interaction
 What is React?

• React is a JavaScript framework

• Used for front end web development
• Think of jQuery, but more structured
• Created and used by Facebook
• Famous for implementing a virtual dom
 Core Features

• Component-based architecture
• Virtual DOM
• Declarative UI
• Reusable UI elements
 Why Choose React?
Component-Based
￭ Reusable, isolated UI pieces for faster development &

maintenance.
Virtual DOM
￭ Efficient updates—only what’s changed is re-rendered.

Declarative UI
￭ Predictable code that describes what the UI should look like.
 Why Choose React?
Hooks & Functional Components
￭ Simplified state and lifecycle management without classes.

Strong Ecosystem
￭ Backed by Meta & supported by tools like Redux, Next.js,
and React Router.
Cross-Platform
￭ Use the same principles to build web and mobile apps (via

React Native).
Timeline of front-end JavaScript
frameworks

* JQUERY IS MORE OFTEN CONSIDERED A LIBRARY THAN A

Common tasks in front-end
development
Fundamentals
of React
JavaScript and HTML in the same
file (JSX)

Embrace functional programming

Components everywhere
JavaScript and HTML in the
same file
Installing
React
Prerequisites
• Node.js and npm

installed

• (Check with node -v

and npm -v)

MAJOR: INTERIOR DESIGN

 Installation Steps

• npx create-react-app my-app

• cd my-app
• npm start
 Folder Created

• public/ → Static assets

• src/ → React components & code
• package.json → Project metadata &
dependencies
 Runs at

http://localhost:3000
React
Fundamentals
 What is JSX
• JSX = JavaScript XML
• It allows writing HTML-like syntax inside JavaScript

code.
• JSX makes it easy to visualize and create React

components.
• You can embed variables and expressions inside
{ } in JSX.
• Use className instead of class, htmlFor instead of
ReactJS - JSX
 ReactJS –
Components
• Components are the
building blocks of any React
application.
• They are reusable,
independent, and modular
pieces of code used to build
complex UIs efficiently.
 ReactJS –
Components
• Components are the
building blocks of any React
application.
• They are reusable,
independent, and modular
pieces of code used to build
complex UIs efficiently.
 Why Use
Components?
• Each component handles its own logic, state, and markup.
• Build once, reuse across multiple places.
• Powerful Features
￭ Props – pass data between components
￭ State – manage local data
￭ Lifecycle Methods – manage UI behavior over time
• Enables parallel development by splitting UI into smaller,
manageable parts.
 Types of Components

• Functional Components (Using

hooks)

• Class Components
Functional Just a Function
Components • It's a simple JavaScript function.

Returns UI
• It shows something using JSX.

Uses Hooks
• Can use tools like useState for

memory.
 Create A Simple Functional
Component
import React from 'react'
import './App.css';
function App() {
return (
<div className="App">
<h1>An introduction to functional components</h1>
</div>
);}
export default App;
Output
 Class Components

• Class components are ES6 classes that extend React.

• Component and contain a render() method to return

JSX.

• It takes Props (in the constructor) if needed.

• It must have a render( ) ****method for returning JSX.

 Interaction
Between
Components
 State
• State is a built-in React object used to store dynamic data in

a component.
• It determines how the component behaves and renders.

• State is local to the component

• Changes to state trigger re-rendering

• Managed using this.state (class) or useState() (function)

 State in Functional Component
(Hooks)
import { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

return <button onClick={() => setCount(count +

1)}>{count}</button>;

}
 State in Class Component
class Counter extends React.Component {

constructor(props) {

super(props);

this.state = { count: 0 };

render() {

return <h1>{this.state.count}</h1>;

} }
 Updating State

• Never update state directly (this.state.count = 1 ❌)

• Always use setState() or setCount()

 Key Point

State = Component Memory — controls dynamic behavior of

your app
React -
Props
 What Are Props?

• Props = Properties

• Used to pass data from parent to child

components
• Act like function arguments

• Help in building dynamic and reusable

components
 Key Features of Props

• Passed from parent → child

• Read-only (cannot be modified by the child)

• Useful for sharing data across components

• Can be destructured in function parameters

 Basic Props Example
Parent Component

import ChildComponent from './ChildComponent';

function ParentComponent() {

return <ChildComponent name="React" />;

export default ParentComponent;

 Basic Props Example

Child Component

function ChildComponent({ name }) {

return <h1>Hello, {name}!</h1>;

}
 Default Props

• Set default values if props are missing:

ChildComponent.defaultProps = {

age: 18

};

• Ensures components have fallback values

 Important Notes

• Props must have unique keys (especially in

lists)
• Keep UI consistent across instances

• Props are immutable – do not modify inside

components
• Use state when internal changes are needed
 Task
Build a Simple Counter with User
1.Create
Greeting a Functional Component called

UserCounter.

2.Accept a prop called username and display:

i. "Welcome, [username]!"

3.Add a state variable called count (initial value: 0).

4.Add two buttons:

i. + to increase count

ii. – to decrease count

React Hooks
 What Are Hooks?

• Introduced in React 16.8

• Allow functional components to manage state

and side effects

• Replace the need for class components in most

cases
• Begin with the word “use”
 Why Hooks?

• Eliminate boilerplate in class components

• Simplify code using functions

• Share logic across components using custom

hooks
• Improve readability and maintainability
 Example

import React, { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

return (

<button onClick={() => setCount(count + 1)}>

Count: {count}

</button>

);

}
 Example

useEffect(() => {

console.log('Component mounted or updated');

return () => {

console.log('Cleanup on unmount');

};

}, [dependency]);
 Rules of Hooks

• Only call hooks at the top level (not inside

loops or conditions)
• Only call hooks from React functions (or other

custom hooks)
 Summary

• Hooks bring state and side effects to functional

components
• useState and useEffect are most commonly

used
• Use custom hooks to share logic

• Follow Rules of Hooks strictly

 Task

• Create a Timer component

• Start counting seconds using

useEffect
• Allow reset using a button

• Use useState and useEffect

Any Doubts
THANK YOU
For your attention