Question

139

Using reactjs with requirejs

rated 0 times [ 140] [ 1] / answers: 1 / hits: 50662 / 10 Years ago, wed, april 30, 2014, 12:00:00

Recently, I started using reactjs along with a backbonejs router to build an application.

I usually use use requirejs for dependency and code management. But, problem arises when I try to include files that contain jsx syntax.

This is what I have so far as my router.js:

define([backbone, react], function(Backbone, React) {



  var IndexComponent = React.createClass({

    render : function() {

      return (

        <div>

        Some Stuff goes here

        </div>

        );

    }

  });







  return Backbone.Router.extend({

    routes : {

      : index

    },

    index : function() {

      React.renderComponent(<IndexComponent />, document.getElementById('index'));

    }

  });

});

How do I put IndexComponent in its own file and call it in this file ? I have tried the usual method (the same that I have used with backbone and react) but got an error due to jsx syntax.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yasmeeng

Add To Favorites

Follow

Total Points: 516

Total Questions: 97

Total Answers: 101

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

answered 10 Years ago shylaelisan · Accepted Answer

So I figured it out myself.

I got the necessary files and instructions from this repo: jsx-requirejs-plugin.

Once I had jsx plugin and modified version of JSXTransformer, I changed my code as instructed in the repository :

require.config({

  // ...



  paths: {

    react: path/to/react,

    JSXTransformer: path/to/JSXTransformer,

    jsx: path/to/jsx plugin

    ...

  }



  // ...

});

Then, I could reference JSX files via the jsx! plugin syntax. For example, to load the Timer.jsx file that is in a components directory:

require(['react', 'jsx!components/Timer'], function (React, Timer) {

   ...

   React.renderComponent(<Timer />, document.getElementById('timer'));

   ...

});

I could also access .js files that had jsx syntax in them using the same code:

require(['react', 'jsx!components/Timer'], function (React, Timer) {

   ...

   React.renderComponent(<Timer />, document.getElementById('timer'));

   ...

});

Also, I did not need to put /** @jsx React.DOM */ at the top of files using jsx syntax.

Hope it helps.