The third and final way to create a component is to create it as a pure function. Stateless functional components take in properties and return JSX elements. A good rule of thumb is to use these components wherever possible. The React team has hinted at the fact that we may see performance improvements when using stateless components.
- [Instructor] So far, we've created components,…in two different ways, using createClass,…and using ES6 classes.…Another alternative to these component types,…is to create a component, using a function.…Stateless functional components are functions…that take in property information, and return JSX elements.…Stateless components can't access this,…so properties are passed directly into the function.…Also, local methods need to be removed,…and put into their own functions.…
So, let's go ahead, and refactor our SkiDayCount component,…as a stateless functional component.…The place we'll start with this, is here, on line 4.…So, I'm going to replace our class information…with const SkiDayCount equals a function.…So, the next thing I want to do, here, is,…let's pull these local methods out of this function.…And I'm just going to paste them, here,…on line 4, and we're going to come back,…and refactor those, in just a second.…
The next thing I'm going to do, here, is,…I'm going to remove our render method,…and I'm also going to remove our return.…
- 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.
Q: This course was updated on 06/20/2018. What changed?
A: New videos were added that cover staying up to date with React and using create-react-app. In addition, the following topics were updated: creating components with createClass() and working with state.
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
- 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.