Handling events/onClick

[thom4parisot]

Hello,

I have the following JSX component:

/** @jsx React.DOM */

var React = require('react');
var VideoPlayer = require('../iplayer');

var createFeedItem = function(feedId){
  var activeFeedId = this.state.activeFeed;

  return <dd className={'feed ' + (feedId === activeFeedId ? 'active' : '')} key={feedId}>
    <a href={'#' + feedId} onClick={this.activateFeed}>{feedId.toUpperCase()}</a>
  </dd>
};

var VideoComponent = React.createClass({
  getInitialState: function(){
    return {
      activeFeed: 'bbc1'
    };
  },
  activateFeed: function(event){
    this.setState({ activeFeed: false});
  },
  render: function(){
    var feeds = this.props.streams.map(createFeedItem, this);

    return (<div>
      <div className="panel">
        <h1 className="hd">{this.props.title}</h1>

        <dl className="feeds-switcher">
          <dt>Switch to Feed:</dt>
          {feeds}
        </dl>
      </div>
      <div className="panel control-panel">
        <VideoPlayer feed={this.state.activeFeed} />
      </div>
    </div>);
  }
});

module.exports = VideoComponent;

The thing is the onClick is removed from the view and I do not see where I could grab the possibly generated autobinding/delegation JS code.

Maybe I am missing something. Maybe I am missing how I should implement the same reactified view on the client side.

[sophiebits]

This project is only for generating markup on the server side and doesn't support attaching events on the client-side or doing client-side updates afterwards.

If you need that you'll need to call React.renderComponentToString yourself and then call React.renderComponent with the same props. Here's an example of how to do so:

https://github.com/facebook/react/tree/master/examples/server-rendering

You can also use something like react-quickstart as a template.

[thom4parisot]

Oh okay… it is pretty cumbersome this way :-( I end up with a 500K browserified file just with 4 components.

[sophiebits]

Really? React itself is only 112k when minified (and 121k including addons). If you're seeing 500k you might be doing something wrong.

[thom4parisot]

Well I am running browserify -t reactify -r react -r ./views/index.jsx > public/views.js on 1 view of 20 LOC(including 1 layout of 20 LOC + 4 components of 10 LOC)

Nothing much fancy.

[ustun]

Does it help if you try --external React and not require js?

Ustun

On May 7, 2014, at 5:01 PM, Thomas Parisot notifications@github.com wrote:

Well I am running browserify -t reactify -r react -r ./views/index.jsx > public/views.js on 1 view of 20 LOC(including 1 layout of 20 LOC + 4 components of 10 LOC)

Nothing much fancy.

—
Reply to this email directly or view it on GitHub.

[thom4parisot]

@ustun a bit late but I solved that by using the browser field of browserify in the package.json:

  "browser": {
    "react": "./node_modules/react/dist/react.min.js"
  },

Code goes from 1.6MB to 300K.

[ustun]

Good to know, I have since switched to webpack though, it seems better overall. The equivalent there is the following for anyone interested:

externals: {
    "React": "React",
    "react": "React"
}

[alioshr]

Hey @sophiebits , could you please re-add the link, or post a snippet as the link you´ve pasted here is no longer active?