How to use separate .JSX files for ReactJS components?

[giantelk]

I can't figure out how to use separate .jsx files for ReactJS components. I tried just putting the component in it's own file.

Then tried using var Player = require('./player'); with module.exports = "Player"; in player.jsx along with mkdir client, cd client, npm install require, with the player.jsx file in the /client.

Then tried renaming to player.js.

Can't figure this out.

[giantelk]

I found some late night typo's in my code, but still can't get this working. Changed to:
var Player = Npm.require("./player"); in leaderboard.jsx and...
module.exports = Player; (removed quotes around Player) at end of player.jsx

Also tried:
var Player = Npm.require("./player.jsx"); still no go.

[tehfailsafe]

It's far simpler (not necessarily in a good way) than using require(). There is no require() in the front side of meteor, all files in the client folder are loaded in as globals in alphabetical order with some directory nesting. To use a sepereate .jsx file, just take off the var when you create the object.

Component.jsx

Component = ReactMeteor.createClass({
  render: function(){
    return(
      <Player name="whatever" />
    )
  }
})

Player.jsx

Player = ReactMeteor.createClass({
  render: function(){
    return(
      <div>{this.props.name}</div>
    )
  }
})

[giantelk]

For the leaderboard example I had to do this in player.jsx, but... why don't I have to also remove var in this call var Leaderboard = ReactMeteor.createClass() in leaderboard.jsx ?

Another work around I going was to put the React client in a directory outside of the Meteor project, run Browserify on the JSX, copying the resulting output file into the Meteor project directory. Just don't include react NPM module, but do include reactify for Browserify. This worked with multiple JSX files without needing to remove existing require and var keywords before React components, however... couldn't get it working with react-router, something to do with document.body in the Router.run() / React.Render() call.

btw: I don't mind not using require, it's needing to remove var from existing ReactJS code that makes this a pain.

Put this in player.jsx, delete Player from leaderboard.jsx

var cx = React.addons.classSet;

Player = React.createClass({
  render: function() {
    var { name, score, ...rest } = this.props;
    return <div {...rest} className={cx("player", rest.className)}>
      <span className="name">{name}</span>
      <span className="score">{score}</span>
    </div>;
  }
});

[Narven]

It's far simpler (not necessarily in a good way) than using require(). There is no require() in the front side of meteor, all files in the client folder are loaded in as globals in alphabetical order with some directory nesting. To use a sepereate .jsx file, just take off the var when you create the object.

@tehfailsafe thanks for this 👍

[jedwards1211]

My solution was to use Webpack to build my frontend.

[oychao]

@tehfailsafe
I'm new to ReactJS.
This is really a simple and effective solution, but I wonder if using global variables is a good practice to separate React components, although I like this way very much cuz it's really easy.

[jedwards1211]

I used to use .jsx extensions for files containing JSX. But eventually it seemed like pointless extra effort and I renamed them all to .js