What’s Coming Next?

In notebook:: FrontEndMasters React
Created at:: 2016-06-21
Updated:: 2016-06-21
Tags:: libraries React JavaScript

Mixins

React is not aiming to create an object model. It has mixins.

  var React = require('react');

var SomeMixin = {
  props: 'stuff',
  foo () {};
};

React.createClass({
  mixins: [ SomeMixin ]
});

They don’t want to create React-type objects, that you can instantiate, inherit from. The goal is that you can just use JavaScript.

In the “new” version of React (0.13) you can now use the ES6 Class syntax :

  var React = require('react');

// instead of this
var App = React.createClass({
  render () {
    return <h1>Hello</h1>;
  }
});

// do it like this 
class App extends React.Component {
  render () {
    return <h1>hello</h1>;
  }
};
React.render(<App/>, document.body);

You don’t even need to inherit from React.Component. You can just use this:

  class App {
  render () {
    return <h1>hello</h1>;
  }
};
React.render(<App/>, document.body);

Or even use the older JavaScript syntax (module pattern)

  var App = function () {
  return {
    render: function () {
      return <h1>hello</h1>;
    }
  };
}

React.render(<App/>, document.body);

You can just give React plain old objects. So React can leave the implementation of concepts like inheritance, mixins to JavaScript (and to you).

Relay

graphQL

The idea is that a component that passes down data to a sub-component doesn’t have to know anything about that data just relays it. And the sub-component can define the queries it needs.

Suggests to watch the video about.

React Native

Really slick. Feels like web development, but on the phone, now.

Instead of rendering to the DOM it’s rendering to the native platform’s UI. Easily use or the native interactions (pinch, zoom, tap, swipe, etc.).

Target many platforms

Flipboard use React to render to canvas.

Netflix render’s to their native platform that runs on TVs.

So React is no longer just about rendering to the DOM, but a new paradigm on how to program declarative UIs.