Think React from Out of the 📦

Just for UIs?

React Native

ReactVR

react-blessed

react-three-renderer

react-log

Advantages of using React

React architecture

React core

Includes the API necessary to define Components.

Has no platform-specific code

React core

React core

React Elements

A description of what needs to be rendered

{ 
  type: /* ... */,
  key: /* ... */,
  ref: /* ... */,
  props: {
    // ...
    children: /* ... */,
    // ...
  }
}

Element types

Element types

Renderers

Manage how a React tree turns into the underlying platform calls

Renderers

Official supported renderers

- React DOM Renderers
- React Native Renderer
- React Test Renderer
- React-art Renderer

Renderers

Stack Reconcilier

The Stack Reconcilier is the one powering all React code today.

When a Component mounts, updates, or unmounts, the stack reconcilier calls a method on that internal instance

Stack Reconcilier

Mounter

Renderer's main method

Mounter

- ReactDOM.render
- AppRegistry.registerComponent
- ReactBlessed.render

Mounting is a recursive process

Mounter

Internal Instances

Internal side of a consumer's React Components

Component types

Compisite Components

  • User defined Components
  • Run user's code
  • Behave the same way in all renderers

Host Components

  • No user code associated
  • Run platform-specific code
  • The output depends on the renderer

Internal Instances

Injection

Inject custom Component implementations to the reconcilier

HostComponents Injection

- injectGenericComponentClass()
- injectTextComponentClass()
- injectComponentClasses()

Injection

Let's build a renderer!

react-pdf

A React renderer to create PDF files

What do we need to do?

Four main modules

pdfkit

import fs from 'fs';
import pdf from 'pdfkit';

// Create PDF document
const doc = new pdf;
// Set output path
doc.pipe(fs.createWriteStream(filePath));
// Add page to the document
doc.addPage();
// Add text to document
doc.text('Some content', options);
// Close document
doc.end();

Building the injection

Building the mounter

Building the component

MinimumViableComponent.prototype = Object.assign(
  {
    getPublicInstance() {},
    mountComponent() {},
    receiveComponent() {},
    unmountComponent() {},
    getNativeNode() {}, // React  <= 15.0
    getHostNode() {} // React > 15.0
  },
  ReactMultiChild.Mixin
);

Building the component

Reflections

Questions?

Thanks!