React

Beyond UI

@abinavseelan

Abinav Seelan

UI Engineer @

👋

@abinavseelan

🤧

Learn once, write anywhere

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

VR

render()

Learn once, write anywhere

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

VR

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

(hand-rolled update cycle)

(Great article to get started with the react-reconciler)

(Uses react-reconciler)

Learn once, write anywhere

That's all folks!

React: Beyond UI

By Abinav Seelan

React: Beyond UI

Slides for the talk given at ReactJS Bangalore Meetup #47 (https://www.meetup.com/ReactJS-Bangalore/events/261134398/)

  • 78
Loading comments...

More from Abinav Seelan