Duration in

days (Daily 8 Topics

Hours

Day 1 & 2 Introduction to ReactJS

Day 3 & 4 Introduction to Components

Day 3 & 4 Introduction to Components

Day 5 & 6 Event Handling in ReactJS & React Router

Day 7 & 8 React Hooks

Graph QL

Graph QL Advanced
Graph QL Advanced

Unit testing

Module Bundler
Sub-Topics
Why businesses should use ReactJS
Comparing JavaScript, Angular, and ReactJS
What makes developers prefer to React over Angular
Understanding unified data store and its importance
How exactly ReactJS works
Introduction to ReactJS
What is ReactJS
Why React JS
What is ES6
Babel
What is Typescript
Typescript v/s JS
Working with data types in TS
built in utility types in TS
Block scope, let & const
Template literals
Arrow functions
Spread and Restoperators
Object literal improvements
Destructuring
Classes
Inheritance
Static properties and methods
Promises
Iterators and Iterables
Generators
Modules
Set and Map
Setting up react application, Installing modules, and start the development
server
TemplatingJSX
Working with React. create Element
Expressions
Using logical operators
Specifyingattributes
Specifying children
Javascript basics and syntax understanding with examples
Virtual DOM
Project: Setting up the E-commerce project to work on the concepts
mentioned above
Working with State and Props
Working with styled-components,Integration of Ant Design system
Working with Ant design components
What is State and its significance (Read state and set state)
Passing data to component using props
Supplying default values to props using default Props
Project: Build components and strategize on components’ connections
with Styling
Understanding React event system
Understanding Synthetic event
Passing arguments to event handlers
Routing with React Router
Understand routing in single-page applications
Working with Browser Router and Hash Router components
Configuring route with Route component
Using Switch component to define routing rules
Making routes dynamic using route params
Working with nested routes
Navigating to pages using Link and Nav Link component
Redirect routes using Redirect Component
Using Prompt component to get the consent of the user for navigation
Pathless Route to handle failed matches.
Project: Use routing to change pages and navigate across the E-comm web
app. Add functionalities and basic data flow
Use State hook
Use Effect hook and use Context hook
Use Memo and use Ref hook
Use a Reducer hook
Building custom react hooks
Creating custom hook function
Using custom hooks
Configuring custom hooks
Building custom HTTP hook
Adjusting custom hook logic
Using the custom hook in more components
UseSelectors
Project: Implement Hooks with the current code base and Redux. See how
Redux and Hooks work together
What is state management
Understanding the importance of state management in react
Introduction to Graph QL
Integrating GraphQL & Apollo client
Installing Apollo Client & setup
fetch data using useQuery
handling states like loading, error
Error handling in graphql
Coding best practices in ReactJS and design patterns
Debugging and fixing errors
Suggested tools for effective development@
Project: Transform the previous project and make it functional by
implementing redux
Executing a custom query
caching query results
updating cache query results (polling & refetching)
using suspense
implementing mutations
working with fragments
implementing pagination
Project: Extend the project’s redux implementation with Sagas, Thunk and
Axios
Why to unit test
Shallow vs mount
Unit vs Integration vs e to e test
Using RTL
React-test-renderer
Snapshot testing
Working with Cypress
What is module bundling
Introduction to Vitejs & vite cli
Integrating vitejs build system
Dev server
vite config
using plugins
Inegrating react with vitejs
Project: Package the project and evaluate the Unit-Test report and deploy
the project to Firebase