Open giantelk opened 9 years ago
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.
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>
)
}
})
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>;
}
});
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 :+1:
My solution was to use Webpack to build my frontend.
@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.
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
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');
withmodule.exports = "Player";
in player.jsx along withmkdir 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.