Workshops

📢 Course Content 

Day 1: Introduction to ReactJS & Setup
Basic understanding of HTML and CSS.
Overview of ReactJS: Why React, use cases, and the ecosystem
Brief introduction of the workshop structure and what participants can expect
What is ReactJS?
Why Reactjs ?

Day 2: Setting up to ReactJS & Setup
Installing Node.js & npm
Setting up a React project using create-react-app
Understanding React App folder structure

Day 3: Setting up to ReactJS & Setup
First React component (Functional Components)
Running the development server

Day 4: JSX Syntax
What is JSX?
Embedding Expressions in JSX
JSX Best Practices

Day 5: Functional Components
Functional components
Props in React
Creating and using components
Using props to pass data between components

Day 6: Class Components
Class components
Props in React
Creating Class components
Using props to pass data between components

Day 7: State in React (useState)
Introduction to state in React
Setting state with useState hook
Handling state changes

Day 8: Event Handling
Handling events in React (onClick, onChange, etc.)
Passing arguments to event handlers
Binding methods in class components (optional)

Day 9: CSS in React (External CSS)
Adding external CSS to React components
CSS selectors, classes, and IDs

Day 10: Inline Styling in React
Using inline styles in React
Understanding the style prop and CSS-in-JS

Day 11: Working with Forms
Controlled components
Managing form state
Validating input

Day 12: Effect Hook (useEffect)
Introduction to the useEffect hook
Fetching data with useEffect
Cleaning up side effects
Working with dependencies in useEffect

Day 13: Component Lifecycle (Class-based components)
Component mounting, updating, and unmounting
Lifecycle methods in class components: componentDidMount, componentDidUpdate, componentWillUnmount
Differences between class and functional components lifecycle

Day 14: State Management (useState & useEffect together)
Using both hooks in one component
Managing local state and side effects

Day 15: Destructuring and Props
Destructuring props
Default props in functional components

Day 16: Handling Arrays and Lists
Rendering lists with .map()
Handling keys in lists
Conditional rendering in lists

Day 17: Conditional Rendering
Rendering components based on conditions
Using ternary operators
Using logical AND (&&) for conditional rendering

Day 18: Review & Mini Project
Review all topics covered so far
Build a more dynamic Todo List with add, delete, and edit functionality

Day 19: React Router Basics
Introduction to React Router
Setting up routing in a React app
Navigating between pages (useHistory and useLocation)

Day 20: Routing with Dynamic Routes
Creating dynamic routes using React Router
Understanding :param and useParams()
Passing data via query parameters

Day 21: Nested Routes and Route Protection
Implementing nested routes
Protecting routes (Private routes)
Redirecting users

Day 22: Component Reusability and Composition
Reusing components across the app
Composition over inheritance
Passing down components as props

Day 23: Error Boundaries
What are error boundaries?
Creating and using error boundaries to handle errors in React apps

Day 24: React Context (Intro)
Introduction to Context API
Sharing global state across components using Context
useContext hook

Day 25: Introduction to Fetch API
Fetching data using fetch()
Using useEffect to fetch data

Day 26: Working with REST APIs
Calling REST APIs in React
Handling API response data

Day 27: Handling Errors in API Calls
Handling loading states
Error handling in API calls

Day 28: Working with JSON Data
Fetching and parsing JSON data
Displaying JSON data in React components

Day 29: Local Storage and Session Storage
Storing data in local storage
Retrieving and removing data from local storage

Day 30: Review & Mini Project
Build a project that fetches data from an API (e.g., Weather App)