Using refs in class components

Keyboard Shortcuts

There are times in a React application where you need to reach out to individual elements and get their values. React provides us with string refs so that we can check into a value with this.refs. Eve sets this up at a basic level by logging the values of the form fields to the console. Now that you've captured values, you can pass them back up to change state.

- [Narrator] Props are typically…the only way that parents' components…can interact with their children.…When we modify a child,…you re-render it with new props.…In some cases, we want to reach…out to individual elements…to figure out what their values are.…The way that we can do this…is with refs.…So let's go ahead and open…our add day form again,…and we're going to add…all of these refs…to our input fields.…So we'll just add another…value here, ref=resort.…We're going to say ref=date.…

Then we will add ref=powder,…and finally, ref=backcountry.…Excellent.…The other things I want to do…here is let's add a button…to this form so this thing…actually works.…So we're going to add button,…and it should say Add Day.…Awesome.…So now that we have created…refs for all of our inputs,…we need to handle…the submission of this form,…or we actually need…to capture these values.…

So let's go ahead…to our component,…and we're going to add…submit as a new function.…We're going to send an e…so that we can use…e.preventDefault…to prevent the default behavior…

Resume Transcript Auto-Scroll

Author

Updated

9/15/2017

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 12m

Duration

642,370

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.