Course Duration: 40 Hours
Complete Syllabus of React JS Course
Basic eligibility criteria – Should Have The Knowledge of Responsive html, Advanced Js
Introduction to React
- What is React?
- Why React?
- React version history
- React 16 vs React 15
- Just React – Hello World
- Using create-react-app
- Anatomy of react project
- Running the app
- Debugging first react app
Templating using JSX
- Working with React.
- Expressions
- Using logical operators
- Specifying attributes
- Specifying children
- Fragments
About Components
- Significance of component architecture
- Types of components
- Functional
- Class based
- Pure
- Component Composition
Working with state and props
- What is state and it significance
- Read state and set state
- Passing data to component using props
- Validating props using propTypes
- Supplying default values to props using default Props
Rendering lists
- Using react key prop
- Using the map function to iterate on arrays to generate elements
Event handling in React
- Understanding React event system
- Understanding Synthetic event
- Passing arguments to event handlers
Understanding component lifecycle and handling errors
- Understand the lifecycle methods
- Handle errors using error boundaries
Working with forms</str
- Controlled components
- Uncontrolled components
- Understand the significance of the default Value prop
- Using react ref prop to get access to the DOM element
Context
- What is context
- When to use context
- Create Context
- Provider
- Consumer
- Reading context in class
Code-Splitting
- What is code splitting
- Why do you need code splitting
- lazy
- Suspense
- Route-based code splitting
React hooks
- What are hooks
- Why do you need hooks
- Different types of hooks
- Using state and effect hooks
- Rules of hooks
Routing With React-Router
- Setting up 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 parameters.
- Working with nested routes.
- Navigating to pages using Link and Nav Link components.
- Redirect routes using Redirect Component.
- Using Prompt component to get the consent of the user for navigation.
- Pathless Route to handle failed matches.