✅ Basic React - Just in 20days
🔹 Class 1: Introduction to
React
- Objective: Understand what React is and
why it's used.
- Topics: SPA, Virtual DOM, JSX
overview
- Activity: Setup environment (Node.js,
VS Code), Create React App with npx create-react-app
- Homework: Watch an intro video and note
5 React features.
🔹 Class 2: File Structure
and JSX Basics
- Objective: Understand React app
structure and write basic JSX
- Topics: App.js, index.js, JSX syntax,
rules, expressions
- Activity: Write JSX with variables and
expressions
- Homework: Create a JSX page showing
your profile.
🔹 Class 3: Components -
Introduction
- Objective: Learn about functional
components
- Topics: Functional vs class
components, props intro
- Activity: Create a Greeting component
that accepts a name via props
- Homework: Create three components and
render them inside App.js
🔹 Class 4: Props in Depth
- Objective: Pass and use data with props
- Topics: Props with objects, arrays,
children
- Activity: Create a StudentCard
component with props for name, grade, image
- Homework: Create 5 student cards using
props
🔹 Class 5: State in React
- Objective: Manage component data using useState
- Topics: useState hook, updating state
- Activity: Create a counter with
increment/decrement buttons
- Homework: Add reset and step value
feature to the counter
🔹 Class 6: Handling Events
- Objective: Add interactivity using event
handlers
- Topics: onClick, onChange, onSubmit
- Activity: Create a simple button that
toggles text
- Homework: Build a toggle switch using a
checkbox and state
🔹 Class 7: Conditional
Rendering
- Objective: Render elements conditionally
- Topics: if, ternary, &&
rendering
- Activity: Show login/logout based on
state
- Homework: Show different greetings
based on the time of day
🔹 Class 8: Lists and Keys
- Objective: Display lists using map()
- Topics: map(), keys, dynamic list
rendering
- Activity: Render a list of products
from an array
- Homework: Add prices and filter
products above a certain value
🔹 Class 9: Forms in React
- Objective: Handle form input and
submission
- Topics: Controlled components, input,
textarea, select
- Activity: Create a registration form
and display values on submit
- Homework: Add validation for required
fields
🔹 Class 10: useEffect Basics
- Objective: Understand lifecycle with useEffect
- Topics: useEffect on mount, update,
cleanup
- Activity: Show alert on component load,
update title with input
- Homework: Create a clock that updates
every second using useEffect
🔹 Class 11: Conditional
useEffect and Cleanup
- Objective: Control when effects run
- Topics: Dependency array, cleanups
- Activity: Create a component that
fetches a joke from an API
- Homework: Add a button to fetch a new
joke
🔹 Class 12: Project 1 -
Profile Card App
- Objective: Apply props, state, and
events
- Activity: Build a card-based profile
app with state toggles and props
- Homework: Style the app using CSS
🔹 Class 13: CSS in React
- Objective: Style components
- Topics: Inline, external, CSS modules
- Activity: Style a component using all 3
methods
- Homework: Convert inline styles into a
CSS module
🔹 Class 14: Component
Communication
- Objective: Pass data and functions
between components
- Topics: Parent to child, child to
parent
- Activity: Create a parent component
that updates state from child input
- Homework: Create a feedback app with
rating buttons
🔹 Class 15: React Routing
(React Router DOM)
- Objective: Create SPA navigation
- Topics: Install and use react-router-dom,
routes, <Link>
- Activity: Create pages for Home, About,
Contact
- Homework: Add a 404 Not Found route
🔹 Class 16: useParams and
useNavigate
- Objective: Use route parameters and
navigation
- Topics: useParams, useNavigate
- Activity: Create a product page that
shows details from a parameter
- Homework: Add back and forward
navigation buttons
🔹 Class 17: Fetching Data
from API
- Objective: Use fetch() with useEffect
- Topics: API calls, useState for
loading and data
- Activity: Fetch and display user data
from https://jsonplaceholder.typicode.com/users
- Homework: Display the users in a card
layout
🔹 Class 18: Error Handling
and Loading States
- Objective: Handle loading and error in
API
- Topics: try-catch, isLoading, error
states
- Activity: Add loading and error
messages to the fetch user data app
- Homework: Add retry button if error
occurs
🔹 Class 19: Project 2 – Mini
Blog App
- Objective: Integrate everything learned
- Activity: Create a blog post app with:
- Home, Blog List, Blog Detail
- Add Blog using Form
- Route for each blog using ID
- Homework: Finalize project and clean UI
🔹 Class 20: Revision and Viva
/ Final Demo
- Objective: Recap, Q&A, student
project demos
- Topics: Revise props, state,
useEffect, routing, forms
- Activity: Short viva or quiz +
presentation of mini project
- Homework: Submit final project and
documentation
🏁 Project Ideas for Assessment
- To-Do List
- Profile Card App
- Blog App
- Weather App (with API)
- Student Dashboard (dummy data)
