9 ms·
React, a JavaScript library for building user interfaces
- dpham 13y agoDo templates have to live inside the application logic? If so, this is a really poor decision.
- peterhunt 13y agoI'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 13y agoMarkup generated from javascript isn't manageable enough. That is why it is not recommended to have templates/markup generated from js.
- shaneos 13y agoHistorically, you are correct. However this is one of the strengths of React. Try it out and see if it suits your needs
- tg3 13y agoCould 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.
- prezjordan 13y agovar 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.
- deleted 13y ago[deleted]
- nakkiel 13y agoThey pre-process the source. You can embed `text/jsx` scripts in your code.
- drgath 13y ago"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 http://fb.me/JSXTransformer-0.3.0.js
- jlogsdon 13y agoYes, but the code is still pre-processed before it is executed by anywhere. edit: The fact that the pre-processing library is 300kb uncompressed is a pretty huge deterrent.
- simonw 13y agoPresumably if you run the pre-processer as part of your deploy (the jsx node.js command-line tool) you don't have to ship the pre-processing library to the client.
- peterhunt 13y agoThis 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 http://facebook.github.io/react/docs/getting-started.html
- drgath 13y agoThanks 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.
- alvivi 13y agoSeems a child of php and angular...
- troym 13y agoAngularJS is too cool for babies!
- deleted 13y ago[deleted]
- cwbrandsma 13y agoNo, we don't have enough good JS libraries yet. We have enough bad ones.
- hm8 13y agoAgreed, with people at twitter, facebook and all other places constantly coming up with more and more JS libraries, there is enough evidence that the existing ones are insufficient at some level. And even if they weren't, having choices is good to have in an open source (very loosely used) community.
- georgemcbay 13y agoI'm admittedly biased (as someone who doesn't care much for JavaScript) but I take the flailing framework situation as confirmation that JavaScript+DOM is a shitty foundation to build full-fledged apps in.
- kevincennis 13y agoI'm legitimately curious as to why you think that's a problem?
- wmf 13y agoIt divides development effort.
- pekk 13y agoThat's spurious. How do you propose to reallocate that development effort so it moves one project forward faster?
- zmmmmm 13y agoArguably, this problem happened to Java web frameworks. Too few and you lack innovation and fresh ideas, and things get driven to ideological extremes that aren't healthy or suitable for everyone (I don't want to start a flame war, but I feel a bit that way about Rails). Too many and none of them get enough community or support to reach critical mass. What this meant for Java is that most people ended up being forced to use J2EE frameworks designed by committee which were awful, and drove a lot of people away from Java altogether.
- nthitz 13y agoA Facebook & Instagram collaboration. fwiw
- mikeyk 13y agoYep--our Web products (including the logged-in Instagram.com) are built using React.
- shaydoc 13y agoI can see how this might get out of hand quickly.
- marshray 13y agoAnything 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 13y agoWell (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/ http://www.johnpapa.net/spa/ Here's how I lay out my SPA structure : http://anexiledderryman.com/image/50565922110 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.
- tomjakubowski 13y agoFirst 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 https://www.facebook.com/note.php?note_id=294003943919
- phibit 13y agoMaybe you're just talking about the JSX component? React uses JSX (optionally, they say) but they serve different purposes.
- csears 13y agoI can see how embedding XML could be useful, but it's hard for my brain to parse. It keeps telling me some quotes missing somewhere. Maybe I'm just being anti-XML, but I don't see this getting much traction.
- hardwaresofton 13y agoI 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
- jonahx 13y agoIt 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...
- antoinec 13y agoApparently, you don't use this instead of another framework, but with (http://facebook.github.io/react/docs/common-questions.html http://facebook.github.io/react/docs/common-questions.html). To me, the closest existing thing to this would be Coffeescript as both need to be compiled into plain Javascript.
- jonahx 13y agoOkay, so I can use it with other libraries. But they haven't told me why I would. What problems, eg, is it solving that angular is not, or in a better way than angular does?
- peterhunt 13y agoThat's a great question. React is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfills the role of the view (and maybe the controller, depending on your definition). React's technique is to break your view down into smaller, composable components. These components provide a render() method which specifies how the component will generate its markup. render() can either return normal DOM elements (like <div>s) or can return other components. When your data changes, the render() method is called again. We compare the old render()'d version with the new one and the framework determines the most efficient way to update the DOM. Often this will be faster than hand-coding it, as React knows about the entire state of the page and can do cool tricks like batching reads and writes. The way we're able to pull this off is by constructing a very fast, lightweight representation of the DOM which knows which parts are dirtied and which parts are clean. Because this rerender is so fast (on the order of 1ms for TodoMVC), we don't need the end user to explicitly specify data bindings. We've found that this is an easy way to build apps. We have many examples of using React with Backbone as the backend, or using it in conjunction with something like Bootstrap's JS widgets. They're available at https://github.com/facebook/react/tree/master/examples/ https://github.com/facebook/react/tree/master/examples/. Does this answer your question? As we've just launched I could definitely use some feedback on how we could explain it better!
- achalv 13y agoMeh.
- hrabago 13y agoI'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".
- darkchasma 13y agoI'm confused, every example is 100 times the code I would write using straight html... Is there a benefit I'm missing?
- marshray 13y agoIt 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 13y ago>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 13y agoRight, 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.
- instakill 13y agoI'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 13y agoWe 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/ 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.
- deleted 13y ago[deleted]
- wycats 13y agoThere's already a library named react.js: http://www.reactjs.com/ http://www.reactjs.com/
- collypops 13y agoHopefully they're as humble as the creators of amber.js
- Torn 13y agoemberjs
- lukegb 13y agoAaaah, the orange and purple. It's burning my eyes.
- lingben 13y agoI thought you were exaggerating! jeebuz... who thought that was a good idea??!?
- spyder 13y agoand also this: https://github.com/jeffbski/react https://github.com/jeffbski/react
- whatsup 13y agowhat is wrong with writing HTML?
- amasad 13y agoLooks 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 13y ago> 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 13y agoAny 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?
- colevscode 13y agoWe added react to hellojs so you can try it out easily: https://hellojs.backliftapp.com/search/React https://hellojs.backliftapp.com/search/React This includes the compiled version, which isn't included by default.
- bsimpson 13y agoOne 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 13y agoThe 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 13y agoI 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 13y ago+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 https://news.ycombinator.com/item?id=5790799
- peterhunt 13y agoI'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 http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood
- leecGoimik7 13y agoMixing 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.
- d0m 13y agoGot 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).
- devniel 13y agoI have just started to learn Angular :(
- brianr 13y agoThis 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 13y agoRight now our approach is to interoperate with other libraries. Bootstrap works pretty well with React (see https://github.com/facebook/react/tree/master/examples/jquery-bootstrap https://github.com/facebook/react/tree/master/examples/jquer... 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 :)
- ch0wn 13y agoI'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.
- ssharp 13y agoI 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.
- deleted 13y ago[deleted]
- mckoss 13y agoI really have the embedded XML in javascript code. I'm much more interested in the Angular or Dart approaches to building web applications.
- DelvarWorld 13y agoLOL DOM IN UR JAVASKRIPT (no really, you're fired)
- sebmarkbage 13y agoConsider 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.
- avdd_ 13y agoWhat is with this low-contrast trend?? Are the complainers not loud enough? Please stop doing that!
- Kiro 13y agoIt looks nice. What complainers?
- gren 13y agoGreat ideas IMO but what an ugly API: React.unmountAndReleaseReactRootNode(document.body);
- shaydoc 13y agoJust had try doing a KnockoutJS version of this also : *http://anexiledderryman.com/post/51714264769/facebooks-new-react-javascript-library-tutorial http://anexiledderryman.com/post/51714264769/facebooks-new-r...
- mavdi 13y agoThis is terrible, so did we really not learn anything from PHP days? Are we seriously going to mix markup and logic again?
- mhd 13y agoSo 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...
- andreypopp 13y agoFYI, 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 https://github.com/andreypopp/reactify
- andreypopp 13y agoFixed now!
- lardissone 13y agoOMG, JSX.. why? just why?? Stop ruining js people!