https://github.com/kamranayub/pluralsight-course-react-debugging

Pluralsight: React 18 Debugging Playbook
https://github.com/kamranayub/pluralsight-course-react-debugging

Last synced: 29 days ago
JSON representation

Pluralsight: React 18 Debugging Playbook

• Host: GitHub
• URL: https://github.com/kamranayub/pluralsight-course-react-debugging
• Owner: kamranayub
• License: apache-2.0
• Created: 2022-11-08T03:34:59.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-01-24T03:21:26.000Z (10 months ago)
• Last Synced: 2024-04-13T16:07:08.370Z (7 months ago)
• Language: PowerShell
• Size: 9.85 MB
• Stars: 5
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React 18 Debugging Playbook Pluralsight Course

[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/kamranayub/pluralsight-course-react-debugging)

This repository is for the Pluralsight course **[React 18 Debugging Playbook](https://bit.ly/PSReactDebugging)**. The license is Apache 2.0.

[![Course overview screenshot](https://github.com/kamranayub/pluralsight-course-react-debugging/assets/563819/a2d2e978-807d-431c-97c2-ac5a28b49990)](https://bit.ly/PSReactDebugging)

## About the Course

Do you wish you spent less time debugging React code? This course will teach you how to quickly diagnose common issues using the React Developer Tools so you can spend more time writing your application.

In this course, React 18 Debugging Playbook, you’ll learn to diagnose issues with the React Developer Tools. First, you’ll explore how the DevTools work and configure them for development and production. Next, you’ll discover how to debug issues with component props, state, and hooks. Finally, you’ll learn how to how to debug rendering and lifecycle issues using the React profiler and scheduler timeline. When you’re finished with this course, you’ll have the skills and knowledge of React debugging needed to quickly diagnose and fix issues for your React application.

## Table of Contents

1. [React Bug Shop](#react-bug-shop)

1. [Share and Discuss](#share-and-discuss)

1. [Notes](#notes)

1. [Errata](#errata)

1. [Updates](#updates)

1. [Additional Resources](#additional-resources)

## React Bug Shop

As a companion learning experience to the course, this repository has the source for the React Bug Shop demo app.

You can use the [1-click Dev Container setup](https://codespaces.new/kamranayub/pluralsight-course-react-debugging) to create a GitHub Codespaces that will let you modify, update, and play with the demo app to solve its challenges.

[Open live demo site](https://reactbugs.shop)

### Solve the Challenges

The goal is to catch all the bugs in the shop. Each bug comes with a set of checks you need to make pass. You'll need to refactor and update the code.

The exercise files in this repo along with the videos in the course provide the solutions to each challenge but there are often multiple ways to solve a problem with React. If you're stuck, reference the videos or explore on your own!

### Running Locally

To run the Bug Shop demo locally, you will need Node.js 16+ installed. 

Clone the repository then in the `demo` folder, run:

    npm install

    npm start

## Share and Discuss

If you find more solutions, have questions, or simply want to share your progress and wins, check out the [Discussions](discussions) for the repo. I get notified whenever there's a new discussion so I can jump in to help if you're stuck as well.

## Notes

See each `Module #` folder for additional course notes and exercise solutions.

## Errata

*None yet*

Please report course issues using the [Issues](issues) page or the Pluralsight discussion page.

## Updates

- **Jun 2023**

  - Initial release 🎉

## Additional Resources

- [Learn React](https://react.dev/learn)