Explore the React developer tools and learn how to install them on your browser.
- [Instructor] For any type of web development, our first tool of choice is the dev tools that come 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. For the web portion of this course, I'll use Chrome. I highly recommend that you use either Chrome or Firefox, as they offer solid performance and work with the extensions we'll use. You can access the devtools on Chrome by doing on a Mac option plus command I, like I'm doing here, and on Windows, control, shift, I.
Once you're here, you'll see all the items that are related to inspecting your code. One thing that I'm gonna do right away is dock to bottom as opposed to the side so I can see more tabs, like so. Perfect. So let's close that. Also for the react native portion, I'll use IOS and therefore use the proper tools related to this environment so in this case I will have X code and the IOS simulator installed. If you'll follow along, make sure that you have those tools installed and at least run it once with the simulator just to make sure everything works.
And if you're using Android, make sure you have Android studio installed and also make sure that you run through at least one application and have it run on the simulators so you make sure that everything works. Alright, so let's install the react developer tools, which you can find on this link here, github.com/facebook/react-devtools. And once we get to this website, scroll all the way down to the installation, where we'll see the Chrome and Firefox extension so if you're on Firefox, install this one, if you're on Chrome, install this one.
So I'm gonna right click and open in a new tab and then click on the new tab. And once you're here, basically click on the button here add to chrome, so as you can see, I already have it added to chrome because of my extensions that I have on this particular system. Once I click here, I should be good to go. And then the best way to validate that it is installed properly is to go to a website that actually uses a react and one that I know for sure that does is Netflix, and you have to make sure that you're actually logged in to your account because the main page doesn't actually use react.
And then open your react dev tools, like I said before, option, command, I for Mac, control, shift, I for Windows. And then you'll see a react tab here so if you don't see a react tab, then that means you need to reinstall it. Once you click here, you should see the same things that I'm seeing here, which confirms the installation. Okay, so once this is done, the next thing we need to install is the standalone app so we can actually inspect react native as well. So click here and scroll all the way down to the npm install g command here.
So copy this line here, so command + C. And let's go into a terminal and then paste this line. So npm install -g react-devtools. And I'm typing it manually just to give you time to go through that part. If you don't have admin access to the user system, you need to make sure that you put pseudo first. In this case I do, so I'm just gonna put npm, install react dev tools, and once it is installed, go back here and copy the line react dev tools like so and paste it inside of here and its going to start the actual tool here so right now there's no version of react running so we're good.
And once you have react native running, you'll be able to see things here. Either leave it open or close it for the time being and then make sure you run it when we get to the react native part. And finally, if you're on the S code, there is an amazing extension that will save you hours of taping called simple react snippet. So let's go to the S code and go to the extensions here. And the one thing that you wanna do is not sort by installs so let's remove that and then do that again, simple react snippets and you have the first one here.
So install that one and then reload your application or the S code so what I will do is give you really some shortcuts to do the import react or create a class component and so on, so forth. So that's gonna save us a lot of time when we start coding our react components. So with this overview, you should be ready to go with the right tools to work with react.
- What is routing?
- How React Router can be used across different types of projects
- Web routing and native routing
- How to do URL params and dynamic routing
- Basic React Native routing
- Server-side rendering use cases
- Testing use cases