fix: remove the use of findDOMNode

demo/frameworks/react/index.htm

@@ -7,8 +7,8 @@
   />
   <link rel="stylesheet" href="../../common/index.css" />
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
 
   <script src="../../../dist/zoid.frameworks.js"></script>

karma.conf.js

@@ -36,8 +36,8 @@ export default function configKarma(karma: Object) {
     ...karmaConfig,
 
     files: [
-      "test/lib/react_v16.0.0.js",
-      "test/lib/react-dom_v16.0.0.js",
+      "test/lib/react_v16.3.0.js",
+      "test/lib/react-dom_v16.3.0.js",
       "test/lib/angular.min.js",
       {
         pattern: "test/zoid.global.js",

src/drivers/react.js

@@ -1,5 +1,5 @@
 /* @flow */
-/* eslint react/no-deprecated: off, react/no-find-dom-node: off, react/display-name: off, react/no-did-mount-set-state: off, react/destructuring-assignment: off, react/prop-types: off */
+/* eslint react/no-deprecated: off, react/display-name: off, react/no-did-mount-set-state: off, react/destructuring-assignment: off, react/prop-types: off */
 
 import { extend, noop } from "@krakenjs/belter/src";
 
@@ -23,15 +23,11 @@ type ReactType = {|
     ?{ [string]: mixed },
     ...children: $ReadOnlyArray<ReactElementType>
   ) => ReactElementType,
-|};
-
-type ReactDomType = {|
-  findDOMNode: (typeof ReactClassType) => HTMLElement,
+  createRef: () => {| current: HTMLElement |},
 |};
 
 type ReactLibraryType = {|
   React: ReactType,
-  ReactDOM: ReactDomType,
 |};
 
 export const react: ComponentDriverType<
@@ -41,16 +37,32 @@ export const react: ComponentDriverType<
   *,
   *
 > = {
-  register: (tag, propsDef, init, { React, ReactDOM }) => {
+  register: (tag, propsDef, init, { React }) => {
+    if (typeof React.createRef !== "function") {
+      throw new TypeError(
+        "React version 16.3 or higher is required. createRef API is not available in this version of React."
+      );
+    }
+
     // $FlowFixMe
     return class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {};
+        this.containerRef = React.createRef();
+      }
+
       render(): ReactElementType {
-        return React.createElement("div", null);
+        return React.createElement("div", { ref: this.containerRef });
       }
 
       componentDidMount() {
-        // $FlowFixMe
-        const el = ReactDOM.findDOMNode(this);
+        const el = this.containerRef.current;
+
+        if (!el) {
+          throw new Error("Could not find DOM element for React component");
+        }
+
         const parent = init(extend({}, this.props));
         parent.render(el, CONTEXT.IFRAME);
         this.setState({ parent });