Understanding JSX

• JSX is simply syntactic sugar for the React.createElement() method
• React.createElement() takes at least 3 parameters:
  1. The element we want to render to the DOM
  2. Any styling/configuration, as a JavaScript object
  3. Children
• Note that JSX expressions must have a single root element

Code Example (With JSX)

import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
      </div>
    );
  }
}
export default App;

Code Example (Without JSX)

import React, {Component} from 'react';
import App from 'App.css';

// React.createElement('div', null, 'h1', 'Hi, I'm a React App!');
// Wont render properly - it will be outputted in paragraph text
// To render it properly we need to nest another method

// React.createElement('div', {className: 'App'}, ...);
// To render styles, we simply pass a JavaScript object in place of null

class App extends Component {
  render() {
    return React.createElement('div', null,
      React.createElement('h1', null, 'this works!'));
  }
}
export default App;