Hello World
var React = require('react');
var ReactDOM = require('react-dom');
class HelloWorld extends React.Component {
  render() { // always required
    return (
      <div>Hello World!</div>
    )
  }
}
ReactDOM.render(<HelloWorld />, document.getElementById('app')); // takes two arguements
/*
1) The first argument is the component you want to render, 
2) the second argument is the DOM node where you want to render the component. 
*/

The “HTML” that you’re writing in the render method isn’t actually HTML but it’s what React is calling “JSX”. JSX simply allows us to write HTML like syntax which (eventually) gets transformed to lightweight JavaScript objects.

React is then able to take these JavaScript objects and from them form a “virtual DOM” or a JavaScript representation of the actual DOM. This creates a win/win situation where you get the accessibility of templates with the power of JavaScript.

Looking at the example below, this is what your JSX is transformed to once webpack runs its transformation process.

class HelloWorld extends React.Component {
  render() { // using JSX
    return React.createElement("div", null, "Hello World");
  }
}

How the React DOM actually works see https://tylermcginnis.com/react-elements-vs-react-components/

/* A React element is an object representation of a DOM node, for example a react element is the object form a div tag */
 
const element = React.createElement( // not using JSX, this is what is what it looks like when JSX has compiled using Webpack 
  'div', // html5 type ie. input, span, div
  {id: 'login-btn'}, // parameters 
  'Login' // content
)

Returns an object that looks like this

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

and when it's rendered in the DOM user ReactDom.render it converts the object back to this DOM node

<div id='login-btn'>Login</div>

How it works

Signal to notify our app some data has changed→ Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes. FAST!

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License