Mastering Maintainable React

Focused View

Juntao Qiu

7:08:03

82 View

1. To make the most of it, you are expected to Try to finish all the exercises in

1.1 introduction.zip

1. Introduction to Maintainable React.mp4

09:29

2. The most valuable outcome from completing the course.html

3.1 Introduction-to-maintainable-react.pdf

3. How to get the most out of this course.html

2. Lets align on some fundamentals

1. Introduction to basic ES6 features.mp4

02:17

2. ES6 - variable declarations var, let and const.mp4

02:35

3. ES6 - play with objects and arrays.mp4

10:31

4. Basic JavaScript ES6 features.html

5. Introduction to the collection API (filter, map, reduce).mp4

11:37

6. Collection API examples.html

7. Exercise - Try ES6 features in a sandbox.html

8. A minimal guide to Typescript.mp4

09:15

9. TypeScript 101.html

10. React in 5 minutes.mp4

09:14

11. Quiz - A quick JS and TS quiz.html

12. Exercise - Practice writing a simple component.html

3. Introduction to code smells

1. Introduction to code smells.mp4

06:49

2. Code smell - raw JS loop and collection APIs.mp4

07:32

3. Code smells - a real-world scenario.mp4

05:49

4. Quiz - A quick code smells quiz.html

4. Refactorings - the cure for code smells

1. Introduction of refactorings.mp4

09:10

2. Top ten common refactorings explained.html

3. Refactoring - Extract Function.mp4

04:58

4. Refactoring - Boolean Parameter.mp4

02:41

5. Refactoring - ES6 destructuring assignment.mp4

03:24

6. Quiz - A quick refactorings quiz.html

7. Refactoring - Extract Component.mp4

05:10

8. Refactoring - Move Component.mp4

03:21

9. Exercise - A Small Refactoring You Did Recently.html

10. Demonstration of common Refactoring usages.mp4

14:07

5. The best gift to developers - Tests

1. Benefits of having tests.mp4

06:07

2. How to write a test.mp4

04:19

3. Basic usage of Jest.html

4. Mock and Stub in jest.html

5. Quiz - mock and stub.html

6. Test runner + test cases + code structure.mp4

05:34

7. Exercise - try it yourself.html

6. Test-Driven Development

1. What is Test-Driven Development.mp4

04:51

2. The first TDD journey - A project effort tracker.mp4

08:47

3. The first TDD journey - Refactoring a bit further.mp4

05:17

4. How to implement task tracking with TDD.html

5. TDD with React component - implement a simple Header Component.mp4

10:10

6. TDD with React Component - implement user interaction.mp4

10:40

7. Exercise - fix the failed test and refactoring.html

8. Quiz - Test-Driven Development.html

7. Clean code in React

1. Common Design Principles.html

2. Single Responsibility Principle.mp4

06:23

3. Composable Design.mp4

05:58

4.1 Modularizing React Applications with Established UI Patterns.html

4. Layering application in React.html

5. Quiz - Design principles.html

8. Set up the project locally

1. Using create-react-app to create your application.mp4

05:15

2. Walk through the project structure.mp4

05:49

3. Additional resources.html

9. Project - Todo list

1. The project well build.html

2. Feature - Add a Todo to a list.mp4

18:04

3. Refactoring - Extract sub-components.mp4

10:22

4. Feature - Complete an item when clicked.mp4

14:33

5. Refactoring - Custom Hooks for Managing states.mp4

12:14

6. Feature - Add summary information to Todo List.mp4

26:14

7. Refactoring - Reduce duplication and extract more sub-components.mp4

15:44

8. Feature - Search by keyword.mp4

13:43

9. Feature - Enhance accessibility.mp4

11:30

10. Exercise - Its your turn.html

10. Project - Direct To Boot

1. The brief of Direct To Boot.html

2. Direct to boot - Feature introduction.mp4

02:51

3. Network-relate status statechart.mp4

05:05

4. Feature - the Im here button - happy path.mp4

11:37

5. Introduce mirage.js.mp4

15:49

6. Feature - Error handling.mp4

10:04

7. Refactoring - extract hooks.mp4

05:32

8. Feature - Im Here - retry.mp4

07:20

9. Use react-query to simplify the network statuses check.mp4

12:17

10. Fix all the tests with React-Query.mp4

06:42

11. Feature - Notify the store.mp4

14:04

12. Final refactoring.mp4

11:46

13. Quiz - mocking network.html

14. Extra readings for this chapter.html

11. Outro

1. Summarise what weve covered in the course.mp4

05:23

2. Thank and see you in the next section..html

Description

Empowering Test-Driven Development and Refactoring Techniques

What You'll Learn?

Apply principles of maintainable code to write React components and files that are easy to modify and understand over time.
Use best practices for organizing and structuring React applications to promote maintainability and scalability.
Identify and avoid common code patterns and anti-patterns in React that can lead to unmaintainable code.
Refactor existing React code to improve maintainability and reduce technical debt, using techniques such as code smells identification and refactoring patterns.
Appreciate the importance of maintainable code and its impact on the long-term success of a React application, and work towards continuous improvement.

Who is this for?

Beginner React developers looking to improve their skills

React developers looking to work on larger applications and write maintainable code

What You Need to Know?

This Maintainable React course assumes basic knowledge of JavaScript concepts, such as variables, functions, arrays, objects.

A section in the course ensures that participants have the necessary knowledge to fully understand and engage with the more advanced content.

More details

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

A few highlights of the course are:
Clean Code & Refactoring
The course covers refactoring, a technique for improving the design and structure of existing code. This is an essential skill for developers, allowing them to maintain and improve their code over time.

Test-Driven Development
The course covers TDD, a software development approach that emphasizes writing automated tests before writing code. This is a highly sought-after skill in the industry and can help students improve the quality and maintainability of their code.

Features From Real Projects
The course includes real-world project examples, which will help students understand how to apply the concepts they are learning in a practical setting and help them get more confident with the material.

The primary benefit of this course is that the code smells and refactorings presented are derived from real-world React projects. Since these techniques address actual problems, participants can immediately apply what they learn to their projects and experience the benefits firsthand.

The Maintainable React course is heavily focused on hands-on coding. In addition to watching video demonstrations, participants will be expected to complete exercises to solidify their understanding of the material. It is essential that exercises are constructed as the course progresses, and participants are encouraged to apply the techniques learned in their projects to experience the benefits firsthand.
Who this course is for:
Beginner React developers looking to improve their skills
React developers looking to work on larger applications and write maintainable code

User Reviews

Rating

average 0

Total votes0

Focused display

Greetings! I'm Juntao, and I'm passionate about empowering individuals to elevate their coding skills and produce high-quality code. With a strong focus on helping others, I actively engage with the community through online and offline platforms to share my valuable insights and experiences.Over the years, I have authored numerous books in the field of Web Development, serving as a comprehensive resource for developers seeking to enhance their expertise. Among my published works, I take immense pride in my latest publications: "Test-Driven Development with React" (2021) and "Maintainable React" (2022). These books offer practical guidance and best practices to assist developers in adopting effective approaches to React development.By continuously expanding my knowledge and staying up-to-date with the latest industry trends, I strive to provide valuable guidance and support to fellow developers, enabling them to write better code and build robust applications. Join me on this learning journey as we explore the intricacies of web development and unlock new levels of coding excellence together.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.