React components always use the render method to describe which elements should be rendered to the DOM. You can also add custom methods to add functionality to your components. Eve creates two methods used to calculate a goal percentage. First, turn a percent to a decimal. Then calculate goal progress.
- In addition to properties, we can add methods…that are local to our components.…Currently, we're displaying our goal value.…I actually want to calculate how far I am…toward reaching my goal, 50%? 10%?…How am I doing so far?…To do this, we'll create a couple of methods.…These methods will be encapsulated…inside of the component.…So let's go ahead and add these…right before our render.…So the first of the methods that I'm going…to create is going to be called percentToDecimal.…
So percentToDecimal is going to take in a decimal…and then it's going to return a calculation.…So let's go ahead and add that.…We'll say return.…We'll add a set of (())…and then I'm going to take our decimal…I'll multiply it by 100…and then I'm going to concatenate…a percent symbol onto the end.…The next thing I want to do here…is I'm going to use this percent to decimal…function inside of another one called…calcGoalProgress.…
So calcGoalProgess is again going to calculate…the goal progress.…Will take in a total and will take in a goal.…And then within this function…
- 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 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?
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.