Utilizzo di reactjs con requirejs

Question

Recentemente, ho iniziato a utilizzare reactjs insieme a un router backbonejs per creare un'applicazione.

Io di solito uso l'uso requirejs per la dipendenza e la gestione del codice. Ma, il problema sorge quando tento di includere file che contengono la sintassi jsx.

Questo è quello che ho finora la mia 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')); 
    } 
    }); 
}); 

Come metto IndexComponent in un file e chiamarlo in questo file? Ho provato il solito metodo (lo stesso che ho usato con backbone e reagire) ma ho ricevuto un errore a causa della sintassi jsx.

Answer 1

Quindi l'ho capito da solo.

Ho ottenuto i file e le istruzioni necessari da questo repo: jsx-requirejs-plugin.

Una volta ho avuto jsx plugin e modificato versione di JSXTransformer, ho cambiato il mio codice come indicato nel repository:

require.config({ 
    // ... 

    paths: { 
    "react": "path/to/react", 
    "JSXTransformer": "path/to/JSXTransformer", 
    "jsx": "path/to/jsx plugin" 
    ... 
    } 

    // ... 
}); 

Poi, ho potuto fare riferimento file JSX tramite la sintassi jsx! plugin. Per esempio, per caricare il file Timer.jsx che si trova in una directory componenti:

require(['react', 'jsx!components/Timer'], function (React, Timer) { 
    ... 
    React.renderComponent(<Timer />, document.getElementById('timer')); 
    ... 
}); 

potrei anche accedere .js file che avevano jsx sintassi in loro utilizzando lo stesso codice:

require(['react', 'jsx!components/Timer'], function (React, Timer) { 
    ... 
    React.renderComponent(<Timer />, document.getElementById('timer')); 
    ... 
}); 

Inoltre, Non avevo bisogno di inserire /** @jsx React.DOM */ nella parte superiore dei file usando la sintassi jsx.

Spero che aiuti.

Answer 2

Gli strumenti di reazione (incluso JSX) sono stati ritirati a favore di Babel (https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). Non riesco a trovare un modo per farlo senza un passaggio "transpiling", quindi questa è la mia soluzione con grunt.

È possibile installare grugnito-babele (NPM installare grugnito-babele) e configurare un compito simile al seguente:

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

Basta aggiungere alla vostra lista di compiti grunt:

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

Babel trasporrà i file JSX in JS che possono essere specificati come dipendenze RequireJS senza configurazione aggiuntiva.