Take a look at inspecting React sites. Once the developer tools have been installed, you can take a look at all of the elements that make up a page. The React elements map to HTML elements. You can click on select element to see these, or you can open the Developer Tools and look through them. As you look through these elements, you will see them highlighted.
- [Instructor] In this video we'll take a closer look…at the React tools that we previously installed.…First I'll navigate to a website that uses React…like hellosign.com.…We see that React is on the page…because the React detector is highlighted.…Next I'll open the developer tools.…A shortcut to open our developer tools on a Mac…is Command + Option + J…or if you're using a PC,…you can hit F12 or Control + Shift + J.…
Once open,…we can navigate to the React tab;…and this will display all of the different components…that make up our page.…If I expand these elements,…we're going to see a couple of things happen.…Number one,…we see the component is being highlighted here…on the left-hand side of the screen.…Then I can drill down into this component…to see all of the different elements…that make up this home page sign-up component.…We'll also notice on the right-hand side…that we have information about properties;…and then sometimes if we click on something,…you'll see state as well.…
The concepts of props and state…are hugely important in React,…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.