Adding component properties

Keyboard Shortcuts

Build on your previous component by adding properties. Props help display dynamic data within components. Think of properties in React as being an object, and each property is a key. Eve adds four properties to the component: total, powder, backcountry, and goal. Then we display data using this.props.

- [Narrator] Let's update this component…so it will display data from properties.…Think of properties in React as being…an object and every property is a key.…We're going to add four properties to our component.…Total, powder, back country and goal.…So let's open up our ski day count.…And we're actually going to start with our index file.…And we'll add these properties right where…we're rendering the ski day count.…So I'm going to go ahead and add our total…of 50, we're going to add the powder at 20,…we're going to add back country at 10,…and then our goal is going to be set to 100.…

Now all of our numbers here are…wrapped in these JSX expressions.…We could use these for Booleans, we…could use them for functions, we could…use them for numbers, just a quick note…though that if you're trying to use a string,…you're just going to use the string.…Let's go ahead and put this back…to a number though so we will need those braces.…So in our ski day count, we're going to,…instead of just using this hard coded data,…we're going to actually display from props.…

Resume Transcript Auto-Scroll

Author

Updated

6/20/2018

Released

1/10/2017

Among all other JavaScript libraries, React.js stands out. It relies on reusable components, not templates, for UI development, allowing developers to render views where data changes over time. React applications are more scalable and more maintainable, making developers more efficient and users more satisfied. In this course, Eve Porcello introduces the history and basics of the React library and show how to use it to create two projects: a browser-based activity counter app and a simple website for displaying data drawn from an API. Along the way, learn how to set up your development environment, including helpful tools such as Babel and webpack; create new components; use props and state to pass data between components; use routes to map URLs to views; and organize projects with nested components and routes. By the end of the course, you'll understand the essentials of React.js and be able to start building your own browser-based projects.

Topics include:

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

3h 15m

Duration

808,119

Views

Show MoreShow Less

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.