
React, a JavaScript library for building user interfaces - friggeri
http://facebook.github.io/react/
======
bsimpson
One of the biggest problems with the web platform is that we've spent the last
20 years trying to shim applications into a document framework. HTML was
designed to help academics share research papers, not to replace native thick-
client applications, yet that's the direction it's been evolving towards.

I'm really happy to see Web Components (inc. Polymer, Angular, x-tags, and
React) landing into HTML. If we accept that web apps != web pages at a spec
level, hopefully we can build an awesome platform on which to create tools
that leverage all the great parts of the web (linkable, available, auto-
updating, device-agnostic) without the mess that we've made trying to make the
web do something it wasn't designed for.

~~~
smrtinsert
The current fad of quasi declarative web components looks like early Ext to
me, and I think everyone knows how that turned out.

I really wish we took it back to a document approach. True REST, everywhere!
That's new and novel. Frameworks that build in behaviors with static html -
that's just a poor mans gui toolkit. I suppose the web will have go through
the task of figuring out its just another in a long line of mistakes. It's
like people want to rebuild xslt but badly.

~~~
nahname
I felt the same way, reminded deeply of ASP.NET

I've also used Ext and FB React certainly reminds me of it. The biggest
problem with ExtJS is that it wanted to be my class system, my service layer,
my UI, my CSS, my everything. The APIs were convoluted. Then they switched to
MVC when that was cool, but it was kind of a kludge.

Surprisingly, Angular seems to get functional modularity. Directives and
filters are easily sharable, very good examples of modular components that can
just be simple functions. The other part I really like in Angular is that a
model is just data. Got an array? Sure, that can be a model.

I keep waiting for the point where I feel like those dirty Angular devs
tricked me into using their framework, but it hasn't happened.

~~~
vlad
+1. You phrased a lot of exactly how I feel about AngularJS. I went through
the React tutorial in order to compare the resulting code to AngularJS side by
side. I'm holding back my thoughts until I have a chance to learn more about
it, but in the mean time, a comparison of the code required to make the same
app is a good start.

<https://news.ycombinator.com/item?id=5790799>

------
tomjakubowski
First impression is that this is a lot like their PHP language extension
XHP[1], which allows you to embed XML syntax into PHP and automatically
escapes variables depending on their context (inside or outside the XML):

    
    
      <?php
      // note: includes omitted
      if ($_POST['name']) {
        echo <span>Hello, {$_POST['name']}</span>;
      } else {
        echo
          <form method="post">
            What is your name?<br />
            <input type="text" name="name" />
            <input type="submit" />
          </form>;
      }
    

in that snippet, the $_POST variable is correctly escaped to mitigate XSS
attacks. XHP also allows you to condense complex components into a single tag.

1: <https://www.facebook.com/note.php?note_id=294003943919>

~~~
phibit
Maybe you're just talking about the JSX component? React uses JSX (optionally,
they say) but they serve different purposes.

------
jonahx
It would be nice to see a list of reasons one might choose this over angular
or any of the other frameworks. The features and description on the homepage
are pretty vague...

~~~
vlad
Thanks to all the questions, I rewrote the React tutorial into an AngularJS
app. Have a look!

<https://news.ycombinator.com/item?id=5790799>

~~~
jonahx
Cool, very nice!

------
wycats
There's already a library named react.js: <http://www.reactjs.com/>

~~~
lukegb
Aaaah, the orange and purple. It's burning my eyes.

~~~
lingben
I thought you were exaggerating! jeebuz... who thought that was a good
idea??!?

------
sebmarkbage
Consider the architectural difference of React vs. one of the similar "view
model" frameworks. It's similar to the difference between Git vs. SVN.

Other view model frameworks typically track all changes to the view model by
explicitly firing an event for every delta change. That in turn causes another
delta and so on. This is similar to SVN where every change is a delta from the
previous state. That means that you'll need to codify every possible diff
through your view hierarchy/graph. For simple stuff, they have built-in tools
to help you do this. For complex views, that's really difficult or impossible
(you can get into conflicts and deadlocks).

React makes it easy by simply regenerating a copy of the next view. This is
similar to Git where every change is a snapshot.

There are benefits with either architecture, but I'd recommend you figure out
what benefits matter more for your use case. I'm just pointing out one area
where React is different.

------
peterhunt
I've written a blog post that goes over why we made some of the decisions we
made here: <http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood>

------
prezjordan

        var HelloMessage = React.createClass({
          render: function() {
            return <div>{'Hello ' + this.props.name}</div>;
          }
        });
    

Wait, what's going on here, how come the return string isn't wrapped in
quotes?

EDIT: Oh I see it's something called "JSX." Interesting.

~~~
nakkiel
They pre-process the source. You can embed `text/jsx` scripts in your code.

~~~
drgath
"Pre-process" isn't quite accurate. To me that implies processing before
serving, but it appears JSX is processed in the browser by a transpiler
weighing in at 300k (uncompressed). <http://fb.me/JSXTransformer-0.3.0.js>

~~~
peterhunt
This is just for making development easy. We have a prebuild step that will do
this ahead of time. Just do:

npm install -g react-tools

and you'll have a jsx command available. We cover this towards the bottom of
this page: <http://facebook.github.io/react/docs/getting-started.html>

~~~
drgath
Thanks for the FYI. I'd consider swapping the order and list the offline
method first, since that's the more common approach people take (I'd hope),
and it's easier to grok at a glance.

------
nthitz
A Facebook & Instagram collaboration. fwiw

~~~
mikeyk
Yep--our Web products (including the logged-in Instagram.com) are built using
React.

------
amasad
Looks really nice for creating components. However, two quick notes:

* This breaks code editors, static analysis tools like jshint etc.

* I think Web Components is landing soon, and this seems like it could leverage that.

~~~
zpao
> This breaks code editors, static analysis tools like jshint etc.

You're right. One of our goals in the coming months is to try to make some
language files for editors. Vim actually does a pretty good job of this
already thanks to the similarity to E4X.

JSHint is another thing we'd like to improve upon. At Facebook & Instagram, we
actually lint against the transformed code. Right now the transforms don't
modify line numbers so it's been easy to match up. We'd like to build some
tooling around this for people who make use of React and JSX.

> I think Web Components is landing soon, and this seems like it could
> leverage that.

I like the way you think! We've started thinking about that already.

~~~
eddieplan9
Any chance of having CoffeeScript integration? Instead of inlining straight
XML, can we wrap it in a function call (like gettext style) so it does not
break existing languages/editors?

------
darkchasma
I'm confused, every example is 100 times the code I would write using straight
html... Is there a benefit I'm missing?

~~~
marshray
It creates dynamic content on the client side.

When you need this, you need it. When you don't, prefer static html.

Keep in mind, the folks who write developer documentation for things like this
have had their head in this problem space for a long time. So there's less
explanation of the "what" and "why", and examples tend to be more oriented to
the "how".

~~~
coldtea
> _When you need this, you need it. When you don't, prefer static html._

He didn't said "static html". He said "straight html". Which I presume means
"also factoring in plain JS code".

~~~
marshray
Right, I said "static html" not meaning to imply that it was the same thing. I
wouldn't consider "straight html" to include script code, but I think it's a
valid criticism of my advice that it is oversimplistic.

------
d0m
Got me really excited but I found that the "why" was missing. Not sure _why_ I
would start using it. And I feel like the examples don't explain it very
well.. As someone else pointed out, it feels like it's very hard to do simple
stuff (from the examples!). I'm sure the landing page will get better at
explaining it! For now, maybe adding it to the FAQ could be a quick way to
solve this issue (I looked there).

------
ch0wn
I'm happy to see they open-sourced it. I always was wondering how the
framework could look like that produces code like on the instagram.com webapp
and Facebook. Especially since instagram.com is still pretty new and would not
suffer from legacy decisions like parts of Facebook may still do.

------
dpham
Do templates have to live inside the application logic? If so, this is a
really poor decision.

~~~
peterhunt
I'm not sure what you mean by "templates" here.

React gives you a set of tools to generate markup safely. The syntax we prefer
to use for it is JSX, but if you'd prefer to do it your own way, that's great
too. You can organize your app however you want by splitting the DOM
generation code into separate files if you wish.

~~~
v413
Markup generated from javascript isn't manageable enough. That is why it is
not recommended to have templates/markup generated from js.

~~~
tg3
Could you elaborate on that? I've seen that viewpoint a number of times but
I've never understood why it's considered a cardinal sin to have templates
generated from js.

------
colevscode
We added react to hellojs so you can try it out easily:

<https://hellojs.backliftapp.com/search/React>

This includes the compiled version, which isn't included by default.

------
instakill
I'm very confused as to what this is and how you'd go about "building user
interfaces" using this. Is it an Ember/Angular competitor? Does it replace or
complement a back-end stack?

~~~
peterhunt
We have a bunch of examples here, you'd probably be most interested in our
TodoMVC (and TodoMVC-backbone, and possibly bootstrap) ones:

<https://github.com/facebook/react/tree/master/examples/>

React is not a standard MVC framework -- we simply strive to be a fast and
easy-to-use way to build UI components. You can integrate with any backend (or
frontend!) stack that you want.

The reason you'd probably want to use React is that there aren't a lot of
concepts to learn, it's fast out of the box, and it ensures that your UI stays
consistent with your data without manually specifying data bindings or
anything like that.

------
andreypopp
FYI, I've built a transform[1] for browserify for JSX — now React apps can be
written with JSX and using CommonJS module system and then consumed by
browsers.

P.S. It doesn't work now with react-tools installed from npm due to bug with
their release, which is now fixed in the repo but isn't released yet.

[1]: <https://github.com/andreypopp/reactify>

~~~
andreypopp
Fixed now!

------
mavdi
This is terrible, so did we really not learn anything from PHP days? Are we
seriously going to mix markup and logic again?

------
mhd
So can this do desktop-like interfaces? We've got a plethora of frameworks
now, but sadly none of the offers a good option for more "dense" apps. It's
all good and well if I "just" want to do a highly interactive web page, up to
a gmail level, but if I want a Swing/Cocoa/Windows-like experience, it's
either ext or native...

------
avdd_
What _is_ with this low-contrast trend?? Are the complainers not loud enough?
Please stop doing that!

~~~
Kiro
It looks nice. What complainers?

------
hrabago
I'm guessing this would be the new way to write FB apps, and could be how they
will support apps running in mobile FB.

I wonder though if Apple would ever allow their FB iOS app to run FB apps, as
iOS guidelines forbid apps from downloading "code in any way or form".

------
shaydoc
Just had try doing a KnockoutJS version of this also :
*[http://anexiledderryman.com/post/51714264769/facebooks-
new-r...](http://anexiledderryman.com/post/51714264769/facebooks-new-react-
javascript-library-tutorial)

------
brianr
This looks really nice, will be spending some time with it. Seems like it
could benefit a lot from a rich component library -- is there anything like
that on the web somewhere or in the works?

~~~
peterhunt
Right now our approach is to interoperate with other libraries. Bootstrap
works pretty well with React (see
[https://github.com/facebook/react/tree/master/examples/jquer...](https://github.com/facebook/react/tree/master/examples/jquery-
bootstrap) for a small example).

However it's definitely possible to build a component library with React, we
just haven't done it yet.

If anyone wants to build bootstrap or jQueryUI bindings, we're taking pull
requests :)

------
hardwaresofton
I think it would help if you laid out why you're better/worse than some of the
libraries already out there? That would make a great section on your site, and
would set you apart

------
mckoss
I really have the embedded XML in javascript code. I'm much more interested in
the Angular or Dart approaches to building web applications.

------
ssharp
I stared blankly into my screen for a minute trying to figure out the meaning
behind why you can't things off the list in the Todo app.

------
lardissone
OMG, JSX.. why? just why?? Stop ruining js people!

------
shaydoc
I can see how this might get out of hand quickly.

~~~
marshray
Anything in particular? Or just being curmudgeonly (that's OK too).

I was encouraged by the sentence "... This is what makes React composable: a
key tenet of maintainable frontends."

In my experience, using concepts from functional programming is a good sign
for the long term health of a program.

~~~
shaydoc
Well (i could go on all day), I wish that these libraries would start with the
"big picture", as in how everything should hang together and where there
component fits in, like what John Papa has done really well :
_<http://www.johnpapa.net/spa/>

Here's how I lay out my SPA structure :
_<http://anexiledderryman.com/image/50565922110>

It seems here we just dive straight into the code.

In particular, I don't like so much coupling of the code and the html
together, but that really depends what angle you are coming from, who is the
target market of this library.

For example : Take KnockoutJS, it has really good separation of concerns. I
really like the MVVM pattern, why? because it means if I have a team of
HTML5/CSS design guys, I can let them work off just building good markup and
focus on delivering quality static stuff, then my UI developers can work on
custom binding handlers for nice CSS3 transition integration and then by
C#/Java guys can get their paws wet implementing the data/server functionality
without ever treading on each others toes.

I thorughly agree that functional programming concepts are very healthy for a
program. Great functional Composability makes reusability and maintainability
a dream.

------
gren
Great ideas IMO but what an ugly API:
React.unmountAndReleaseReactRootNode(document.body);

------
alvivi
Seems a child of php and angular...

~~~
troym
AngularJS is too cool for babies!

------
devniel
I have just started to learn Angular :(

------
achalv
Meh.

------
leecGoimik7
Mixing js and xml syntax, variables in docblocks, DOM components that are not
really DOM components ("React.DOM components look like browser DOM elements,
they differ in a few ways"), undocumented/obscure OO features
(React.createClass?). Yikes. Thank you, but no, thank you.

