We're switching Atom to React, but we want to support backward-compatible shims to our previous view framework.

In the old framework, views were represented as jQuery-wrapped DOM elements. Ideally, we'd like to provide backward-compatible shims by simply rendering the React component and wrapping its root element in a jQuery wrapper with an API that's compatible to our old editor views. That would essentially look like this:

``` javascript
var editorRoot = document.createElement('div')
React.renderComponentWithRootElement(Editor(props), editorRoot)

// the element would actually be wrapped in a custom subclass of jQuery,
// but this is clearer for this example
var editorShim = $(editorRoot) 
```

Currently, this isn't possible because React components need to be rendered into a container. So instead we need to create a wrapper element and render the component inside it. This is sad because it adds an extra layer of markup which confuses styling, and also means that the editor has a wrapper when used via the shim layer but no wrapper when embedded as a child via React itself.

Is there something fundamental preventing React from adopting DOM nodes directly without the parent? Is this something we could even hack in in a way that would be somewhat maintainable?

:heart:

const action = update.action;
              newState = reducer(newState, action);
              update = update.next;
            } while (update !== null);
            workInProgressHook.memoizedState = newState;
            return [newState, dispatch];
          }
        }
        return [workInProgressHook.memoizedState, dispatch];
      } else {
        if (reducer === basicStateReducer) {
          
          if (typeof initialState === 'function') {
            initialState = initialState();
          }
        } else if (initialAction !== undefined && initialAction !== null) {
          initialState = reducer(initialState, initialAction);
        }
        workInProgressHook.memoizedState = initialState;
        const queue: UpdateQueue<A> = (workInProgressHook.queue = {
          last: null,
          dispatch: null,
        });
        const dispatch: Dispatch<
          A,
        > = (queue.dispatch = (this._dispatchAction.bind(
          this,