React

Beyond UI

@abinavseelan

Abinav Seelan

UI Engineer @

blog.campvanilla.com

👋

https://www.npmjs.com/package/react-input-trigger

@abinavseelan

🤧

Learn once, write anywhere

React (for the web)

React Native (for mobile OS)

React VR (for WebVR)

Imperative vs Declarative

<h1 className='heading'>Hello World</h1>

React.createElement(
    'h1',
    { className: 'heading' },
    'Hello World'
);

Element (type)

Props

Children

<div className='container'>
    <h1>Hello World</h1>
</div>

React.createElement(
    'div',
    { class: 'heading1' },
    React.createElement(
        'h1',
        {},
        'Hello World
    )
)

React (for web)

React Native

React VR

React.createElement(
    <type>,
    <props>,
    <children>
)

React (for web)

React Native

React VR

React.createElement(
    <type>,
    <props>,
    <children>
)

DOM

Native Components

Web

render()

Learn once, write anywhere

https://github.com/chentsulin/awesome-react-renderer

import * as React from 'react';
import ReactHardware, { Led } from 'react-hardware';

class FlashingLed extends React.Component {
  state = {value: 1};

  componentDidMount() {
    setInterval(() => {
      this.setState({
        value: this.state.value === 0 ? 1 : 0,
      });
    }, 500);
  }

  render() {
    return <Led pin={8} value={this.state.value} mode={'OUTPUT'} />;
  }
}

ReactHardware.render(<FlashingLed />, '/dev/cu.usbmodem14101', inst => {
  console.log('Rendered <%s />', FlashingLed.name);
});

So, how do you build a custom renderer?

React (for web)

React Native

React VR

React.createElement(
    <type>,
    <props>,
    <children>
)

DOM

Native Components

Web

render()

Pragma

Custom Render

Let's talk about

React.createElement()

Demo

A custom Filesystem Renderer

Atomic Entities

Folder

File

<folder name="Foo">
    <folder name="Bar">
        <file name="HelloWorld" extension=".txt">
            Hello React Meetup!
        </file>
    </folder>
</folder>

Atomic Entities

Folder

File

But that's not where this ends