An important part of working as a React developer is to take advantage of the React Developer Tools available for Firefox and Chrome. These tools are essential for inspecting elements and understanding the properties and state of components.
- [Instructor] To get ready to work on React projects, a great place to get started is to install the React Developer Tools. These are available for both Chrome and Firefox. I'm going to go through the process of setting this up with Chrome, but the Firefox process is just as simple. So from the Chrome web store I'm going to search for React Developer Tools. And this is going to bring up these options, the first option is what I want, so I'm going to click on add to Chrome, and then I'll allow it to add the extension. And now it says, React Developer Tools has been added to Chrome.
So this helps us a lot with two things, number one, any website that we visit that uses React is going to have the React icon pop up here so it kind of detects where React is all over the internet. And then the second thing is we can look at the components that make up a page, we can look at all of the React code that underlies these interfaces. So on a Mac I'm going to hit cmd + opt + j, if you're on a PC you can hit ctrl + shift + j. This'll open up your console, and then you can see if you click these right facing arrows, there's the React option.
And React is going to show you all of the different components that are part of the page. So as I look through all of these different components, it's going to show me on the page which ones these are. So, one thing I wanted to point out here is if I right click over any element on the page and I click inspect, this is going to take me directly in the elements tab to that h3 that I have selected. But, if I select React, it's going to show me which component is selected.
So, this is pretty cool stuff, it's pretty useful. So, the icon is very helpful and then we'll be taking a closer look at these React tools as we go through the course. I also wanted to point out one thing here. So if you go to Chrome://extensions, this'll give you a list of all of your different Chrome extensions. I would like to allow access to file urls. And what this'll mean is if I open up any files, like we'll use for our simpler examples, we'll be able to see the React Developer Tools directly in those pages.
So there we go, our Chrome browser is now ready to develop some real projects using React.
- What is React?
- Introducing JSX
- Creating components
- Using state
- Handling events
- Adding child elements
- Updating components
- Loading data from APIs
- Creating a React.js app