Scribd
Upload
7 views13 pages

React Live Training Syllabus

The React Live Training Syllabus outlines a comprehensive 11-day program designed for beginners to intermediate learners, covering essential topics such as Git basics, React components, state management, and advanced features like Redux and the Context API. Each day includes hands-on projects to reinforce learning, culminating in a project day where participants build a mini React app. Additionally, a bonus session on advanced Git commands is provided to enhance collaboration skills.

Uploaded by

Harsh Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views13 pages

React Live Training Syllabus

The React Live Training Syllabus outlines a comprehensive 11-day program designed for beginners to intermediate learners, covering essential topics such as Git basics, React components, state management, and advanced features like Redux and the Context API. Each day includes hands-on projects to reinforce learning, culminating in a project day where participants build a mini React app. Additionally, a bonus session on advanced Git commands is provided to enhance collaboration skills.

Uploaded by

Harsh Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

React Live Training Syllabus

Beginner to Intermediate - Day-wise


Detailed Plan
Day 0: Git Basics (Introductory
Session)
• - Introduction to Version Control and Git
• - Git vs GitHub: Key Differences
• - Installing Git on Windows/Mac
• - Basic Git Commands: init, add, commit,
status
• - Branching and Switching: branch, checkout,
switch
• - Push and Pull with GitHub
• - Hands-On: Create a repository, practice basic
Day 1: React Introduction & Setup
• - What is React? Overview of Components,
Virtual DOM, and SPA
• - Why React? Key Features
• - Setting Up the Development Environment:
Node.js and npm
• - Using Create React App to Start a Project
• - Understanding Folder Structure
• - Hands-On: Create a simple React App with a
'Hello, React World!' message
Day 2: React Basics – Components
and JSX
• - Introduction to Components: Functional vs
Class Components
• - Props: Passing Data Between Components
• - Understanding JSX Syntax and Rules
• - Expressions in JSX
• - Hands-On: Create an 'About Me' component
and pass props to a 'Welcome User' message
Day 3: State and Event Handling
• - Introduction to useState Hook: Managing
Component State
• - Updating State and Understanding React’s
State Management
• - Event Handling in React: onClick, onChange,
etc.
• - Hands-On: Build a Counter App with State
and Event Handling
Day 4: Conditional Rendering and
Lists
• - Conditional Rendering Techniques: Ternary
Operators and Short-Circuit Operators
• - Rendering Lists with map() Function
• - Importance of Key Property in Lists
• - Hands-On: Create a 'Todo List' app to
dynamically add and render tasks
Day 5: React Hooks (useEffect)
• - What are React Hooks? Functional
Components with Hooks
• - Introduction to useEffect Hook: Handling
Side Effects
• - Hands-On: Create a Weather App with API
Integration using useEffect
Day 6: Forms and Controlled
Components
• - Building Forms in React: Input, Textarea,
Select
• - Controlled vs Uncontrolled Components
• - Handling Input State and Basic Form
Validation
• - Hands-On: Build a Login Form and Manage
Inputs Dynamically
Day 7: Routing in React
• - Introduction to React Router: SPA vs MPA
• - Setting Up React Router: Installation and
Basic Setup
• - Using Route, Switch, Link, and NavLink
• - Dynamic Routes and URL Parameters
• - Hands-On: Create a Mini Website with Page
Navigation
Day 8: Context API
• - Understanding Context API: Solving Props
Drilling
• - Creating and Consuming Context in React
• - Hands-On: Build a Theme Switcher App with
Dark/Light Mode
Day 9: Advanced State
Management – Redux Basics
• - What is Redux? Introduction to State
Management
• - Core Concepts: Store, Reducer, Actions,
Dispatch
• - Redux Toolkit Basics
• - Hands-On: Implement a Counter App with
Redux
Day 10: Project Day – Build a Mini
React App
• - Overview of the Project: CRUD App (e.g.,
Blog App or Task Manager)
• - Integrating Components, Hooks, Context,
Forms, and Routing
• - Styling the App with CSS
• - Q/A and Feedback Session
Bonus: Git Advanced Commands
(Day 11)
• - Advanced Git Features: Merge, Conflict
Resolution, Stashing Changes
• - Collaborating with Git: Pull Requests and
Issue Management
• - Hands-On: Team Collaboration on a
Repository using Advanced Git Features

You might also like