conorhastings

made with esnextbin

conorhastings

/* this lacks subscribe behavior or ability to dispatch from outside of component tree but that is generally not neccesary */
class State extends React.Component {
  constructor(props) {
    super(props); 
    this.state = YOUR_INITIAL_STATE;
  }
  reducer = (action, state, props) => {...newState};
  /* setState takes an object of new state as first arg or a function of props and state that returns new state 
   * which we will use here
   * we pass dispatch around and use it similarly to redux dispatch

conorhastings

made with esnextbin

conorhastings

function PromiseComponent(initializeComponent, loadingComponent) {
  let cachedComponent;
  return class PromiseComponent extends React.Component {
	  state = { Component: cachedComponent || loadingComponent || () => null };
	  componentDidMount() {
		  if (!cachedComponent) {
			initializeComponent.then(component => {
				cachedComponent = component.default;
				this.setState({ Component: cachedComponent });
		 	});		  

conorhastings

/* node will be null */
function Input() {
  return <input />;
}

function InputContainer() {
  return <div><Input ref={node => console.log(node)} /></div>;
}

/* node will be vnode instance */

conorhastings

made with esnextbin

conorhastings

made with esnextbin

conorhastings

made with esnextbin

conorhastings

import React from 'react';
import { render } from 'react-dom';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/styles'
import markdown from 'markdown';

class X extends React.Component {
  render() {
    return (
      <SyntaxHighlighter language='javascript' style={docco}>

conorhastings

import React, { Component } from 'react';

class Test extends Component {
  render() {
    return (
      <div>
        Wowowow ' this is fun
      </div>
    );
  }