React components

Documentation

component docs	https://reactjs.org/docs/react-component.html
fragment docs	https://reactjs.org/docs/fragments.html
list docs
portal docs	https://reactjs.org/docs/portals.html

Components

Component Functions

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

<Description paragraph="a very long..." />

Component Classes

class Employee extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: props.name, id: props.id}
  }

  render() {
    return (
      <div>
        <h1>Name: {this.state.name}</h1>
        <h2>ID: {this.state.id}</h2>
      </div>
    );
  }
}

<Employee name="vaderd" id="101" />

Attributes

this.props

Parameters are passed parameters using xml tag attributes.
Within the component, they are axposed as attributes on the this.props variable.

ReactDOM.render(
    <Description name="Alex" />,         // <-- use component
    document.getElementById('root')
);

function Description() {
    return <p>hello, {this.props.name}</p>;  // <-- access props in component
}

this.state

this.state is a special object property to store UI related info.
The component will be re-rendered every time the this.setState() is called.

class Thing extends React.Component {
    constructor(props) {
        super(props);
        this.state = { collapsed: false };
    }

    render() {
        if (this.state.collapsed) {
            <p>collapsed</p>
        } else {
            <p>expanded</p>
        }
    }
}

this.setState({ collapsed: false }) // good: update state
this.state = { collapsed: false }   // bad:

Render Types

Elements

Generally, React requires that a single top-level html-element is returned by each component.

class Person extends React.Component {
    render() {
        return (
            <table>
                <tr><th>...</th></tr>
                <tr><th>...</th></tr>
            </table>
        );
    }
}

Lists

You may render() a list of elements to some compound types, like lists.
Each item requires a unique key so react can keep track of CRUD operations with list items.

class ListItems extends React.Component {
    render() {
        var items = [
          {key: "a", text: "aaa"},
          {key: "b", text: "bbb"},
          {key: "c", text: "ccc"},
        ]
        return items.map((x) =>
          <li key={x.key}> // key={foo} lets react update changes
            {x.text}
          </li>
        );
    }
}

class MyList extends React.Component {
    render() {
        return (
            <ul>
            <ListItems />
            </ul>
    }
}

Fragments

Fragments are a special wrapper type that allows you to return multiple top-level html-elements in one clump.
They do not need to be a homogenous collection of top-level elements.

You can use either of the following tags:

• <React.Fragment>...</React.Fragment>
• <>...</>

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

import React from 'react';

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

Null (force no render)

If a component's render() returns null,
then it won't render anything, even if it is included in a page.

The official-docs use a debug-info as an example (you'd only want to render if in development environment).

class DebugInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {debugEnabled: true};
    }

    render() {
        this.debugEnabled
          ? <p>debug info...</p>
          : null;
    }
}

Lifecycle Methods

NOTE:

An alternative to lifecycle methods is react hooks.

React components have methods to mount/unmount behaviours when the object is first created or destroyed.
These can set/unset timers to auto-update the object.
These behave similarly to constructor/destructor as hooks, except their events correspond with adding/removing them from the DOM.

Check out the tutorial (might need to scroll to methods).

class Foo extends React.Component {
  componentDidMount() { ... }      // runs after first 'render()'
  componentWillUnmount() { ... }   // runs if object is removed from the DOM
}