CF

Mastering Maintainable React

7h 8m 52s
English
Paid

Supported by React is a comprehensive course designed to teach you the best practices for writing clean and maintainable code in React. Whether you are a beginner or an experienced developer, this course will provide you with the tools and knowledge to write high-quality, maintainable code. Join me and elevate your React skills to the next level!

Course Highlights

Clean Code and Refactoring

Learn the essential techniques of refactoring to improve the design and structure of existing code. Developing this skill is crucial for developers, as it allows them to maintain and evolve their code over time.

Test-Driven Development (TDD)

Master the approach of Test-Driven Development (TDD), which emphasizes writing automated tests before coding. Acquire this highly sought-after skill to enhance the quality and maintainability of your code.

Real-World Project Features

Explore examples from real-world projects to effectively apply the concepts learned. Gain confidence in mastering the material through practical examples that illustrate its application.

Course Benefits

One primary benefit of this course is addressing "code smells" and refactoring based on real React projects. By resolving these relevant issues, participants can immediately implement their newfound knowledge in their projects, witnessing real-world results.

Practical Learning

The Supported by React course emphasizes hands-on programming. Apart from engaging video demonstrations, participants will complete exercises to reinforce learning. It's crucial to perform these exercises progressively, applying the techniques to personal projects for an authentic understanding of their benefits.

Join the course and learn to create clean, maintainable React code, enhancing your professional skills and the quality of your projects.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 49 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 49 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction to Maintainable React
All Course Lessons (49)
#Lesson TitleDurationAccess
1
Introduction to Maintainable React Demo
09:30
2
Introduction to basic ES6 features
02:18
3
ES6 - variable declarations: var, let and const
02:36
4
ES6 - play with objects and arrays
10:32
5
Introduction to the collection API (filter, map, reduce)
11:38
6
A minimal guide to Typescript
09:16
7
React in 5 minutes
09:15
8
Introduction to code smells
06:50
9
Code smell - raw JS loop and collection APIs
07:33
10
Code smells - a real-world scenario
05:50
11
Introduction of refactorings
09:11
12
Refactoring - Extract Function
04:59
13
Refactoring - Boolean Parameter
02:42
14
Refactoring - ES6 destructuring assignment
03:25
15
Refactoring - Extract Component
05:11
16
Refactoring - Move Component
03:22
17
Demonstration of common Refactoring usages
14:08
18
Benefits of having tests
06:08
19
How to write a test?
04:20
20
Test runner + test cases + code structure
05:35
21
What is Test-Driven Development
04:52
22
The first TDD journey - A project effort tracker
08:48
23
The first TDD journey - Refactoring a bit further
05:18
24
TDD with React component - implement a simple Header Component
10:11
25
TDD with React Component - implement user interaction
10:41
26
Single Responsibility Principle
06:24
27
Composable Design
05:59
28
Using create-react-app to create your application
05:16
29
Walk through the project structure
05:50
30
Feature - Add a Todo to a list
18:05
31
Refactoring - Extract sub-components
10:23
32
Feature - Complete an item when clicked
14:34
33
Refactoring - Custom Hooks for Managing states
12:15
34
Feature - Add summary information to Todo List
26:15
35
Refactoring - Reduce duplication and extract more sub-components
15:45
36
Feature - Search by keyword
13:44
37
Feature - Enhance accessibility
11:31
38
Direct to boot - Feature introduction
02:52
39
Network-relate status statechart
05:06
40
Feature - the I'm here button - happy path
11:38
41
Introduce mirage.js
15:50
42
Feature - Error handling
10:05
43
Refactoring - extract hooks
05:33
44
Feature - I'm Here - retry
07:21
45
Use react-query to simplify the network statuses check
12:18
46
Fix all the tests with React-Query
06:43
47
Feature - Notify the store
14:05
48
Final refactoring
11:47
49
Summarise what we've covered in the course
05:24
Unlock unlimited learning

Get instant access to all 48 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

49 lessons · 7h 8m 52s
Show all 49 lessons
  1. 1 Introduction to Maintainable React 09:30
  2. 2 Introduction to basic ES6 features 02:18
  3. 3 ES6 - variable declarations: var, let and const 02:36
  4. 4 ES6 - play with objects and arrays 10:32
  5. 5 Introduction to the collection API (filter, map, reduce) 11:38
  6. 6 A minimal guide to Typescript 09:16
  7. 7 React in 5 minutes 09:15
  8. 8 Introduction to code smells 06:50
  9. 9 Code smell - raw JS loop and collection APIs 07:33
  10. 10 Code smells - a real-world scenario 05:50
  11. 11 Introduction of refactorings 09:11
  12. 12 Refactoring - Extract Function 04:59
  13. 13 Refactoring - Boolean Parameter 02:42
  14. 14 Refactoring - ES6 destructuring assignment 03:25
  15. 15 Refactoring - Extract Component 05:11
  16. 16 Refactoring - Move Component 03:22
  17. 17 Demonstration of common Refactoring usages 14:08
  18. 18 Benefits of having tests 06:08
  19. 19 How to write a test? 04:20
  20. 20 Test runner + test cases + code structure 05:35
  21. 21 What is Test-Driven Development 04:52
  22. 22 The first TDD journey - A project effort tracker 08:48
  23. 23 The first TDD journey - Refactoring a bit further 05:18
  24. 24 TDD with React component - implement a simple Header Component 10:11
  25. 25 TDD with React Component - implement user interaction 10:41
  26. 26 Single Responsibility Principle 06:24
  27. 27 Composable Design 05:59
  28. 28 Using create-react-app to create your application 05:16
  29. 29 Walk through the project structure 05:50
  30. 30 Feature - Add a Todo to a list 18:05
  31. 31 Refactoring - Extract sub-components 10:23
  32. 32 Feature - Complete an item when clicked 14:34
  33. 33 Refactoring - Custom Hooks for Managing states 12:15
  34. 34 Feature - Add summary information to Todo List 26:15
  35. 35 Refactoring - Reduce duplication and extract more sub-components 15:45
  36. 36 Feature - Search by keyword 13:44
  37. 37 Feature - Enhance accessibility 11:31
  38. 38 Direct to boot - Feature introduction 02:52
  39. 39 Network-relate status statechart 05:06
  40. 40 Feature - the I'm here button - happy path 11:38
  41. 41 Introduce mirage.js 15:50
  42. 42 Feature - Error handling 10:05
  43. 43 Refactoring - extract hooks 05:33
  44. 44 Feature - I'm Here - retry 07:21
  45. 45 Use react-query to simplify the network statuses check 12:18
  46. 46 Fix all the tests with React-Query 06:43
  47. 47 Feature - Notify the store 14:05
  48. 48 Final refactoring 11:47
  49. 49 Summarise what we've covered in the course 05:24

Related courses

  • The Modern React 18 Bootcamp - A Complete Developer Guide thumbnailUpdated 2y ago

    The Modern React 18 Bootcamp - A Complete Developer Guide

    By: Udemy
    In this course we will take you from a React 18 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly
    20 hours 35 minutes 57 seconds
  • React - The Complete Guide thumbnailUpdated 3y ago

    React - The Complete Guide

    By: Udemy, Academind Pro (Maximilian Schwarzmüller)
    React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.
    47 hours 42 minutes 41 seconds 5 / 5
  • MERN Stack From Scratch thumbnailClassic

    MERN Stack From Scratch

    By: Brad Traversy
    We spend 12 hours creating this project from scratch. It includes a multi-step checkout process with PayPal integration, product search, rating & review, user p
    13 hours 32 minutes 38 seconds 5 / 5

Frequently asked questions

What is Mastering Maintainable React about?
Supported by React is a comprehensive course designed to teach you the best practices for writing clean and maintainable code in React. Whether you are a beginner or an experienced developer, this course will provide you with the tools and…
Who teaches Mastering Maintainable React?
Mastering Maintainable React is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Mastering Maintainable React?
Mastering Maintainable React contains 49 lessons with a total runtime of 7 hours 8 minutes. All lessons are available to watch online at your own pace.
Is Mastering Maintainable React free to watch?
Mastering Maintainable React is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Mastering Maintainable React online?
Mastering Maintainable React is available to watch online on CourseFlix at https://courseflix.net/course/mastering-maintainable-react. The page hosts every lesson with the integrated video player; no download is required.