Can't find variable: React/ReactDOM

[J_Bon]

Hi everybody,

 

I just try to make a simple hate-react demo und want to understand how it works.

I have create a simple Main.hx class:

import de.react.mokick.haxe.js.view.App;
import js.Browser;
import api.react.ReactDOM;
import api.react.ReactMacro.jsx;

   class Main {

   public static function main() {

      ReactDOM.render(jsx('<$App/>'), Browser.document.getElementById('app'));
   }
}

and an another class which returns an object "ReactView":

package de.react.mokick.haxe.js.view;

import de.react.mokick.haxe.js.view.components.ReactView;
import api.react.ReactComponent;
import api.react.ReactMacro.jsx;
import js.html.InputElement;

    typedef AppState = {
            view: ReactView
    }

    typedef AppRefs = {
        input:InputElement
    }

    class App extends ReactComponentOfStateAndRefs<AppState, AppRefs> {

        var mainView = new ReactView();

    public function new(props:Dynamic) {

        super(props);
    }

    override public function render() {

        return cast mainView;
    }
}

hier is this Object:

package de.react.mokick.haxe.js.view.components;

import api.react.React;

class ReactView {

    public function new( ) {

        React.createElement("div", { style : { flex : "1"}, className : "app"});
    }
}

At the and I've got such main.js file:

(function (console) { "use strict";
function $extend(from, fields) {
   function Inherit() {} Inherit.prototype = from; var proto = new Inherit();
   for (var name in fields) proto[name] = fields[name];
   if( fields.toString !== Object.prototype.toString ) proto.toString = fields.toString;
   return proto;
}
var Main = function() { };
Main.main = function() {
   ReactDOM.render(React.createElement(de_react_mokick_haxe_js_view_App,null),window.document.getElementById("app"));
};
var de_react_mokick_haxe_js_view_App = function(props) {
   this.mainView = new de_react_mokick_haxe_js_view_components_ReactView();
   React.Component.call(this,props);
};
de_react_mokick_haxe_js_view_App.__super__ = React.Component;
de_react_mokick_haxe_js_view_App.prototype = $extend(React.Component.prototype,{
   render: function() {
      return this.mainView;
   }
});
var de_react_mokick_haxe_js_view_components_ReactView = function() {
   React.createElement("div",{ style : { flex : "1"}, className : "app"});
};
de_react_mokick_haxe_js_view_App.displayName = "App";
Main.main();
})(typeof console != "undefined" ? console : {log:function(){}});

//# sourceMappingURL=application.js.map

But I still don't know how kann I test it.

I have tried to make a new react-native project and integrate main.js in new project. But react-native don't find React variable. Even ifI import it, react-native can't still find a ReactDOM variable.

Can you advice me something?

Thanks!

[Philippe Elsass]

There are many problems in your code, but first of all ReactDOM does not exist in react-native.

Someone did a proof-of-concept here: https://github.com/massiveinteractive/haxe-react/pull/12

It's a branch because the Haxe React library doesn't support react-native out of the box yet.

Aside from that you have problems in your code so I'm worried you don't fully understand how react works. You should start doing a PoC in DOM and look into native when you have a good grasp on the components lifecycle.

- React "components" views must have a render function; this function returns a React "element"; the haxe react API currently incorrectly annotates the render function to return a "component" but that is wrong (a fix is coming).

- React "elements" are created using JSX (return jsx('<MainView/>')) which is syntaxic sugar for React.createElement(...).

Problems in your code:

- your App class returns a "component" instance instead of an "element",

- your MainView class doesn't have a render function and creates an unused element in its constructor.

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
---
You received this message because you are subscribed to the Google Groups "Haxe" group.
For more options, visit https://groups.google.com/d/optout.

--

Philippe