Negin Basiri February 2016

dom is not defined error after transfroming jsx to js

I created a jsx file as below

  /** @jsx dom */
(function(){
'use strict';

define([
        'jquery',
        'react',
        'react-dom'
    ],

    function($, React, ReactDOM){

        var AppView = React.createClass({
            render: function() {
                return <div>Hello World</div>;
            }
        });

        ReactDOM.render(<AppView />, document.getElementById('dsl-application'));

    });
})();

And transformed the jsx to js using below command

babel --watch src --out-dir bundle --preset react

And the out put file is like below

(function () {
'use strict';

define(['jquery', 'react', 'react-dom'], function ($, React, ReactDOM) {

    var AppView = React.createClass({
        displayName: 'AppView',

        render: function () {
            return dom(
                'div',
                null,
                'Hello World'
            );
        }
    });


    ReactDOM.render(dom(AppView, null), document.getElementById('dsl-application'));
});
})();

The problem is I got Uncaught ReferenceError: dom is not defined when I run the js file in browser. dom is added after transformation. Any clue how to fix this?

Answers


Alfiyum February 2016

To transform JSX to JS in browser, you need browser.js from babel. For a simple example refer to https://github.com/ruanyf/react-demos/blob/master/demo01/index.html

[[UPDATE BASED ON MORE INFO]]

Use the following files and then run npm install and webpack , then your index.html will be ready to be served.

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  </body>
</html>

package.json

{
  "name": "another",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

main.jsx

'use strict'

var React = require('react')
var ReactDOM = require('react-dom')
var AppView = require('./component.jsx')

ReactDOM.render(
    <AppView />,
    document.getElementById('example')
);

component.jsx

'use strict'

var React = require('react')

var AppView = React.createClass({
    render: function(){
        return(<h1>Hello, world!</h1>)
    }
});

module.exports = AppView

webpack.config.js

module.exports = {
    entry: './main.jsx',
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
      load 

Post Status

Asked in February 2016
Viewed 3,056 times
Voted 7
Answered 1 times

Search




Leave an answer