How I learned To Stop Worrying

And Love JSX

What is the DOM

• Programming interface for HTML
• Provides an object oriented representation
• Defines the way that structure can be accessed
• Allows us to manipulate that structure

What          the DOM

The DOM is not your html

The DOM is not view source

isn't

How Can I Inspect it?

The dev tools in your favorite browser provide a visual representation of the dom.

This is the best and easiest way I know to inspect the DOM.

Open up the dev tools and ch-ch-check out the "Elements" tab.

The DOM is an abstraction of the code you write 

The Virtual DOM is an abstraction of that abstraction 

VDOM in Action

TIME FOR CODE

Virtual DOM to Dom to Render Achieved!

What about JSX?

JSX is just a way for us to write biz that looks like html in our javascript render functions.

//javascript object style
const virtualNode = {
  nodeAttributes: {
    id: 'virtual-node-id'
  },
  nodeName: 'h1',
  children: ['Virtual Header Text']
}

//jsx style
const virtualNodeJSX = (
  return <h1 id='virtual-node-id'>Virtual Header Text</h1>
);

Transpiling

//jsx style
const virtualNodeJSX = (
  return <h1 id='virtual-node-id'>Virtual Header Text</h1>
);

//babel (or other transpiler takes that and turns it into something like
var virtualNodeJSX = makeVirtualNode('h1', {id:"virtual-node-id"}, 'Virtual Header Text!');  

This last piece makeVirtualNode just takes the input given, creates the virtual node object and then calls our render!

See hyperscript or the react source code for an implementation. Its actually simpler than our render.

Transpiling

All JSX is