In this video, Emmanuel Henri explores the tools you can use to explore your data with React.
- [Instructor] Working with data in React involves a few tools that I'd like to install and introduce. For any type of web development, our first tool of choice is the DevTools that comes with your own browser. Whether you use Chrome, Safari, Firefox, or Edge, you have the tools needed to inspect your code, do performance checks, and more. In this course, we'll specifically use Chrome's internal tools. I highly recommend that you use either Chrome or Firefox as they offer solid performance and work with extensions we'll use.
As a developer, you've probably used Chrome's Developer Tools, but if not, you can access them, on Mac, option + cmd + i, and on Windows, ctrl + shift + i, like so. Then let's install the React Developer Tools, which you can find here on github.com/facebook/react-devtools. And once you're on that page, scroll a little bit up to here and you'll see the extensions for Firefox, Chrome, and if you don't have Chrome or Firefox, you can have a standalone app, but I really recommend that you use either Chrome or Firefox.
In this case, I'm using Chrome. And then you can Add to Chrome. As you can see, I already have it, and you should see something that looks like this once you have it installed. And once you have a React application running and you open the Developer Tools by doing Control + Shift + I for Windows or Mac, Option + Command + I, you'll see a React tab. Right now, it's not apparent because it's not a React application, so if we go, for example, to Netflix, which I know for a fact that has React installed, then you'll see the React tab here.
And then you'll see all the stuff related to React, all the props, states, and so on and so forth. So, we'll explore this further. Then finally, let's also install Postman so we can inspect our API connection as we build in the application. So, go to getpostman.com and then select whatever operating system you're running on, so Linux, Windows, or Mac. In this case, I'm running Mac. Then you'll download a ZIP file, and then open up the ZIP file and drag and drop into your applications.
I already have Postman installed, so if I do postman, this is what the application looks like. So, you're going to be able to do GET, POST, Request with the APIs that we're going to interact in this course. Okay, so now we have all the tools we need, let's move on.
- Setting up the React project
- Fetching data
- Updating your state
- Using the axios library to make HTTP requests