1

This question may look a bit amature but i can't understand the way it works and i had to ask it here, Look at this code, it's a simple React component: 

const title = React.createElement(
    'h1',
    {id: 'title', className: 'header'},
    'Hello World'
)

ReactDOM.render(
    title,
    document.getElementById('react-container')
)

Now we define createElement and render methods as constant or somehow make a shortcut : 

const { createElement } = React;
const { render } = ReactDOM;

const title = createElement(
    'h1',
    {id: 'title', className: 'header'},
    'Hello World'
)

render(
    title,
    document.getElementById('react-container')
)

I can't understand how it works and how somehow relate the constant name to the React object, i would appreciate it if someone explains it to me.

Amin
  • 1,057
  • 1
  • 9
  • 30
  • I'm not sure that I understand your question correctly. Are you wondering why they define the variables as constants? – Karl-André Gagnon Nov 19 '18 at 17:37
  • @Karl-AndréGagnon somehow, my question is, when we call function `render` for example how does it know that it is a method from `ReactDom` object? i mean how does `const { render } = ReactDOM;` work? – Amin Nov 19 '18 at 17:39
  • You aren't defining the methods as constants you are defining the variables as constants, meaning they wont be able to be changed / reassigned a value. As for the second snippet it is using [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) which is going to use the name in braces as the variable name and the property to look up and get the value of the object on the right hand side. So it is equivalent to `createElement = React.createElement;` – Patrick Evans Nov 19 '18 at 17:40
  • I think this is "already answered" here: https://stackoverflow.com/questions/26999820/javascript-object-bracket-notation-navigation-on-left-side-of-assign – Adam Wise Nov 19 '18 at 17:40
  • 1
    [Object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) - basically shortcut for doing `const createElement = React.createElement;` – epascarello Nov 19 '18 at 17:42
  • Thank you all my friends, i understood how it works :) – Amin Nov 19 '18 at 17:46

2 Answers2

1

As I understand, the confusing part is ES6 syntax.

const { createElement } = React;

Transpiled to 

var createElement = React.createElement;

Than the usage is exactly same.

Oleg Imanilov
  • 2,268
  • 1
  • 11
  • 21
1

This is called object destructuring, basically, you can take an object, in this class React, and cherry pick the properties (methods and variables) off the object itself and use them without a namespace.

More on Object Destructuring here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

Consider you have an object as such:

const Bob = {
  age: 12,
  name: 'Bob',
  height: 72
}

Well if we only wanted the age property of Bob we would normally have to do Bob.age but this is can get a little clunky if we want to use the same property over and over again, so we can assign it to a variable:

const age = Bob.age;

But what if we want a few properties of Bob and not all of him? Well, using variables is nice but its a lot of code, so we can reduce the amount of code by using object destructuring and pick the ones we want.

const age = Bob.age;
const height = Bob.height;
// vs
const { age, height } = Bob;
dotconnor
  • 1,466
  • 7
  • 21