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()

Render Types

Elements

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

function 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.

function ListItems extends React.Component {
    render() {
        return [{key: "a", text: "aaa"},
                {key: "b", text: "bbb"},
                {key: "c", text: "ccc"}].map((x) => <li key={x.key}> {x.text} </li> );
    }
}

function 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.

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>
    );
}

Lifecycle Methods

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.

Check out the tutorial.

TODO:

Why can't the constructor/destructor be used?

class Foo extends React.Component {
  componentDidMount() { ... }
  componentWillUnmount() { ... }
}

DOM Events

You can subscribe to DOM events with callbacks similarly to javascript.
except that events are in camelcase
and callbacks are defined as methods rather than strings.

See https://reactjs.org/docs/handling-events.html

class HelloWorld extends React.Component {
  sayHello() {
    console.log('hello')
  }

  render() {
    return (
      <button onClick={() => this.sayHello()}>
        Say Hello
      </button>
    );
  }
}