News for hackers. Stuff that matters.
Re:React v0.11 by asdad on Thursday July 17, 2014 @05:56PM (#8050440)
Has anyone written a large React application yet? Preferably open source?
Re:React v0.11 by spicyj on Thursday July 17, 2014 @06:09PM (#8050517)
At Khan Academy most of our frontend is now using React (including our personalized learning dashboard, coach reports, question editor [1], etc.) and we're really happy with it. We have about 750 React components and 50,000 lines of JSX now. We've migrated pieces incrementally and React is really great for doing that because it doesn't try to own your whole app.

My friends and I also just launched Vim Awesome [2], which is not "large" but is completely written in React and is open source if you're curious to look at it.

[1]: https://github.com/Khan/perseus

[2]: http://vimawesome.com/

Re:React v0.11 by subsection1h on Thursday July 17, 2014 @08:14PM (#8050998)
When I scroll down the Vim Awesome home page, click a link, and then go back to the home page (Alt-Left), I'm directed to the top of the home page rather than the location on the home page where I left off. Is this issue caused by React? (Every site I've evaluated that's powered by Meteor has this issue, and I hate it.)
Re:React v0.11 by spicyj on Thursday July 17, 2014 @08:19PM (#8051024)
No, this is most likely an artifact of react-nested-router (https://github.com/rpflorence/react-nested-router) not currently preserving the scroll position. Definitely not a constraint imposed by React.

Edit: Or this may be due to the fact that we don't properly cache the fetched plugin list on the client side so we end up re-fetching it when you go back. Either way, this is not a React problem.

Re:React v0.11 by divad12 on Friday July 18, 2014 @05:59AM (#8052332)
Yes, this is my bad. :) I added an issue to GitHub about it: https://github.com/divad12/vim-awesome/issues/14

Pull requests welcome!

Re:React v0.11 by ssorallen on Thursday July 17, 2014 @07:17PM (#8050791)
Our UI for Marathon[1], a framework on top of Apache Mesos, is written in React and uses Backbone models. It uses Require JS for modules and compiling the source into a single file for distribution. The JS root is in the assets directory[2].

There are a few guidelines we have adopted through trial and error so far:

* Use React.addons.classSet[3] liberally. Class name generation becomes simpler for future developers to read.

* Define propTypes[4] for every component. Debugging becomes easier because React gives you informative warnings about mismatched propTypes.

[1] https://github.com/mesosphere/marathon

[2] https://github.com/mesosphere/marathon/tree/master/src/main/...

[3] https://facebook.github.io/react/docs/class-name-manipulatio...

[4] https://facebook.github.io/react/docs/reusable-components.ht...

Re:React v0.11 by jypepin on Thursday July 17, 2014 @06:01PM (#8050474)
I don't have any open source examples, but I have multiple friends at different mid-size startups who replaced backbone with react and they are all super happy about it.

I'm looking forward to try React myself, but haven't yet.

Seems like React is here to stay and become really really awesome, I haven't heard anybody say bad things about it.

Re:React v0.11 by Fishkins on Thursday July 17, 2014 @06:10PM (#8050525)
> I have multiple friends at different mid-size startups who replaced backbone with react

They all replaced backbone with react? I haven't really used either, but I thought a lot of people used backbone and react together, since they excel at different things.

Re:React v0.11 by findjashua on Thursday July 17, 2014 @06:23PM (#8050591)
i'm assuming he meant 'replaced backbone views with react'
Re:React v0.11 by zbyte64 on Thursday July 17, 2014 @07:24PM (#8050819)
We just launched a Drag and Drop website builder made in React:

http://buildicus.com/

I have been distilling all the lessons learned into a lesson plan: https://github.com/zbyte64/reactjs-crashcourse

Re:React v0.11 by lumpypua on Friday July 18, 2014 @12:24AM (#8051648)
I downloaded and took a look at your lesson plan. Nice. It's solid and covers a bunch of usage patterns that aren't clear in the react tutorial.

My one suggestion: host it on github pages and put a link to that in the README. It's already basically ready to roll. Way more accessible than downloading a zip and opening an html file.

Re:React v0.11 by stevejohnson on Thursday July 17, 2014 @06:52PM (#8050703)
Literally Canvas uses React for its GUI: http://literallycanvas.com

It isn't using JSX yet because CoffeeScript integration didn't exist until recently, but it was still a joy to use.

Re:React v0.11 by nacs on Thursday July 17, 2014 @08:41PM (#8051101)
If you hold the mouse down and drag off-canvas to the left or bottom sides, the painting cursor shoots up to y = 0 and leaves a streak.
Re:React v0.11 by stevejohnson on Friday July 18, 2014 @02:05PM (#8054597)
Thanks for the bug report. I've saved it in the GitHub issue tracker. Pretty weird behavior, definitely fixable.
Re:React v0.11 by sudhirj on Friday July 18, 2014 @04:52AM (#8052188)
Where does JSX + Coffeescript integration exist now?
Re:React v0.11 by mambodog on Friday July 18, 2014 @06:14AM (#8052353)
I wrote a JSX transformer for Coffeescript, it's quite stable now:

https://github.com/jsdf/coffee-react-transform

Re:React v0.11 by stevejohnson on Friday July 18, 2014 @02:05PM (#8054601)
I used this for a small app (drawplz.com) and liked it quite a bit. Thanks for your work.
Re:React v0.11 by avanderhoorn on Friday July 18, 2014 @09:26AM (#8052864)
Glimpse v2 is using React/Flux for pretty much everything client related and all parts are open source and on github.

For those who don't know, Glimpse is an OSS diagnostics platform and we are in the process of building out v2 (including NodeJS and .NET backends) - http://getglimpse.com.

Current work on the front end can be tracked here - https://github.com/glimpse/glimpse.client/tree/version-2. Very much a work in progress but all good so far.

The system is quite large. In the end it will contain several major "sub applications" that users can switch between and each "application" has large number of components, major interactions, etc.

We are currently using the following stack:

- Views - ReactJS, - Server Comms - Superagent + Primus (SocketIO), - Build - Gulp, - Packaging components - Webpack, - Module System - CommonJS, - Message Bus/Dispatcher - Postal.js, - Testing - Jasmine, Jest, Chance, Karma, etc

Re:React v0.11 by Pephers on Thursday July 17, 2014 @06:39PM (#8050650)
Not enterprise kind-of large, but I'm in the process of building a booking web app (https://zapla.co) using React and Backbone Models/Collections.

I made the decision to switch from Backbone.View to React about ~2 weeks into the project, and so far I'm extremely pleased with it and have not regretted it! Unfortunately, the code isn't open source though.

Re:React v0.11 by linhmtran168 on Thursday July 17, 2014 @09:08PM (#8051170)
How do you bind Backbone Models/Collections to React Components as in the case with Backbone.View?
Re:React v0.11 by Pephers on Wednesday July 23, 2014 @05:46AM (#8073522)
What I've settled with for now is to attach an instance of the Model/Collection as a prop on the React component and syncing it to Reacts' state.

I do this by attaching a callback on the sync, add, change, remove events and use the the toJSON() method to copy it to the React state like so:

this.setState({data: this.props.model.toJSON()});

When saving a form, I have a method which handles the form submission. It copies over the state to the model and then saves it using:

this.props.model.set(this.state.data);

this.props.model.save();

In additional to this, I've built a tiny dispatcher to instantitiate my models and collections only once. In this way all parts of the app will always work on the same data and by in sync.

Re:React v0.11 by UberMouse on Thursday July 17, 2014 @10:40PM (#8051408)
I use React.Backbone for this. Very easy to use, makes sure the components rerender whenever the model or collection they are bound to changes.

https://github.com/usepropeller/react.backbone

Re:React v0.11 by aboodman on Thursday July 17, 2014 @07:58PM (#8050939)
The majority of the UI for Camlistore is written in React. Unfortunately it's not running anywhere publicly, so you can't play with it. But you could run it locally and poke around.

www.camlistore.org

https://camlistore.googlesource.com/camlistore/+/master/serv...

Re:React v0.11 by fuzzythinker on Friday July 18, 2014 @02:05AM (#8051890)
According to their blog post in May, "Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) are using React in production."

http://facebook.github.io/react/blog/2014/05/29/one-year-of-...

Re:React v0.11 by FreezerburnV on Thursday July 17, 2014 @06:10PM (#8050527)
The Atom text editor being created by github just introduced a react back end for all of its rendering, and it recently went open source. :)
Re:React v0.11 by dustingetz on Thursday July 17, 2014 @06:23PM (#8050589)
I've architected two enterprise-class business apps - both projects would have failed without react IMO. Neither are open source, but both use this library for widgets: https://github.com/wingspan/wingspan-forms
Re:React v0.11 by peterarmstrong on Thursday July 17, 2014 @11:40PM (#8051552)
At Ruboss, we rewrote Dashcube (https://dashcube.com/) in React, after having performance issues with another JS framework. The rewrite took 4 months, and was totally worth it. We're extremely happy with React...
Re:React v0.11 by hcarvalhoalves on Thursday July 17, 2014 @11:00PM (#8051468)
I'm finishing a commercial project now and the experience has been very positive.

Shorter time to ship, fast UIs and less bugs (because it's easier to reason about state).

Re:React v0.11 by strager on Friday July 18, 2014 @04:04AM (#8052104)
Re:React v0.11 by presty on Thursday July 17, 2014 @06:51PM (#8050694)
instagram.com

but not open source