Debugging is the most frustrating aspect of programming for beginners and professionals alike. In this series, we explore the overall thought-process behind debugging in general and then we dive into a handful of bugs in the Node and React environments specifically. This is a great intro to the debugging process for beginners and for those new to React, this is a good place to see typical React errors and how to read the crash logs.
Debugging Node & React Apps
Node Crashes
In video one, we set up a simple Node/Express project and induce a couple crashes on purpose. We then debug the crashes very slowly while explaining the step-by-step thought process involved. We use the error logs to guide our process and narrow down the root of the cause.
Runtime Errors
In this video, we explore errors that result in unexpected outcomes rather than crashes. These are called runtime errors and they are typically harder to debug since they do not come with error logs, stack traces or any indication as to the root cause. We encounter a few runtime errors and step through he code until we find the mistakes.
Simple React Bugs
In this video, we set up the React side of the project and encounter simple bugs on the frontend: typos, import errors and such. We use the browswer console as well as the Webpack shell to identify these bugs and correct them. The process is fundamentally the same but the tools are different and reading React errors takes some getting used to.
"Full Stack" Bugs
In this video, we deal with bugs that impact both sides of the stack. Often, the data we get from an API may not match the structure we expect or the API itself may not support the request. We explore these kinds of errors and how to correct them when combining both the Node and React environments.
-
Portfolio Site with Node JS & Express fullstack
-
React w Node & Express Server fullstack
-
Basic Node JS and Express node
-
Creating a REST API node
-
Mongo DB node
-
React Native Tutorial - Yelp Clone react native
-
React Native Tutorial - Messaging App react native
-
React Native - Instagram react native
-
Chat Site - Reddit Clone fullstack
-
Paradigm landing
-
Palette base
-
The Gallery portfolio
-
Canvas base
-
Focus Media base
-
Influenced base
-
The Mogul base
-
Chloe landing
-
The K Feature base
-
The Daily Dose base
-
The Narrative base
-
Digital agency