hekike/app.js

## app.js
var Readable = require('stream').Readable;

var es = require('event-stream');
var request = require('superagent');
var React = require('react');

var data1 = '{ "name": "substack" }\n{ "name": "dominictarr" }\n';
var data2 = '{ "name": "mikeal" }\n{ "name": "indutny" }\n{ "name": "dead-horse" }';

function filterOutEmpty (data, cb){
  cb(null, data.length ? data : undefined);
}

function getProfile (user, cb) {
  if(!user.name) {
    return cb();
  }

  request.get('https://api.github.com/users/' + user.name, function (res){
    cb(res.error, res.body);
  });
}

function pickMeta (user, cb) {
  if(!user.name || !user.email) {
    return cb();
  }

  cb(null, { name: user.name, email: user.email });
}

var App = React.createClass({
  getInitialState: function () {
    this.getData();
    return {
      users: []
    };
  },

  getStringStream: function (str) {
    var strStream = new Readable();
    strStream.push(str);
    strStream.push(null);

    return strStream;
  },

  getData: function() {
    var _this = this;

    es.pipe(
      es.merge(
        _this.getStringStream(data1),
        _this.getStringStream(data2)
      ),
      es.split('\n'),
      es.map(filterOutEmpty),
      es.parse(),
      es.map(getProfile),
      es.map(pickMeta)
    )
    .on('data', function (data) {
      var users = _this.state.users;
      users.push(data);

      _this.setState({
        users: users
      })
    })
  },

  render: function() {
    return <ul>
      {this.state.users.map(function(user, key) {
        return <li key={key}>{user.name} - {user.email}</li>;
      })}
    </ul>;
  }
});

React.render(<App />, document.getElementById('app'));

## bundle.sh
browserify -t reactify app.js -o bundled.js

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  <title>FRP React</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundled.js"></script>
</body>
</html>

## package.json
{
  "name": "frp",
  "version": "0.0.0",
  "main": "app.js",
  "dependencies": {
    "event-stream": "^3.1.7",
    "reactify": "^0.17.1",
    "superagent": "^0.21.0"
  },
  "devDependencies": {
    "reactify": "^0.17.1"
  }
}
	var Readable = require('stream').Readable;

	var es = require('event-stream');
	var request = require('superagent');
	var React = require('react');

	var data1 = '{ "name": "substack" }\n{ "name": "dominictarr" }\n';
	var data2 = '{ "name": "mikeal" }\n{ "name": "indutny" }\n{ "name": "dead-horse" }';

	function filterOutEmpty (data, cb){
	cb(null, data.length ? data : undefined);
	}

	function getProfile (user, cb) {
	if(!user.name) {
	return cb();
	}

	request.get('https://api.github.com/users/' + user.name, function (res){
	cb(res.error, res.body);
	});
	}

	function pickMeta (user, cb) {
	if(!user.name \|\| !user.email) {
	return cb();
	}

	cb(null, { name: user.name, email: user.email });
	}

	var App = React.createClass({
	getInitialState: function () {
	this.getData();
	return {
	users: []
	};
	},

	getStringStream: function (str) {
	var strStream = new Readable();
	strStream.push(str);
	strStream.push(null);

	return strStream;
	},

	getData: function() {
	var _this = this;

	es.pipe(
	es.merge(
	_this.getStringStream(data1),
	_this.getStringStream(data2)
	),
	es.split('\n'),
	es.map(filterOutEmpty),
	es.parse(),
	es.map(getProfile),
	es.map(pickMeta)
	)
	.on('data', function (data) {
	var users = _this.state.users;
	users.push(data);

	_this.setState({
	users: users
	})
	})
	},

	render: function() {
	return <ul>
	{this.state.users.map(function(user, key) {
	return <li key={key}>{user.name} - {user.email}</li>;
	})}
	</ul>;
	}
	});

	React.render(<App />, document.getElementById('app'));
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
	<title>FRP React</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="bundled.js"></script>
	</body>
	</html>
	{
	"name": "frp",
	"version": "0.0.0",
	"main": "app.js",
	"dependencies": {
	"event-stream": "^3.1.7",
	"reactify": "^0.17.1",
	"superagent": "^0.21.0"
	},
	"devDependencies": {
	"reactify": "^0.17.1"
	}
	}