@untool/react

@untool/react

@untool/react provides all three types of @untool/core mixins. Its core mixin uses @untool/webpack's configureWebpack hook to add some settings specific to React, for example support for JSX syntax.

Its runtime, i.e. browser and server, mixins are a bit more interesting as they are untool's only default render mixins. They set up React for client- and server-side rendering. Additionally, they provide mixin hooks of their own to allow you to add your own features, for example Redux support.

Installation

$ yarn add @untool/react react react-dom react-helmet react-router react-router-dom
# OR npm install @untool/react react react-dom react-helmet react-router react-router-dom

API

render([req, res, next]) (override)

This method is being called from within @untool/core whenever you call its render method. In a server-side, i.e. Node.js, environment it receives the usual arguments any Express middleware receives: req, res, and next. In a client-side, i.e. browser, environment it receives no arguments whatsoever.

const { Mixin } = require('@untool/core');

module.exports = class FooMixin extends Mixin {
  render(req, res, next) {
    if (req) {
      // server
    } else {
      // browser
    }
  }
};

You will not usually have to override this method as it exposes the following mixin hooks to alter its behaviour. In a server-side environment, a fresh mixinable container is being created for every request, including new mixin instances.

bootstrap([req, res]) (parallel)

Within this method, you are expected to set up your application. Your implementation will receive both Express' req and res objects for you to do whatever you like with. If you need to do something asynchronous in this method, just return a Promise.

const { Mixin } = require('@untool/core');

module.exports = class FooMixin extends Mixin {
  bootstrap(req, res) {
    if (req) {
      // server
    } else {
      // browser
    }
  }
};

Remember you can register custom middlewares using @untool/express instead of implementing elaborate request or response handling logic inside your runtime mixin.

enhanceElement(element) (compose)

With this method, you can wrap the React root element with additional components, like Redux' Provider. If you need to do something asynchronous in this method, just return a Promise resolving to the wrapped element.

const { Mixin } = require('@untool/core');

module.exports = class FooMixin extends Mixin {
  bootstrap(element) {
    return element;
  }
};

fetchData(data, element) (pipe)

Most applications need some sort of data. Implement this method in your mixin, to fetch said data before rendering and return an object with that additional data. If you need to do something asynchronous in this method, just return a Promise resolving to the data.

const { Mixin } = require('@untool/core');

module.exports = class FooMixin extends Mixin {
  fetchData(data, element) {
    return { ...data, foo: 'bar' };
  }
};

enhanceData(data) (pipe)

In case you need to gather additional data after rendering, e.g. if you are using styled components for server-side rendering, you can add the required template data by implementing this hook in your custom mixin. To do asynchronously, have this method return a Promise resolving to the extended data.

const { Mixin } = require('@untool/core');

module.exports = class FooMixin extends Mixin {
  enhanceData(data) {
    return { ...data, baz: 'qux' };
  }
};