ReactをREPLで動かしてみる

$ mkdir react-repl
$ cd react-repl
$ npm i react react-dom

$ node
> var React = require('react')
undefined

> React
{ Children:
   { map: [Function: mapChildren],
     forEach: [Function: forEachChildren],
     count: [Function: countChildren],
     toArray: [Function: toArray],
     only: [Function: onlyChild] },
  Component: [Function: ReactComponent],
  PureComponent: [Function: ReactPureComponent],
  createElement: [Function: createElement],
...

> var ReactDOM = require('react-dom')
undefined

> ReactDOM
{ findDOMNode: [Function: findDOMNode],
  render: [Function: render],
  unmountComponentAtNode: [Function: unmountComponentAtNode],
  version: '15.4.2',
  unstable_batchedUpdates: [Function: batchedUpdates],
  unstable_renderSubtreeIntoContainer: [Function: renderSubtreeIntoContainer] }


> var ReactDOMServer = require('react-dom/server');
undefined

> ReactDOMServer
{ renderToString: [Function: renderToString],
  renderToStaticMarkup: [Function: renderToStaticMarkup],
  version: '15.4.2' }

# https://facebook.github.io/react/docs/react-without-jsx.html
> class Hello extends React.Component {
...   render() {
.....     return React.createElement('div', null, `Hello ${this.props.toWhat}`);
.....   }
... }
[Function: Hello]

> var element = React.createElement(Hello, {toWhat: 'World'}, null);
undefined

> element
{ '$$typeof': Symbol(react.element),
  type: [Function: Hello],
  key: null,
  ref: null,
  props: { toWhat: 'World', children: null },
  _owner: null,
  _store: {} }

> ReactDOM.render(element, document.getElementById('root'));
ReferenceError: document is not defined
    at repl:1:26
    at sigintHandlersWrap (vm.js:22:35)
    at sigintHandlersWrap (vm.js:96:12)
    at ContextifyScript.Script.runInThisContext (vm.js:21:12)
    at REPLServer.defaultEval (repl.js:313:29)
    at bound (domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)
    at REPLServer.<anonymous> (repl.js:513:10)
    at emitOne (events.js:101:20)
    at REPLServer.emit (events.js:188:7)

> ReactDOMServer.renderToString(element)
'<div data-reactroot="" data-reactid="1" data-react-checksum="999625590">Hello World</div>'

> ReactDOMServer.renderToStaticMarkup(element)
'<div>Hello World</div>'