PropTypes are another enhancement that can be added to components. If a value of the wrong type is supplied to a component, an error will be thrown. propTypes are not a requirement but are very useful for any component to find bugs quicker. Eve demonstrates the syntax for createClass, ES6, and stateless components.
- [Instructor] Another enhancement we can add…to our components is 'PropTypes.'…'PropTypes' allow us to supply a property type…for all of our different properties,…so that it will validate to make sure…that we're supplying the right type.…In this way, 'PropTypes' are a feature,…but also working documentation…about the props that you're using,…and what should be supplied as values.…So let's go ahead and do this…in the three different ways once again.…We're going to start with our 'createClass' component.…Now the 'createClass' component is going to add…another key here called 'PropTypes,'…and 'PropTypes' is going to be set equal to this object.…
Now the object that we're going to use here,…is going to have our property types defined.…So let's set up this for 'total' powder, and backcountry.…We'll say 'PropTypes' dot number,…we'll also use powder…'PropTypes' dot number,…and then we'll use backcountry,…which is yet another number.…So our property types are pretty uniform here,…but you can use this for 'array,'…you can use it for 'functions,'…
- 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.