Learn more about how to build a React component in this video. Instead of creating isolated elements, a component represents a piece of a user interface.
- [Instructor] So far, rendering a few JSX elements…to the DOM has gone pretty well.…We've even added a style attribute…using JSX attribute syntax.…The reason that React has become so popular though…is due to its component based structure.…We create a user interface simply by creating…and nesting a collection of components.…Let's go ahead and create our first component.…So the first thing I'll do is get rid of our style object…and then we'll create a component…using React's class syntax…so I'm going to say class Message extends React.Component…and then I'm going to use a ES6 class to define this component.…
Now the most important method, the most critical thing…to understand about React components…is all of them have a render method.…The render method describes…what we want to render to the DOM.…So within our render method, we're going to add a return…and then I usually like to wrap our return,…wrap all of our JSX elements with these parentheses…that helps us save bugs a little bit later.…Now the next thing I want to do here…
- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering
Skill Level Intermediate
1. What Is React?
2. Introduction to React Elements
3. React Components
4. Props and State
5. Additional Library Features
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.