Hacker News Reader

Comment by asdad | Hacker News Reader

Has anyone written a large React application yet? Preferably open source?

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/

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.)

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.

Yes, this is my bad. :) I added an issue to GitHub about it: https://github.com/divad12/vim-awesome/issues/14

Pull requests welcome!

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...

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.

> 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.

i'm assuming he meant 'replaced backbone views with react'

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

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.

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.

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.

Thanks for the bug report. I've saved it in the GitHub issue tracker. Pretty weird behavior, definitely fixable.

Where does JSX + Coffeescript integration exist now?

I wrote a JSX transformer for Coffeescript, it's quite stable now:

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

I used this for a small app (drawplz.com) and liked it quite a bit. Thanks for your work.

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

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.

How do you bind Backbone Models/Collections to React Components as in the case with Backbone.View?

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

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.

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...

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-...

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. :)

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

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...

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).

http://facebook.github.io/react/docs/examples.html

instagram.com

but not open source

Reply on news.ycombinator.com