Join Eve Porcello for an in-depth discussion in this video Setting properties, part of Learn React.js: The Basics (2015).
- In this video we want to use…the component lifecycle to set properties.…Let's first remove some content from our "index.html" file.…I'm going to remove this variable "getRidOfBox"…and everything associated with unmounting.…I'm also going to get rid of our two lifecycle functions,…here,"componentWillMount" and "componentDidMount".…Now on line 18 I'm going to add…a new method call "getDefaultProps".…And again, this is a function that's going…to be called before our component renders…to set default properties for our component.…
So in this method we're going to pass…the same properties that are part…of our CSS style, here, on line eight.…What I'll do here, is return an object…and here, we'll use "backgroundColor",…and this should be camelCase in React,…and we'll use the string "blue".…We'll also use "height: 200" and "width: 200".…We don't need to use the pixels like we do in the CSS.…
At this point, I'm going to get rid…of this entire style tag from line seven to line 13…because this is going to be handled by this new method now.…
- What is React.js?
- Introducing JSX
- Creating a React component
- Handling events
- Using state
- Defining parent/child relationships
- Adding child elements
- Mounting and updating components
- Creating a React.js app
Skill Level Beginner
Q: This course was updated on 02/17/2016. What changed?
A: We updated five tutorials to work with React.js 0.14.4, which was released in December 2015. This includes the "Creating a React component" video and the "Creating an App" chapter of the course.