JSX vs component class instancing

Question

Can somebody explain to me the difference between the following two statements?

let test1 = new CustomComponent();

and

let test2 = <CustomComponent />

The debugger is Chrome gives me:

for test1
CustomComponent {props: undefined, context: undefined, refs: Object, updater: Object, state: Object…}

for test2
Object {$$typeof: Symbol(react.element), key: null, ref: null, props: Object, type: function…}

And how can I get a variable of type of test2, from of variable of the type of test1 ?

Answer 1

So.

let test1 = new CustomComponent(); is just a regular javascript thing, same thing happens as calling new thing() any other time. Nothing special.

let test2 = <CustomComponent /> this is an JSX statement, and babel does some magic. It compiles <CustomComponent /> into React.createElement(CustomComponent , null). So, as you can see it is nothing like calling new, it's calling a React function that creates an element, that react knows how to deal with.

Babel has a REPL tool that you can use to see what it's doing to your source code if you ever want to see quickly what's going on under the hood.