React anatomy

Documentation

react top-level api

https://reactjs.org/docs/react-api.html

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 an immutable grouping of html-elements.

define/render elements

const element1 = <h1>Title</h1>
const element2 = <h2>SubTitle</h2>
const element3 = (
    <div>
        <p>Some text</p>
        <p>Some more text</p>
    </div>
)

var elements = [element1, element2, element3]
var parent = document.getElementById('root')
ReactDOM.render(elements, parent)

reloading/re-rendering elements

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.

define component (function)

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

define component (class)

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

component usage

Component-Parameters are set like HTML element attributes.

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

Fragment-Components

A Fragment is like a component, except it lets you return multiple top-level elements.
The top-level elements do not need to be of the same type.
You can use it like a regular component.

define fragment-component (function)

import React from 'react';

function Columns(props) {
    return (
        <React.Fragment>
          <td>foo</td>
          <td>bar</td>
          <td>baz</td>
        </React.Fragment>
    );
}

fragment-component usage

<table>
  <tr>
    <Columns />  // <-- fragment with several items
  </tr>
</table>

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!'
);