React was open sourced two weeks ago and it's time for a little round-up of what has been going on.
## Khan Academy Question Editor {#khan-academy-question-editor}
## Khan Academy Question Editor
It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for her contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Sophie wrote about her experience using React:
@ -16,7 +16,7 @@ It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outsid
>
> [Read the full post...](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
## Pimp my Backbone.View (by replacing it with React) {#pimp-my-backboneview-by-replacing-it-with-react}
## Pimp my Backbone.View (by replacing it with React)
[Paul Seiffert](https://blog.mayflower.de/) wrote a blog post that explains how to integrate React into Backbone applications.
@ -28,7 +28,7 @@ It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outsid
>
> [Read the full post...](https://blog.mayflower.de/3937-Backbone-React.html)
## Using facebook's React with require.js {#using-facebooks-react-with-requirejs}
## Using facebook's React with require.js
[Mario Mueller](http://blog.xenji.com/) wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.
@ -36,7 +36,7 @@ It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outsid
>
> [Read the full post...](http://blog.xenji.com/2013/06/facebooks-react-require-js.html)
## Origins of React {#origins-of-react}
## Origins of React
[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.
## Some quick thoughts on React {#some-quick-thoughts-on-react}
## Some quick thoughts on React
[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is.
@ -19,7 +19,7 @@ Since the launch we have received a lot of feedback and are actively working on
>
> [Read the full post...](http://www.andrewgreig.com/637/)
## React and Socket.IO Chat Application {#react-and-socketio-chat-application}
## React and Socket.IO Chat Application
[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
@ -28,7 +28,7 @@ Since the launch we have received a lot of feedback and are actively working on
>
> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
## React and Other Frameworks {#react-and-other-frameworks}
## React and Other Frameworks
[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.
@ -40,7 +40,7 @@ Since the launch we have received a lot of feedback and are actively working on
In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
## Web Components: React & x-tags {#web-components-react--x-tags}
## Web Components: React & x-tags
Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React.
@ -49,7 +49,7 @@ Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.v
>
> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
## React TodoMVC Example {#react-todomvc-example}
## React TodoMVC Example
[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version.
@ -60,7 +60,7 @@ Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.v
>
> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react)
## JSX is not HTML {#jsx-is-not-html}
## JSX is not HTML
Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:
We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
## react-tools {#react-tools}
## react-tools
* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
* Freeze our esprima dependency.
## React {#react}
## React
* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
## JSXTransformer {#jsxtransformer}
## JSXTransformer
* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
## Moving From Backbone To React {#moving-from-backbone-to-react}
## Moving From Backbone To React
[Clay Allsopp](https://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
@ -17,7 +17,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
>
> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
## Grunt Task for JSX {#grunt-task-for-jsx}
## Grunt Task for JSX
[Eric Clemmons](https://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your JavaScript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
@ -45,7 +45,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
>
> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
@ -57,13 +57,13 @@ The highlight of this week is that an interaction-heavy app has been ported to R
>
> [Read the full post...](http://joelburget.com/react/)
## JSRomandie Meetup {#jsromandie-meetup}
## JSRomandie Meetup
[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
@ -81,7 +81,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
>
> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
## Tutorial in Plain JavaScript {#tutorial-in-plain-javascript}
## Tutorial in Plain JavaScript
We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain JavaScript.
React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
## What is React.autoBind? {#what-is-reactautobind}
## What is React.autoBind?
If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](https://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
@ -33,7 +33,7 @@ React.createClass({
```
## What's Changing in v0.4? {#whats-changing-in-v04}
## What's Changing in v0.4?
After using `React.autoBind` for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within `React.createClass` will already be bound to the correct instance.
React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
## Khan Academy {#khan-academy}
## Khan Academy
[Ben Kamens](http://bjk5.com/) explains how [Sophie Alpert](http://sophiebits.com/) and [Joel Burget](http://joelburget.com/) are promoting React inside of [Khan Academy](https://www.khanacademy.org/). They now have three projects in the works using React.
@ -21,7 +21,7 @@ The best part is the demo of how React reconciliation process makes live editing
Over the past several weeks, members of our team, [Pete Hunt](http://www.petehunt.net/) and [Paul O'Shannessy](http://zpao.com/), answered many questions that were asked in the [React group](https://groups.google.com/forum/#!forum/reactjs). They give a good overview of how to integrate React with other libraries and APIs through the use of [Mixins](/docs/reusable-components.html) and [Lifecycle Methods](/docs/working-with-the-browser.html).
@ -44,13 +44,13 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
>
> * [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
## Introduction to React Screencast {#introduction-to-react-screencast}
## Introduction to React Screencast
[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults.
## Validation {#validation}
## Validation
Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast.
@ -29,7 +29,7 @@ React.createClass({
```
## Default Values {#default-values}
## Default Values
One common pattern we've seen with our React code is to do something like this:
@ -13,7 +13,7 @@ React v0.4 has some big changes. We've also restructured the documentation to be
When you're ready, [go download it](/docs/installation.html)!
### React {#react}
### React
* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
* Support for more DOM elements and attributes (e.g., `<canvas>`)
@ -25,7 +25,7 @@ When you're ready, [go download it](/docs/installation.html)!
* We've implemented an improved synthetic event system that conforms to the W3C spec.
* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as its second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
### JSX {#jsx}
### JSX
* Support for comment nodes `<div>{/* this is a comment and won't be rendered */}</div>`
* Children are now transformed directly into arguments instead of being wrapped in an array
@ -33,7 +33,7 @@ When you're ready, [go download it](/docs/installation.html)!
Previously this would be transformed into `React.DOM.div(null, [Component1(null), Component2(null)])`.
If you were using React without JSX previously, your code should still work.
### react-tools {#react-tools}
### react-tools
* Fixed a number of bugs when transforming directories
* No longer re-write `require()`s to be relative unless specified
We launched the [React Facebook Page](https://www.facebook.com/react) along with the React v0.4 launch. 700 people already liked it to get updated on the project :)
[Sophie Alpert](http://sophiebits.com/) from [Khan Academy](https://www.khanacademy.org/) worked on a cross-browser implementation of `onChange` event that landed in v0.4. She wrote a blog post explaining the various browser quirks she had to deal with.
@ -16,7 +16,7 @@ We launched the [React Facebook Page](https://www.facebook.com/react) along with
> [Read the full post...](http://sophiebits.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html)
## React Samples {#react-samples}
## React Samples
Learning a new library is always easier when you have working examples you can play with. [jwh](https://github.com/jhw) put many of them on his [react-samples GitHub repo](https://github.com/jhw/react-samples).
@ -50,7 +50,7 @@ Learning a new library is always easier when you have working examples you can p
[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](https://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
@ -64,21 +64,21 @@ React.renderComponent(
```
## JSX and ES6 Template Strings {#jsx-and-es6-template-strings}
## JSX and ES6 Template Strings
[Domenic Denicola](http://domenicdenicola.com/) wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.
[Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke), React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.
[Pete Hunt](http://www.petehunt.net/) rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.
React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.
## React {#react}
## React
* `setState` callbacks are now executed in the scope of your component.
* `click` events now work on Mobile Safari.
@ -16,7 +16,7 @@ React v0.4.1 is a small update, mostly containing correctness fixes. Some code h
* Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
## JSXTransformer {#jsxtransformer}
## JSXTransformer
* Improved environment detection so it can be run in a non-browser environment.
2. To allow you to write JSX without an external build step to transform that into JS.
## Packaging react.js {#packaging-reactjs}
## Packaging react.js
To make `react.js` available for use client-side, simply add `react` to your manifest, and declare the variant you'd like to use in your environment. When you use `:production`, the minified and optimized `react.min.js` will be used instead of the development version. For example:
@ -32,7 +32,7 @@ end
```
## Writing JSX {#writing-jsx}
## Writing JSX
When you name your file with `myfile.js.jsx`, `react-rails` will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.
`react-rails` takes advantage of the [asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html) that was introduced in Rails 3.1. A very important part of that pipeline is the `assets:precompile` Rake task. `react-rails` will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
## Installation {#installation}
## Installation
Installation follows the same process you're familiar with. You can install it globally with `gem install react-rails`, though we suggest you add the dependency to your `Gemfile` directly.
This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.
## React Game Tutorial {#react-game-tutorial}
## React Game Tutorial
[Caleb Cassel](https://twitter.com/CalebCassel) wrote a [step-by-step tutorial](https://rawgithub.com/calebcassel/react-demo/master/part1.html) about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
[Andrey Popp](http://andreypopp.com/) created a [Browserify](http://browserify.org/) helper to compile JSX files.
@ -27,7 +27,7 @@ This is the first Community Round-up where none of the items are from Facebook/I
## React Integration with Este {#react-integration-with-este}
## React Integration with Este
[Daniel Steigerwald](http://daniel.steigerwald.cz/) is now using React within [Este](https://github.com/steida/este), which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.
> [Check it out on GitHub...](https://github.com/zaim/react-stylus-boilerplate)
## WebFUI {#webfui}
## WebFUI
[Conrad Barski](http://lisperati.com/), author of the popular book [Land of Lisp](http://landoflisp.com/), wants to use React for his ClojureScript library called [WebFUI](https://github.com/drcode/webfui).
Today we're happy to announce the initial release of [PyReact](https://github.com/facebook/react-python), which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.
## Usage {#usage}
## Usage
Transform your JSX files via the provided `jsx` module:
@ -30,7 +30,7 @@ from react import source
react_js = source.path_for('react.min.js')
```
## Django {#django}
## Django
PyReact includes a JSX compiler for [django-pipeline](https://github.com/cyberdelia/django-pipeline). Add it to your project's pipeline settings like this:
@ -40,7 +40,7 @@ PIPELINE_COMPILERS = (
)
```
## Installation {#installation}
## Installation
PyReact is hosted on PyPI, and can be installed with `pip`:
@ -14,13 +14,13 @@ It's been three months since we open sourced React and it is going well. Some st
* 2 early adopters: [Khan Academy](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)
## Wolfenstein Rendering Engine Ported to React {#wolfenstein-rendering-engine-ported-to-react}
## Wolfenstein Rendering Engine Ported to React
[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183) file for the implementation.
[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.
@ -46,7 +46,7 @@ It's been three months since we open sourced React and it is going well. Some st
>
> [Read more ...](https://github.com/benjamn/meteor-react)
## React Page {#react-page}
## React Page
[Jordan Walke](https://github.com/jordwalke) implemented a complete React project creator called [react-page](https://github.com/facebook/react-page/). It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
@ -9,7 +9,7 @@ First, we are organizing a [React Hackathon](http://reactjshack-a-thon.splashtha
We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on [StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) using the tag [[reactjs]](http://stackoverflow.com/questions/tagged/reactjs). Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.
## JavaScript Jabber {#javascript-jabber}
## JavaScript Jabber
[Pete Hunt](http://www.petehunt.net/) and [Jordan Walke](https://github.com/jordwalke) were interviewed on [JavaScript Jabber](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.
@ -24,13 +24,13 @@ We've also reached a point where there are too many questions for us to handle d
> [Read the full conversation ...](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
## JSXTransformer Trick {#jsxtransformer-trick}
## JSXTransformer Trick
While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.
<divstyle="margin-left: 74px;"><blockquoteclass="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform("/** <ahref="https://twitter.com/jsx">@jsx</a> React.DOM */" + element.innerHTML).code</p>— Ross Allen (@ssorallen) <ahref="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
## Remarkable React {#remarkable-react}
## Remarkable React
[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writing _active apps_ using the DOM API and shows how React handles it.
@ -49,18 +49,18 @@ While this is not going to work for all the attributes since they are camelCased
> [Read More ...](http://www.phpied.com/remarkable-react/)
## Markdown in React {#markdown-in-react}
## Markdown in React
[Sophie Alpert](http://sophiebits.com/) converted [marked](https://github.com/chjj/marked), a Markdown JavaScript implementation, in React: [marked-react](https://github.com/sophiebits/marked-react). Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to `escape` will not introduce an XSS vulnerability.
[Renault John Lecoultre](https://twitter.com/renajohn) wrote [Unite](https://www.bugbuster.com/), an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
[Vjeux](http://blog.vjeux.com/) re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.
@ -9,16 +9,16 @@ The biggest change you'll notice as a developer is that we no longer support `cl
The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/docs/addons.html).
## Thanks to Our Community {#thanks-to-our-community}
## Thanks to Our Community
We added *22 new people* to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our `AUTHORS` file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.
It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!
## Changelog {#changelog}
## Changelog
### React {#react}
### React
* Memory usage improvements - reduced allocations in core which will help with GC pauses
* Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
@ -39,11 +39,11 @@ It's been awesome to see the things that people are building with React, and we
* Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
* Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
### React with Addons (New!) {#react-with-addons-new}
### React with Addons (New!)
* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](/docs/addons.html).
### JSX {#jsx}
### JSX
* No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you *must* change this to `className` or your components will be visually broken.
* Added warnings to the in-browser transformer to make it clear it is not intended for production use.
This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!
## Changelog {#changelog}
## Changelog
### React {#react}
### React
* Fixed bug with `<input type="range">` and selection events.
* Fixed bug with selection and focus.
* Made it possible to unmount components from the document root.
* Fixed bug for `disabled` attribute handling on non-`<input>` elements.
### React with Addons {#react-with-addons}
### React with Addons
* Fixed bug with transition and animation event detection.
[Alex Swan](http://bold-it.com/) implemented [Qu.izti.me](http://qu.izti.me/), a multi-player quiz game. It is real-time via Web Socket and mobile friendly.
@ -19,7 +19,7 @@ We organized a React hackathon last week-end in the Facebook Seattle office. 50
## Pump - Clojure bindings for React {#pump---clojure-bindings-for-react}
## Pump - Clojure bindings for React
[Alexander Solovyov](http://solovyov.net/) has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.
@ -52,7 +52,7 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
[Check it out on GitHub...](https://github.com/piranha/pump)
## JSXHint {#jsxhint}
## JSXHint
[Todd Kennedy](http://blog.selfassembled.org/) working at [Condé Nast](http://www.condenast.com/) implemented a wrapper on-top of [JSHint](http://www.jshint.com/) that first converts JSX files to JS.
@ -65,7 +65,7 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
> [Check it out on GitHub...](https://github.com/CondeNast/JSXHint)
## Turbo React {#turbo-react}
## Turbo React
[Ross Allen](https://twitter.com/ssorallen) working at [Mesosphere](http://mesosphere.io/) combined [Turbolinks](https://github.com/rails/turbolinks/), a library used by Ruby on Rails to speed up page transition, and React.
@ -79,7 +79,7 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
> [Check out the demo...](https://turbo-react.herokuapp.com/)
## Reactive Table {#reactive-table}
## Reactive Table
[Stoyan Stefanov](http://www.phpied.com/) continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.
@ -7,7 +7,7 @@ This is the 10th round-up already and React has come quite far since it was open
The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.
## Khan Academy - Officially moving to React {#khan-academy---officially-moving-to-react}
## Khan Academy - Officially moving to React
[Joel Burget](http://joelburget.com/) announced at Hack Reactor that new front-end code at Khan Academy should be written in React!
@ -22,14 +22,14 @@ The best part is that no drastic changes have been required to support all those
> [Read the full article](http://joelburget.com/backbone-to-react/)
## React: Rethinking best practices {#react-rethinking-best-practices}
## React: Rethinking best practices
[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
## Server-side React with PHP {#server-side-react-with-php}
## Server-side React with PHP
[Stoyan Stefanov](http://www.phpied.com/)'s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.
@ -50,7 +50,7 @@ The best part is that no drastic changes have been required to support all those
Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):
@ -89,13 +89,13 @@ By default, React "re-renders" all the components when anything changes. This is
The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.
## Guess the filter {#guess-the-filter}
## Guess the filter
[Connor McSheffrey](http://conr.me) implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
[Andrew Betts](http://trib.tv/), director of the [Financial Times Labs](http://labs.ft.com/), posted an article comparing [FruitMachine](https://github.com/ftlabs/fruitmachine) and React.
@ -105,7 +105,7 @@ The fact that you can control when components are rendered is a very important c
Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.
## React Brunch {#react-brunch}
## React Brunch
[Matthew McCray](http://elucidata.net/) implemented [react-brunch](https://npmjs.org/package/react-brunch), a JSX compilation step for [Brunch](http://brunch.io/).
@ -117,7 +117,7 @@ Even though we weren't inspired by FruitMachine (React has been used in producti
This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!
## Super VanJS 2013 Talk {#super-vanjs-2013-talk}
## Super VanJS 2013 Talk
[Steve Luscher](https://github.com/steveluscher) working at [LeanPub](https://leanpub.com/) made a 30 min talk at [Super VanJS](https://twitter.com/vanjs). He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.
[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](/tips/introduction.html)!
@ -30,7 +30,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
- [False in JSX](/tips/false-in-jsx.html)
## Intro to the React Framework {#intro-to-the-react-framework}
## Intro to the React Framework
[Pavan Podila](http://blog.pixelingene.com/) wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.
@ -40,7 +40,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
> [Read the full article ...](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)
[Brian Kim](https://github.com/brainkim) wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.
@ -48,13 +48,13 @@ This round-up is the proof that React has taken off from its Facebook's root: it
[Eric Clemmons](https://ericclemmons.github.io/) is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
[Todd Kennedy](http://tck.io/) working at Condé Nast wrote [JSXHint](https://github.com/CondeNast/JSXHint) and explains in a blog post his perspective on JSX.
@ -79,13 +79,13 @@ This round-up is the proof that React has taken off from its Facebook's root: it
> [Read the full article...](http://tck.io/posts/jsxhint_and_react.html)
## Photo Gallery {#photo-gallery}
## Photo Gallery
[Maykel Loomans](http://miekd.com/), designer at Instagram, wrote a gallery for photos he shot using React.
<divstyle="width: 320px;"><blockquoteclass="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <ahref="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>— Ryan Seddon (@ryanseddon) <ahref="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div>
React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](https://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
## The Future of JavaScript MVC {#the-future-of-javascript-mvc}
## The Future of JavaScript MVC
[David Nolen](https://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
@ -20,7 +20,7 @@ React got featured on the front-page of Hacker News thanks to the Om library. If
## Scroll Position with React {#scroll-position-with-react}
## Scroll Position with React
Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
@ -43,7 +43,7 @@ Managing the scroll position when new content is inserted is usually very tricky
> [Check out the blog article...](http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html)
## Lights Out {#lights-out}
## Lights Out
React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](/docs/animation.html) to implement animations.
[Stoyan Stefanov](http://www.phpied.com/) wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json.
@ -59,13 +59,13 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
[Check out the blog post...](http://www.phpied.com/reactivetable-bookmarklet/)
## MontageJS Tutorial in React {#montagejs-tutorial-in-react}
## MontageJS Tutorial in React
[Ross Allen](https://twitter.com/ssorallen) implemented [MontageJS](http://montagejs.org/)'s [Reddit tutorial](http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html) in React. This is a good opportunity to compare the philosophies of the two libraries.
[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
## Writing Good React Components {#writing-good-react-components}
## Writing Good React Components
[William Högman Rudenmalm](http://blog.whn.se/) wrote an article on how to write good React components. This is full of good advice.
@ -78,7 +78,7 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
> [Read the full article ...](http://blog.whn.se/post/69621609605/writing-good-react-components)
## Hoodie React TodoMVC {#hoodie-react-todomvc}
## Hoodie React TodoMVC
[Sven Lito](http://svenlito.com/) integrated the React TodoMVC example within an [Hoodie](http://hood.ie/) web app environment. This should let you get started using Hoodie and React.
@ -88,7 +88,7 @@ hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
[Check out on GitHub...](https://github.com/hoodiehq/hoodie-react-todomvc)
## JSX Compiler {#jsx-compiler}
## JSX Compiler
Ever wanted to have a quick way to see what a JSX tag would be converted to? [Tim Yung](http://www.yungsters.com/) made a page for it.
@ -97,6 +97,6 @@ Ever wanted to have a quick way to see what a JSX tag would be converted to? [Ti
## Random Tweet {#random-tweet}
## Random Tweet
<center><blockquoteclass="twitter-tweet"lang="en"><p>.<ahref="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <ahref="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn't force you to rewrite so much code <ahref="https://twitter.com/search?q=%23reactjs&src=hash">#reactjs</a></p>— David Nolen (@swannodette) <ahref="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center>
Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!
## React Touch {#react-touch}
## React Touch
[Pete Hunt](http://www.petehunt.net/) wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.
@ -15,14 +15,14 @@ Happy holidays! This blog post is a little-late Christmas present for all the Re
[Try out the demos!](https://petehunt.github.io/react-touch/)
## Introduction to React {#introduction-to-react}
## Introduction to React
[Stoyan Stefanov](http://www.phpied.com/) talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.
## JSX: E4X The Good Parts {#jsx-e4x-the-good-parts}
## JSX: E4X The Good Parts
JSX is often compared to the now defunct E4X, [Vjeux](http://blog.vjeux.com/) went over all the E4X features and explained how JSX is different and hopefully doesn't repeat the same mistakes.
@ -35,7 +35,7 @@ JSX is often compared to the now defunct E4X, [Vjeux](http://blog.vjeux.com/) we
[Geert Pasteels](http://enome.be/nl) made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!
@ -60,7 +60,7 @@ componentWillUnmount: function () {
[Check it out on GitHub...](https://github.com/Enome/react.io)
## cssobjectify {#cssobjectify}
## cssobjectify
[Andrey Popp](http://andreypopp.com/) implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.
@ -89,7 +89,7 @@ var MyComponent = React.createClass({
[Check it out on GitHub...](https://github.com/andreypopp/cssobjectify)
## ngReact {#ngreact}
## ngReact
[David Chang](http://davidandsuzi.com/) working at [HasOffer](http://www.hasoffers.com/) wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.
@ -99,7 +99,7 @@ var MyComponent = React.createClass({
> [Read the full article...](http://davidandsuzi.com/ngreact-react-components-in-angular/)
## vim-jsx {#vim-jsx}
## vim-jsx
[Max Wang](https://github.com/mxw) made a vim syntax highlighting and indentation plugin for vim.
@ -112,6 +112,6 @@ var MyComponent = React.createClass({
> [View on GitHub...](https://github.com/mxw/vim-jsx)
## Random Tweet {#random-tweet}
## Random Tweet
<center><blockquoteclass="twitter-tweet"lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>— Eric Florenzano (@ericflo) <ahref="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center>
The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.
## React Baseline {#react-baseline}
## React Baseline
React is only one-piece of your web application stack. [Mark Lussier](https://github.com/intabulas) shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.
@ -18,7 +18,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)
## Animal Sounds {#animal-sounds}
## Animal Sounds
[Josh Duck](http://joshduck.com/) used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
@ -26,7 +26,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
[Download the app...](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
## React Rails Tutorial {#react-rails-tutorial}
## React Rails Tutorial
[Selem Delul](http://selem.im) bundled the [React Tutorial](/tutorial/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
@ -41,7 +41,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
>
> [View on GitHub...](https://github.com/necrodome/react-rails-tutorial)
## Mixing with Backbone {#mixing-with-backbone}
## Mixing with Backbone
[Eldar Djafarov](http://eldar.djafarov.com/) implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.
@ -50,7 +50,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
## React Infinite Scroll {#react-infinite-scroll}
## React Infinite Scroll
[Guillaume Rivals](https://twitter.com/guillaumervls) implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
@ -67,13 +67,13 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
[Try it out on GitHub!](https://github.com/guillaumervls/react-infinite-scroll)
## Web Components Style {#web-components-style}
## Web Components Style
[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
[View the source on JSFiddle...](http://jsfiddle.net/SubtleGradient/ue2Aa)
## React vs Angular {#react-vs-angular}
## React vs Angular
React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31/react-vs-angular/) wrote an opinionated post on the subject.
@ -85,6 +85,6 @@ React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31
## Random Tweet {#random-tweet}
## Random Tweet
<div><blockquoteclass="twitter-tweet"lang="en"><p>Really intrigued by React.js. I've looked at all JS frameworks, and excepting <ahref="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>— Jonas Nicklas (@jonicklas) <ahref="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></div>
@ -7,14 +7,14 @@ Interest in React seems to have surged ever since David Nolen ([@swannodette](ht
In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.
## "React: Another Level of Indirection" {#react-another-level-of-indirection}
## "React: Another Level of Indirection"
To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnormand)) of [LispCast](http://lispcast.com) makes the case for [React from a general functional programming standpoint](http://www.lispcast.com/react-another-level-of-indirection) and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript".
> The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.
>
> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)
## Reagent: Minimalistic React for ClojureScript {#reagent-minimalistic-react-for-clojurescript}
## Reagent: Minimalistic React for ClojureScript
Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
> It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
@ -24,7 +24,7 @@ Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https
> [Check it out on GitHub...](https://holmsand.github.io/reagent/)
## Functional DOM programming {#functional-dom-programming}
## Functional DOM programming
React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt ([@floydophone](https://twitter.com/floydophone)) explores how one would go about [writing web apps in a functional manner](https://medium.com/p/67d81637d43). Spoiler alert:
@ -38,7 +38,7 @@ Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
## Kioo: Separating markup and logic {#kioo-separating-markup-and-logic}
## Kioo: Separating markup and logic
[Creighton Kirkendall](https://github.com/ckirkendall) created [Kioo](https://github.com/ckirkendall/kioo), which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.
A basic example from github:
@ -85,7 +85,7 @@ A basic example from github:
(om/root app-state my-page (.-body js/document))
```
## Om {#om}
## Om
In an interview with David Nolen, Tom Coupland ([@tcoupland](https://twitter.com/tcoupland)) of InfoQ provides a nice summary of recent developments around Om ("[Om: Enhancing Facebook's React with Immutability](http://www.infoq.com/news/2014/01/om-react)").
@ -93,7 +93,7 @@ In an interview with David Nolen, Tom Coupland ([@tcoupland](https://twitter.com
>
> [Read the full interview...](http://www.infoq.com/news/2014/01/om-react)
### A slice of React, ClojureScript and Om {#a-slice-of-react-clojurescript-and-om}
### A slice of React, ClojureScript and Om
Fredrik Dyrkell ([@lexicallyscoped](https://twitter.com/lexicallyscoped)) rewrote part of the [React tutorial in both ClojureScript and Om](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html), along with short, helpful explanations.
@ -105,21 +105,21 @@ In a separate post, Dyrkell breaks down [how to build a binary clock component](
### Time Travel: Implementing undo in Om {#time-travel-implementing-undo-in-om}
### Time Travel: Implementing undo in Om
David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
### A Step-by-Step Om Walkthrough {#a-step-by-step-om-walkthrough}
### A Step-by-Step Om Walkthrough
[Josh Lehman](http://www.joshlehman.me) took the time to create an extensive [step-by-step walkthrough](http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/) of the React tutorial in Om. The well-documented source is on [github](https://github.com/jalehman/omtut-starter).
### Omkara {#omkara}
### Omkara
[brendanyounger](https://github.com/brendanyounger) created [omkara](https://github.com/brendanyounger/omkara), a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.
### Om Experience Report {#om-experience-report}
### Om Experience Report
Adam Solove ([@asolove](https://twitter.com/asolove/)) [dives a little deeper into Om, React and ClojureScript](http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html). He shares some helpful tips he gathered while building his [CartoCrayon](https://github.com/asolove/carto-crayon) prototype.
## Not-so-random Tweet {#not-so-random-tweet}
## Not-so-random Tweet
<div><blockquoteclass="twitter-tweet"lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>— Adam Solove (@asolove) <ahref="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.
## React in a nutshell {#react-in-a-nutshell}
## React in a nutshell
Got five minutes to pitch React to your coworkers? John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) put together [this excellent and refreshing slideshow](http://slid.es/johnlynch/reactjs):
React core team member Christopher Chedeau ([@vjeux](https://twitter.com/vjeux)) explores the innards of React's tree diffing algorithm in this [extensive and well-illustrated post](http://calendar.perfplanet.com/2013/diff/). <figure>[](http://calendar.perfplanet.com/2013/diff/)</figure>
@ -22,7 +22,7 @@ While we're talking about tree diffing: Matt Esch ([@MatthewEsch](https://twitte
## Many, many new introductions to React! {#many-many-new-introductions-to-react}
## Many, many new introductions to React!
@ -40,23 +40,23 @@ Taylor Lapeyre ([@taylorlapeyre](https://twitter.com/taylorlapeyre)) wrote anoth
[This "Deep explanation for newbies"](http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&utm_medium=post&utm_campaign=echojs) by [@ProJavaScript](https://twitter.com/ProJavaScript) explains how to get started building a React game without using the optional JSX syntax.
### React around the world {#react-around-the-world}
### React around the world
It's great to see the React community expand internationally. [This site](http://habrahabr.ru/post/189230/) features a React introduction in Russian.
### React tutorial series {#react-tutorial-series}
### React tutorial series
[Christopher Pitt](https://medium.com/@followchrisp) explains [React Components](https://medium.com/react-tutorials/828c397e3dc8) and [React Properties](https://medium.com/react-tutorials/ef11cd55caa0). The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the [other posts in his React Tutorial series](https://medium.com/react-tutorials), e.g. on using [React + Backbone Model](https://medium.com/react-tutorials/8aaec65a546c) and [React + Backbone Router](https://medium.com/react-tutorials/c00be0cf1592).
### Beginner tutorial: Implementing the board game Go {#beginner-tutorial-implementing-the-board-game-go}
### Beginner tutorial: Implementing the board game Go
[Chris LaRose](http://cjlarose.com/) walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his [tutorial](http://cjlarose.com/2014/01/09/react-board-game-tutorial.html) or go straight to the [code](https://github.com/cjlarose/react-go).
### Egghead.io video tutorials {#eggheadio-video-tutorials}
### Egghead.io video tutorials
Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/v/rFvZydtmsxM) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/v/rFvZydtmsxM)], [[part 2](http://www.youtube-nocookie.com/v/5yvFLrt7N8M)]
### "React: Finally, a great server/client web stack" {#react-finally-a-great-serverclient-web-stack}
### "React: Finally, a great server/client web stack"
Eric Florenzano ([@ericflo](https://twitter.com/ericflo)) sheds some light on what makes React perfect for server rendering:
@ -66,12 +66,12 @@ Eric Florenzano ([@ericflo](https://twitter.com/ericflo)) sheds some light on wh
> [Read the full post...](http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/)
## Building a complex React component {#building-a-complex-react-component}
## Building a complex React component
[Matt Harrison](http://matt-harrison.com/) walks through the process of [creating an SVG-based Resistance Calculator](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/) using React. <figure>[](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
## Random Tweets {#random-tweets}
## Random Tweets
<div><blockquoteclass="twitter-tweet"lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>— Anton Astashov (@anton_astashov) <ahref="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
@ -20,7 +20,7 @@ We've also published version `0.9.0-rc1` of the `react` and `react-tools` packag
Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
## Upgrade Notes {#upgrade-notes}
## Upgrade Notes
In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
@ -53,11 +53,11 @@ We believe this new behavior is more helpful and eliminates cases where unwanted
In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### Breaking Changes {#breaking-changes}
#### Breaking Changes
- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
@ -69,7 +69,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
- `this.context` on components is now reserved for internal use by React
#### New Features {#new-features}
#### New Features
- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
- Added a new tool for profiling React components and identifying places where defining `shouldComponentUpdate` can give performance improvements
@ -92,7 +92,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
- Added support for `onReset` on `<form>` elements
- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
#### Bug Fixes {#bug-fixes}
#### Bug Fixes
- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
@ -112,7 +112,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
- General performance fixes, memory optimizations, improvements to warnings and error messages
### React with Addons {#react-with-addons}
### React with Addons
- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
- `React.addons.TransitionGroup` was added as a more general animation wrapper
@ -122,7 +122,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
- Performance optimizations for CSSTransitionGroup
- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
### JSX Compiler and react-tools Package {#jsx-compiler-and-react-tools-package}
### JSX Compiler and react-tools Package
- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
@ -20,7 +20,7 @@ As always, the release is available for download from the CDN:
We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
## What’s New? {#whats-new}
## What’s New?
This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.
@ -28,7 +28,7 @@ We've also added to the add-ons build [React.addons.TestUtils](/docs/test-utils.
We've also made several other improvements and a few breaking changes; the full changelog is provided below.
## JSX Whitespace {#jsx-whitespace}
## JSX Whitespace
In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
@ -61,11 +61,11 @@ We believe this new behavior is more helpful and eliminates cases where unwanted
In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### Breaking Changes {#breaking-changes}
#### Breaking Changes
- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
@ -77,7 +77,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
- `this.context` on components is now reserved for internal use by React
#### New Features {#new-features}
#### New Features
- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
@ -102,7 +102,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
- Added support for `onReset` on `<form>` elements
- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
#### Bug Fixes {#bug-fixes}
#### Bug Fixes
- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
@ -123,7 +123,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
- General performance fixes, memory optimizations, improvements to warnings and error messages
### React with Addons {#react-with-addons}
### React with Addons
- `React.addons.TestUtils` was added to help write unit tests
- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
@ -134,7 +134,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
- Performance optimizations for CSSTransitionGroup
- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
### JSX Compiler and react-tools Package {#jsx-compiler-and-react-tools-package}
### JSX Compiler and react-tools Package
- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.
## React in the Real World {#react-in-the-real-world}
## React in the Real World
### Facebook Lookback video editor {#facebook-lookback-video-editor}
### Facebook Lookback video editor
Large parts of Facebook's web frontend are already powered by React. The recently released Facebook [Lookback video and its corresponding editor](https://www.facebook.com/lookback/edit/) are great examples of a complex, real-world React app.
### Russia's largest bank is now powered by React {#russias-largest-bank-is-now-powered-by-react}
### Russia's largest bank is now powered by React
Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in [this post by Vyacheslav Slinko](https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg).
### Relato {#relato}
### Relato
[Relato](https://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!
### Makona Editor {#makona-editor}
### Makona Editor
John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
### Create Chrome extensions using React {#create-chrome-extensions-using-react}
### Create Chrome extensions using React
React is in no way limited to just web pages. Brandon Tilley ([@BinaryMuse](https://twitter.com/BinaryMuse)) just released a detailed walk-through of [how he built his Chrome extension "Fast Tab Switcher" using React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html).
Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a simple [twitter streaming client using node, socket.io and React](http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/).
### Sproutsheet {#sproutsheet}
### Sproutsheet
[Sproutsheet](http://sproutsheet.com/) is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It's currently in beta and supports localStorage, and data/image import and export.
[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](https://forresto.github.io/prototyping/react/) in React.
### Ultimate Tic-Tac-Toe Game in React {#ultimate-tic-tac-toe-game-in-react}
### Ultimate Tic-Tac-Toe Game in React
Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](https://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
### ReactJS Gallery {#reactjs-gallery}
### ReactJS Gallery
[Emanuele Rampichini](https://github.com/lele85)'s [ReactJS Gallery](https://github.com/lele85/ReactGallery) is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.
@ -59,29 +59,29 @@ Emanuele shared this awesome demo video with us:
## React Components {#react-components}
## React Components
### Table Sorter {#table-sorter}
### Table Sorter
[Table Sorter](https://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
### Static-search {#static-search}
### Static-search
Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search indexer](https://github.com/dchest/static-search) in Go, along with a [React-based web front-end](http://www.codingrobots.com/search/) that consumes search result via JSON.
### Lorem Ipsum component {#lorem-ipsum-component}
### Lorem Ipsum component
[Martin Andert](https://github.com/martinandert) created [react-lorem-component](https://github.com/martinandert/react-lorem-component), a simple component for all your placeholding needs.
### Input with placeholder shim {#input-with-placeholder-shim}
### Input with placeholder shim
[react-input-placeholder](enigma-io/react-input-placeholder) by [enigma-io](@enigma-io) is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
### diContainer {#dicontainer}
### diContainer
[dicontainer](https://github.com/SpektrumFM/dicontainer) provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.
## React server rendering {#react-server-rendering}
## React server rendering
Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](https://twitter.com/hichaelmart)) walks through the necessary steps.
@ -89,6 +89,6 @@ Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [rea
## Random Tweet {#random-tweet}
## Random Tweet
<div><blockquoteclass="twitter-tweet"lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>— Camlistore (@Camlistore) <ahref="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.
## "Little framework BIG splash" {#little-framework-big-splash}
## "Little framework BIG splash"
Let's start with yet another refreshing introduction to React: Craig Savolainen ([@maedhr](https://twitter.com/maedhr)) walks through some first steps, demonstrating [how to build a Google Maps component](http://infinitemonkeys.influitive.com/little-framework-big-splash) using React.
## Architecting your app with react {#architecting-your-app-with-react}
[Architecting your app with react](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
@ -19,13 +19,13 @@ We're looking forward to part 2!
>
> [Read the full article...](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
## React vs. async DOM manipulation {#react-vs-async-dom-manipulation}
## React vs. async DOM manipulation
Eliseu Monar ([@eliseumds](https://twitter.com/eliseumds))'s post "[ReactJS vs async concurrent rendering](http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering)" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.
## React, Scala and the Play Framework {#react-scala-and-the-play-framework}
## React, Scala and the Play Framework
[Matthias Nehlsen](http://matthiasnehlsen.com/) wrote a detailed introductory piece on [React and the Play Framework](http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/), including a helpful architectural diagram of a typical React app.
Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.
@ -34,17 +34,17 @@ In [another article](http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and
Also check out his [talk](http://m.ustream.tv/recorded/42780242) at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.
## React and Backbone {#react-and-backbone}
## React and Backbone
The folks over at [Venmo](https://venmo.com/) are using React in conjunction with Backbone.
Thomas Boyt ([@thomasaboyt](https://twitter.com/thomasaboyt)) wrote [this detailed piece](http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html) about why React and Backbone are "a fantastic pairing".
## React vs. Ember {#react-vs-ember}
## React vs. Ember
Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](https://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
## React and plain old HTML {#react-and-plain-old-html}
## React and plain old HTML
Daniel Lo Nigro ([@Daniel15](https://twitter.com/Daniel15)) created [React-Magic](https://github.com/reactjs/react-magic), which leverages React to ajaxify plain old html pages and even [allows CSS transitions between pageloads](http://stuff.dan.cx/facebook/react-hacks/magic/red.php).
@ -54,15 +54,15 @@ Daniel Lo Nigro ([@Daniel15](https://twitter.com/Daniel15)) created [React-Magic
On a related note, [Reactize](https://turbo-react.herokuapp.com/) by Ross Allen ([@ssorallen](https://twitter.com/ssorallen)) is a similarly awesome project: A wrapper for Rails' [Turbolinks](https://github.com/rails/turbolinks/), which seems to have inspired John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) to then create [a server-rendered version using the JSX transformer in Rails middleware](http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/).
## React and Object.observe {#react-and-objectobserve}
## React and Object.observe
Check out [François de Campredon](https://github.com/fdecampredon)'s implementation of [TodoMVC based on React and ES6's Object.observe](https://github.com/fdecampredon/react-observe-todomvc/).
## React and Angular {#react-and-angular}
## React and Angular
Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [explains why he "decided to go with React instead of Angular.js"](https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE).
### ng-React Update {#ng-react-update}
### ng-React Update
[David Chang](https://github.com/davidchang) works through some performance improvements of his [ngReact](https://github.com/davidchang/ngReact) project. His post ["ng-React Update - React 0.9 and Angular Track By"](http://davidandsuzi.com/ngreact-update/) includes some helpful advice on boosting render performance for Angular components.
@ -77,11 +77,11 @@ React was also recently mentioned at ng-conf, where the Angular team commented o
## React and Web Components {#react-and-web-components}
## React and Web Components
Jonathan Krause ([@jonykrause](https://twitter.com/jonykrause)) offers his thoughts regarding [parallels between React and Web Components](http://jonykrau.se/posts/the-value-of-react), highlighting the value of React's ability to render pages on the server practically for free.
## Immutable React {#immutable-react}
## Immutable React
[Peter Hausel](http://pk11.kinja.com/) shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to [mori](https://npmjs.org/package/mori)), really taking advantage of the framework's one-way reactive data binding:
@ -90,16 +90,16 @@ Jonathan Krause ([@jonykrause](https://twitter.com/jonykrause)) offers his thoug
> [Read the full post](http://tech.kinja.com/immutable-react-1495205675)
## D3 and React {#d3-and-react}
## D3 and React
[Ben Smith](http://10consulting.com/) built some great SVG-based charting components using a little less of D3 and a little more of React: [D3 and React - the future of charting components?](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/)
## Om and React {#om-and-react}
## Om and React
Josh Haberman ([@joshhaberman](https://twitter.com/JoshHaberman)) discusses performance differences between React, Om and traditional MVC frameworks in "[A closer look at OM vs React performance](http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html)".
Speaking of Om: [Omchaya](https://github.com/sgrove/omchaya) by Sean Grove ([@sgrove](https://twitter.com/sgrove)) is a neat Cljs/Om example project.
## Random Tweets {#random-tweets}
## Random Tweets
<div><blockquoteclass="twitter-tweet"lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>— John Shimek (@varikin) <ahref="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
@ -20,7 +20,7 @@ We've also published version `0.10.0-rc1` of the `react` and `react-tools` packa
Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
## Clone On Mount {#clone-on-mount}
## Clone On Mount
The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
@ -47,25 +47,25 @@ These warnings and method forwarding are only enabled in the development build.
The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### New Features {#new-features}
#### New Features
* Added warnings to help migrate towards descriptors
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
* Added support for more attributes:
* `srcSet` for `<img>` to specify images at different pixel ratios
* `textAnchor` for SVG
#### Bug Fixes {#bug-fixes}
#### Bug Fixes
* Ensure all void elements don’t insert a closing tag into the markup.
* Ensure `className={false}` behaves consistently
* Ensure `this.refs` is defined, even if no refs are specified.
### Addons {#addons}
### Addons
* `update` function to deal with immutable data. [Read the docs](/docs/update.html)
### react-tools {#react-tools}
### react-tools
* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
@ -20,7 +20,7 @@ We've also published version `0.10.0` of the `react` and `react-tools` packages
Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
## Clone On Mount {#clone-on-mount}
## Clone On Mount
The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
@ -47,26 +47,26 @@ These warnings and method forwarding are only enabled in the development build.
The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### New Features {#new-features}
#### New Features
* Added warnings to help migrate towards descriptors
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
* Added support for more attributes:
* `srcSet` for `<img>` to specify images at different pixel ratios
* `textAnchor` for SVG
#### Bug Fixes {#bug-fixes}
#### Bug Fixes
* Ensure all void elements don’t insert a closing tag into the markup.
* Ensure `className={false}` behaves consistently
* Ensure `this.refs` is defined, even if no refs are specified.
### Addons {#addons}
### Addons
* `update` function to deal with immutable data. [Read the docs](/docs/update.html)
### react-tools {#react-tools}
### react-tools
* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
@ -7,17 +7,17 @@ When we launched React last spring, we purposefully decided not to call it 1.0.
Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.
## Descriptors {#descriptors}
## Descriptors
The first part of this is what we're calling "descriptors". I talked about this briefly in our [v0.10 announcements][v0.10]. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. `React.DOM.div()`, `MyComponent()`) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.
We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.
## API Cleanup {#api-cleanup}
## API Cleanup
This is really connected to everything. We want to keep the API as simple as possible and help developers [fall into the pit of success][pitofsuccess]. Enabling bad patterns with bad APIs is not success.
## ES6 {#es6}
## ES6
Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling `React.createClass(...)` isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:
@ -31,23 +31,23 @@ class MyComponent extends React.Component {
There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The `jsx` executable we ship with `react-tools` already supports transforming many parts of ES6 into code that will run on older browsers.
## Context {#context}
## Context
While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. Its use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
## Addons {#addons}
## Addons
As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".
## Browser Support {#browser-support}
## Browser Support
As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.
## Animations {#animations}
## Animations
Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.
## Miscellaneous {#miscellaneous}
## Miscellaneous
There are several other things I listed on [our projects page][projects] that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.
Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in [San Francisco](http://www.meetup.com/ReactJS-San-Francisco/) (courtesy of [Telmate](http://www.telmate.com)), and one in [London](http://www.meetup.com/London-React-User-Group/) (courtesy of [Stuart Harris](http://www.meetup.com/London-React-User-Group/members/105837542/), [Cain Ullah](http://www.meetup.com/London-React-User-Group/members/15509971/) and [Zoe Merchant](http://www.meetup.com/London-React-User-Group/members/137058242/)). These two events have been big successes; a second one in London is [already planned](http://www.meetup.com/London-React-User-Group/events/191406572/).
If you don't live near San Francisco or London, why not start one in your community?
## Complementary Tools {#complementary-tools}
## Complementary Tools
In case you haven't seen it, we've consolidated the tooling solution around React on [this wiki page](https://github.com/facebook/react/wiki/Complementary-Tools). Some of the notable recent entries include:
- [Ryan Florence](https://github.com/rpflorence) and [Michael Jackson](https://github.com/mjackson)'s [react-nested-router](https://github.com/rpflorence/react-nested-router), which is a translation of the Ember router API to React.
@ -19,7 +19,7 @@ In case you haven't seen it, we've consolidated the tooling solution around Reac
These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!
## React in Interesting Places {#react-in-interesting-places}
## React in Interesting Places
The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn't have imagined something like [Bruce Hauman](http://rigsomelight.com)'s [Flappy Bird ClojureScript port](http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html), whose interactive programming has been made possible through React:
@ -31,24 +31,24 @@ And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rende
Give us a shoutout on IRC or [React Google Groups](https://groups.google.com/forum/#!forum/reactjs) if you've used React in some Interesting places.
## Even More People Using React {#even-more-people-using-react}
## Even More People Using React
### Prismatic {#prismatic}
### Prismatic
[Prismatic](http://getprismatic.com/home) recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, [Om](https://github.com/swannodette/om). They detailed their very positive experience [here](http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/).
> Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.
### Adobe Brackets {#adobe-brackets}
### Adobe Brackets
[Kevin Dangoor](http://www.kevindangoor.com) works on [Brackets](http://brackets.io/?lang=en), the open-source code editor. After writing [his first impression on React](http://www.kevindangoor.com/2014/05/simplifying-code-with-react/), he followed up with another insightful [article](http://www.kevindangoor.com/2014/05/react-in-brackets/) on how to gradually make the code transition, how to preserve the editor's good parts, and how to tune Brackets' tooling around JSX.
> We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.
### Storehouse {#storehouse}
### Storehouse
[Storehouse](https://www.storehouse.co) (Apple Design Award 2014)'s web presence is build with React. Here's [an example story](https://www.storehouse.co/stories/y2ad-mexico-city-clouds). Congratulations on the award!
### Vim Awesome {#vim-awesome}
### Vim Awesome
[Vim Awesome](http://vimawesome.com), an open-source Vim plugins directory built on React, was just launched. Be sure to [check out the source code](https://github.com/divad12/vim-awesome) if you're curious to see an example of how to build a small single-page React app.
## Random Tweets {#random-tweets}
## Random Tweets
<blockquoteclass="twitter-tweet"lang="en"><p>Spent 12 hours so far with <ahref="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we've been doing JS frameworks wrong until now. React makes me happy.</p>— Paul Irwin (@paulirwin) <ahref="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>
@ -21,12 +21,12 @@ We've also published version `0.11.0-rc1` of the `react` and `react-tools` packa
Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
## `getDefaultProps` {#getdefaultprops}
## `getDefaultProps`
Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
## Rendering to `null` {#rendering-to-null}
## Rendering to `null`
Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
@ -49,7 +49,7 @@ render: function() {
```
## JSX Namespacing {#jsx-namespacing}
## JSX Namespacing
Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
@ -91,20 +91,20 @@ handleKeyDown: function(e) {
Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### Breaking Changes {#breaking-changes}
#### Breaking Changes
* `getDefaultProps()` is now called once per class and shared across all instances
#### New Features {#new-features}
#### New Features
* Rendering to `null`
* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
* New normalized `onBeforeInput` event
* `React.Children.count` has been added as a helper for counting the number of children
#### Bug Fixes {#bug-fixes}
#### Bug Fixes
* Re-renders are batched in more cases
* Events: `e.view` properly normalized
@ -118,24 +118,24 @@ Keyboard and mouse events also now include a normalized `e.getModifierState()` t
* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
* Added explicit warning when missing polyfills
### React With Addons {#react-with-addons}
### React With Addons
* PureRenderMixin
* Perf: a new set of tools to help with performance analysis
* Update: New `$apply` command to transform values
* TransitionGroup bug fixes with null elements, Android
### React NPM Module {#react-npm-module}
### React NPM Module
* Now includes the pre-built packages under `dist/`.
* `envify` is properly listed as a dependency instead of a peer dependency
### JSX {#jsx}
### JSX
* Added support for namespaces, eg `<Components.Checkbox />`
* JSXTransformer
* Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
* Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
* Fixed a bug preventing sourcemaps from working in Firefox
### React Tools Module {#react-tools-module}
### React Tools Module
* Improved readme with usage and API information
* Improved ES6 transforms available with `--harmony` option
* Added `--source-map-inline` option to the `jsx` executable
@ -28,12 +28,12 @@ We've also published version `0.11.0` of the `react` and `react-tools` packages
Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
## `getDefaultProps` {#getdefaultprops}
## `getDefaultProps`
Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
## Rendering to `null` {#rendering-to-null}
## Rendering to `null`
Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
@ -56,7 +56,7 @@ render: function() {
```
## JSX Namespacing {#jsx-namespacing}
## JSX Namespacing
Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
@ -98,34 +98,34 @@ handleKeyDown: function(e) {
Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
## Descriptors {#descriptors}
## Descriptors
In our [v0.10 release notes](/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
Along with this change to descriptors, `React.isValidComponent` and `React.PropTypes.component` now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of `MyComponent()`, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.
## Prop Type Validation {#prop-type-validation}
## Prop Type Validation
Previously `React.PropTypes` validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply `console.log` your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (*not throw*) an `Error` object. We then log the `error.message` property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an `Error` with your message instead.
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### Breaking Changes {#breaking-changes}
#### Breaking Changes
* `getDefaultProps()` is now called once per class and shared across all instances
* `MyComponent()` now returns a descriptor, not an instance
* `React.isValidComponent` and `React.PropTypes.component` validate *descriptors*, not component instances.
* Custom `propType` validators should return an `Error` instead of logging directly
#### New Features {#new-features}
#### New Features
* Rendering to `null`
* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
* New normalized `onBeforeInput` event
* `React.Children.count` has been added as a helper for counting the number of children
#### Bug Fixes {#bug-fixes}
#### Bug Fixes
* Re-renders are batched in more cases
* Events: `e.view` properly normalized
@ -139,24 +139,24 @@ Previously `React.PropTypes` validation worked by simply logging to the console.
* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
* Added explicit warning when missing polyfills
### React With Addons {#react-with-addons}
### React With Addons
* PureRenderMixin: a mixin which helps optimize "pure" components
* Perf: a new set of tools to help with performance analysis
* Update: New `$apply` command to transform values
* TransitionGroup bug fixes with null elements, Android
### React NPM Module {#react-npm-module}
### React NPM Module
* Now includes the pre-built packages under `dist/`.
* `envify` is properly listed as a dependency instead of a peer dependency
### JSX {#jsx}
### JSX
* Added support for namespaces, eg `<Components.Checkbox />`
* JSXTransformer
* Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
* Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
* Fixed a bug preventing sourcemaps from working in Firefox
### React Tools Module {#react-tools-module}
### React Tools Module
* Improved readme with usage and API information
* Improved ES6 transforms available with `--harmony` option
* Added `--source-map-inline` option to the `jsx` executable
It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)
## Atom moves to React {#atom-moves-to-react}
## Atom moves to React
[Atom, GitHub's code editor, is now using React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.
At the last [JSConf.us](http://2014.jsconf.us/), Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the [annotated slides](https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014).
One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](https://gaearon.github.io/react-hot-loader/)!
## ReactIntl Mixin by Yahoo {#reactintl-mixin-by-yahoo}
## ReactIntl Mixin by Yahoo
There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an [internationalization mixin](https://github.com/yahoo/react-intl). It's great to see them getting excited about React and contributing back to the community.
@ -49,12 +49,12 @@ React.renderComponent(
);
```
## Thinking and Learning React {#thinking-and-learning-react}
## Thinking and Learning React
Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post [“Thinking and Learning React.js”](http://icelab.com.au/articles/thinking-and-learning-reactjs/) to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.
## London React Meetup {#london-react-meetup}
## London React Meetup
If you missed the last [London React Meetup](http://www.meetup.com/London-React-User-Group/events/191406572/), the video is available, with lots of great content.
@ -68,19 +68,19 @@ If you missed the last [London React Meetup](http://www.meetup.com/London-React-
In related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Francisco/events/195518392/) will be from Prezi: [“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”](https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135). While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.
## Using React and KendoUI Together {#using-react-and-kendoui-together}
## Using React and KendoUI Together
One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write [React component adapters for KendoUI](http://www.ifandelse.com/using-reactjs-and-kendoui-together/).
Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a [JSX parser](https://github.com/RReverser/acorn-jsx) that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!
## ReactScriptLoader {#reactscriptloader}
## ReactScriptLoader
Yariv Sadan created [ReactScriptLoader](https://github.com/yariv/ReactScriptLoader) to make it easier to write components that require an external script.
@ -109,6 +109,6 @@ var Foo = React.createClass({
});
```
## Random Tweet {#random-tweet}
## Random Tweet
<blockquoteclass="twitter-tweet"data-conversation="none"lang="en"><p>“<ahref="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <ahref="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>— Jordan (@jordwalke) <ahref="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>
[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](https://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
```javascript
@ -19,7 +19,7 @@ React.renderComponent((
), document.getElementById('example'));
```
## Going Big with React {#going-big-with-react}
## Going Big with React
Areeb Malik, from Facebook, talks about his experience using React. "On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test JavaScript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale"
@ -30,7 +30,7 @@ Areeb Malik, from Facebook, talks about his experience using React. "On paper, a
-->
## What is React? {#what-is-react}
## What is React?
[Craig McKeachie](http://www.funnyant.com/author/admin/) author of [JavaScript Framework Guide](http://www.funnyant.com/javascript-framework-guide/) wrote an excellent news named ["What is React.js? Another Template Library?](http://www.funnyant.com/reactjs-what-is-it/)
@ -47,7 +47,7 @@ Areeb Malik, from Facebook, talks about his experience using React. "On paper, a
- Can I build something complex with React?
## Referencing Dynamic Children {#referencing-dynamic-children}
## Referencing Dynamic Children
While Matt Zabriskie was working on [react-tabs](https://www.npmjs.com/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [reference dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
@ -65,28 +65,28 @@ var App = React.createClass({
```
## JSX with Sweet.js using Readtables {#jsx-with-sweetjs-using-readtables}
## JSX with Sweet.js using Readtables
Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to [compile JSX with Sweet.js using Readtables](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables).
## First Look: Getting Started with React {#first-look-getting-started-with-react}
## First Look: Getting Started with React
[Kirill Buga](http://modernweb.com/authors/kirill-buga/) wrote an article on Modern Web explaining how [React is different from traditional MVC](http://modernweb.com/2014/07/23/getting-started-reactjs/) used by most JavaScript applications
[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
[Jason Brown](https://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.com/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.
@ -100,14 +100,14 @@ var parsedComponent = reactParser(html, React);
```
## Building UIs with React {#building-uis-with-react}
## Building UIs with React
If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!
<blockquoteclass="twitter-tweet"lang="en"><p>We shipped reddit's first production <ahref="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process. <ahref="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>— Brian Holt (@holtbt) <ahref="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
<blockquoteclass="twitter-tweet"lang="en"><p>.<ahref="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <ahref="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<ahref="https://twitter.com/floydophone">@floydophone</a></p>— spikebrehm (@spikebrehm) <ahref="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
@ -16,19 +16,19 @@ This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb a
<blockquotewidth="300"class="twitter-tweet"lang="en"><p>We shipped reddit's first production <ahref="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process. <ahref="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>— Brian Holt (@holtbt) <ahref="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
</td></tr></table>
## React's Architecture {#reacts-architecture}
## React's Architecture
[Vjeux](http://blog.vjeux.com/), from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the [annotated slides](https://speakerdeck.com/vjeux/oscon-react-architecture) or [Chris Dawson](http://thenewstack.io/author/chrisdawson/)'s notes titled [JavaScript’s History and How it Led To React](http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/).
Jakob Kummerow landed [two optimizations to V8](http://www.chromium.org/developers/speed-hall-of-fame#TOC-2014-06-18) specifically targeted at optimizing React. That's really exciting to see browser vendors helping out on performance!
## Reusable Components by Khan Academy {#reusable-components-by-khan-academy}
## Reusable Components by Khan Academy
[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](https://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
[Trường](http://truongtx.me/) wrote a little guide to help your [getting started using React, Browserify and Gulp](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/).
After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: [IntegratedCSS](https://github.com/SanderSpies/react-style). It seems weird at first but this is the direction where React is heading.
@ -76,7 +76,7 @@ var Button = React.createClass({
```
## Virtual DOM in Elm {#virtual-dom-in-elm}
## Virtual DOM in Elm
[Evan Czaplicki](http://evan.czaplicki.us) explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.
@ -85,14 +85,14 @@ var Button = React.createClass({
> [Read the full article](http://elm-lang.org/blog/Blazing-Fast-Html.elm)
## Components Tutorial {#components-tutorial}
## Components Tutorial
If you are getting started with React, [Joe Maddalone](http://www.joemaddalone.com/) made a good tutorial on how to build your first component.
## Saving time & staying sane? {#saving-time--staying-sane}
## Saving time & staying sane?
When [Kent William Innholt](http://http://kentwilliam.com/) who works at [M>Path](http://mpath.com/) summed up his experience using React in an [article](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js).
@ -106,7 +106,7 @@ When [Kent William Innholt](http://http://kentwilliam.com/) who works at [M>Path
> [Read the article...](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js)
## Weather {#weather}
## Weather
To finish this round-up, Andrew Gleave made a page that displays the [Weather](https://github.com/andrewgleave/react-weather). It's great to see that React is also used for small prototypes.
@ -22,13 +22,13 @@ Everything is backwards compatible for now, and as always React will provide you
Continue reading if you want all the nitty gritty details...
## New Terminology {#new-terminology}
## New Terminology
We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term `ReactElement` instead of _descriptor_. Likewise, we use the term `ReactNode` instead of _renderable_.
[See the full React terminology guide.](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589)
## Creating a ReactElement {#creating-a-reactelement}
## Creating a ReactElement
We now expose an external API for programmatically creating a `ReactElement` object.
@ -44,7 +44,7 @@ var reactDivElement = div(props, children);
Imagine if `React.createClass` was just a plain JavaScript class. If you call a class as a plain function you would call the component's constructor to create a Component instance, not a `ReactElement`:
@ -69,9 +69,9 @@ In future versions of React, we want to be able to support pure classes without
This is the biggest change to 0.12. Don't worry though. This functionality continues to work the same for this release, it just warns you if you're using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once.
## Upgrading to 0.12 {#upgrading-to-012}
## Upgrading to 0.12
### React With JSX {#react-with-jsx}
### React With JSX
If you use the React specific [JSX](https://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
@ -95,7 +95,7 @@ var MyOtherComponent = React.createClass({
*NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use [the JSX spec](https://facebook.github.io/jsx/) with a different transpiler for custom purposes.*
### React Without JSX {#react-without-jsx}
### React Without JSX
If you don't use JSX and just call components as functions, you will need to explicitly create a factory before calling it:
@ -151,7 +151,7 @@ var MyDOMComponent = React.createClass({
We realize that this is noisy. At least it's on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get [the other benefits](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) that this model unlocks.
If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once:
@ -169,7 +169,7 @@ It also encourages you to put more logic into these helper functions. Something
To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating `ReactElement`s.
## Third-party Languages {#third-party-languages}
## Third-party Languages
The signature of a `ReactElement` is something like this:
@ -185,7 +185,7 @@ The signature of a `ReactElement` is something like this:
Languages with static typing that don't need validation (e.g. [Om in ClojureScript](https://github.com/swannodette/om)), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React.
## Your Thoughts and Ideas {#your-thoughts-and-ideas}
## Your Thoughts and Ideas
We'd love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions:
@ -208,7 +208,7 @@ This moves the noise down into the render method though. It also doesn't provide
*NOTE: This won't work in this version of React because it's conflicting with other legacy APIs that we're deprecating. (We temporarily add a `element._isReactElement = true` marker on the object.)*
## The Next Step: ES6 Classes {#the-next-step-es6-classes}
## The Next Step: ES6 Classes
After 0.12 we'll begin work on moving to ES6 classes. We will still support `React.createClass` as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this:
@ -20,31 +20,31 @@ The release candidate is available for download:
We've also published version `0.12.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
## React Elements {#react-elements}
## React Elements
The biggest conceptual change we made in v0.12 is the move to React Elements. [We talked about this topic in depth earlier this week](/blog/2014/10/14/introducing-react-elements.html). If you haven't already, you should read up on the exciting changes in there!
## JSX Changes {#jsx-changes}
## JSX Changes
Earlier this year we decided to write [a specification for JSX](https://facebook.github.io/jsx/). This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.
### The `@jsx` Pragma is Gone! {#the-jsx-pragma-is-gone}
### The `@jsx` Pragma is Gone!
We have wanted to do this since before we even open sourced React. No more `/** @jsx React.DOM */`!. The React specific JSX transform assumes you have `React` in scope (which had to be true before anyway).
`JSXTransformer` and `react-tools` have both been updated to account for this.
### JSX for Function Calls is No Longer Supported {#jsx-for-function-calls-is-no-longer-supported}
### JSX for Function Calls is No Longer Supported
The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/blog/2014/10/14/introducting-react-elements.html).
The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was a convenient shortcut for many people but we believe the gains will be worth it.
We used to have a whitelist of HTML tags that got special treatment in JSX. However as new HTML tags got added to the spec, or we added support for more SVG tags, we had to go update our whitelist. Additionally, there was ambiguity about the behavior. There was always the chance that something new added to the tag list would result in breaking your code. For example:
@ -63,7 +63,7 @@ Currently we still use the whitelist as a sanity check. The transform will fail
In addition, the HTML tags are converted to strings instead of using `React.DOM` directly. `<div/>` becomes `React.createElement('div')` instead of `React.DOM.div()`.
Previously there wasn't a way to for you to pass a dynamic or unknown set of properties through JSX. This is now possible using the spread `...` operator.
## Breaking Change: `key` and `ref` Removed From `this.props` {#breaking-change-key-and-ref-removed-from-thisprops}
## Breaking Change: `key` and `ref` Removed From `this.props`
The props `key` and `ref` were already reserved property names. This turned out to be difficult to explicitly statically type since any object can accept these extra props. It also screws up JIT optimizations of React internals in modern VMs.
@ -104,14 +104,14 @@ You can no longer access `this.props.ref` and `this.props.key` from inside the C
You do NOT need to change the way to define `key` and `ref`, only if you need to read it. E.g. `<div key="my-key" />` and `div({ key: 'my-key' })` still works.
This is a subtle difference but `defaultProps` are now resolved at `ReactElement` creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolved props.
You will primarily see this breaking if you're also using `transferPropsTo`.
`transferPropsTo` is deprecated in v0.12 and will be removed in v0.13. This helper function was a bit magical. It auto-merged a certain whitelist of properties and excluded others. It was also transferring too many properties. This meant that we have to keep a whitelist of valid HTML attributes in the React runtime. It also means that we can't catch typos on props.
@ -130,12 +130,12 @@ return div(this.props);
Although to avoid passing too many props down, you'll probably want to use something like ES7 rest properties. [Read more about upgrading from transferPropsTo](https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7).
## Deprecated: Returning `false` in Event Handlers {#deprecated-returning-false-in-event-handlers}
## Deprecated: Returning `false` in Event Handlers
It used to be possible to return `false` from event handlers to preventDefault. We did this because this works in most browsers. This is a confusing API and we might want to use the return value for something else. Therefore, this is deprecated. Use `event.preventDefault()` instead.
## Renamed APIs {#renamed-apis}
## Renamed APIs
As part of the [new React terminology](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589) we aliased some existing APIs to use the new naming convention:
This round-up is a special edition on [Flux](https://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
## React And Flux at ForwardJS {#react-and-flux-at-forwardjs}
## React And Flux at ForwardJS
Facebook engineers [Jing Chen](https://github.com/jingc) and [Bill Fisher](https://github.com/fisherwebdev) gave a talk about Flux and React at [ForwardJS](http://forwardjs.com/), and how using an application architecture with a unidirectional data flow helped solve recurring bugs.
Yahoo is converting Yahoo Mail to React and Flux and in the process, they open sourced several components. This will help you get an isomorphic application up and running.
@ -22,7 +22,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
[Mikael Brassman](https://spoike.ghost.io/) wrote [Reflux](https://github.com/spoike/refluxjs), a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains [the reasons why in a blog post](https://spoike.ghost.io/deconstructing-reactjss-flux/).
@ -31,7 +31,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
</center>
## React and Flux Interview {#react-and-flux-interview}
## React and Flux Interview
[Ian Obermiller](http://ianobermiller.com/), engineer at Facebook, [made a lengthy interview](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/) on the experience of using React and Flux in order to build probably the biggest React application ever written so far.
@ -42,7 +42,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
> [Read the full interview...](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/)
## Adobe's Brackets Project Tree {#adobes-brackets-project-tree}
## Adobe's Brackets Project Tree
[Kevin Dangoor](http://www.kevindangoor.com/) is converting the project tree of [Adobe's Bracket text editor](http://brackets.io/) to React and Flux. He wrote about his experience [using Flux](http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/).
@ -51,7 +51,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
</center>
## Async Requests with Flux Revisited {#async-requests-with-flux-revisited}
## Async Requests with Flux Revisited
[Reto Schläpfer](http://www.code-experience.com/the-code-experience/) came back to a Flux project he hasn't worked on for a month and [saw many ways to improve the way he implemented Flux](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/). He summarized his learnings in a blog post.
@ -68,7 +68,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
> [Read the full article...](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/)
## Undo-Redo with Immutable Data Structures {#undo-redo-with-immutable-data-structures}
## Undo-Redo with Immutable Data Structures
[Ameya Karve](https://github.com/ameyakarve) explained how to use [Mori](https://github.com/swannodette/mori), a library that provides immutable data structures, in order to [implement undo-redo](http://ameyakarve.com/jekyll/update/2014/02/06/Undo-React-Flux-Mori.html). This usually very challenging feature only takes a few lines of code with Flux!
@ -89,7 +89,7 @@ undo: function() {
```
## Flux in practice {#flux-in-practice}
## Flux in practice
[Gary Chambers](https://twitter.com/garychambers108) wrote a [guide to get started with Flux](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a). This is a very practical introduction to Flux.
@ -98,14 +98,14 @@ undo: function() {
> [Read the full guide...](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a)
## Components, React and Flux {#components-react-and-flux}
## Components, React and Flux
[Dan Abramov](https://twitter.com/dan_abramov) working at Stampsy made a talk about React and Flux. It's a very good overview of the concepts at play.
[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) on a simple example that's representative of a real project he worked on.
@ -117,7 +117,7 @@ undo: function() {
## Flux: Step by Step approach {#flux-step-by-step-approach}
## Flux: Step by Step approach
[Nicola Paolucci](https://github.com/durdn) from Atlassian wrote a great guide to help your getting understand [Flux step by step](https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
@ -126,7 +126,7 @@ undo: function() {
</center>
## DeLorean: Back to the future! {#delorean-back-to-the-future}
## DeLorean: Back to the future!
[DeLorean](https://github.com/deloreanjs/delorean) is a tiny Flux pattern implementation developed by [Fatih Kadir Akin](https://github.com/f).
@ -139,13 +139,13 @@ undo: function() {
> - Improve your UI/data consistency using rollbacks
Last but not least, Flux and React ideas are not limited to JavaScript inside of the browser. The iOS team at Facebook re-implemented Newsfeed using very similar patterns.
<blockquoteclass="twitter-tweet"lang="en"><p>If you build your app with flux, you can swap out React for a canvas or svg view layer and keep 85% of your code. (or the thing after React)</p>— Ryan Florence (@ryanflorence) <ahref="https://twitter.com/ryanflorence/status/507309645372076034">September 3, 2014</a></blockquote>
@ -21,7 +21,7 @@ The release is available for download:
We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
## New Terminology & Updated APIs {#new-terminology--updated-apis}
## New Terminology & Updated APIs
v0.12 is bringing about some new terminology. [We introduced](/blog/2014/10/14/introducing-react-elements.html) this 2 weeks ago and we've also documented it in [a new section of the documentation](/docs/glossary.html). As a part of this, we also corrected many of our top-level APIs to align with the terminology. `Component` has been removed from all of our `React.render*` methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with `render` methods in your component classes, we decided to keep the top-level functions short and sweet. `React.renderComponent` is now `React.render`.
@ -29,7 +29,7 @@ We also corrected some other misnomers. `React.isValidComponent` actually determ
The old methods will still work but will warn upon first use. They will be removed in v0.13.
## JSX Changes {#jsx-changes}
## JSX Changes
[We talked more in depth about these before](/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes), so here are the highlights.
@ -38,13 +38,13 @@ The old methods will still work but will warn upon first use. They will be remov
* DOM components don't make use of `React.DOM`, instead we pass the tag name directly. `<div/>` becomes `React.createElement('div')`
* We introduced spread attributes as a quick way to transfer props.
## DevTools Improvements, No More `__internals` {#devtools-improvements-no-more-__internals}
## DevTools Improvements, No More `__internals`
For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!
As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. `React.__internals` is no more.
## License Change - BSD {#license-change---bsd}
## License Change - BSD
We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.
@ -52,11 +52,11 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl
- - -
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### Breaking Changes {#breaking-changes}
#### Breaking Changes
* `key` and `ref` moved off props object, now accessible on the element directly
* React is now BSD licensed with accompanying Patents grant
@ -64,12 +64,12 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl
* `React.__internals` is removed - it was exposed for DevTools which no longer needs access
* Composite Component functions can no longer be called directly - they must be wrapped with `React.createFactory` first. This is handled for you when using JSX.
#### New Features {#new-features}
#### New Features
* Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo`
* Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`
@ -83,7 +83,7 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl
* **DEPRECATED** Convenience Constructor usage as function, instead wrap with `React.createFactory`
* **DEPRECATED** use of `key={null}` to assign implicit keys
#### Bug Fixes {#bug-fixes}
#### Bug Fixes
* Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components
* Correctly treat `event.getModifierState` as case sensitive
@ -96,32 +96,32 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl
* `scrollLeft`, `scrollTop` removed, these should not be specified as props
* Improved error messages
### React With Addons {#react-with-addons}
### React With Addons
#### New Features {#new-features-1}
#### New Features
* `React.addons.batchedUpdates` added to API for hooking into update cycle
#### Breaking Changes {#breaking-changes-1}
#### Breaking Changes
* `React.addons.update` uses `assign` instead of `copyProperties` which does `hasOwnProperty` checks. Properties on prototypes will no longer be updated correctly.
#### Bug Fixes {#bug-fixes-1}
#### Bug Fixes
* Fixed some issues with CSS Transitions
### JSX {#jsx}
### JSX
#### Breaking Changes {#breaking-changes-2}
#### Breaking Changes
* Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components
* JSX no longer transforms to simple function calls
#### New Features {#new-features-2}
#### New Features
* `@jsx React.DOM` no longer required
* spread (`{...}`) operator introduced to allow easier use of props
#### Bug Fixes {#bug-fixes-2}
#### Bug Fixes
* JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)
Pedro Nauck ([pedronauck](https://github.com/pedronauck)) delivered an impeccably illustrated deck at Brazil's _Front in Floripa_ conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.
@ -20,7 +20,7 @@ James Pearce ([jamesgpearce](https://github.com/jamesgpearce)) carried Big-Coffe
Michael Ridgway ([mridgway](https://github.com/mridgway)) shows us how Yahoo! (who recently [moved Yahoo! Mail to React](http://www.slideshare.net/rmsguhan/react-meetup-mailonreact)) renders their React+Flux application, server-side.
@ -30,11 +30,11 @@ Péter Márton ([hekike](https://github.com/hekike)) helps us brew a cold one (l
And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker ([nhunzaker](https://github.com/nhunzaker)) [server renders data visualizations as SVG](http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization) with React.
## React Router Mows the Lawn {#react-router-mows-the-lawn}
## React Router Mows the Lawn
Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson ([mjackson](https://github.com/mjackson)) unveiled a new API for [React Router](https://github.com/rackt/react-router) that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've [rolled your ideas into their latest release](https://github.com/rackt/react-router/wiki/Announcements).
## React in Practice {#react-in-practice}
## React in Practice
Jonathan Beebe ([somethingkindawierd](https://github.com/somethingkindawierd)) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's _Nodevember_ conference in Nashville
@ -44,13 +44,13 @@ If you take a peek under the covers, you'll find that React powers [Carousel](ht
We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “[The Vanishing Game](https://thevanishinggame.wellstoried.com)” and see for yourself.
## Be Kind, Rewind {#be-kind-rewind}
## Be Kind, Rewind
Spend the next 60 seconds watching Daniel Woelfel ([dwwoelfel](https://github.com/dwwoelfel)) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to [reproduce bugs](http://blog.circleci.com/local-state-global-concerns/) reported to him by his users.
Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](https://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](https://tomchentw.github.io/react-prism/) component, for good measure.
@ -58,23 +58,23 @@ Jed Watson ([jedwatson](https://github.com/JedWatson)) helps you manage touch, t
To find these, and more community-built components, consult the [React Components](http://react-components.com/) and [React Rocks](http://react.rocks) component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword `react-component` to your `package.json` to get listed on React Components, and [submit a link to React Rocks](https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform).
## Waiter, There's a CSS In My JavaScript {#waiter-theres-a-css-in-my-javascript}
## Waiter, There's a CSS In My JavaScript
The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau ([vjeux](https://github.com/vjeux)) talks about some of the [fundamental style management challenges](https://speakerdeck.com/vjeux/react-css-in-js) we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused [react-style](https://github.com/js-next/react-style).
## Test Isolation {#test-isolation}
## Test Isolation
Yahoo! shows us how they make use of `iframe` elements to [unit test React components in isolation](http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil).
## You've Got The Hang of Flux, Now Let's Flow {#youve-got-the-hang-of-flux-now-lets-flow}
## You've Got The Hang of Flux, Now Let's Flow
Facebook Open Source released [Flow](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/) this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to [type check React applications](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility). There's never been a better reason to start making use of `propTypes` in your component specifications!
## Countdown to React.js Conf 2014 {#countdown-to-reactjs-conf-2014}
## Countdown to React.js Conf 2014
We're counting down the days until [React.js Conf](http://conf.reactjs.com) at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.
## React Meetups Around the World {#react-meetups-around-the-world}
## React Meetups Around the World
<blockquoteclass="twitter-tweet"lang="en"><p>React JS meetup having pretty good turn up rate today <ahref="https://twitter.com/hashtag/londonreact?src=hash">#londonreact</a><ahref="http://t.co/c360dlVVAe">pic.twitter.com/c360dlVVAe</a></p>— Alexander Savin (@karismafilms) <ahref="https://twitter.com/karismafilms/status/535152580377468928">November 19, 2014</a></blockquote>
JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.
@ -21,7 +21,7 @@ We figured that we're not in the business of designing a class system. We just w
In React 0.13.0 you no longer need to use `React.createClass` to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with `react-tools` by making use of the harmony option: `jsx --harmony`.
Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:
@ -81,7 +81,7 @@ export class Counter extends React.Component {
This was inspired by TypeScript's property initializers.
### Autobinding {#autobinding}
### Autobinding
`React.createClass` has a built-in magic feature that bound all methods to `this` automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.
@ -111,7 +111,7 @@ class Counter extends React.Component {
}
```
### Mixins {#mixins}
### Mixins
Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.
@ -125,7 +125,7 @@ Luckily, if you want to keep using mixins, you can just keep using `React.create
>
> The classic `React.createClass` style of creating classes will continue to work just fine.
## Other Languages! {#other-languages}
## Other Languages!
Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.
It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
## The talks {#the-talks}
## The talks
<divclass="skinny-row">
<divclass="skinny-col">
@ -241,7 +241,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</div>
</div>
## Reactions {#reactions}
## Reactions
The conference is over, but the conversation has just begun.
## Data fetching for React applications {#data-fetching-for-react-applications}
## Data fetching for React applications
There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At [React.js Conf](http://conf.reactjs.com/) we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.
@ -14,7 +14,7 @@ The two projects — Relay and GraphQL — have been in use in productio
Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).
@ -22,13 +22,13 @@ Each component specifies its own data dependencies declaratively using a query l
Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.
## What is GraphQL? {#what-is-graphql}
## What is GraphQL?
GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years.
On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.
## The value proposition {#the-value-proposition}
## The value proposition
Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.
@ -48,13 +48,13 @@ By handling all data-fetching via a single abstraction, we're able to handle a b
- **Simplified server implementation:** Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources.
- **Uniform mutations:** There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you'll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate "optimistic" update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back.
## How does it relate to Flux? {#how-does-it-relate-to-flux}
## How does it relate to Flux?
In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.
At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.
## Open source plans {#open-source-plans}
## Open source plans
We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).
@ -24,11 +24,11 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
- - -
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### Breaking Changes {#breaking-changes}
#### Breaking Changes
* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
* Static methods (defined in `statics`) are no longer autobound to the component class
@ -37,7 +37,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
#### New Features {#new-features}
#### New Features
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
@ -45,26 +45,26 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` -- this means that you no longer need to use `this._pendingState`, which is now gone.
* Support for iterators and immutable-js sequences as children
#### Deprecations {#deprecations}
#### Deprecations
* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`)
* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (for example, `getDOMNode`, `setProps`, `replaceState`).
### React with Add-Ons {#react-with-add-ons}
### React with Add-Ons
#### Deprecations {#deprecations-1}
#### Deprecations
* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
### React Tools {#react-tools}
### React Tools
#### Breaking Changes {#breaking-changes-1}
#### Breaking Changes
* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
#### New Features {#new-features-1}
#### New Features
* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
* `es5` is the default.
@ -72,7 +72,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
* The transform for the call spread operator has also been enabled.
### JSX {#jsx}
### JSX
#### Breaking Changes {#breaking-changes-2}
#### Breaking Changes
* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.
@ -8,7 +8,7 @@ React v0.13 is right around the corner and so we wanted to discuss some upcoming
If you use React in an idiomatic way, chances are, you’ll never see any of these warnings. In that case, you can skip this blog post. You can just enjoy the benefits! These changes will unlock simplified semantics, better error messages, stack traces and compiler optimizations!
## Immutable Props {#immutable-props}
## Immutable Props
In React 0.12, the props object was mutable. It allows you to do patterns like this:
@ -22,7 +22,7 @@ if (shouldUseFoo) {
The problem is that we don’t have a convenient way to tell when you’re done mutating.
### Problem: Mutating Props You Don’t Own {#problem-mutating-props-you-dont-own}
### Problem: Mutating Props You Don’t Own
If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:
@ -40,13 +40,13 @@ Additionally, if this element is reused in other places or used to switch back a
It has always been broken to mutate the props of something passed into you. The problem is that we can’t warn you about this special case if you accidentally do this.
### Problem: Too Late Validation {#problem-too-late-validation}
### Problem: Too Late Validation
In React 0.12, we do PropType validation very deep inside React during mounting. This means that by the time you get an error, the debugger stack is long gone. This makes it difficult to find complex issues during debugging. We have to do this since it is fairly common for extra props to be added between the call to React.createElement and the mount time. So the type is incomplete until then.
The static analysis in Flow is also impaired by this. There is no convenient place in the code where Flow can determine that the props are finalized.
Therefore, we would like to be able to freeze the element.props object so that it is immediately immutable at the JSX callsite (or createElement). In React 0.13 we will start warning you if you mutate `element.props` after this point.
In this case it's still ok to mutate the myModel object in state. We recommend that you use fully immutable models. E.g. by using immutable-js. However, we realize that mutable models are still convenient in many cases. Therefore we're only considering shallow freezing the props object that belongs to the ReactElement itself. Not nested objects.
### Solution: Early PropType Warnings {#solution-early-proptype-warnings}
### Solution: Early PropType Warnings
We will also start warning you for PropTypes at the JSX or createElement callsite. This will help debugging as you’ll have the stack trace right there. Similarly, Flow also validates PropTypes at this callsite.
@ -90,7 +90,7 @@ var element1 = <Foo />; // extra prop is optional
var element2 = React.addons.cloneWithProps(element1, { extra: 'prop' });
```
## Owner {#owner}
## Owner
In React each child has both a "parent" and an “owner”. The owner is the component that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite.
@ -106,7 +106,7 @@ In this example, the owner of the `span` is `Foo` but the parent is the `div`.
There is also an undocumented feature called "context" that also relies on the concept of an “owner” to pass hidden props down the tree.
### Problem: The Semantics are Opaque and Confusing {#problem-the-semantics-are-opaque-and-confusing}
### Problem: The Semantics are Opaque and Confusing
The problem is that these are hidden artifacts attached to the ReactElement. In fact, you probably didn’t even know about it. It silently changes semantics. Take this for example:
@ -121,7 +121,7 @@ class Component {
These two inputs have different owners, therefore React will not keep its state when the conditional switches. There is nothing in the code to indicate that. Similarly, if you use `React.addons.cloneWithProps`, the owner changes.
The owner is tracked by the currently executing stack. This means that the semantics of a ReactElement varies depending on when it is executed. Take this example:
@ -140,25 +140,25 @@ class B {
The owner of the `span` is actually `B`, not `A` because of the timing of the callback. This all adds complexity and suffers from similar problems as mutation.
### Problem: It Couples JSX to React {#problem-it-couples-jsx-to-react}
### Problem: It Couples JSX to React
Have you wondered why JSX depends on React? Couldn’t the transpiler have that built-in to its runtime? The reason you need to have `React.createElement` in scope is because we depend on internal state of React to capture the current "owner". Without this, you wouldn’t need to have React in scope.
### Solution: Make Context Parent-Based Instead of Owner-Based {#solution-make-context-parent-based-instead-of-owner-based}
### Solution: Make Context Parent-Based Instead of Owner-Based
The first thing we’re doing is warning you if you’re using the "owner" feature in a way that relies on it propagating through owners. Instead, we’re planning on propagating it through parents to its children. In almost all cases, this shouldn’t matter. In fact, parent-based contexts is simply a superset.
### Solution: Remove the Semantic Implications of Owner {#solution-remove-the-semantic-implications-of-owner}
### Solution: Remove the Semantic Implications of Owner
It turns out that there are very few cases where owners are actually important part of state-semantics. As a precaution, we’ll warn you if it turns out that the owner is important to determine state. In almost every case this shouldn’t matter. Unless you’re doing some weird optimizations, you shouldn’t see this warning.
### Pending: Change the refs Semantics {#pending-change-the-refs-semantics}
### Pending: Change the refs Semantics
Refs are still based on "owner". We haven’t fully solved this special case just yet.
In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.
## Keyed Objects as Maps {#keyed-objects-as-maps}
## Keyed Objects as Maps
In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.
@ -166,11 +166,11 @@ In React 0.12, and earlier, you could use keyed objects to provide an external k
<div>{ {a: <span/>, b: <span/>} }</div>
```
### Problem: Relies on Enumeration Order {#problem-relies-on-enumeration-order}
### Problem: Relies on Enumeration Order
The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.
### Problem: Using Objects as Maps is Bad {#problem-using-objects-as-maps-is-bad}
### Problem: Using Objects as Maps is Bad
It is generally accepted that using objects as maps screw up type systems, VM optimizations, compilers etc. It is much better to use a dedicated data structure like ES6 Maps.
Imagine if `item.title === '__proto__'` for example.
### Problem: Can’t be Differentiated from Arbitrary Objects {#problem-cant-be-differentiated-from-arbitrary-objects}
### Problem: Can’t be Differentiated from Arbitrary Objects
Since these objects can have any keys with almost any value, we can’t differentiate them from a mistake. If you put some random object, we will try our best to traverse it and render it, instead of failing with a helpful warning. In fact, this is one of the few places where you can accidentally get an infinite loop in React.
To differentiate ReactElements from one of these objects, we have to tag them with `_isReactElement`. This is another issue preventing us from inlining ReactElements as simple object literals.
### Solution: Just use an Array and key={…} {#solution-just-use-an-array-and-key}
### Solution: Just use an Array and key={…}
Most of the time you can just use an array with keyed ReactElements.
@ -199,7 +199,7 @@ var children = items.map(item => <span key={item.title} />);
However, this is not always possible if you’re trying to add a prefix key to an unknown set (e.g. this.props.children). It is also not always the easiest upgrade path. Therefore, we are adding a helper to `React.addons` called `createFragment()`. This accepts a keyed object and returns an opaque type.
@ -211,7 +211,7 @@ The exact signature of this kind of fragment will be determined later. It will l
Note: This will still not be valid as the direct return value of `render()`. Unfortunately, they still need to be wrapped in a `<div />` or some other element.
These changes also unlock several possible compiler optimizations for static content in React 0.14. These optimizations were previously only available to template-based frameworks. They will now also be possible for React code! Both for JSX and `React.createElement/Factory`*!
@ -223,7 +223,7 @@ See these GitHub Issues for a deep dive into compiler optimizations:
\* If you use the recommended pattern of explicit React.createFactory calls on the consumer side - since they are easily statically analyzed.
## Rationale {#rationale}
## Rationale
I thought that these changes were particularly important because the mere existence of these patterns means that even components that DON’T use these patterns have to pay the price. There are other problematic patterns such as mutating state, but they’re at least localized to a component subtree so they don’t harm the ecosystem.
[Formidable Labs](https://github.com/FormidableLabs) have been busy, as they've also[ just launched Radium](http://projects.formidablelabs.com/radium/), a React component that provides you with the ability to use inline styles instead of CSS. They're also [looking for some help](http://projects.formidablelabs.com/radium-bootstrap/) contributing to a Radium Bootstrap implementation.
@ -34,7 +34,7 @@ Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Pl
[react-meteor](https://github.com/reactjs/react-meteor), a package that replaces the default templating system of the Meteor platform with React, recently received a big update.
## Rebuilding with React {#rebuilding-with-react}
## Rebuilding with React
[Rich Manalang](https://github.com/rmanalan) from Atlassian [explains why](https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/) they rebuilt their HipChat web client from scratch using React, and how they're already using it to rebuild their native desktop clients.
@ -46,11 +46,11 @@ A team from New Zealand called [Atomic](https://atomic.io/) is [building web and
F8 2015 is just around the corner, and you can [sign up for the video streams](https://www.fbf8.com/stream.html) in advance because we're sure to be covering all things React.
## Meetups {#meetups}
## Meetups
<table><tr><tdwidth="50%"valign="top">
<blockquoteclass="twitter-tweet"lang="en"><p>Our <ahref="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <ahref="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> btw bathroom code is 6012 lol <ahref="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>— littleBits (@littleBits) <ahref="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
@ -29,11 +29,11 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
- - -
## Changelog {#changelog}
## Changelog
### React Core {#react-core}
### React Core
#### Breaking Changes {#breaking-changes}
#### Breaking Changes
* Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement
* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
@ -43,7 +43,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
#### New Features {#new-features}
#### New Features
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
@ -52,31 +52,31 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
* Support for iterators and immutable-js sequences as children.
#### Deprecations {#deprecations}
#### Deprecations
* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`).
* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (`getDOMNode`, `replaceState`, `isMounted`, `setProps`, `replaceProps`).
### React with Add-Ons {#react-with-add-ons}
### React with Add-Ons
#### New Features {#new-features-1}
#### New Features
* [`React.addons.createFragment` was added](/docs/create-fragment.html) for adding keys to entire sets of children.
#### Deprecations {#deprecations-1}
#### Deprecations
* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
* Calls to `React.addons.cloneWithProps` can be migrated to use `React.cloneElement` instead – make sure to merge `style` and `className` manually if desired.
### React Tools {#react-tools}
### React Tools
#### Breaking Changes {#breaking-changes-1}
#### Breaking Changes
* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
#### New Features {#new-features-2}
#### New Features
* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
* `es5` is the default.
@ -84,7 +84,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
* The transform for the call spread operator has also been enabled.
### JSX {#jsx}
### JSX
#### Breaking Changes {#breaking-changes-2}
#### Breaking Changes
* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The [`jsx_orphaned_brackets_transformer`](https://www.npmjs.com/package/jsx_orphaned_brackets_transformer) package on npm can be used to find and fix potential issues in your JSX code.
@ -9,7 +9,7 @@ We're working hard to prepare GraphQL and Relay for public release. In the meant
<br/>
## The Relay Architecture {#the-relay-architecture}
## The Relay Architecture
The diagram below shows the main parts of the Relay architecture on the client and the server:
@ -26,7 +26,7 @@ This post will focus on **Relay components** that describe encapsulated units of
<br/>
## A Relay Application {#a-relay-application}
## A Relay Application
To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a `<NewsFeed>` that renders a list of `<Story>` items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:
@ -34,7 +34,7 @@ To see how components work and can be composed, let's implement a basic version
<br/>
## The `<Story>` Begins {#the-story-begins}
## The `<Story>` Begins
The first step is a React `<Story>` component that accepts a `story` prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.
@ -56,7 +56,7 @@ export default class Story extends React.Component {
<br/>
## What's the `<Story>`? {#whats-the-story}
## What's the `<Story>`?
Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):
@ -102,7 +102,7 @@ Queries use ES6 template literals tagged with the `Relay.QL` function. Similar t
<br/>
## `<Story>`s on Demand {#storys-on-demand}
## `<Story>`s on Demand
We can render a Relay component by providing Relay with the component (`<Story>`) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then `render()` the component. The value of `props.story` will be a plain JavaScript object such as the following:
@ -126,7 +126,7 @@ The diagram below shows how Relay containers make data available to our React co
<br/>
## `<NewsFeed>` Worthy {#newsfeed-worthy}
## `<NewsFeed>` Worthy
Now that the `<Story>` is over we can continue with the `<NewsFeed>` component. Again, we'll start with a React version:
@ -153,7 +153,7 @@ module.exports = NewsFeed;
<br/>
## All the News Fit to be Relayed {#all-the-news-fit-to-be-relayed}
## All the News Fit to be Relayed
`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
@ -207,7 +207,7 @@ Now when `loadMore()` is called, Relay will send a GraphQL request for the addit
<br/>
## In Conclusion {#in-conclusion}
## In Conclusion
These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:
@ -9,14 +9,14 @@ We open sourced React Native last week and the community reception blew away all
<blockquoteclass="twitter-tweet"lang="en"><p><ahref="https://twitter.com/hashtag/reactnative?src=hash">#reactnative</a> is like when you get a new expansion pack, and everybody is running around clueless about which NPC to talk to for the quests</p>— Ryan Florence (@ryanflorence) <ahref="https://twitter.com/ryanflorence/status/581810423554543616">March 28, 2015</a></blockquote>
## When is React Native Android coming? {#when-is-react-native-android-coming}
## When is React Native Android coming?
**Give us 6 months**. At Facebook, we strive to only open-source projects that we are using in production. While the Android backend for React Native is starting to work (see video below at 37min), it hasn't been shipped to any users yet. There's a lot of work that goes into open-sourcing a project, and we want to do it right so that you have a great experience when using it.
## Ray Wenderlich - Property Finder {#ray-wenderlich---property-finder}
## Ray Wenderlich - Property Finder
If you are getting started with React Native, you should absolutely [use this tutorial](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript) from Colin Eberhardt. It goes through all the steps to make a reasonably complete app.
@ -25,59 +25,59 @@ If you are getting started with React Native, you should absolutely [use this tu
Colin also [blogged about his experience using React Native](http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html) for a few weeks and gives his thoughts on why you would or wouldn't use it.
## The Changelog {#the-changelog}
## The Changelog
Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
Less than 24 hours after React Native was open sourced, Simarpreet Singh built an [Hacker News reader app from scratch](https://github.com/iSimar/HackerNews-React-Native). It's unbelievable how fast he was able to pull it off!
There's a huge ecosystem of JavaScript modules on npm and React Native was designed to work well with the ones that don't have DOM dependencies. Parse is a great example; you can `npm install parse` on your React Native project and it'll work as is. :) We still have [a](https://github.com/facebook/react-native/issues/406) [few](https://github.com/facebook/react-native/issues/370) [issues](https://github.com/facebook/react-native/issues/316) to solve; please create an issue if your favorite library doesn't work out of the box.
Giulio Canti is the author of the [tcomb-form library](https://github.com/gcanti/tcomb-form) for React. He already [ported it to React Native](https://github.com/gcanti/tcomb-form-native) and it looks great!
## Facebook Login with React Native {#facebook-login-with-react-native}
## Facebook Login with React Native
One of the reason we built React Native is to be able to use all the libraries in the native ecosystem. Brent Vatne leads the way and explains [how to use Facebook Login with React Native](http://brentvatne.ca/facebook-login-with-react-native/).
## Modus Create {#modus-create}
## Modus Create
Jay Garcia spent a lot of time during the beta working on a NES music player with React Native. He wrote a blog post to share his experience and explains some code snippets.
## React Native with Babel and webpack {#react-native-with-babel-and-webpack}
## React Native with Babel and webpack
React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as [webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/). The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase.
Roman Liutikov found a way to [use webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms.
## A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript {#a-dynamic-crazy-native-mobile-futurepowered-by-javascript}
## A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript
Clay Allsopp wrote a post about [all the crazy things you could do with a JavaScript engine that renders native views](https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987). What about native embeds, seamless native browser, native search engine or even app generation...
## Random Tweet {#random-tweet}
## Random Tweet
We've spent a lot of efforts getting the onboarding as easy as possible and we're really happy that people noticed. We still have a lot of work to do on documentation, stay tuned!
@ -8,7 +8,7 @@ It's been three weeks since we open sourced React Native and there's been some i
I'd especially like to thank community members Brent Vatne and James Ide who have both already contributed meaningfully to the project and have been extremely helpful on IRC and with issues and pull requests
## Changelog {#changelog}
## Changelog
The main focus of the past few weeks has been to make React Native the best possible experience for people outside of Facebook. Here's a high level summary of what's happened since we open sourced:
@ -20,6 +20,6 @@ The main focus of the past few weeks has been to make React Native the best poss
* **Patent Grant**: Many of you had concerns and questions around the PATENTS file. We pushed [a new version of the grant](https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/).
* **Per commit history**: In order to synchronize from Facebook to GitHub, we used to do one giant commit every few days. We improved our tooling and now have per commit history that maintains author information (both internal and external from pull requests), and we retroactively applied this to historical diffs to provide proper attribution.
## Where are we going? {#where-are-we-going}
## Where are we going?
In addition to supporting pull requests, issues, and general improvements, we're also working hard on our internal React Native integrations and on React Native for Android.
@ -12,7 +12,7 @@ GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nea
We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools – including, but not exclusively, Relay – for product developers.
## What is GraphQL? {#what-is-graphql}
## What is GraphQL?
A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query:
@ -62,12 +62,12 @@ We will dig into the syntax and semantics of GraphQL in a later post, but even a
* **Introspective:** GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.
Obviously GraphQL is not the first system to manage client-server interactions. In today's world there are two dominant architectural styles for client-server interaction: REST and *ad hoc* endpoints.
### REST {#rest}
### REST
REST, an acronym for Representational State Transfer, is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that *self-identify* as REST, rather than systems which are formally REST.
@ -85,7 +85,7 @@ Nearly all externally facing REST APIs we know of trend or end up in these non-i
Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building *ad hoc* endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST's major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to *ad hoc* endpoints.
### Ad Hoc Endpoints {#ad-hoc-endpoints}
### Ad Hoc Endpoints
Many applications have no formalized client-server contract. Product developers access server capabilities through *ad hoc* endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.
@ -101,7 +101,7 @@ This is a liberating platform for product developers. With GraphQL, no more cont
Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application's data model.
## What's next? {#whats-next}
## What's next?
Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We're incredibly excited to share this system and work with the open source community to improve it.
@ -9,21 +9,21 @@ As many people have noticed already, React and React Native have both switched t
react-tools has always been a very thin wrapper around JSTransform. It has served as a great tool for the community to get up and running, but at this point we're ready to [let it go](https://www.youtube.com/watch?v=moSFlvxnbgk). We won't ship a new version for v0.14.
## Migrating to Babel {#migrating-to-babel}
## Migrating to Babel
Many people in the React and broader JavaScript community have already adopted Babel. It has [integrations with a number of tools](http://babeljs.io/docs/setup/). Depending on your tool, you'll want to read up on the instructions.
We've been working with the Babel team as we started making use of it and we're confident that it will be the right tool to use with React.
## Other Deprecations {#other-deprecations}
## Other Deprecations
### esprima-fb {#esprima-fb}
### esprima-fb
As a result of no longer maintaining JSTransform, we no longer have a need to maintain our Esprima fork ([esprima-fb](https://github.com/facebook/esprima/)). The upstream Esprima and other esprima-based forks, like Espree, have been doing an excellent job of supporting new language features recently. If you have a need of an esprima-based parser, we encourage you to look into using one of those.
Alternatively, if you need to parse JSX, take a look at [acorn](https://github.com/marijnh/acorn) parser in combination with [acorn-jsx](https://github.com/RReverser/acorn-jsx) plugin which is used inside of Babel and thus always supports the latest syntax.
### JSXTransformer {#jsxtransformer}
### JSXTransformer
JSXTransformer is another tool we built specifically for consuming JSX in the browser. It was always intended as a quick way to prototype code before setting up a build process. It would look for `<script>` tags with `type="text/jsx"` and then transform and run. This ran the same code that react-tools ran on the server. Babel ships with [a nearly identical tool](https://babeljs.io/docs/usage/browser/), which has already been integrated into [JS Bin](https://jsbin.com/).
We'll be deprecating JSXTransformer, however the current version will still be available from various CDNs and Bower.
@ -9,7 +9,7 @@ With React 0.14, we're continuing to let React mature and to make minor changes
You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.
## Two Packages {#two-packages}
## Two Packages
As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
@ -42,7 +42,7 @@ The addons have moved to separate packages as well: `react-addons-clone-with-pro
For now, please use the same version of `react` and `react-dom` in your apps to avoid versioning problems -- but we plan to remove this requirement later. (This release includes the old methods in the `react` package with a deprecation warning, but they'll be removed completely in 0.15.)
## DOM node refs {#dom-node-refs}
## DOM node refs
The other big change we're making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. In this release, `this.refs.giraffe`_is_ the actual DOM node.
Today we're excited to share an update on Relay - the technical preview is now open-source and [available on GitHub](http://github.com/facebook/relay).
## Why Relay {#why-relay}
## Why Relay
While React simplified the process of developing complex user-interfaces, it left open the question of how to interact with data on the server. It turns out that this was a significant source of friction for our developers; fragile coupling between client and server caused data-related bugs and made iteration harder. Furthermore, developers were forced to constantly re-implement complex async logic instead of focusing on their apps. Relay addresses these concerns by borrowing important lessons from React: it provides *declarative, component-oriented data fetching for React applications*.
@ -17,13 +17,13 @@ Relay is also component-oriented, extending the notion of a React component to i
Relay is in use at Facebook in production apps, and we're using it more and more because *Relay lets developers focus on their products and move fast*. It's working for us and we'd like to share it with the community.
## What's Included {#whats-included}
## What's Included
We're open-sourcing a technical preview of Relay - the core framework that we use internally, with some modifications for use outside Facebook. As this is the first release, it's good to keep in mind that there may be some incomplete or missing features. We'll continue to develop Relay and are working closely with the GraphQL community to ensure that Relay tracks updates during GraphQL's RFC period. But we couldn't wait any longer to get this in your hands, and we're looking forward to your feedback and contributions.
Relay is available on [GitHub](http://github.com/facebook/relay) and [npm](https://www.npmjs.com/package/react-relay).
## What's Next {#whats-next}
## What's Next
The team is super excited to be releasing Relay - and just as excited about what's next. Here are some of the things we'll be focusing on:
@ -18,7 +18,7 @@ It contains a handful of new features, including:
* Right-click any props or state value to make it available as `$tmp` from the console
* Full React Native support
## Installation {#installation}
## Installation
Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
@ -7,7 +7,7 @@ We’re happy to announce our first release candidate for React 0.14! We gave yo
Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
## Installation {#installation}
## Installation
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single package:
@ -30,9 +30,9 @@ If you can’t use `npm` yet, we also provide pre-built browser builds for your
These builds are also available in the `react` package on bower.
## Changelog {#changelog}
## Changelog
### Major changes {#major-changes}
### Major changes
- #### Two Packages: React and React DOM
@ -118,7 +118,7 @@ These builds are also available in the `react` package on bower.
**Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.
### Breaking changes {#breaking-changes}
### Breaking changes
As always, we have a few breaking changes in this release. Whenever we make large changes, we warn for at least one release so you have time to update your code. The Facebook codebase has over 15,000 React components, so on the React team, we always try to minimize the pain of breaking changes.
@ -133,7 +133,7 @@ And these two changes did not warn in 0.13 but should be easy to find and clean
- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
### New deprecations, introduced with a warning {#new-deprecations-introduced-with-a-warning}
### New deprecations, introduced with a warning
- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
@ -145,7 +145,7 @@ And these two changes did not warn in 0.13 but should be easy to find and clean
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
### Notable enhancements {#notable-enhancements}
### Notable enhancements
- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
@ -161,13 +161,13 @@ And these two changes did not warn in 0.13 but should be easy to find and clean
- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
### New helpful warnings {#new-helpful-warnings}
### New helpful warnings
- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
### Notable bug fixes {#notable-bug-fixes}
### Notable bug fixes
- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
- SVG elements are created with the correct namespace in more cases.
In the weeks following the [open-source release](/blog/2015/08/11/relay-technical-preview.html) of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let's take a look at some of the things we've achieved, together!
## Teaching servers to speak GraphQL {#teaching-servers-to-speak-graphql}
## Teaching servers to speak GraphQL
Every great Relay app starts by finding a GraphQL server to talk to. The community has spent the past few weeks teaching GraphQL to a few backend systems.
@ -24,7 +24,7 @@ Espen Hovlandsdal ([rexxars](https://github.com/rexxars)) built a [sql-to-graphq
Mick Hansen ([mickhansen](https://github.com/mickhansen)) offers a set of [schema-building helpers](https://github.com/mickhansen/graphql-sequelize) for use with the [Sequelize ORM](http://docs.sequelizejs.com/en/latest/) for MySQL, PostgreSQL, SQLite, and MSSQL.
Robert Mosolgo ([rmosolgo](https://github.com/rmosolgo)) brought the full set of schema-building and query execution tools to Ruby, in the form of [graphql-ruby](https://github.com/rmosolgo/graphql-ruby) and [graphql-relay-ruby](https://github.com/rmosolgo/graphql-relay-ruby). Check out his [Rails-based demo](https://github.com/rmosolgo/graphql-ruby-demo).
@ -38,7 +38,7 @@ Oleg Ilyenko ([OlegIlyenko](https://github.com/OlegIlyenko)) made a beautiful an
Joe McBride ([joemcbride](https://github.com/joemcbride)) has an up-and-running example of GraphQL for .NET, [graphql-dotnet](https://github.com/joemcbride/graphql-dotnet).
## Show me, don't tell me {#show-me-dont-tell-me}
## Show me, don't tell me
Interact with this [visual tour of Relay's architecture](http://sgwilym.github.io/relay-visual-learners/) by Sam Gwilym ([sgwilym](https://github.com/sgwilym)).
@ -48,19 +48,19 @@ Interact with this [visual tour of Relay's architecture](http://sgwilym.github.i
Sam has already launched a product that leverages Relay's data-fetching, optimistic responses, pagination, and mutations – all atop a Ruby GraphQL server: [new.comique.co](http://new.comique.co/)
## Skeletons in the closet {#skeletons-in-the-closet}
## Skeletons in the closet
Joseph Rollins ([fortruce](https://github.com/fortruce)) created a hot-reloading, auto schema-regenerating, [Relay skeleton](https://github.com/fortruce/relay-skeleton) that you can use to get up and running quickly.
Michael Hart ([mhart](https://mhart)) built a [simple-relay-starter](https://github.com/mhart/simple-relay-starter) kit using Browserify.
## Routing around {#routing-around}
## Routing around
Jimmy Jia ([taion](@taion)) and Gerald Monaco ([devknoll](@devknoll)) have been helping lost URLs find their way to Relay apps through their work on [react-router-relay](relay-tools/react-router-relay). Check out Christoph Nakazawa's ([cpojer](@cpojer)) [blog post](medium.com/@cpojer/relay-and-routing-36b5439bad9) on the topic. Jimmy completed the Relay TodoMVC example with routing, which you can check out at [taion/relay-todomvc](taion/relay-todomvc).
Chen Hung-Tu ([transedward](https://github.com/transedward)) built a chat app atop the above mentioned router, with threaded conversations and pagination. Check it out at [transedward/relay-chat](https://github.com/transedward/relay-chat).
@ -24,7 +24,7 @@ This is important and often forgotten. Forgetting to call `unmountComponentAtNod
It is not unique to the DOM. If you want to insert a React Native view in the middle of an existing iOS app you will hit similar issues.
## Helpers {#helpers}
## Helpers
If you have multiple React roots, or a single root that gets deleted over time, we recommend that you always create your own wrapper API. These will all look slightly different depending on what your outer system looks like. For example, at Facebook we have a system that automatically ties into our page transition router to automatically call `unmountComponentAtNode`.
@ -32,7 +32,7 @@ Rather than calling `ReactDOM.render()` directly everywhere, consider writing/us
In your environment you may want to always configure internationalization, routers, user data etc. If you have many different React roots it can be a pain to set up configuration nodes all over the place. By creating your own wrapper you can unify that configuration into one place.
@ -9,7 +9,7 @@ If you tried the release candidate, thank you – your support is invaluable and
As with all of our releases, we consider this version to be stable enough to use in production and recommend that you upgrade in order to take advantage of our latest improvements.
## Upgrade Guide {#upgrade-guide}
## Upgrade Guide
Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
@ -19,7 +19,7 @@ For the two major changes which require significant code changes, we've included
See the changelog below for more details.
## Installation {#installation}
## Installation
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
@ -39,9 +39,9 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
Dev build with warnings: <https://fb.me/react-dom-0.14.0.js>
Minified build for production: <https://fb.me/react-dom-0.14.0.min.js>
## Changelog {#changelog}
## Changelog
### Major changes {#major-changes}
### Major changes
- #### Two Packages: React and React DOM
@ -142,7 +142,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
**Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.
### Breaking changes {#breaking-changes}
### Breaking changes
In almost all cases, we change our APIs gradually and warn for at least one release to give you time to clean up your code. These two breaking changes did not have a warning in 0.13 but should be easy to find and clean up:
@ -155,7 +155,7 @@ These three breaking changes had a warning in 0.13, so you shouldn’t have to d
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
### New deprecations, introduced with a warning {#new-deprecations-introduced-with-a-warning}
### New deprecations, introduced with a warning
Each of these changes will continue to work as before with a new warning until the release of 0.15 so you can upgrade your code gradually.
@ -169,7 +169,7 @@ Each of these changes will continue to work as before with a new warning until t
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
### Notable enhancements {#notable-enhancements}
### Notable enhancements
- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
@ -185,13 +185,13 @@ Each of these changes will continue to work as before with a new warning until t
- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
### New helpful warnings {#new-helpful-warnings}
### New helpful warnings
- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
### Notable bug fixes {#notable-bug-fixes}
### Notable bug fixes
- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
- SVG elements are created with the correct namespace in more cases.
TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: [http://join.reactiflux.com](http://join.reactiflux.com/)
## What happened with Slack? {#what-happened-with-slack}
## What happened with Slack?
A few weeks ago, Reactiflux reached 7,500 members on Slack. Shortly after, Slack decided we were too big and disabled invites. There was no way for new users to join. Many of us were sad and upset. We loved Slack. Our community was built around it.
We reached out to Slack several times, but their decision was firm. Our large community caused performance issues. Slack wants to focus on building a great product for teams, not necessarily large open communities. Losing focus and building for too many use cases always leads to product bloat, and eventually a decrease in quality.
## So… why Discord? {#so-why-discord}
## So… why Discord?
After a [long and thorough debate](https://github.com/reactiflux/volunteers/issues/25), Discord quickly emerged as the most promising service. After just a few days, 400 members had joined the Discord server, and many already loved it.
### Easiest to join {#easiest-to-join}
### Easiest to join
Discord is the easiest platform to join. New users can immediately join our conversations without having to create an account. All they need to do is provide a name. No permission granting, no password, no email confirmation.
This is critically useful for us, and will make Reactiflux even more open and accessible.
### Great apps {#great-apps}
### Great apps
Out of all of the services we’ve tried, Discord’s apps are by far the most polished. They are well designed, easy to use, and surprisingly fast. In addition to the web app, they have mobile apps on both iOS and Android as well as desktop apps for OS X and Windows, with Linux support coming soon.
Their desktop apps are built with React and Electron, and their iOS app is built with React Native.
### Moderation tools {#moderation-tools}
### Moderation tools
So far, we’ve been fortunate not to have to deal with spammers and trolls. As our community continues to grow, that might change. Unsurprisingly, Discord is the only app we’ve seen with legitimate moderation tools. It was built for gaming communities, after all.
### Great multiple Server support {#great-multiple-server-support}
### Great multiple Server support
Your Discord account works with every Discord server, which is the equivalent of a Slack team. You don’t need to create a new account every time you join a new team. You can join new servers in one click, and it’s very easy to switch between them. Discord messages also work across servers, so your personal conversations are not scoped to a single server.
Instead of having one huge, crowded Reactiflux server, we can branch off closely related channels into sub-servers. Communities will start overlapping, and it will be easy to interact with non-Reactiflux channels.
### It’s hosted {#its-hosted}
### It’s hosted
Self-hosted apps require maintenance. We’re all busy, and we can barely find the time to keep our landing page up to date and running smoothly. More than anything, we need a stable platform, and we don’t have the resources to guarantee that right now.
It’s a much safer bet to offload the hosting to Discord, who is already keeping the lights on for all their users.
### We like the team {#we-like-the-team}
### We like the team
And they seem to like us back. They are excited for us to join them, and they’ve been very responsive to our feedback and suggestions.
@ -51,11 +51,11 @@ They implemented code syntax highlighting just a few days after we told them we
Discord’s team has already built a solid suite of apps, and they have shown us how much they care about their users. We’re excited to see how they will continue to improve their product.
## And what’s the catch? {#and-whats-the-catch}
## And what’s the catch?
Choosing the best chat service is subjective. There are a million reasons why Discord *might be* a terrible idea. Here are the ones that we’re most worried about:
Channel management seems to be the biggest issue. There is no way to opt out of channels; you can only mute them. And you can only mute channels one by one. There is no way to star channels, and channels can only be sorted on the server level. Each user will see the list of channels in the same order.
@ -63,23 +63,23 @@ As the number of channels grow, it will be challenging to keep things in order.
We can build simple tools to make channel lookup easier, and the Discord team is working on improvements that should make this more manageable.
### No Search {#no-search}
### No Search
Lack of search is clearly a bummer, but Discord is working on it. Search is coming!
### Firewall {#firewall}
### Firewall
A couple of users aren’t able to access Discord at work since other corporate filters classify it as a gaming application. This sucks, but it seems to be a rare case. So far, it seems only to affect 0.6% of our current community (3/500).
We hope that these users can get Discord's domains whitelisted, and we’ll try to find a solution if this is a widespread issue. The Discord team is aware of the issue as well.
## Is Discord going to disappear tomorrow? {#is-discord-going-to-disappear-tomorrow}
## Is Discord going to disappear tomorrow?
Probably not tomorrow. They have 14 people [full time](https://discordapp.com/company), and they’ve raised money from some of the best investors in Silicon Valley, including [Benchmark](http://www.benchmark.com/) and [Accel](http://www.accel.com/companies/).
By focusing on gaming communities, Discord has differentiated itself from the many other communication apps. Discord is well received and has a rapidly growing user base. They plan to keep their basic offerings free for unlimited users and hope to make money with premium offerings (themes, add-ons, content, and more).
## Join us! {#join-us}
## Join us!
More than 500 of us have already migrated to the new Reactiflux. Join us, we're one click away: [http://join.reactiflux.com](http://join.reactiflux.com/)
The difference between **components, their instances, and elements** confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?
## Managing the Instances {#managing-the-instances}
## Managing the Instances
If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button`*component* by creating a class. When the app is running, you may have several *instances* of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce *elements*?
@ -53,13 +53,13 @@ Each component instance has to keep references to its DOM node and to the instan
So how is React different?
## Elements Describe the Tree {#elements-describe-the-tree}
## Elements Describe the Tree
In React, this is where the *elements* come to rescue. **An element is a plain object *describing* a component instance or DOM node and its desired properties.** It contains only information about the component type (for example, a `Button`), its properties (for example, its `color`), and any child elements inside it.
An element is not an actual instance. Rather, it is a way to tell React what you *want* to see on the screen. You can’t call any methods on the element. It’s just an immutable description object with two fields: `type: (string | ReactClass)` and `props: Object`[^1].
### DOM Elements {#dom-elements}
### DOM Elements
When an element’s `type` is a string, it represents a DOM node with that tag name, and `props` correspond to its attributes. This is what React will render. For example:
@ -94,7 +94,7 @@ What’s important is that both child and parent elements are *just descriptions
React elements are easy to traverse, don’t need to be parsed, and of course they are much lighter than the actual DOM elements—they’re just objects!
### Component Elements {#component-elements}
### Component Elements
However, the `type` of an element can also be a function or a class corresponding to a React component:
@ -168,7 +168,7 @@ This mix and matching helps keep components decoupled from each other, as they c
* `DangerButton` is a `Button` with specific properties.
* `DeleteAccount` contains a `Button` and a `DangerButton` inside a `<div>`.
### Components Encapsulate Element Trees {#components-encapsulate-element-trees}
### Components Encapsulate Element Trees
When React sees an element with a function or class `type`, it knows to ask *that* component what element it renders to, given the corresponding `props`.
@ -236,7 +236,7 @@ That’s it! For a React component, props are the input, and an element tree is
We let React create, update, and destroy instances. We *describe* them with elements we return from the components, and React takes care of managing the instances.
### Components Can Be Classes or Functions {#components-can-be-classes-or-functions}
### Components Can Be Classes or Functions
In the code above, `Form`, `Message`, and `Button` are React components. They can either be written as functions, like above, or as classes descending from `React.Component`. These three ways to declare a component are mostly equivalent:
@ -300,7 +300,7 @@ A function component is less powerful but is simpler, and acts like a class comp
**However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.**
@ -360,7 +360,7 @@ Only components declared as classes have instances, and you never create them di
React takes care of creating an instance for every class component, so you can write components in an object-oriented way with methods and local state, but other than that, instances are not very important in the React’s programming model and are managed by React itself.
## Summary {#summary}
## Summary
An *element* is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
@ -374,7 +374,7 @@ Function components don’t have instances at all. Class components have instanc
Finally, to create elements, use [`React.createElement()`](/docs/top-level-api.html#react.createelement), [JSX](/docs/jsx-in-depth.html), or an [element factory helper](/docs/top-level-api.html#react.createfactory). Don’t write elements as plain objects in the real code—just know that they are plain objects under the hood.
@ -9,7 +9,7 @@ This change shouldn't materially affect most of you. Moving to major semver vers
The core of the React API has been stable for years. Our business as well as many of yours all depend heavily on the use of React as a core piece of our infrastructure. We're committed to the stability as well as the progress of React going forward.
## Bring Everyone Along {#bring-everyone-along}
## Bring Everyone Along
React isn't just a library but an ecosystem. We know that your applications and ours are not just isolated islands of code. It is a network of your own application code, your own open source components and third party libraries that all depend on React.
@ -19,7 +19,7 @@ Therefore it is important that we don't just upgrade our own codebases but that
## Introducing Minor Releases {#introducing-minor-releases}
## Introducing Minor Releases
Ideally everyone could just depend on the latest version of React all the time.
@ -31,11 +31,11 @@ We know that in practice that is not possible. In the future, we expect more new
That means that if one component needs a new API, there is no need for any of the other components to do any further work. They remain compatible.
## What Happened to 1.0.0? {#what-happened-to-100}
## What Happened to 1.0.0?
Part of React's growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. There are too many preconceived notions of what v1.0 is. We're still following semver. We're just communicating stability by moving the 0 from the beginning to the end.
## Breaking Changes {#breaking-changes}
## Breaking Changes
Minor revision releases will include deprecation warnings and tips for how to upgrade an API or pattern that will be removed or changed in the future.
@ -43,7 +43,7 @@ We will continue to release [codemods](https://www.youtube.com/watch?v=d0pOgY8__
Once we've reached the end of life for a particular major version, we'll release a new major version where all deprecated APIs have been removed.
## Avoiding The Major Cliff {#avoiding-the-major-cliff}
## Avoiding The Major Cliff
If you try to upgrade your component to 16.0.0 you might find that your application no longer works if you still have other dependencies. E.g. if Ryan's and Jed's components are only compatible with 15.x.x.
@ -9,7 +9,7 @@ But now we're ready, so without further ado, we're shipping a release candidate
Please try it out before we publish the final release. Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
## Upgrade Guide {#upgrade-guide}
## Upgrade Guide
Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
@ -17,7 +17,7 @@ If your code is free of warnings when running under React 0.14, upgrading should
See the changelog below for more details.
## Installation {#installation}
## Installation
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
@ -37,9 +37,9 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
Dev build with warnings: <https://fb.me/react-dom-15.0.0-rc.1.js>
Minified build for production: <https://fb.me/react-dom-15.0.0-rc.1.min.js>
## Changelog {#changelog}
## Changelog
### Major changes {#major-changes}
### Major changes
- #### `document.createElement` is in and `data-reactid` is out
@ -59,7 +59,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
### Breaking changes {#breaking-changes}
### Breaking changes
It's worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don't want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
@ -69,14 +69,14 @@ These deprecations were introduced in v0.14 with a warning and the APIs are now
- Deprecated APIs removed from `React.addons`, specifically `batchedUpdates` and `cloneWithProps`.
- Deprecated APIs removed from component instances, specifically `setProps`, `replaceProps`, and `getDOMNode`.
### New deprecations, introduced with a warning {#new-deprecations-introduced-with-a-warning}
### New deprecations, introduced with a warning
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input).
### New helpful warnings {#new-helpful-warnings}
### New helpful warnings
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{width: '300'}}`. (Unitless *number* values like `width: 300` are unchanged.)
@ -84,7 +84,7 @@ Each of these changes will continue to work as before with a new warning until t
- Elements will now warn when attempting to read `ref` and `key` from the props.
- React DOM now attempts to warn for mistyped event handlers on DOM elements (ex: `onclick` which should be `onClick`)
### Notable bug fixes {#notable-bug-fixes}
### Notable bug fixes
- Fixed multiple small memory leaks
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
@ -11,7 +11,7 @@ The other change is to our SVG code. In RC1 we had made the decision to pass thr
Thanks again to everybody who has tried the RC1 and reported issues. It has been extremely important and we wouldn't be able to do this without your help!
## Installation {#installation}
## Installation
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
@ -19,7 +19,7 @@ While this isn’t directly related to the release, we understand that in order
We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful!
## Upgrade Guide {#upgrade-guide}
## Upgrade Guide
As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and that’s not even counting React Native), so we always try to make changes gradually in order to minimize the pain.
@ -27,7 +27,7 @@ If your code is free of warnings when running under React 0.14, upgrading should
See the changelog below for more details.
## Installation {#installation}
## Installation
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
@ -47,9 +47,9 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
Dev build with warnings: <https://fb.me/react-dom-15.0.0.js>
Minified build for production: <https://fb.me/react-dom-15.0.0.min.js>
## Changelog {#changelog}
## Changelog
### Major changes {#major-changes}
### Major changes
- #### `document.createElement` is in and `data-reactid` is out
@ -83,7 +83,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
<small>[@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243)</small>
### Breaking changes {#breaking-changes}
### Breaking changes
- #### No more extra `<span>`s
@ -125,7 +125,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
- React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now.
<small>[@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495)</small>
### New deprecations, introduced with a warning {#new-deprecations-introduced-with-a-warning}
### New deprecations, introduced with a warning
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
@ -138,7 +138,7 @@ Each of these changes will continue to work as before with a new warning until t
- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`.
<small>[@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287)</small>
### New helpful warnings {#new-helpful-warnings}
### New helpful warnings
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
<small>[@sophiebits](https://github.com/sophiebits) in [#5083](https://github.com/facebook/react/pull/5083)</small>
@ -182,7 +182,7 @@ Each of these changes will continue to work as before with a new warning until t
- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments.
<small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390)</small>
### Notable bug fixes {#notable-bug-fixes}
### Notable bug fixes
- Fixed multiple small memory leaks.
<small>[@sophiebits](https://github.com/sophiebits) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309)</small>
@ -235,7 +235,7 @@ Each of these changes will continue to work as before with a new warning until t
- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation.
<small>[@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209)</small>
### Other improvements {#improvements}
### Other improvements
- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies.
<small>[@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303)</small>
@ -13,7 +13,7 @@ Three years passed since React was released. The landscape has changed. Multiple
In this post, we will consider the problems commonly caused by mixins. Then we will suggest several alternative patterns for the same use cases. We have found those patterns to scale better with the complexity of the codebase than mixins.
## Why Mixins are Broken {#why-mixins-are-broken}
## Why Mixins are Broken
At Facebook, React usage has grown from a few components to thousands of them. This gives us a window into how people use React. Thanks to declarative rendering and top-down data flow, many teams were able to fix a bunch of bugs while shipping new features as they adopted React.
@ -21,7 +21,7 @@ However it’s inevitable that some of our code using React gradually became inc
This doesn’t mean that mixins themselves are bad. People successfully employ them in different languages and paradigms, including some functional languages. At Facebook, we extensively use traits in Hack which are fairly similar to mixins. Nevertheless, we think that mixins are unnecessary and problematic in React codebases. Here’s why.
Sometimes a component relies on a certain method defined in the mixin, such as `getClassName()`. Sometimes it’s the other way around, and mixin calls a method like `renderHeader()` on the component. JavaScript is a dynamic language so it’s hard to enforce or document these dependencies.
@ -31,7 +31,7 @@ These implicit dependencies make it hard for new team members to contribute to a
Often, mixins come to depend on other mixins, and removing one of them breaks the other. In these situations it is very tricky to tell how the data flows in and out of mixins, and what their dependency graph looks like. Unlike components, mixins don’t form a hierarchy: they are flattened and operate in the same namespace.
### Mixins cause name clashes {#mixins-cause-name-clashes}
### Mixins cause name clashes
There is no guarantee that two particular mixins can be used together. For example, if `FluxListenerMixin` defines `handleChange()` and `WindowSizeMixin` defines `handleChange()`, you can’t use them together. You also can’t define a method with this name on your own component.
@ -41,7 +41,7 @@ If you have a name conflict with a mixin from a third party package, you can’t
The situation is no better for mixin authors. Even adding a new method to a mixin is always a potentially breaking change because a method with the same name might already exist on some of the components using it, either directly or through another mixin. Once written, mixins are hard to remove or change. Bad ideas don’t get refactored away because refactoring is too risky.
### Mixins cause snowballing complexity {#mixins-cause-snowballing-complexity}
### Mixins cause snowballing complexity
Even when mixins start out simple, they tend to become complex over time. The example below is based on a real scenario I’ve seen play out in a codebase.
@ -55,7 +55,7 @@ Every new requirement makes the mixins harder to understand. Components using th
These are the same problems we faced building apps before React. We found that they are solved by declarative rendering, top-down data flow, and encapsulated components. At Facebook, we have been migrating our code to use alternative patterns to mixins, and we are generally happy with the results. You can read about those patterns below.
## Migrating from Mixins {#migrating-from-mixins}
## Migrating from Mixins
Let’s make it clear that mixins are not technically deprecated. If you use `React.createClass()`, you may keep using them. We only say that they didn’t work well for us, and so we won’t recommend using them in the future.
@ -63,7 +63,7 @@ Every section below corresponds to a mixin usage pattern that we found in the Fa
We hope that you find this list helpful. Please let us know if we missed important use cases so we can either amend the list or be proven wrong!
One of the most commonly used mixins is [`PureRenderMixin`](/docs/pure-render-mixin.html). You might be using it in some components to [prevent unnecessary re-renders](/docs/advanced-performance.html#shouldcomponentupdate-in-action) when the props and state are shallowly equal to the previous props and state:
@ -78,7 +78,7 @@ var Button = React.createClass({
});
```
#### Solution {#solution}
#### Solution
To express the same without mixins, you can use the [`shallowCompare`](/docs/shallow-compare.html) function directly instead:
@ -99,7 +99,7 @@ If you use a custom mixin implementing a `shouldComponentUpdate` function with d
We understand that more typing can be annoying. For the most common case, we plan to [introduce a new base class](https://github.com/facebook/react/pull/7195) called `React.PureComponent` in the next minor release. It uses the same shallow comparison as `PureRenderMixin` does today.
### Subscriptions and Side Effects {#subscriptions-and-side-effects}
### Subscriptions and Side Effects
The second most common type of mixins that we encountered are mixins that subscribe a React component to a third-party data source. Whether this data source is a Flux Store, an Rx Observable, or something else, the pattern is very similar: the subscription is created in `componentDidMount`, destroyed in `componentWillUnmount`, and the change handler calls `this.setState()`.
@ -145,13 +145,13 @@ var CommentList = React.createClass({
module.exports = CommentList;
```
#### Solution {#solution-1}
#### Solution
If there is just one component subscribed to this data source, it is fine to embed the subscription logic right into the component. Avoid premature abstractions.
If several components used this mixin to subscribe to a data source, a nice way to avoid repetition is to use a pattern called [“higher-order components”](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750). It can sound intimidating so we will take a closer look at how this pattern naturally emerges from the component model.
Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:
@ -339,7 +339,7 @@ var CommentListWithSubscription = withSubscription(CommentList);
module.exports = CommentListWithSubscription;
```
#### Solution, Revisited {#solution-revisited}
#### Solution, Revisited
Now that we understand higher-order components better, let’s take another look at the complete solution that doesn’t involve mixins. There are a few minor changes that are annotated with inline comments:
@ -395,7 +395,7 @@ Higher-order components are a powerful pattern. You can pass additional argument
Like any solution, higher-order components have their own pitfalls. For example, if you heavily use [refs](/docs/more-about-refs.html), you might notice that wrapping something into a higher-order component changes the ref to point to the wrapping component. In practice we discourage using refs for component communication so we don’t think it’s a big issue. In the future, we might consider adding [ref forwarding](https://github.com/facebook/react/issues/4213) to React to solve this annoyance.
### Rendering Logic {#rendering-logic}
### Rendering Logic
The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.
@ -436,7 +436,7 @@ var UserRow = React.createClass({
Multiple components may be sharing `RowMixin` to render the header, and each of them would need to define `getHeaderText()`.
#### Solution {#solution-2}
#### Solution
If you see rendering logic inside a mixin, it’s time to extract a component!
@ -469,7 +469,7 @@ Props keep component dependencies explicit, easy to replace, and enforceable wit
>
> Defining components as functions is not required. There is also nothing wrong with using lifecycle methods and state—they are first-class React features. We use function components in this example because they are easier to read and we didn’t need those extra features, but classes would work just as fine.
### Context {#context}
### Context
Another group of mixins we discovered were helpers for providing and consuming [React context](/docs/context.html). Context is an experimental unstable feature, has [certain issues](https://github.com/facebook/react/issues/2517), and will likely change its API in the future. We don’t recommend using it unless you’re confident there is no other way of solving your problem.
@ -510,7 +510,7 @@ var Link = React.createClass({
module.exports = Link;
```
#### Solution {#solution-3}
#### Solution
We agree that hiding context usage from consuming components is a good idea until the context API stabilizes. However, we recommend using higher-order components instead of mixins for this.
If you’re using a third party library that only provides a mixin, we encourage you to file an issue with them linking to this post so that they can provide a higher-order component instead. In the meantime, you can create a higher-order component around it yourself in exactly the same way.
### Utility Methods {#utility-methods}
### Utility Methods
Sometimes, mixins are used solely to share utility functions between components:
@ -584,7 +584,7 @@ var Button = React.createClass({
});
```
#### Solution {#solution-4}
#### Solution
Put utility functions into regular JavaScript modules and import them. This also makes it easier to test them or use them outside of your components:
@ -603,7 +603,7 @@ var Button = React.createClass({
});
```
### Other Use Cases {#other-use-cases}
### Other Use Cases
Sometimes people use mixins to selectively add logging to lifecycle methods in some components. In the future, we intend to provide an [official DevTools API](https://github.com/facebook/react/issues/5306) that would let you implement something similar without touching the components. However it’s still very much a work in progress. If you heavily depend on logging mixins for debugging, you might want to keep using those mixins for a little longer.
**[Create React App](https://github.com/facebookincubator/create-react-app)** is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
## Getting Started {#getting-started}
## Getting Started
### Installation {#installation}
### Installation
First, install the global package:
@ -17,7 +17,7 @@ npm install -g create-react-app
Node.js 4.x or higher is required.
### Creating an App {#creating-an-app}
### Creating an App
Now you can use it to create a new app:
@ -29,7 +29,7 @@ This will take a while as npm installs the transitive dependencies, but once it
Run `npm start` to launch the development server. The browser will open automatically with the created app’s URL.
@ -46,7 +46,7 @@ ESLint is also integrated so lint warnings are displayed right in the console:
We only picked a small subset of lint rules that often lead to bugs.
### Building for Production {#building-for-production}
### Building for Production
To build an optimized bundle, run `npm run build`:
@ -54,7 +54,7 @@ To build an optimized bundle, run `npm run build`:
It is minified, correctly envified, and the assets include content hashes for caching.
### One Dependency {#one-dependency}
### One Dependency
Your `package.json` contains only a single build dependency and a few scripts:
@ -78,7 +78,7 @@ Your `package.json` contains only a single build dependency and a few scripts:
We take care of updating Babel, ESLint, and webpack to stable compatible versions so you can update a single dependency to get them all.
### Zero Configuration {#zero-configuration}
### Zero Configuration
It is worth repeating: there are no configuration files or complicated folder structures. The tool only generates the files you need to build your app.
@ -99,7 +99,7 @@ hello-world/
All the build settings are preconfigured and can’t be changed. Some features, such as testing, are currently missing. This is an intentional limitation, and we recognize it might not work for everybody. And this brings us to the last point.
### No Lock-In {#no-lock-in}
### No Lock-In
We first saw this feature in [Enclave](https://github.com/eanplatter/enclave), and we loved it. We talked to [Ean](https://twitter.com/EanPlatter), and he was excited to collaborate with us. He already sent a few pull requests!
@ -107,7 +107,7 @@ We first saw this feature in [Enclave](https://github.com/eanplatter/enclave), a
We expect that at early stages, many people will “eject” for one reason or another, but as we learn from them, we will make the default setup more and more compelling while still providing no configuration.
## Try It Out! {#try-it-out}
## Try It Out!
You can find [**Create React App**](https://github.com/facebookincubator/create-react-app) with additional instructions on GitHub.
@ -115,7 +115,7 @@ This is an experiment, and only time will tell if it becomes a popular way of cr
We welcome you to participate in this experiment. Help us build the React tooling that more people can use. We are always [open to feedback](https://github.com/facebookincubator/create-react-app/issues/11).
## The Backstory {#the-backstory}
## The Backstory
React was one of the first libraries to embrace transpiling JavaScript. As a result, even though you can [learn React without any tooling](https://github.com/facebook/react/blob/3fd582643ef3d222a00a0c756292c15b88f9f83c/examples/basic-jsx/index.html), the React ecosystem has commonly become associated with an overwhelming explosion of tools.
@ -135,7 +135,7 @@ This doesn’t mean those tools aren’t great. To many of us, they have become
Still, we knew it was frustrating to spend days setting up a project when all you wanted was to learn React. We wanted to fix this.
## Could We Fix This? {#could-we-fix-this}
## Could We Fix This?
We found ourselves in an unusual dilemma.
@ -145,7 +145,7 @@ However, tooling at Facebook is different than at many smaller companies. Lintin
The React community is very important to us. We knew that we couldn’t fix the problem within the limits of our open source philosophy. This is why we decided to make an exception, and to ship something that we didn’t use ourselves, but that we thought would be useful to the community.
## The Quest for a React <abbrtitle="Command Line Interface">CLI</abbr> {#the-quest-for-a-react-abbr-titlecommand-line-interfacecliabbr}
## The Quest for a React <abbrtitle="Command Line Interface">CLI</abbr>
Having just attended [EmberCamp](http://embercamp.com/) a week ago, I was excited about [Ember CLI](https://ember-cli.com/). Ember users have a great “getting started” experience thanks to a curated set of tools united under a single command-line interface. I have heard similar feedback about [Elm Reactor](https://github.com/elm-lang/elm-reactor).
This month marks a year since we released Relay and we'd like to share an update on the project and what's next.
## A Year In Review {#a-year-in-review}
## A Year In Review
A year after launch, we're incredibly excited to see an active community forming around Relay and that companies such as Twitter are [using Relay in production](https://fabric.io/blog/building-fabric-mission-control-with-graphql-and-relay):
@ -28,11 +28,11 @@ We've also seen some great open-source projects spring up around Relay:
This is just a small sampling of the community's contributions. So far we've merged over 300 PRs - about 25% of our commits - from over 80 of you. These PRs have improved everything from the website and docs down the very core of the framework. We're humbled by these outstanding contributions and excited to keep working with each of you!
Earlier this year we paused to reflect on the state of the project. What was working well? What could be improved? What features should we add, and what could we remove? A few themes emerged: performance on mobile, developer experience, and empowering the community.
## Mobile Perf {#mobile-perf}
## Mobile Perf
First, Relay was built to serve the needs of product developers at Facebook. In 2016, that means helping developers to build apps that work well on [mobile devices connecting on slower networks](https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/). For example, people in developing markets commonly use [2011 year-class phones](https://code.facebook.com/posts/307478339448736/year-class-a-classification-system-for-android/) and connect via [2G class networks](https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/). These scenarios present their own challenges.
@ -44,17 +44,17 @@ Ideally, though, we could begin fetching data as soon as the native code had loa
The key is that GraphQL is already static - we just need to fully embrace this fact. More on this later.
## Developer Experience {#developer-experience}
## Developer Experience
Next, we've paid attention to the community's feedback and know that, to put it simply, Relay could be "easier" to use (and "simpler" too). This isn't entirely surprising to us - Relay was originally designed as a routing library and gradually morphed into a data-fetching library. Concepts like Relay "routes", for example, no longer serve as critical a role and are just one more concept that developers have to learn about. Another example is mutations: while writes *are* inherently more complex than reads, our API doesn't make the simple things simple enough.
Alongside our focus on mobile performance, we've also kept the developer experience in mind as we evolve Relay core.
## Empowering the Community {#empowering-the-community}
## Empowering the Community
Finally, we want to make it easier for people in the community to develop useful libraries that work with Relay. By comparison, React's small surface area - components - allows developers to build cool things like routing, higher-order components, or reusable text editors. For Relay, this would mean having the framework provide core primitives that users can build upon. We want it to be possible for the community to integrate Relay with view libraries other than React, or to build real-time subscriptions as a complementary library.
# What's Next {#whats-next}
# What's Next
These were big goals, and also a bit scary; we knew that incremental improvements would only allow us to move so fast. So in April we started a project to build a new implementation of Relay core targeting low-end mobile devices from the start.
@ -71,7 +71,7 @@ Stepping back, we recognize that any API changes will require an investment on y
Ultimately, we're making these changes because we believe they make Relay better all around: simpler for developers building apps and faster for the people using them.
# Conclusion {#conclusion}
# Conclusion
If you made it this far, congrats and thanks for reading! We'll be sharing more information about these changes in some upcoming talks:
Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting.
## Commemorative T-Shirt {#commemorative-t-shirt}
## Commemorative T-Shirt
In order to celebrate 50,000 GitHub stars, [Maggie Appleton](http://www.maggieappleton.com/) from [egghead.io](http://egghead.io/) has designed us a special T-shirt, which will be available for purchase from Teespring **only for a week** through Thursday, October 6. Maggie also wrote [a blog post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) showing all the different concepts she came up with before settling on the final design.
@ -20,7 +20,7 @@ The T-shirts are super soft using American Apparel's tri-blend fabric; we also h
Proceeds from the shirts will be donated to [CODE2040](http://www.code2040.org/), a nonprofit that creates access, awareness, and opportunities in technology for underrepresented minorities with a specific focus on Black and Latinx talent.
## Archeology {#archeology}
## Archeology
We've spent a lot of time trying to explain the concepts behind React and the problems it attempts to solve, but we haven't talked much about how React evolved before being open sourced. This milestone seemed like as good a time as any to dig through the earliest commits and share some of the more important moments and fun facts.
@ -81,7 +81,7 @@ TestProject.PersonDisplayer = {
};
```
## FBolt is Born {#fbolt-is-born}
## FBolt is Born
Through his FaxJS experiment, Jordan became convinced that functional APIs — which discouraged mutation — offered a better, more scalable way to build user interfaces. He imported his library into Facebook's codebase in March of 2012 and renamed it “FBolt”, signifying an extension of Bolt where components are written in a functional programming style. Or maybe “FBolt” was a nod to FaxJS – he didn't tell us! ;)
@ -96,7 +96,7 @@ I might add for the sake of discussion, that many systems advertise some kind of
Most of Tom's other commits at the time were on the first version of [GraphiQL](https://github.com/graphql/graphiql), a project which was recently open sourced.
## Adding JSX {#adding-jsx}
## Adding JSX
Since about 2010 Facebook has been using an extension of PHP called [XHP](https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919/), which enables engineers to create UIs using XML literals right inside their PHP code. It was first introduced to help prevent XSS holes but ended up being an excellent way to structure applications with custom components.
@ -180,7 +180,7 @@ Adam made a very insightful comment, which is now the default way we write lists
React didn't end up using Adam's implementation directly. Instead, we created JSX by forking [js-xml-literal](https://github.com/laverdet/js-xml-literal), a side project by XHP creator Marcel Laverdet. JSX took its name from js-xml-literal, which Jordan modified to just be syntactic sugar for deeply nested function calls.
## API Churn {#api-churn}
## API Churn
During the first year of React, internal adoption was growing quickly but there was quite a lot of churn in the component APIs and naming conventions:
@ -214,7 +214,7 @@ As the project was about to be open sourced, [Lee Byron](https://twitter.com/lee
* objectWillAction
* objectDidAction
## Instagram {#instagram}
## Instagram
In 2012, Instagram got acquired by Facebook. [Pete Hunt](https://twitter.com/floydophone), who was working on Facebook photos and videos at the time, joined their newly formed web team. He wanted to build their website completely in React, which was in stark contrast with the incremental adoption model that had been used at Facebook.
@ -7,7 +7,7 @@ Today we are releasing React 15.4.0.
We didn't announce the [previous](https://github.com/facebook/react/blob/master/CHANGELOG.md#1510-may-20-2016) [minor](https://github.com/facebook/react/blob/master/CHANGELOG.md#1520-july-1-2016) [releases](https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016) on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.
### Separating React and React DOM {#separating-react-and-react-dom}
### Separating React and React DOM
[More than a year ago](/blog/2015/09/10/react-v0.14-rc1.html#two-packages-react-and-react-dom), we started separating React and React DOM into separate packages. We deprecated `React.render()` in favor of `ReactDOM.render()` in React 0.14, and removed DOM-specific APIs from `React` completely in React 15. However, the React DOM implementation still [secretly lived inside the React package](https://www.reddit.com/r/javascript/comments/3m6wyu/found_this_line_in_the_react_codebase_made_me/cvcyo4a/).
@ -21,7 +21,7 @@ However, there is a possibility that you imported private APIs from `react/lib/*
Another thing to watch out for is that React DOM Server is now about the same size as React DOM since it contains its own copy of the React reconciler. We don't recommend using React DOM Server on the client in most cases.
### Profiling Components with Chrome Timeline {#profiling-components-with-chrome-timeline}
### Profiling Components with Chrome Timeline
You can now visualize React components in the Chrome Timeline. This lets you see which components exactly get mounted, updated, and unmounted, how much time they take relative to each other.
@ -43,7 +43,7 @@ Note that the numbers are relative so components will render faster in productio
Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it.
### Mocking Refs for Snapshot Testing {#mocking-refs-for-snapshot-testing}
### Mocking Refs for Snapshot Testing
If you're using Jest [snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html), you might have had [issues](https://github.com/facebook/react/issues/7371) with components that rely on refs. With React 15.4.0, we introduce a way to provide mock refs to the test renderer. For example, consider this component using a ref in `componentDidMount`:
@ -94,7 +94,7 @@ You can learn more about snapshot testing in [this Jest blog post](https://faceb
---
## Installation {#installation}
## Installation
We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
@ -133,9 +133,9 @@ We've also published version `15.4.0` of the `react`, `react-dom`, and addons pa
- - -
## Changelog {#changelog}
## Changelog
### React {#react}
### React
* React package and browser build no longer "secretly" includes React DOM.
<small>([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))</small>
* Required PropTypes now fail with specific messages for null and undefined.
@ -143,7 +143,7 @@ We've also published version `15.4.0` of the `react`, `react-dom`, and addons pa
* Improved development performance by freezing children instead of copying.
<small>([@keyanzhang](https://github.com/keyanzhang) in [#7455](https://github.com/facebook/react/pull/7455))</small>
### React DOM {#react-dom}
### React DOM
* Fixed occasional test failures when React DOM is used together with shallow renderer.
<small>([@goatslacker](https://github.com/goatslacker) in [#8097](https://github.com/facebook/react/pull/8097))</small>
* Added a warning for invalid `aria-` attributes.
@ -159,15 +159,15 @@ We've also published version `15.4.0` of the `react`, `react-dom`, and addons pa
* Fixed a bug with updating text in IE 8.
<small>([@mnpenner](https://github.com/mnpenner) in [#7832](https://github.com/facebook/react/pull/7832))</small>
### React Perf {#react-perf}
### React Perf
* When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline.
<small>([@gaearon](https://github.com/gaearon) in [#7549](https://github.com/facebook/react/pull/7549))</small>
### React Test Utils {#react-test-utils}
### React Test Utils
* If you call `Simulate.click()` on a `<input disabled onClick={foo} />` then `foo` will get called whereas it didn't before.
<small>([@nhunzaker](https://github.com/nhunzaker) in [#7642](https://github.com/facebook/react/pull/7642))</small>
### React Test Renderer {#react-test-renderer}
### React Test Renderer
* Due to packaging changes, it no longer crashes when imported together with React DOM in the same file.
<small>([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))</small>
* `ReactTestRenderer.create()` now accepts `{createNodeMock: element => mock}` as an optional argument so you can mock refs with snapshot testing.
@ -7,7 +7,7 @@ It's been exactly one year since the last breaking change to React. Our next maj
To that end, today we're releasing React 15.5.0.
### New Deprecation Warnings {#new-deprecation-warnings}
### New Deprecation Warnings
The biggest change is that we've extracted `React.PropTypes` and `React.createClass` into their own packages. Both are still accessible via the main `React` object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations.
@ -19,7 +19,7 @@ So while the warnings may cause frustration in the short-term, we believe **prod
For each of these new deprecations, we've provided a codemod to automatically migrate your code. They are available as part of the [react-codemod](https://github.com/reactjs/react-codemod) project.
### Migrating from React.PropTypes {#migrating-from-reactproptypes}
### Migrating from React.PropTypes
Prop types are a feature for runtime validation of props during development. We've extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them.
@ -65,7 +65,7 @@ The `propTypes`, `contextTypes`, and `childContextTypes` APIs will work exactly
You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/react/components/).
### Migrating from React.createClass {#migrating-from-reactcreateclass}
### Migrating from React.createClass
When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: `React.createClass`.
### Discontinuing support for React Addons {#discontinuing-support-for-react-addons}
### Discontinuing support for React Addons
We're discontinuing active maintenance of React Addons packages. In truth, most of these packages haven't been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages.
@ -121,7 +121,7 @@ We're discontinuing active maintenance of React Addons packages. In truth, most
We're also discontinuing support for the `react-with-addons` UMD build. It will be removed in React 16.
### React Test Utils {#react-test-utils}
### React Test Utils
Currently, the React Test Utils live inside `react-addons-test-utils`. As of 15.5, we're deprecating that package and moving them to `react-dom/test-utils` instead:
@ -147,7 +147,7 @@ import { createRenderer } from 'react-test-renderer/shallow';
---
## Acknowledgements {#acknowledgements}
## Acknowledgements
A special thank you to these folks for transferring ownership of npm package names:
@ -157,7 +157,7 @@ A special thank you to these folks for transferring ownership of npm package nam
---
## Installation {#installation}
## Installation
We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
@ -196,11 +196,11 @@ We've also published version `15.5.0` of the `react`, `react-dom`, and addons pa
---
## Changelog {#changelog}
## Changelog
## 15.5.0 (April 7, 2017) {#1550-april-7-2017}
## 15.5.0 (April 7, 2017)
### React {#react}
### React
* Added a deprecation warning for `React.createClass`. Points users to create-react-class instead. ([@acdlite](https://github.com/acdlite) in [d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e))
* Added a deprecation warning for `React.PropTypes`. Points users to prop-types instead. ([@acdlite](https://github.com/acdlite) in [043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28))
@ -209,17 +209,17 @@ We've also published version `15.5.0` of the `react`, `react-dom`, and addons pa
* Another fix for Closure Compiler. ([@Shastel](https://github.com/Shastel) in [#8882](https://github.com/facebook/react/pull/8882))
* Added component stack info to invalid element type warning. ([@n3tr](https://github.com/n3tr) in [#8495](https://github.com/facebook/react/pull/8495))
### React DOM {#react-dom}
### React DOM
* Fixed Chrome bug when backspacing in number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7359](https://github.com/facebook/react/pull/7359))
* Added `react-dom/test-utils`, which exports the React Test Utils. ([@bvaughn](https://github.com/bvaughn))
### React Test Renderer {#react-test-renderer}
### React Test Renderer
* Fixed bug where `componentWillUnmount` was not called for children. ([@gre](https://github.com/gre) in [#8512](https://github.com/facebook/react/pull/8512))
* Added `react-test-renderer/shallow`, which exports the shallow renderer. ([@bvaughn](https://github.com/bvaughn))
### React Addons {#react-addons}
### React Addons
* Last release for addons; they will no longer be actively maintained.
* Removed `peerDependencies` so that addons continue to work indefinitely. ([@acdlite](https://github.com/acdlite) and [@bvaughn](https://github.com/bvaughn) in [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) and [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a))
@ -11,7 +11,7 @@ As usual with Create React App, **you can enjoy these improvements in your exist
Newly created apps will get these improvements automatically.
### webpack 2 {#webpack-2}
### webpack 2
>*This change was contributed by [@Timer](https://github.com/Timer) in [#1291](https://github.com/facebookincubator/create-react-app/pull/1291).*
@ -27,7 +27,7 @@ The biggest notable webpack 2 feature is the ability to write and import [ES6 mo
In the future, as the ecosystem around ES6 modules matures, you can expect more improvements to your app's bundle size thanks to [tree shaking](https://webpack.js.org/guides/tree-shaking/).
### Runtime Error Overlay {#error-overlay}
### Runtime Error Overlay
>*This change was contributed by [@Timer](https://github.com/Timer) and [@nicinabox](https://github.com/nicinabox) in [#1101](https://github.com/facebookincubator/create-react-app/pull/1101), [@bvaughn](https://github.com/bvaughn) in [#2201](https://github.com/facebookincubator/create-react-app/pull/2201).*
@ -44,7 +44,7 @@ A GIF is worth a thousand words:
In the future, we plan to teach the runtime error overlay to understand more about your React app. For example, after React 16 we plan to show React component stacks in addition to the JavaScript stacks when an error is thrown.
### Progressive Web Apps by Default {#progressive-web-apps-by-default}
### Progressive Web Apps by Default
>*This change was contributed by [@jeffposnick](https://github.com/jeffposnick) in [#1728](https://github.com/facebookincubator/create-react-app/pull/1728).*
@ -57,7 +57,7 @@ New apps automatically have these features, but you can easily convert an existi
We will be adding [more documentation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) on this topic in the coming weeks. Please feel free to [ask any questions](https://github.com/facebookincubator/create-react-app/issues/new) on the issue tracker!
### Jest 20 {#jest-20}
### Jest 20
>*This change was contributed by [@rogeliog](https://github.com/rogeliog) in [#1614](https://github.com/facebookincubator/create-react-app/pull/1614) and [@gaearon](https://github.com/gaearon) in [#2171](https://github.com/facebookincubator/create-react-app/pull/2171).*
@ -69,7 +69,7 @@ Highlights include a new [immersive watch mode](https://facebook.github.io/jest/
Additionally, Create React App now support configuring a few Jest options related to coverage reporting.
### Code Splitting with Dynamic import() {#code-splitting-with-dynamic-import}
### Code Splitting with Dynamic import()
>*This change was contributed by [@Timer](https://github.com/Timer) in [#1538](https://github.com/facebookincubator/create-react-app/pull/1538) and [@tharakawj](https://github.com/tharakawj) in [#1801](https://github.com/facebookincubator/create-react-app/pull/1801).*
@ -79,7 +79,7 @@ In this release, we are adding support for the [dynamic `import()` proposal](htt
>*This change was contributed by [@gaearon](https://github.com/gaearon) in [#2120](https://github.com/facebookincubator/create-react-app/pull/2120), [#2125](https://github.com/facebookincubator/create-react-app/pull/2125), and [#2161](https://github.com/facebookincubator/create-react-app/pull/2161).*
@ -91,13 +91,13 @@ For example, when you start the development server, we now display the LAN addre
When lint errors are reported, we no longer show the warnings so that you can concentrate on more critical issues. Errors and warnings in the production build output are better formatted, and the build error overlay font size now matches the browser font size more closely.
### But Wait... There's More! {#but-wait-theres-more}
### But Wait... There's More!
You can only fit so much in a blog post, but there are other long-requested features in this release, such as [environment-specific and local `.env` files](https://github.com/facebookincubator/create-react-app/pull/1344), [a lint rule against confusingly named globals](https://github.com/facebookincubator/create-react-app/pull/2130), [support for multiple proxies in development](https://github.com/facebookincubator/create-react-app/pull/1790), [a customizable browser launch script](https://github.com/facebookincubator/create-react-app/pull/1590), and many bugfixes.
You can read the full changelog and the migration guide in the [v1.0.0 release notes](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
### Acknowledgements {#acknowledgements}
### Acknowledgements
This release is a result of months of work from many people in the React community. It is focused on improving both developer and end user experience, as we believe they are complementary and go hand in hand.
Today we are releasing React 15.6.0. As we prepare for React 16.0, we have been fixing and cleaning up many things. This release continues to pave the way.
## Improving Inputs {#improving-inputs}
## Improving Inputs
In React 15.6.0 the `onChange` event for inputs is a little bit more reliable and handles more edge cases, including the following:
@ -18,7 +18,7 @@ In React 15.6.0 the `onChange` event for inputs is a little bit more reliable an
Thanks to [Jason Quense](https://github.com/jquense) and everyone who helped out on those issues and PRs.
## Less Noisy Deprecation Warnings {#less-noisy-deprecation-warnings}
## Less Noisy Deprecation Warnings
We are also including a couple of new warnings for upcoming deprecations. These should not affect most users, and for more details see the changelog below.
@ -26,7 +26,7 @@ After the last release, we got valuable community feedback that deprecation warn
---
## Installation {#installation}
## Installation
We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
@ -65,18 +65,18 @@ We've also published version `15.6.0` of `react` and `react-dom` on npm, and the
---
## Changelog {#changelog}
## Changelog
## 15.6.0 (June 13, 2017) {#1560-june-13-2017}
## 15.6.0 (June 13, 2017)
### React {#react}
### React
* Downgrade deprecation warnings to use `console.warn` instead of `console.error`. ([@flarnie](https://github.com/flarnie) in [#9753](https://github.com/facebook/react/pull/9753))
* Add a deprecation warning for `React.createClass`. Points users to `create-react-class` instead. ([@flarnie](https://github.com/flarnie) in [#9771](https://github.com/facebook/react/pull/9771))
* Add deprecation warnings and separate module for `React.DOM` factory helpers. ([@nhunzaker](https://github.com/nhunzaker) in [#8356](https://github.com/facebook/react/pull/8356))
* Warn for deprecation of `React.createMixin` helper, which was never used. ([@aweary](https://github.com/aweary) in [#8853](https://github.com/facebook/react/pull/8853))
### React DOM {#react-dom}
### React DOM
* Add support for CSS variables in `style` attribute. ([@aweary](https://github.com/aweary) in [#9302](https://github.com/facebook/react/pull/9302))
* Add support for CSS Grid style properties. ([@ericsakmar](https://github.com/ericsakmar) in [#9185](https://github.com/facebook/react/pull/9185))
@ -85,7 +85,7 @@ We've also published version `15.6.0` of `react` and `react-dom` on npm, and the
* Fix bug where controlled number input mistakenly allowed period. ([@nhunzaker](https://github.com/nhunzaker) in [#9584](https://github.com/facebook/react/pull/9584))
* Fix bug where performance entries were being cleared. ([@chrisui](https://github.com/chrisui) in [#9451](https://github.com/facebook/react/pull/9451))
### React Addons {#react-addons}
### React Addons
* Fix AMD support for addons depending on `react`. ([@flarnie](https://github.com/flarnie) in [#9919](https://github.com/facebook/react/issues/9919))
* Fix `isMounted()` to return `true` in `componentWillUnmount`. ([@mridgway](https://github.com/mridgway) in [#9638](https://github.com/facebook/react/issues/9638))
@ -7,11 +7,11 @@ As React 16 release is getting closer, we would like to announce a few changes t
**By the way, [we just released the first beta of React 16 for you to try!](https://github.com/facebook/react/issues/10294)**
## Behavior in React 15 and Earlier {#behavior-in-react-15-and-earlier}
## Behavior in React 15 and Earlier
In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
@ -55,15 +55,15 @@ The `componentDidCatch()` method works like a JavaScript `catch {}` block, but f
Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how `catch {}` block works in JavaScript.
## Live Demo {#live-demo}
## Live Demo
Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16 beta](https://github.com/facebook/react/issues/10294).
## Where to Place Error Boundaries {#where-to-place-error-boundaries}
## Where to Place Error Boundaries
The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.
## New Behavior for Uncaught Errors {#new-behavior-for-uncaught-errors}
## New Behavior for Uncaught Errors
This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.**
@ -75,7 +75,7 @@ For example, Facebook Messenger wraps content of the sidebar, the info panel, th
We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them.
React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened:
@ -87,7 +87,7 @@ You can also see the filenames and line numbers in the component stack trace. Th
If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.
## Why Not Use `try` / `catch`? {#why-not-use-try--catch}
## Why Not Use `try` / `catch`?
`try` / `catch` is great but it only works for imperative code:
@ -107,7 +107,7 @@ However, React components are declarative and specify *what* should be rendered:
Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate` method caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
## Naming Changes from React 15 {#naming-changes-from-react-15}
## Naming Changes from React 15
React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch` in your code starting from the first 16 beta release.
@ -24,7 +24,7 @@ In React 16, we are making a change. Now, any unknown attributes will end up in
<divmycustomattribute="something"/>
```
## Why Are We Changing This? {#why-are-we-changing-this}
## Why Are We Changing This?
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
@ -63,13 +63,13 @@ With the new approach, both of these problems are solved. With React 16, you can
In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
## Should I Keep Data in Custom Attributes? {#should-i-keep-data-in-custom-attributes}
## Should I Keep Data in Custom Attributes?
No. We don't encourage you to keep data in DOM attributes. Even if you have to, `data-` attributes are probably a better approach, but in most cases data should be kept in React component state or external stores.
However, the new feature is handy if you need to use a non-standard or a new DOM attribute, or if you need to integrate with a third-party library that relies on such attributes.
## Data and ARIA Attributes {#data-and-aria-attributes}
## Data and ARIA Attributes
Just like before, React lets you pass `data-` and `aria-` attributes freely:
@ -82,7 +82,7 @@ This has not changed.
[Accessibility](/docs/accessibility.html) is very important, so even though React 16 passes any attributes through, it still validates that `aria-` props have correct names in development mode, just like React 15 did.
## Migration Path {#migration-path}
## Migration Path
We have included [a warning about unknown attributes](/warnings/unknown-prop.html) since [React 15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0) which came out more than a year ago. The vast majority of third-party libraries have already updated their code. If your app doesn't produce warnings with React 15.2.0 or higher, this change should not require modifications in your application code.
@ -96,7 +96,7 @@ This is somewhat safe (the browser will just ignore them) but we recommend to fi
To avoid these problems, we suggest to fix the warnings you see in React 15 before upgrading to React 16.
## Changes in Detail {#changes-in-detail}
## Changes in Detail
We've made a few other changes to make the behavior more predictable and help ensure you're not making mistakes. We don't anticipate that these changes are likely to break real-world applications.
@ -167,12 +167,12 @@ Below is a detailed list of them.
While testing this release, we have also [created an automatically generated table](https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md) for all known attributes to track potential regressions.
## Try It! {#try-it}
## Try It!
You can try the change in [this CodePen](https://codepen.io/gaearon/pen/gxNVdP?editors=0010).
It uses React 16 RC, and you can [help us by testing the RC in your project!](https://github.com/facebook/react/issues/10294)
## Thanks {#thanks}
## Thanks
This effort was largely driven by [Nathan Hunzaker](https://github.com/nhunzaker) who has been a [prolific outside contributor to React](https://github.com/facebook/react/pulls?q=is:pr+author:nhunzaker+is:closed).
@ -182,6 +182,6 @@ Major changes in a popular project can take a lot of time and research. Nathan d
We would also like to thank [Brandon Dail](https://github.com/aweary) and [Jason Quense](https://github.com/jquense) for their invaluable help maintaining React this year.
## Future Work {#future-work}
## Future Work
We are not changing how [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) work in React 16, but there are [existing discussions](https://github.com/facebook/react/issues/7249) about setting properties instead of attributes, and we might revisit this in React 17. Feel free to chime in if you'd like to help!
@ -7,7 +7,7 @@ Today we're sending out React 15.6.2. In 15.6.1, we shipped a few fixes for chan
Additionally, 15.6.2 adds support for the [`controlList`](https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist) attribute, and CSS columns are no longer appended with a `px` suffix.
## Installation {#installation}
## Installation
We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
@ -46,14 +46,14 @@ We've also published version `15.6.2` of `react` and `react-dom` on npm, and the
* Fix a bug where modifying `document.documentMode` would trigger IE detection in other browsers, breaking change events. ([@aweary](https://github.com/aweary) in [#10032](https://github.com/facebook/react/pull/10032))
* CSS Columns are treated as unitless numbers. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/10115))
We're excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including [**fragments**](#new-render-return-types-fragments-and-strings), [**error boundaries**](#better-error-handling), [**portals**](#portals), support for [**custom DOM attributes**](#support-for-custom-dom-attributes), improved [**server-side rendering**](#better-server-side-rendering), and [**reduced file size**](#reduced-file-size).
### New render return types: fragments and strings {#new-render-return-types-fragments-and-strings}
### New render return types: fragments and strings
You can now return an array of elements from a component's `render` method. Like with other arrays, you'll need to add a key to each element to avoid the key warning:
@ -33,7 +33,7 @@ render() {
[See the full list of supported return types](/docs/react-component.html#render).
Previously, runtime errors during rendering could put React in a broken state, producing cryptic error messages and requiring a page refresh to recover. To address this problem, React 16 uses a more resilient error-handling strategy. By default, if an error is thrown inside a component's render or lifecycle methods, the whole component tree is unmounted from the root. This prevents the display of corrupted data. However, it's probably not the ideal user experience.
@ -42,7 +42,7 @@ Instead of unmounting the whole app every time there's an error, you can use err
For more details, check out our [previous post on error handling in React 16](/blog/2017/07/26/error-handling-in-react-16.html).
### Portals {#portals}
### Portals
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
@ -59,7 +59,7 @@ render() {
See a full example in the [documentation for portals](/docs/portals.html).
React 16 includes a completely rewritten server renderer. It's really fast. It supports **streaming**, so you can start sending bytes to the client faster. And thanks to a [new packaging strategy](#reduced-file-size) that compiles away `process.env` checks (Believe it or not, reading `process.env` in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.
@ -69,11 +69,11 @@ In addition, React 16 is better at hydrating server-rendered HTML once it reache
See the [documentation for `ReactDOMServer`](/docs/react-dom-server.html) for more details.
### Support for custom DOM attributes {#support-for-custom-dom-attributes}
### Support for custom DOM attributes
Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](/blog/2017/09/08/dom-attributes-in-react-16.html). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.
### Reduced file size {#reduced-file-size}
### Reduced file size
Despite all these additions, React 16 is actually **smaller** compared to 15.6.1!
@ -85,11 +85,11 @@ That amounts to a combined **32% size decrease compared to the previous version
The size difference is partly attributable to a change in packaging. React now uses [Rollup](https://rollupjs.org/) to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The flat bundle format also means that React's impact on bundle size is roughly consistent regardless of how you ship your app, whether it's with Webpack, Browserify, the pre-built UMD bundles, or any other system.
### MIT licensed {#mit-licensed}
### MIT licensed
[In case you missed it](https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/), React 16 is available under the MIT license. We've also published React 15.6.2 under MIT, for those who are unable to upgrade immediately.
### New core architecture {#new-core-architecture}
### New core architecture
React 16 is the first version of React built on top of a new core architecture, codenamed "Fiber." You can read all about this project over on [Facebook's engineering blog](https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/). (Spoiler: we rewrote React!)
@ -105,7 +105,7 @@ This demo provides an early peek at the types of problems async rendering can so
We think async rendering is a big deal, and represents the future of React. To make migration to v16.0 as smooth as possible, we're not enabling any async features yet, but we're excited to start rolling them out in the coming months. Stay tuned!
## Installation {#installation}
## Installation
React v16.0.0 is available on the npm registry.
@ -130,18 +130,18 @@ We also provide UMD builds of React via a CDN:
Refer to the documentation for [detailed installation instructions](/docs/installation.html).
## Upgrading {#upgrading}
## Upgrading
Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.**
For deprecations listed in [packaging](#packaging) below, codemods are provided to automatically transform your deprecated code.
See the [15.5.0](/blog/2017/04/07/react-v15.5.0.html) blog post for more information, or browse the codemods in the [react-codemod](https://github.com/reactjs/react-codemod) project.
### New deprecations {#new-deprecations}
### New deprecations
Hydrating a server-rendered container now has an explicit API. If you're reviving server-rendered HTML, use [`ReactDOM.hydrate`](/docs/react-dom.html#hydrate) instead of `ReactDOM.render`. Keep using `ReactDOM.render` if you're just doing client-side rendering.
### React Addons {#react-addons}
### React Addons
As previously announced, we've [discontinued support for React Addons](/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons). We expect the latest version of each addon (except `react-addons-perf`; see below) to work for the foreseeable future, but we won't publish additional updates.
@ -149,7 +149,7 @@ Refer to the previous announcement for [suggestions on how to migrate](/blog/201
`react-addons-perf` no longer works at all in React 16. It's likely that we'll release a new version of this tool in the future. In the meantime, you can [use your browser's performance tools to profile React components](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab).
### Breaking changes {#breaking-changes}
### Breaking changes
React 16 includes a number of small breaking changes. These only affect uncommon use cases and we don't expect them to break most apps.
@ -167,7 +167,7 @@ React 16 includes a number of small breaking changes. These only affect uncommon
* Shallow renderer does not implement `unstable_batchedUpdates` anymore.
* `ReactDOM.unstable_batchedUpdates` now only takes one extra argument after the callback.
### Packaging {#packaging}
### Packaging
* There is no `react/lib/*` and `react-dom/lib/*` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in a new issue, and we’ll try to figure out a migration strategy for you.
* There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
@ -178,7 +178,7 @@ React 16 includes a number of small breaking changes. These only affect uncommon
React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE <11),considerincludingaglobalpolyfillinyourbundledapplication,suchas [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
@ -204,7 +204,7 @@ You can use the [raf](https://www.npmjs.com/package/raf) package to shim `reques
import 'raf/polyfill';
```
## Acknowledgments {#acknowledgments}
## Acknowledgments
As always, this release would not have been possible without our open source contributors. Thanks to everyone who filed bugs, opened PRs, responded to issues, wrote documentation, and more!
This exciting new feature is made possible by additions to both React and JSX.
## What Are Fragments? {#what-are-fragments}
## What Are Fragments?
A common pattern is for a component to return a list of children. Take this example HTML:
@ -107,7 +107,7 @@ const Fragment = React.Fragment;
</React.Fragment>
```
## JSX Fragment Syntax {#jsx-fragment-syntax}
## JSX Fragment Syntax
Fragments are a common pattern in our codebases at Facebook. We anticipate they'll be widely adopted by other teams, too. To make the authoring experience as convenient as possible, we're adding syntactical support for fragments to JSX:
@ -129,7 +129,7 @@ In React, this desugars to a `<React.Fragment/>` element, as in the example from
Fragment syntax in JSX was inspired by prior art such as the `XMLList() <></>` constructor in [E4X](https://developer.mozilla.org/en-US/docs/Archive/Web/E4X/E4X_for_templating). Using a pair of empty tags is meant to represent the idea it won't add an actual element to the DOM.
### Keyed Fragments {#keyed-fragments}
### Keyed Fragments
Note that the `<></>` syntax does not accept attributes, including keys.
@ -153,19 +153,19 @@ function Glossary(props) {
`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
### Live Demo {#live-demo}
### Live Demo
You can experiment with JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
## Support for Fragment Syntax {#support-for-fragment-syntax}
## Support for Fragment Syntax
Support for fragment syntax in JSX will vary depending on the tools you use to build your app. Please be patient as the JSX community works to adopt the new syntax. We've been working closely with maintainers of the most popular projects:
### Create React App {#create-react-app}
### Create React App
Experimental support for fragment syntax will be added to Create React App within the next few days. A stable release may take a bit longer as we await adoption by upstream projects.
### Babel {#babel}
### Babel
Support for JSX fragments is available in [Babel v7.0.0-beta.31](https://github.com/babel/babel/releases/tag/v7.0.0-beta.31) and above! If you are already on Babel 7, simply update to the latest Babel and plugin transform:
@ -189,15 +189,15 @@ Note that Babel 7 is technically still in beta, but a [stable release is coming
Unfortunately, support for Babel 6.x is not available, and there are currently no plans to backport.
#### Babel with Webpack (babel-loader) {#babel-with-webpack-babel-loader}
#### Babel with Webpack (babel-loader)
If you are using Babel with [Webpack](https://webpack.js.org/), no additional steps are needed because [babel-loader](https://github.com/babel/babel-loader) will use your peer-installed version of Babel.
#### Babel with Other Frameworks {#babel-with-other-frameworks}
#### Babel with Other Frameworks
If you use JSX with a non-React framework like Inferno or Preact, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag) that configures the Babel compiler to de-sugar the `<></>` syntax to a custom identifier.
### TypeScript {#typescript}
### TypeScript
TypeScript has full support for fragment syntax! Please upgrade to [version 2.6.2](https://github.com/Microsoft/TypeScript/releases/tag/v2.6.2). (Note that this is important even if you are already on version 2.6.1, since support was added as patch release in 2.6.2.)
@ -210,7 +210,7 @@ yarn upgrade typescript
npm update typescript
```
### Flow {#flow}
### Flow
[Flow](https://flow.org/) support for JSX fragments is available starting in [version 0.59](https://github.com/facebook/flow/releases/tag/v0.59.0)! Simply run
@ -223,11 +223,11 @@ npm update flow-bin
to update Flow to the latest version.
### Prettier {#prettier}
### Prettier
[Prettier](https://github.com/prettier/prettier) added support for fragments in their [1.9 release](https://prettier.io/blog/2017/12/05/1.9.0.html#jsx-fragment-syntax-3237-https-githubcom-prettier-prettier-pull-3237-by-duailibe-https-githubcom-duailibe).
### ESLint {#eslint}
### ESLint
JSX Fragments are supported by [ESLint](https://eslint.org/) 3.x when it is used together with [babel-eslint](https://github.com/babel/babel-eslint):
@ -257,19 +257,19 @@ That's it!
Note that `babel-eslint` is not officially supported by ESLint. We'll be looking into adding support for fragments to ESLint 4.x itself in the coming weeks (see [issue #9662](https://github.com/eslint/eslint/issues/9662)).
### Editor Support {#editor-support}
### Editor Support
It may take a while for fragment syntax to be supported in your text editor. Please be patient as the community works to adopt the latest changes. In the meantime, you may see errors or inconsistent highlighting if your editor does not yet support fragment syntax. Generally, these errors can be safely ignored.
#### TypeScript Editor Support {#typescript-editor-support}
#### TypeScript Editor Support
If you're a TypeScript user -- great news! Editor support for JSX fragments is already available in [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593), [Visual Studio 2017](https://www.microsoft.com/en-us/download/details.aspx?id=55258), [Visual Studio Code](https://code.visualstudio.com/updates/v1_19#_jsx-fragment-syntax) and [Sublime Text via Package Control](https://packagecontrol.io/packages/TypeScript).
### Other Tools {#other-tools}
### Other Tools
For other tools, please check with the corresponding documentation to check if there is support available. However, if you're blocked by your tooling, you can always start with using the `<Fragment>` component and perform a codemod later to replace it with the shorthand syntax when the appropriate support is available.
## Installation {#installation}
## Installation
React v16.2.0 is available on the npm registry.
@ -294,31 +294,31 @@ We also provide UMD builds of React via a CDN:
Refer to the documentation for [detailed installation instructions](/docs/installation.html).
## Changelog {#changelog}
## Changelog
### React {#react}
### React
* Add `Fragment` as named export to React. ([@clemmy](https://github.com/clemmy) in [#10783](https://github.com/facebook/react/pull/10783))
* Support experimental Call/Return types in `React.Children` utilities. ([@MatteoVH](https://github.com/MatteoVH) in [#11422](https://github.com/facebook/react/pull/11422))
### React DOM {#react-dom}
### React DOM
* Fix radio buttons not getting checked when using multiple lists of radios. ([@landvibe](https://github.com/landvibe) in [#11227](https://github.com/facebook/react/pull/11227))
* Fix radio buttons not receiving the `onChange` event in some cases. ([@jquense](https://github.com/jquense) in [#11028](https://github.com/facebook/react/pull/11028))
### React Test Renderer {#react-test-renderer}
### React Test Renderer
* Fix `setState()` callback firing too early when called from `componentWillMount`. ([@accordeiro](https://github.com/accordeiro) in [#11507](https://github.com/facebook/react/pull/11507))
### React Reconciler {#react-reconciler}
### React Reconciler
* Expose `react-reconciler/reflection` with utilities useful to custom renderers. ([@rivenhk](https://github.com/rivenhk) in [#11683](https://github.com/facebook/react/pull/11683))
### Internal Changes {#internal-changes}
### Internal Changes
* Many tests were rewritten against the public API. Big thanks to [everyone who contributed](https://github.com/facebook/react/issues/11299)!
## Acknowledgments {#acknowledgments}
## Acknowledgments
This release was made possible by our open source contributors. A big thanks to everyone who filed issues, contributed to syntax discussions, reviewed pull requests, added support for JSX fragments in third party libraries, and more!
@ -15,13 +15,13 @@ Inspired by [Yarn](https://github.com/yarnpkg/rfcs), [Ember](https://github.com/
RFCs are accepted when they are approved for implementation in React. A more thorough description of the process is available in the repository's [README](https://github.com/reactjs/rfcs/blob/master/README.md). The exact details may be refined in the future.
## Who Can Submit RFCs? {#who-can-submit-rfcs}
## Who Can Submit RFCs?
Anyone! No knowledge of React's internals is required, nor are you expected to implement the proposal yourself.
As with our other repositories, we do ask that you complete a [Contributor License Agreement](https://github.com/reactjs/rfcs#contributor-license-agreement-cla) before we can accept your PR.
## What Types of Changes Should Be Submitted As RFCs? {#what-types-of-changes-should-be-submitted-as-rfcs}
## What Types of Changes Should Be Submitted As RFCs?
Generally, any idea that would benefit from additional review or design before being implemented is a good candidate for an RFC. As a rule of thumb, this means any proposal that adds, changes, or removes a React API.
@ -33,7 +33,7 @@ We now have several repositories where you can submit contributions to React:
- **Website and documentation**: [reactjs/reactjs.org](https://github.com/reactjs/reactjs.org)
- **Ideas for changes that need additional review before being implemented**: [reactjs/rfcs](https://github.com/reactjs/rfcs)
## RFC for A New Context API {#rfc-for-a-new-context-api}
## RFC for A New Context API
Coinciding with the launch of our RFC process, we've submitted a [proposal for a new version of context](https://github.com/reactjs/rfcs/pull/2). The proposal has already received many valuable comments from the community that we will incorporate into the design of the new API.
Some files were not shown because too many files changed in this diff
Nat Alison
6 years ago