Join Eve Porcello for an in-depth discussion in this video Mounting components, part of Learning React.js (2016).
- [Instructor] To better understand…the component lifecycle methods,…let's go ahead and open up our index dot html template,…and we are going to make sure that it's…set up with React and Babel.…On line 12, I'm going to create a new component called box,…and this is just going to return a simple div.…Let's go ahead and render.…Render is going to return a div,…and the div is going to have an ID of my div.…
The next thing I want to do is set up a style tag…here in the head of my document.…The style tag is going to assign a style to my div.…We'll say my div.…We will give it a background color of blue.…We will give it a height of 200 pixels,…and a width of 200 pixels.…Great.…We'll scroll down here to line 24,…and we want to make sure that we render this as well,…so we will say React DOM dot render.…
Were going to render our box two hour React container,…So document dot get element by ID, React container.…Excellent.…All right, so the next thing I'd like to do…is check this out in the browser,…so let's reload this,…and we should see our blue div rendering appropriately.…
- What is React.js?
- Introducing JSX
- Creating a React component
- Handling events
- Using state
- Working with PropTypes
- Adding child elements
- Mounting and updating components
- Creating a React.js app
Skill Level Beginner
Building a Web Interface with React.jswith Ray Villalobos1h 21m Intermediate
1. What Is React.js?
2. Getting Started
3. React Components
4. Props and State
5. Enhancing Components
6. Creating an App
Using create-react-app4m 38s
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.