React JS Masterclass - Go From Zero To Job Ready

React JS Masterclass - Go From Zero To Job Ready

by Shubham Sarda
Released March 2023
Publisher(s): Packt Publishing
ISBN: 9781805125549

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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

  1. Chapter 1 : Introduction and Resources
    1. Course Introduction
    2. Resources (Important)
  2. Chapter 2 : React Basics and Setup
    1. React Introduction
    2. Environment Setup
    3. Create React App
    4. React Behind the Scene
    5. React Boilerplate / 005
    6. Components: Class- and Function-Based / 006
    7. JSX: In-Depth Introduction / 007
    8. Practice: Basic Template Structure / 008
  3. Chapter 3 : States and useState
    1. Why We Need States? / 009
    2. State Introduction: useState / 010
    3. useState: Multiple Updates / 011
    4. useState: Array State Value / 012
    5. useState: Array setState Value / 013
    6. Conditional Templates / 014
    7. Quick Hook Advice / 015
  4. Chapter 4 : Components and Props
    1. Multiple Components and Fragments / 016
    2. Props: In-Depth Introduction / 017
    3. Props: Children / 018
    4. Prop Drilling / 019
  5. Chapter 5 : Styling React Application
    1. Global Level Styling / 020
    2. Component Level Styling / 021
    3. Inline Level Styling / 022
    4. Dynamic Level Styling / 023
    5. Module Level Styling / 024
  6. Chapter 6 : User Input, Events, and useRef
    1. Forms and Input / 025
    2. onChange Event / 026
    3. Controlled Inputs / 027
    4. onSubmit Event / 028
    5. Add New Task / 029
    6. useRef Hook / 030
  7. Chapter 7 : useEffects, useCallback, and Custom Hooks
    1. JSON Server / 031
    2. useEffect Hook / 032
    3. React StrictMode
    4. List Output / 035
    5. onClick Event / 036
    6. useCallback Hook / 037
    7. Custom Hook (useFetch) / 038
    8. Loading State / 039
    9. Handling Errors (try/catch) / 040
    10. Aborting Fetch Request / 041
    11. Infinite Loops / 042
  8. Chapter 8 : Project: TaskMate
    1. TaskMate Demo
    2. Project Structure
    3. Components / 045
    4. State: tasklist and setTasklist / 046
    5. Function: Edit and Delete / 047
    6. Warning: Undefined Value / 048
    7. Update Button / 049
    8. Local Storage: Store All Tasks / 050
    9. Theme: Change Background / 051
    10. Project Deployment
  9. Chapter 9 : React Router
    1. React Router Introduction / 053
    2. React Router Setup / 054
    3. Project Structure / 055
    4. Navigation / 056
    5. Route Parameters / 057
    6. No Route Found / 058
    7. Nested Routes / 059
    8. Project Restructuring / 060
  10. Chapter 10 : Tailwind CSS Crash Course
    1. Introduction and Demo
    2. Common Properties
    3. Hover, Focus, and Other States
    4. Responsive Design
    5. Dark Mode
    6. Custom Configuration / 206
    7. Project Demo / 207
    8. Header and Hero Section/ 208
    9. Footer / 209
    10. Responsive Screen and Component Tools / 210
  11. Chapter 11 : Movie API Project: Cinemate
    1. Cinemate Demo
    2. Project Setup
    3. Tailwind Introduction / 063
    4. TMDB API: Documentation / 064
    5. UI Design (Tailwind and Flowbite) / 065
    6. Navigation Structure
    7. Dark Mode Integration / 067
    8. Movie List Structure / 068
    9. API Fetch: Movie List / 069
    10. Custom Hook: useFetch / 070
    11. API Fetch: Movie Search / 071
    12. Tailwind CSS Customization / 072
    13. Page Not Found / 073
    14. Individual Movie Information / 074
    15. Scroll Restoration: Scroll to Top / 075
    16. Dynamic Page Title / 076
    17. Style Update / 077
    18. Project Deployment / 078
    19. Development Branch on Git and GitHub
    20. Solved: Netlify Error / 079
  12. Chapter 12 : Assignment: Shopping Cart
    1. Assignment Statement and Demo / 080
    2. Solution: Project Setup
    3. Solution: Components / 082
    4. Solution: Pages / 083
    5. Assignment Deployment
  13. Chapter 13 : Context and Reducers Project: Shopping Cart
    1. Global State Management
    2. Project Structure / 086
    3. Context / 087
    4. Reducer / 088
    5. Methods / 089
    6. Project Deployment / 090
  14. Chapter 14 : Redux Project: Shopping Cart
    1. Redux Introduction
    2. Project Structure / 091
    3. Slice and Action / 092
    4. Reducers: Add and Remove / 093
    5. Redux Store State / 094
    6. Project Deployment / 095
  15. Chapter 15 : ECommerce Project: Codebook
    1. Codebook Demo / 097
    2. Installations / 098
    3. Project Structure / 099
    4. Header Component - I / 100
    5. Header Component - II / 101
    6. Home Page / 102
    7. Products Page / 103
    8. API: Product List / 104
    9. Rating Component / 105
    10. Individual Product Component / 106
    11. Dark Mode / 107
    12. ScrollToTop Component / 108
    13. Product Search / 109
    14. Dynamic Title / 110
    15. Filter: Context and Reducers / 111
    16. Filter: Initial Product List / 112
    17. Filter: Properties / 113
    18. Clear Filter / 114
    19. Dropdown Option / 115
    20. User Account and Cart
    21. Login and Registration Page / 118
    22. React-Toastify / 119
    23. API: Login/Register Endpoint / 120
    24. Session Storage / 121
    25. Toggle Dropdown (Hide) / 122
    26. Cart Interface / 123
    27. Cart: Context and Reducers / 124
    28. Cart: Provider / 125
    29. Add to Cart / 126
    30. Condition Check: Already in Cart / 127
    31. Out of Stock Products / 128
    32. Protected Routes / 129
    33. Checkout Modal / 130
    34. Undefined Value Warning / 131
    35. Order Submit Function / 132
    36. Order Page / 133
    37. Dashboard: Condition 1 / 134
    38. Dashboard: Condition 2 / 135
    39. Auth Service: API End Points / 136
    40. Data Service: API Endpoints / 137
    41. Product Service: API End Points / 138
    42. Page Not Found / 139
    43. Dynamic Page Title / 140
    44. Error Handling / 141
    45. ENV / 142
    46. Frontend Deployment / 143
    47. Backend Deployment / 144
    48. Update Environment Variables / 145
    49. Login as Guest
    50. Solved: Netlify Errors / 147
  16. Chapter 16 : Assignment: Word Counter
    1. Statement and Demo / 157
    2. Solution: WordCount / 158
  17. Chapter 17 : React Testing Library and Jest
    1. Testing Introduction / 148
    2. React Testing Library and Jest / 149
    3. Project Setup
    4. Testing Structure / 151
    5. Test: Component Rendering / 152
    6. Test: Fire Events and User Events / 153
    7. Queries, Type, Expect, and More / 154
    8. Test: API Async Loading / 155
    9. Test: Page Component Wrapper / 156
  18. Chapter 18 : Firebase Crash Course
    1. Firebase Introduction
    2. Webpack Setup / 252
    3. Firebase Setup / 253
    4. Firebase Connection / 254
    5. Fetching Documents - I / 255
    6. Fetching Documents- II / 256
    7. Adding and Deleting Documents / 257
    8. Snapshots / 258
    9. Firestore Queries / 259
    10. Ordering Data / 260
    11. Updating Documents / 261
    12. Fetching Individual Document / 262
    13. Authentication - I / 263
    14. Authentication - II / 264
  19. Chapter 19 : Blog Project: WriteNode
    1. WriteNode Demo / 159
    2. Project Structure / 160
    3. Project Styling / 161
    4. Homepage / 162
    5. Firebase Setup / 163
    6. Firebase Configuration / 164
    7. Conditional Auth Header / 165
    8. Create Blog Post / 167
    9. Error: Object Fetch / 168
    10. Toggle Update / 169
    11. Dynamic Page Title
    12. React Loading Skeleton
    13. Project Deployment / 172

Product information

  • Title: React JS Masterclass - Go From Zero To Job Ready
  • Author(s): Shubham Sarda
  • Release date: March 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781805125549