Video description
This course begins with an in-depth introduction to React software and its features, pros and cons of use, and outlines the fundamentals, including components and props, state, hooks, context, and reducers.
Over the course duration, we will explore JSX and components state and props, event handling, and built-in hooks (for example, useState, useEffect, useCallback, and useRef). We will then work with forms and validations and handle form data. We will understand client-side routing with React Router and work with multiple APIs and handle data for projects. You will learn to integrate other libraries and frameworks (for example, Redux) with React. We will explore testing and debugging React apps using popular libraries such as Jest, RTL, and React DevTools. You will then learn about DOM manipulation and manipulating the virtual DOM, server-side rendering, and optimizing the performance of React apps. Finally, we will explore the best practices for structuring and organizing React projects and building and deploying production-ready React apps, including code splitting and optimization techniques.
Upon completing the course, you will be ready to work practically on React and implement the concepts individually! More importantly, you will have the potential to build, test, and deploy your projects created using React and JavaScript.
What You Will Learn
- Learn React basics: components, props, hooks, context, and reducers
- Explore Tailwind CSS, React Router, Redux, Firebase, React Skeleton
- Build a mock eCommerce backend with JSON server and deploy it on Railway
- Deploy your created projects on Netlify using Git and GitHub
- Test your developed application with Jest and React testing library
- Work with multiple APIs to make use of available third-party data
Audience
This comprehensive course is designed for anyone wanting to learn React from basic to advanced levels. The course caters to developers with some experience with JavaScript and web development who want to learn to build dynamic and responsive user interfaces using React. The prerequisites include prior knowledge of HTML, CSS, and JavaScript.
About The Author
Shubham Sarda: Shubham Sarda is a software developer passionate about teaching. He has worked with many funded start-ups, self-made projects, and as a top-rated freelancer in marketplaces.
He has taught programming and digital marketing to over 40,000 students online and offline. Shubham has mastered the art of explaining very complex topics in the most straightforward manner that is easy to understand and follow.
His video courses are professionally structured and used as training material by many companies to train their employees and by colleges to prepare their students and upgrade their skills based on industry requirements.
Table of contents
- Chapter 1 : Introduction and Resources
- Chapter 2 : React Basics and Setup
- Chapter 3 : States and useState
- Chapter 4 : Components and Props
- Chapter 5 : Styling React Application
- Chapter 6 : User Input, Events, and useRef
- Chapter 7 : useEffects, useCallback, and Custom Hooks
- Chapter 8 : Project: TaskMate
- Chapter 9 : React Router
- Chapter 10 : Tailwind CSS Crash Course
-
Chapter 11 : Movie API Project: Cinemate
- Cinemate Demo
- Project Setup
- Tailwind Introduction / 063
- TMDB API: Documentation / 064
- UI Design (Tailwind and Flowbite) / 065
- Navigation Structure
- Dark Mode Integration / 067
- Movie List Structure / 068
- API Fetch: Movie List / 069
- Custom Hook: useFetch / 070
- API Fetch: Movie Search / 071
- Tailwind CSS Customization / 072
- Page Not Found / 073
- Individual Movie Information / 074
- Scroll Restoration: Scroll to Top / 075
- Dynamic Page Title / 076
- Style Update / 077
- Project Deployment / 078
- Development Branch on Git and GitHub
- Solved: Netlify Error / 079
- Chapter 12 : Assignment: Shopping Cart
- Chapter 13 : Context and Reducers Project: Shopping Cart
- Chapter 14 : Redux Project: Shopping Cart
-
Chapter 15 : ECommerce Project: Codebook
- Codebook Demo / 097
- Installations / 098
- Project Structure / 099
- Header Component - I / 100
- Header Component - II / 101
- Home Page / 102
- Products Page / 103
- API: Product List / 104
- Rating Component / 105
- Individual Product Component / 106
- Dark Mode / 107
- ScrollToTop Component / 108
- Product Search / 109
- Dynamic Title / 110
- Filter: Context and Reducers / 111
- Filter: Initial Product List / 112
- Filter: Properties / 113
- Clear Filter / 114
- Dropdown Option / 115
- User Account and Cart
- Login and Registration Page / 118
- React-Toastify / 119
- API: Login/Register Endpoint / 120
- Session Storage / 121
- Toggle Dropdown (Hide) / 122
- Cart Interface / 123
- Cart: Context and Reducers / 124
- Cart: Provider / 125
- Add to Cart / 126
- Condition Check: Already in Cart / 127
- Out of Stock Products / 128
- Protected Routes / 129
- Checkout Modal / 130
- Undefined Value Warning / 131
- Order Submit Function / 132
- Order Page / 133
- Dashboard: Condition 1 / 134
- Dashboard: Condition 2 / 135
- Auth Service: API End Points / 136
- Data Service: API Endpoints / 137
- Product Service: API End Points / 138
- Page Not Found / 139
- Dynamic Page Title / 140
- Error Handling / 141
- ENV / 142
- Frontend Deployment / 143
- Backend Deployment / 144
- Update Environment Variables / 145
- Login as Guest
- Solved: Netlify Errors / 147
- Chapter 16 : Assignment: Word Counter
- Chapter 17 : React Testing Library and Jest
-
Chapter 18 : Firebase Crash Course
- Firebase Introduction
- Webpack Setup / 252
- Firebase Setup / 253
- Firebase Connection / 254
- Fetching Documents - I / 255
- Fetching Documents- II / 256
- Adding and Deleting Documents / 257
- Snapshots / 258
- Firestore Queries / 259
- Ordering Data / 260
- Updating Documents / 261
- Fetching Individual Document / 262
- Authentication - I / 263
- Authentication - II / 264
- Chapter 19 : Blog Project: WriteNode
Product information
- Title: React JS Masterclass - Go From Zero To Job Ready
- Author(s):
- Release date: March 2023
- Publisher(s): Packt Publishing
- ISBN: 9781805125549
You might also like
video
React: Zero to Full-Stack (Video Collection)
This course contains everything you need to know to become a full-stack developer with the React …
video
React - The Complete Guide (incl. Hooks, React Router and Redux)
Learn React or dive deeper into it. Learn the theory, solve assignments, practice on demo projects …
video
The Complete Node.js Developer Course (3rd Edition)
This course was just completely re-filmed to give you everything you need to master Node.js in …
video
The Complete Java Developer Course: From Beginner to Master
Be it websites, mobile apps, or desktop software, Java remains one of the most popular programming …