trueadm

// maybe we don't need to pass "click" as the first param, just passing in the config might be good enough
const handleClick = ReactDOM.createEvent("click", {
  // imperative stuff is defined with config
  preventDefault: true,
  stopPropagation: true,
  passive: false,
});

function reducer(e) {
  // do reducer stuff

trueadm

{
	// Use IntelliSense to learn about possible Node.js debug attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"type": "node",
			"request": "attach",
			"name": "Attach",

trueadm

/** @license React v16.1.1
 * react.production.min.js
 *
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
(function(q,m){"object"===typeof exports&&"undefined"!==typeof module?module.exports=m():"function"===typeof define&&define.amd?define(m):q.React=m()})(this,function(){function q(a){for(var b=arguments.length-1,f="Minified React error #"+a+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\x3d"+a,d=0;d<b;d++)f+="\x26args[]\x3d"+encodeURIComponent(arguments[d+1]);b=Error(f+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");

trueadm

Process:               Google Chrome [27575]
Path:                  /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Identifier:            com.google.Chrome
Version:               62.0.3202.94 (3202.94)
Code Type:             X86-64 (Native)
Parent Process:        ??? [1]
Responsible:           Google Chrome [27575]
User ID:               501

Date/Time:             2017-11-20 10:44:57.622 +0000

trueadm

API #1 for functional components with state

Acts similar to current API, where first argument is props, second is state. The third argument acts like a bag and contains context and any other arguments that would have been passed explicitly before plus an functions to update state.

Mounting

• initialState(props, context)
• willMount(props, state, {context, reduce, setState})

Rendering

trueadm

// Option C:
// this implementation has a small amount of overhead compared to (a) and (b)
const React = require('react');

const counterState = React.createStateReducer({
  initialState: props => ({
    counter: 0,
    divRef: React.createRef(),
  }),  
  reducer: (action, state) => {

trueadm

// How we do this now

class CounterComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
    this._divRef = null;
    this.increment = this.increment.bind(this);

trueadm

// "counter.react"

import {format} from 'externalLib';

state {
  // acts like default state
  counter = 0;
}

props {

trueadm

import { formatNumber } from "externalLibrary";
import { startAnimate, stopAnimate } from "externalLibrary2";
import { Subscriber } from "externalLibrary3";
import { createRef } from "react-dom";

const someAnimationRef = createRef();
let counter = 0;
let name = "";
let subscriber = new Subscriber();

trueadm

class SomeComponent {
	sayHello() {
		console.log("Hello")
	}
	render() {
		return <div>123</div>
	}
}

class SomeParentComponent {