Manipulate the DOM with React refs

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?

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!

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?

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;
}

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?

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

Then:

import Tilt from 'vanilla-tilt'

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

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?

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

Good luck!

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!

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?

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.