Using reactjs with requirejs

Question

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.

question- do you need to use JSX or could you just use straight JS in the app? — Alexander Mills
– Alexander Mills, Commented Jul 1, 2015 at 23:40
That's completely upto you. JSX makes life easier, but you could still use JS syntax components. Read about it here: facebook.github.io/react/docs/… — myusuf
– myusuf, Commented Jul 2, 2015 at 4:31

myusuf · Accepted Answer · 2014-05-05 07:08:03Z

105

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.

edited May 5, 2014 at 7:08

answered Apr 30, 2014 at 9:42

myusuf

12.3k12 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

killthrush Over a year ago

Kind of puzzled by the code snippet under "I could also access .js files that had jsx syntax in them using the same code:". It's identical to the one above it. I found that if I was using JSX inside a require module, I needed to make that same module a jsx file too (and load using the jsx plugin like you said). Could you update your sample to be a little more clear on how you've organized your code as opposed to just the react/jsx code. For example, what does your Timer module look like? What name do you give to the module that uses Timer and how is it loaded with require?

myusuf Over a year ago

In the first instance, it is assumed that Timer uses jsx syntax and has a .jsx extension. In the second instance, although the code is same, it is assumed that Timer again contains jsx syntax but has a .js extension.

user3794166 Over a year ago

Doesn't work, requirejs isn't downloading the files with no errors or 404s.

elimisteve Over a year ago

Is this answer appropriate for 2018? I can't find the recommended way to load React via requirejs after 2016.

Rocío García Luque · Accepted Answer · 2017-02-18 08:53:38Z

4

React tools (JSX included) have been deprecated in favor of Babel (https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). I cannot find a way to do this without a "transpiling" step, so this is my solution with grunt.

You can instal grunt-babel (npm install grunt-babel) and configure a task like the following:

babel: {
    options: {
        sourceMap: false,
        modules: "common"
    },
    dist: {
        files: [{
            expand: true,
            src: ['js/components/*.jsx'],
            dest: 'dist',
            ext:'.js'
       }]
    }
}

Just add it to your list of grunt tasks:

grunt.registerTask('default', ['clean', 'copy', 'babel', 'http-server']);

Babel will transpile your JSX to JS files that can be specified as RequireJS dependencies with no additional configuration.

edited Feb 18, 2017 at 8:53

answered Feb 7, 2017 at 8:09

Rocío García Luque

3,86735 silver badges32 bronze badges

1 Comment

sg28 Over a year ago

thank you for the grunt piece ,i have implemented something same ,but after my jsx code is bablified ,the browser throws requirejs not available error.Can you suggest some solution?

Collectives™ on Stack Overflow

Using reactjs with requirejs

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related