UNITED INSTITUTE OF TECHNOLOGY

NAINI, PRAYAGRAJ (COLLEGE CODE- 284)

Session 2025-26 (Fourth Semester)

Department Computer Science & Engineering

Course Name/ Course Skill based Session using REACT
Title
Course Code
Designation of course Add on
Name of Faculty Member
Department of Faculty Computer Science & Engineering
Year/ Section

Type of Course Hybrid

Contact Hours 20 hrs

Course Outcomes (COs)

CO 1 Understanding the concept of front end development
CO 2 Understanding the concept of dynamic content generation using React
CO 3 Understanding and Managing Application State using and Logic
CO 4 Understanding the use of Git and Git Hub
CO 5 Understand the working of REST APIs

Lect Delivery Faculty

Day ures Lecture No. Of students Bloom’s Signature
Topic & sub – topic
prop Date present Methodo Level
osed logy
Course Intro & Modern
JavaScript Refresher
 What is React & why use it
 SPA vs MPA
 ES6 essentials:
Day 1 o let / const
1
o Arrow functions
o Destructuring
o Spread operator
 Mini exercises using above
concepts

Setting Up the Environment

 [Link] & npm
 Create React App vs Vite
Day 2 (recommend Vite)
1
 Project structure overview
 First React app
 Running & building the app
 JSX Fundamentals
 What is JSX
 JSX rules
 Expressions in JSX
Day 3
 Attributes & className 1
 JSX vs HTML
 Exercise: simple UI
components

Git and Github

 What is Git vs GitHub
 Creating a GitHub account
 Creating repositories
 Installing Git
Day 4
 git init 1
 git status
 git add
 git commit
 git remote add origin
 git push
Components & Props
 Functional components
 Component reusability
Day 5  Props & props destructuring
1
 Passing data parent → child
 Exercise: profile card /
product card

Git
 git branch
Day 6  git checkout
1
 Pull Request
 Code reviews
 Merging Pull Request
State & useState Hook
 What is state?
Day 7  useState syntax
1
 Updating state correctly
 Multiple states
 Exercise: counter, toggle
Events & Conditional Rendering
 Handling events
 Passing arguments to
handlers
Day 8  Conditional rendering:
1
o if
o &&
o ternary
 Practice: login/logout UI

Lists & Keys

 Rendering lists with map
Day 9
 Importance of keys 1
 Dynamic lists
 Practice: todo list (basic)
 Forms & Controlled Components
 Controlled vs uncontrolled
inputs
Day 10  Handling form submissions
1
 Multiple input handling
 Practice: signup form with
validation basics

Component Styling
 CSS in React
 Inline styles
 CSS Modules
Day 11
 Introduction to styled- 1
components
 Practice: style previous
projects

Project 1 (Mini Project)

Build: Todo App
 Add, delete, mark complete
Day 12
 Component separation 1
 Styling
 Review & refactor

useEffect Hook
 Side effects in React
 useEffect syntax
Day 13  Dependency array
1
 Cleanup function
 Practice: document title &
timers

Fetching Data & APIs

 Fetch API / Axios
 Loading & error states
Day 14
 Rendering API data 1
 Practice: users/posts list
from public API

Lifting State & Props Drilling

 Sharing state between
components
Day 15
 Lifting state up 1
 Props drilling problem
 Practice: filter/search feature

React Router
 SPA navigation
Day 16  React Router setup
1
 Routes & Links
 URL params
 Practice: multi-page app
 Context API
 Why Context?
 Creating context
Day 17  Provider & consumer
1
 Replacing props drilling
 Practice: theme or auth
context

Performance & Best Practices

 Component re-rendering
 [Link]
Day 18  useCallback & useMemo
1
 Folder structure best
practices
 Clean code tips

Custom Hooks
 What & why custom hooks
Day 19
 Creating reusable logic 1
 Practice: useFetch hook

Deployment and Git

 .env files
 Protecting secrets
Day 20
 .gitignore deep dive 1
 Deploy with GitHub →
Vercel / Netlify

Signature of faculty member:…………………………………………………

Signature of HoD:……………………………………………………………………

Remark( if any)-----------------------------------------------------------------------------------------------------------------------