React anatomy

Concepts

• react can be expressed in pure javascript, or in jsx
• UIs are divided into components, which have their own state, and are loaded as-ready

Example

/* ${project}/src/index.js
 * essentially your 'index.html'
 */
import ReactDOM from 'react-dom';
import './website.css';             // load CSS onto rendered page
import Foo from './foo';            // load component 'Foo' from 'foo.js'

ReactDOM.render(<Foo/>, document.getElementById('root'));

/* ${project}/src/foo.js
 * a sample component
 */

class Foo {
  constructor(props) {
    super(props);
  }

  render() {
    <p>Hello world</p>
  }
}

Components

Elements

An element is a logical grouping of html code that can be updated on it's own.
All Elements are immutable.
When an element is changed, only the updates are reloaded.

const element1 = <h1>Title</h1>
const element2 = <h2>SubTitle</h2>
const element3 = (
    <div>
        <p>Some text</p>
        <p>Some more text</p>
    </div>
)
ReactDOM.render([element1, element2, element3], document.getElementById('root'))

Every call to ReactDOM.render() replaces the selected element, reloading the changes.
The official docs demonstrate this with a ticking clock.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Components

Components are basically functions/classes that parametrize/encapsulate the rendering of an element.
Components are pure functions/classes, they may not modify their params.
Components must return only a single container element.

function Description(props) {
    return (
        <h1>Description</h1>
        <p>{props.paragraph}</p>
    )
}

class Description extends React.Component {
    render() {
        return (
            <h1>Description</h1>
            <p>{this.props.paragraph}</p>
        )
    }
}

Component-Parameters are set like HTML element attributes.

<div>
    <Description paragraph="A very excellent game">
    <Description paragraph="A very excellent movie">
</div>

Fragments

Syntax

There are 2x ways of expressing react.
JSX and regular javascript.

Javascript

JSX

JSX tags shadow React.createElement() calls. They can represent:

• HTML tag names (div, span, pre)
• React Components (Class/Function)
• React Fragment

These are equivalent

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);