Mastering In React
This course provides a comprehensive journey through React, covering everything from the fundamentals to advanced techniques. Participants will learn to create reusable components, manage state effectively, implement routing and navigation, handle forms, work with APIs, and optimize performance.
Instructors: Md Mostafizur Rahman
|
Duration
03 Months
|
Class
35+
|
Class Duration
1.5 Hours
Description
This course provides a comprehensive journey through React, covering everything from the fundamentals to advanced techniques. Participants will learn to create reusable components, manage state effectively, implement routing and navigation, handle forms, work with APIs, and optimize performance. Through real-world projects and hands-on exercises, students will gain the skills and confidence needed to build professional-quality React applications.
Course Content
Module 1: React Fundamentals
- Overview of React.js
- Project Setup using Vite
- Creating your first component
- Writing Markup with JSX
- Passing Props to a Component
- Rendering List
- Styling Components
- Add types to your component
Module 2: Adding Interactivity
- Responding to Events
- Managing States with
useState - Complex state management with useReducer
- Sharing State Between components
- Avoiding props drilling with Context
- Combining reducer with context
- Manipulating the DOM with
useRef - Project 1: Interactive Quiz App
- Implement state management for quiz questions and answers
- Use context to avoid props drilling
- Handle events for user interactions
Module 3: Performance Optimization
- Optimizing rerenders by memorizing component
- Understanding useMemo and use callback
- Optimizing Context Re-Renders
- Lazy loading components
- Caching Resources
- Reusing Logic with Custom Hooks
Module 4: Data Fetching and Error Handling
- Synchronizing external data with Effects
- Avoiding unnecessary Effects
- Lifecycle of an Effect
- Handing errors with Error Boundaries
- Project 2: Weather Forecast Application
- Fetch weather data from an external API
- Manage data fetching and avoid unnecessary re-renders
- Implement error boundaries to handle API errors gracefully
Module 5: Data Fetching with React Query
- Introduction to React Query
- Setting up React Query in a Project
- Fetching Data with useQuery
- Mutations with useMutation
- Query Caching and Invalidation
- Pagination and Infinite Queries
- Handling Errors and Loading States
- Optimistic Updates with React Query
- Project 3: Ecommerce Product Management
- Fetch and display a list of products using useQuery
- Add new products with useMutation
- Implement pagination for the product list
- Allow editing and deleting books, utilizing query invalidation
- Show loading states and handle errors for all operations
Module 6: State Management with Redux and TypeScript
- Introduction Redux Toolkit
- Setting up Redux Toolkit with React
- Creating Reducers and Actions
- Connecting Redux to React Components
- Middleware and Async Actions with Redux Thunk
- Project 4: E-commerce Shopping Cart
- Set up Redux Toolkit for state management
- Implement async actions for fetching product data
- Create reducers and actions for managing the shopping cart
Module 7: Advance React Patterns
- The Render Props Pattern
- Higher-Order Components (HOC)
- The Compound Component Pattern
- Prop Collections and Getters
- State Reducer Pattern
- Project 5: Advanced Form Builder
- Use various advanced React patterns to build a form builder
- Implement state management using the state reducer pattern
- Utilising render props and HOCs for shared form logic
Module 8: Routing in React
- Introduction to React Router
- Route setup and navigation
- Dynamic and Nested Routes
- Data Loading and Mutation with React Router
- Form Data Handling with React Router
- Managing Routing History
- Project 6: Ecommerce Product Management-2
- Adding Separate Routes for Product and Category Listing Page
- Implement dynamic routes for product and category details.
- Use Loader Data to Populate and Mutate Product and Category
Module 9: Testing React Apps
- Setup test environment using Vitest
- Introduction to React Testing Library
- Rendering Components for Test
- Finding Elements and assert values
- Form Handing and Firing Events in Test
- Handing Data Fetching in Test
- Testing Custom Hooks
- Project 7: Testing The Ecommerce Product Management
- Set up Vitest and React Testing Library for the project
- Write tests for various components and custom hooks
- Test data fetching and form handling
Module 10 : Deploying React Apps
- Deployment Steps
- Building the Code for Production
- Deploying to Netlify
- Deploying to Vercel
- Deploying to VPS
- Project 8: Deploying the Ecommerce Product Management App
- Deploy Our Ecommerce Product Management App to Vercel
Module 11 : Server side React with Next.js
- Introduction to Next.js
- Routing in Next.js (Page routing, App routing & API Routing)
- Client and Server Components
- Data Fetching in Next.js
- Deploying a Next.js App
- Project 9: Full-featured E-commerce Website
- Build a full-featured e-commerce website with Next.js, including product listing, search, and checkout
- Implement routing and data fetching
- Deploy the application to a production environment
Instructor
Md Mostafizur Rahman
Senior Software Engineer, weDevs
37 Reviews
|
4.8 Rating
|
170+ Students
Full Stack Developer, Frontend Specialized, Microservices, JavaScript, Typescript, React JS, Vue JS, Node JS, PHP, Laravel.
Career Opportunities
Mastering React opens up a wide range of career opportunities in the field of web development. Here are some potential career paths and job roles you can pursue after completing a course in mastering React:
Open Job Positions
React is one of the most popular JavaScript libraries for building user interfaces. It has gained widespread adoption among developers and is used by many companies to create dynamic and interactive web applications. As a result, the demand for React professionals has grown significantly in recent years.
React Developer
React/JS Consultant
React Instructor/Trainer
JavaScript Developer
JS Support Specialist
Project Manager
Not only amazing course
Not only industry standard curriculum, we have other career
oriented features just for you.
Job Placement
Expert Support System
Mock Interview
Industrial Visit
Hear from our learners
Be one of them who became successful in their career. Start learning today
to shine tomorrow.
Asad Nur
Software Engineer, weDevs
The course content was well-structured, and easy to follow. I appreciate the practical approach of the course, which allowed me to learn by doing.
Ratul Hasan
Software Engineer, weDevs
The learning experience at weDevs Academy is unparalleled. From the curriculum to the community, everything exceeded my expectations.
Asif Hossain Nadim
Software Engineer, weDevs
“Thanks to weDevs Academy, I transitioned into a career I love. The courses are comprehensive, and the instructors are top-notch!”
Abul Hasan Aunshon
Software Engineer, weDevs
The course was transformative, imparting deep plugin development knowledge and vital lessons in professional ethics, behavior, and resilience under pressure.
Certification that Makes a Difference
Stand out with a certificate from weDevs Academy. Recognized by industry leaders
worldwide, our certifications boost your profile,
Some questions, some answers
Here are our most frequently asked questions
Do I need to know JavaScript before learning React?
- Yes, having a strong understanding of JavaScript (especially ES6+) is essential before diving into React. Concepts like closures, promises, and async/await are frequently used in React development.
How long does it take to learn React?
- The time it takes to learn React depends on your prior experience with JavaScript and web development. Typically, it can take anywhere from a few weeks to a few months to become proficient.
BDT 8,000
Batch Start
Seats left
Skill Level
Admission
For details about the course
