A great place to start understanding where in your code there are issues is by inspecting the execution of your code in the browser. In this video, Emmanuel Henri takes a look at the source tab in the developer tools.
- [Narrator] The reactive tools … provides us with useful tools to inspect our components, … the stake props space to a component, … or even provide console commands … to play what are components. … So let's take a look at a few. … If we go back into our browser … and make sure your application is running, … go into the components here. … And this is again from the react dev tools. … And the first thing you're going to see is that we have … each of our components that we've built into our application … listed here. … So if we go back quickly to our application … and let's close the terminal, … you're going to see that we have our … app.js, which is the first top component. … And then we're passing the grid right here, … which is the second level. … And then into the grid, … we are passing the single … and we're returning it in this function here. … So we have each single for each items in our data, … which is basically what we have … in the courses.json here. … So if we take a look at all these …
- Setting up for React testing and debugging
- Testing with Jest
- Snapshot testing
- Debugging with Chrome and Chrome extensions
- Optimizing React code with ESLINT
- Type checking