Manipulate the DOM with React refs

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

Often you'll find there's a jQuery plugin or JavaScript library which needs access to DOM nodes to work in your application. Other times you need access to the DOM node directly to get the value of form fields or for other reasons. In this lesson we'll learn how to do this using React's ref prop.

Hozefa
Hozefa
~ 4 years ago

One thing might be worth explaining in the basic course is what is React.Component? Unless I missed the explanation, it's used in the examples but not explained why its used. As a beginner it could be confusing as to why React.Component is extended?

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

That's a fantastic point Hozefa. I guess I just took that for granted and I should have a lesson explaining it. I may add it in the future because it could be really useful to know what the React.Component class even is and why extending it is necessary. Thanks for the idea!

If you want to play around with it, then head over to CodeSandbox.io and try creating an instance of React.Component and console log that :) Good luck!

Harsh Khandelwal
Harsh Khandelwal
~ 4 years ago

So from your suggestion to console log the React Component instance, I believe extending it gives me all the API to make my custom component work e.g like setState function?

Hozefa
Hozefa
~ 3 years ago

I was just generally asking what React.Component is all about. Doing a console log of that revels its a function(did not know that before)

codesandbox

function ReactComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue_1;
}
Scott Spence
Scott Spence
~ 3 years ago

Is there a way to import tilt as a package?

So instead of adding the script to the html you can access it as a JS import?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Hi Scott, Yes, you can install it from npm: https://www.npmjs.com/package/vanilla-tilt

Then:

import Tilt from 'vanilla-tilt'
Scott Spence
Scott Spence
~ 3 years ago

Thanks Kent, I was having a look at it in codesandbox.io and think I need to understand the differences between the class and the const element

I mean I know the const element is displaying the div's of the Tilt class but I'm struggling to understand why they're not all in one

Marcy Montross
Marcy Montross
~ 3 years ago

I'm following along using 'create-react-app' and I find this lesson confusing. I've imported vanilla-tilt as a package—both as 'react-tilt' and 'vanilla-tilt'. I keep getting an error: ''VanillaTilt' is not defined'. what am I doing wrong?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

HeyMarcy, Here's a working codesandbox. Hopefully this helps: https://codesandbox.io/s/14l00znlzq

Good luck!

Marcy Montross
Marcy Montross
~ 3 years ago

Thanks so much for your prompt reply. Turns out there was something else wrong. After a clean install of 'create-react-app', it worked fine.

I'm really enjoying the course. Thanks again!

Richard Fernandez
Richard Fernandez
~ 3 years ago

I'm trying to understand what the difference is between setting the root node and not setting it. I've played around with the code and taken out the ref={node => (this.rootNode = node)}, which (obviously) breaks the code.

I guess my question is, what does setting the rootNode do? And what element / rootNode does React reference if you do not set it?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

If you don't set this.rootNode then the value of this.rootNode will be undefined (which is why it breaks). The value it gets set to is the DOM node associated to what you're rendering if you pass it to a dom element (like <div>) but if you pass it to a composite (custom) class component (like <Tilt>), then the value it gets assigned to is the component instance.