One way that you can improve the performance of your components is to add default properties. That way, if values are not provided for certain props, you can use the defaults instead of having values be undefined. Eve demonstrates how to add default props for createClass, ES6, and stateless functional components.
- [Lecturer] An optional but very useful feature…that use in React is default properties.…When we setup defaults, we can use…the default values if another value is not provided.…That way, we don't have a UI that looks like this,…a bunch of categories not filled up with numbers…and then a weird percentage here, not a number.…So let's go ahead and do this…in the three different component styles.…So here in your Components folder,…I've created a SkiDayCount-createClass,…ES6 and then we have our existing file,…our state list functional component.…
So in the createClass file,…we're going to add default props that create class way.…And the place we're going to add those is here on line eight.…So we're going to add a method called to getDefaultProps…and getDefaultProps is going to return an object.…And this object is going to have all…of our different properties listed, so Total, we'll say 50.…Powder, let's say 50 again, we will say Backcountry…is 15 and Goal 100.…
So now, if we go to our index.js file,…we're just Rendering our SkiDayCount.…
- 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
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.
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?
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.