Browse Source

Use custom ID format that works better with MDX 2 (#4105)

* Fix two unicode whitespaces which are invalid

* Use custom ID format that works better with MDX 2

* Fix sebastian

* remark-slug as dev dep
main
Titus 3 years ago
committed by GitHub
parent
commit
4022f9774b
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      beta/package.json
  2. 34
      beta/plugins/remark-header-custom-ids.js
  3. 65
      beta/scripts/generateHeadingIDs.js
  4. 8
      beta/src/pages/blog/2013/06/05/why-react.md
  5. 8
      beta/src/pages/blog/2013/06/12/community-roundup.md
  6. 12
      beta/src/pages/blog/2013/06/19/community-roundup-2.md
  7. 6
      beta/src/pages/blog/2013/06/21/react-v0-3-3.md
  8. 12
      beta/src/pages/blog/2013/06/27/community-roundup-3.md
  9. 4
      beta/src/pages/blog/2013/07/02/react-v0-4-autobind-by-default.md
  10. 8
      beta/src/pages/blog/2013/07/03/community-roundup-4.md
  11. 4
      beta/src/pages/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md
  12. 6
      beta/src/pages/blog/2013/07/17/react-v0-4-0.md
  13. 12
      beta/src/pages/blog/2013/07/23/community-roundup-5.md
  14. 4
      beta/src/pages/blog/2013/07/26/react-v0-4-1.md
  15. 8
      beta/src/pages/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md
  16. 10
      beta/src/pages/blog/2013/08/05/community-roundup-6.md
  17. 6
      beta/src/pages/blog/2013/08/19/use-react-and-jsx-in-python-applications.md
  18. 6
      beta/src/pages/blog/2013/08/26/community-roundup-7.md
  19. 12
      beta/src/pages/blog/2013/09/24/community-roundup-8.md
  20. 12
      beta/src/pages/blog/2013/10/03/community-roundup-9.md
  21. 10
      beta/src/pages/blog/2013/10/16/react-v0.5.0.md
  22. 6
      beta/src/pages/blog/2013/10/29/react-v0-5-1.md
  23. 16
      beta/src/pages/blog/2013/11/06/community-roundup-10.md
  24. 18
      beta/src/pages/blog/2013/11/18/community-roundup-11.md
  25. 10
      beta/src/pages/blog/2013/12/19/react-v0.8.0.md
  26. 18
      beta/src/pages/blog/2013/12/23/community-roundup-12.md
  27. 16
      beta/src/pages/blog/2013/12/30/community-roundup-13.md
  28. 16
      beta/src/pages/blog/2014/01/06/community-roundup-14.md
  29. 22
      beta/src/pages/blog/2014/02/05/community-roundup-15.md
  30. 20
      beta/src/pages/blog/2014/02/15/community-roundup-16.md
  31. 16
      beta/src/pages/blog/2014/02/16/react-v0.9-rc1.md
  32. 18
      beta/src/pages/blog/2014/02/20/react-v0.9.md
  33. 40
      beta/src/pages/blog/2014/02/24/community-roundup-17.md
  34. 30
      beta/src/pages/blog/2014/03/14/community-roundup-18.md
  35. 14
      beta/src/pages/blog/2014/03/19/react-v0.10-rc1.md
  36. 14
      beta/src/pages/blog/2014/03/21/react-v0.10.md
  37. 16
      beta/src/pages/blog/2014/03/28/the-road-to-1.0.md
  38. 2
      beta/src/pages/blog/2014/04/04/reactnet.md
  39. 18
      beta/src/pages/blog/2014/06/27/community-roundup-19.md
  40. 26
      beta/src/pages/blog/2014/07/13/react-v0.11-rc1.md
  41. 30
      beta/src/pages/blog/2014/07/17/react-v0.11.md
  42. 8
      beta/src/pages/blog/2014/07/25/react-v0.11.1.md
  43. 20
      beta/src/pages/blog/2014/07/28/community-roundup-20.md
  44. 8
      beta/src/pages/blog/2014/07/30/flux-actions-and-the-dispatcher.md
  45. 20
      beta/src/pages/blog/2014/08/03/community-roundup-21.md
  46. 18
      beta/src/pages/blog/2014/09/12/community-round-up-22.md
  47. 8
      beta/src/pages/blog/2014/09/16/react-v0.11.2.md
  48. 12
      beta/src/pages/blog/2014/09/24/testing-flux-applications.md
  49. 20
      beta/src/pages/blog/2014/10/14/introducing-react-elements.md
  50. 22
      beta/src/pages/blog/2014/10/16/react-v0.12-rc1.md
  51. 28
      beta/src/pages/blog/2014/10/17/community-roundup-23.md
  52. 36
      beta/src/pages/blog/2014/10/28/react-v0.12.md
  53. 22
      beta/src/pages/blog/2014/11/25/community-roundup-24.md
  54. 6
      beta/src/pages/blog/2014/12/18/react-v0.12.2.md
  55. 6
      beta/src/pages/blog/2014/12/19/react-js-conf-diversity-scholarship.md
  56. 12
      beta/src/pages/blog/2015/01/27/react-v0.13.0-beta-1.md
  57. 4
      beta/src/pages/blog/2015/02/18/react-conf-roundup-2015.md
  58. 12
      beta/src/pages/blog/2015/02/20/introducing-relay-and-graphql.md
  59. 24
      beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md
  60. 40
      beta/src/pages/blog/2015/02/24/streamlining-react-elements.md
  61. 2
      beta/src/pages/blog/2015/03/03/react-v0.13-rc2.md
  62. 10
      beta/src/pages/blog/2015/03/04/community-roundup-25.md
  63. 26
      beta/src/pages/blog/2015/03/10/react-v0.13.md
  64. 14
      beta/src/pages/blog/2015/03/16/react-v0.13.1.md
  65. 16
      beta/src/pages/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md
  66. 22
      beta/src/pages/blog/2015/03/30/community-roundup-26.md
  67. 4
      beta/src/pages/blog/2015/04/17/react-native-v0.4.md
  68. 14
      beta/src/pages/blog/2015/04/18/react-v0.13.2.md
  69. 10
      beta/src/pages/blog/2015/05/01/graphql-introduction.md
  70. 12
      beta/src/pages/blog/2015/05/08/react-v0.13.3.md
  71. 8
      beta/src/pages/blog/2015/06/12/deprecating-jstransform-and-react-tools.md
  72. 4
      beta/src/pages/blog/2015/07/03/react-v0.14-beta-1.md
  73. 20
      beta/src/pages/blog/2015/08/03/new-react-devtools-beta.md
  74. 8
      beta/src/pages/blog/2015/08/11/relay-technical-preview.md
  75. 2
      beta/src/pages/blog/2015/09/02/new-react-developer-tools.md
  76. 16
      beta/src/pages/blog/2015/09/10/react-v0.14-rc1.md
  77. 12
      beta/src/pages/blog/2015/09/14/community-roundup-27.md
  78. 4
      beta/src/pages/blog/2015/10/01/react-render-and-top-level-api.md
  79. 18
      beta/src/pages/blog/2015/10/07/react-v0.14.md
  80. 28
      beta/src/pages/blog/2015/10/19/reactiflux-is-moving-to-discord.md
  81. 10
      beta/src/pages/blog/2015/10/28/react-v0.14.1.md
  82. 4
      beta/src/pages/blog/2015/11/02/react-v0.14.2.md
  83. 10
      beta/src/pages/blog/2015/11/18/react-v0.14.3.md
  84. 6
      beta/src/pages/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md
  85. 18
      beta/src/pages/blog/2015/12/18/react-components-elements-and-instances.md
  86. 8
      beta/src/pages/blog/2015/12/29/react-v0.14.4.md
  87. 10
      beta/src/pages/blog/2016/02/19/new-versioning-scheme.md
  88. 16
      beta/src/pages/blog/2016/03/07/react-v15-rc1.md
  89. 2
      beta/src/pages/blog/2016/03/16/react-v15-rc2.md
  90. 4
      beta/src/pages/blog/2016/03/29/react-v0.14.8.md
  91. 18
      beta/src/pages/blog/2016/04/07/react-v15.md
  92. 6
      beta/src/pages/blog/2016/04/08/react-v15.0.1.md
  93. 36
      beta/src/pages/blog/2016/07/13/mixins-considered-harmful.md
  94. 24
      beta/src/pages/blog/2016/07/22/create-apps-with-no-configuration.md
  95. 14
      beta/src/pages/blog/2016/08/05/relay-state-of-the-state.md
  96. 12
      beta/src/pages/blog/2016/09/28/our-first-50000-stars.md
  97. 20
      beta/src/pages/blog/2016/11/16/react-v15.4.0.md
  98. 26
      beta/src/pages/blog/2017/04/07/react-v15.5.0.md
  99. 16
      beta/src/pages/blog/2017/05/18/whats-new-in-create-react-app.md
  100. 16
      beta/src/pages/blog/2017/06/13/react-v15.6.0.md

3
beta/package.json

@ -76,6 +76,7 @@
"remark-external-links": "^7.0.0",
"remark-html": "^12.0.0",
"remark-images": "^2.0.0",
"remark-slug": "^7.0.0",
"remark-unwrap-images": "^2.0.0",
"retext": "^7.0.1",
"retext-smartypants": "^4.0.0",
@ -93,4 +94,4 @@
"budgetPercentIncreaseRed": 10,
"showDetails": true
}
}
}

34
beta/plugins/remark-header-custom-ids.js

@ -30,16 +30,34 @@ module.exports = ({
slugs.reset();
return function transformer(tree) {
visit(tree, 'heading', (node) => {
// Support custom-id syntax.
const rawHeader = toString(node);
const match = /^.+(\s*\{#([\p{L}0-9\-_]+?)\}\s*)$/u.exec(rawHeader);
const id = match ? match[2] : slugs.slug(rawHeader, maintainCase);
if (match) {
// Remove the custom ID part from the text node.
const lastNode = node.children[node.children.length - 1];
lastNode.value = lastNode.value.replace(match[1], '');
const children = node.children;
let tail = children[children.length - 1];
// A bit weird: this is to support MDX 2 comments in expressions,
// while we’re still on MDX 1, which doesn’t support them.
if (!tail || tail.type !== 'text' || tail.value !== '/}') {
return
}
tail = children[children.length - 2]
if (!tail && tail.type !== 'emphasis') {
return
}
const id = toString(tail)
tail = children[children.length - 3]
if (!tail || tail.type !== 'text' || !tail.value.endsWith('{/')) {
return
}
// Remove the emphasis and trailing `/}`
children.splice(children.length - 2, 2)
// Remove the `{/`
tail.value = tail.value.replace(/[ \t]*\{\/$/, '')
const data = patch(node, 'data', {});
patch(data, 'id', id);

65
beta/scripts/generateHeadingIDs.js

@ -2,9 +2,16 @@
* Copyright (c) Facebook, Inc. and its affiliates.
*/
// To do: Make this ESM.
// To do: properly check heading numbers (headings with the same text get
// numbered, this script doesn’t check that).
const assert = require('assert');
const fs = require('fs');
const GithubSlugger = require('github-slugger');
let modules
function walk(dir) {
let results = [];
const list = fs.readdirSync(dir);
@ -31,15 +38,25 @@ function addHeaderID(line, slugger) {
if (!line.startsWith('#')) {
return line;
}
// check if it already has an id
if (/\{#[^}]+\}/.test(line)) {
return line;
const match = /^(#+\s+)(.+?)(\s*\{(?:\/\*|#)([^\}\*\/]+)(?:\*\/)?\}\s*)?$/.exec(line);
const before = match[1] + match[2]
const proc = modules.unified().use(modules.remarkParse).use(modules.remarkSlug)
const tree = proc.runSync(proc.parse(before))
const head = tree.children[0]
assert(head && head.type === 'heading', 'expected `' + before + '` to be a heading, is it using a normal space after `#`?')
const autoId = head.data.id
const existingId = match[4]
const id = existingId || autoId
// Ignore numbers:
const cleanExisting = existingId ? existingId.replace(/-\d+$/, '') : undefined
const cleanAuto = autoId.replace(/-\d+$/, '')
if (cleanExisting && cleanExisting !== cleanAuto) {
console.log('Note: heading `%s` has a different ID (`%s`) than what GH generates for it: `%s`:', before, existingId, autoId)
}
const headingText = line.slice(line.indexOf(' ')).trim();
const headingLevel = line.slice(0, line.indexOf(' '));
return `${headingLevel} ${headingText} {#${slugger.slug(
stripLinks(headingText)
)}}`;
return match[1] + match[2] + ' {/*' + id + '*/}';
}
function addHeaderIDs(lines) {
@ -66,14 +83,26 @@ function addHeaderIDs(lines) {
const [path] = process.argv.slice(2);
const files = walk(path);
files.forEach((file) => {
if (!(file.endsWith('.md') || file.endsWith('.mdx'))) {
return;
}
main()
async function main() {
const [unifiedMod, remarkParseMod, remarkSlugMod] = await Promise.all([import('unified'), import('remark-parse'), import('remark-slug')])
const unified = unifiedMod.default
const remarkParse = remarkParseMod.default
const remarkSlug = remarkSlugMod.default
modules = {unified, remarkParse, remarkSlug}
const content = fs.readFileSync(file, 'utf8');
const lines = content.split('\n');
const updatedLines = addHeaderIDs(lines);
fs.writeFileSync(file, updatedLines.join('\n'));
});
const files = walk(path);
files.forEach((file) => {
if (!(file.endsWith('.md') || file.endsWith('.mdx'))) {
return;
}
const content = fs.readFileSync(file, 'utf8');
const lines = content.split('\n');
const updatedLines = addHeaderIDs(lines);
fs.writeFileSync(file, updatedLines.join('\n'));
});
}

8
beta/src/pages/blog/2013/06/05/why-react.md

@ -6,13 +6,13 @@ author: [petehunt]
There are a lot of JavaScript MVC frameworks out there. Why did we build React
and why would you want to use it?
## React isn't an MVC framework. {#react-isnt-an-mvc-framework}
## React isn't an MVC framework. {/*react-isnt-an-mvc-framework*/}
React is a library for building composable user interfaces. It encourages
the creation of reusable UI components which present data that changes over
time.
## React doesn't use templates. {#react-doesnt-use-templates}
## React doesn't use templates. {/*react-doesnt-use-templates*/}
Traditionally, web application UIs are built using templates or HTML directives.
These templates dictate the full set of abstractions that you are allowed to use
@ -33,7 +33,7 @@ to render views, which we see as an advantage over templates for a few reasons:
We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax
extension, in case you prefer the readability of HTML to raw JavaScript.
## Reactive updates are dead simple. {#reactive-updates-are-dead-simple}
## Reactive updates are dead simple. {/*reactive-updates-are-dead-simple*/}
React really shines when your data changes over time.
@ -63,7 +63,7 @@ Because this re-render is so fast (around 1ms for TodoMVC), the developer
doesn't need to explicitly specify data bindings. We've found this approach
makes it easier to build apps.
## HTML is just the beginning. {#html-is-just-the-beginning}
## HTML is just the beginning. {/*html-is-just-the-beginning*/}
Because React has its own lightweight representation of the document, we can do
some pretty cool things with it:

8
beta/src/pages/blog/2013/06/12/community-roundup.md

@ -5,7 +5,7 @@ author: [vjeux]
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 {/*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:
@ -17,7 +17,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) {/*pimp-my-backboneview-by-replacing-it-with-react*/}
[Paul Seiffert](https://blog.mayflower.de/) wrote a blog post that explains how to integrate React into Backbone applications.
@ -29,7 +29,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 {/*using-facebooks-react-with-requirejs*/}
[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.
@ -37,7 +37,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 {/*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:

12
beta/src/pages/blog/2013/06/19/community-roundup-2.md

@ -5,7 +5,7 @@ author: [vjeux]
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 {/*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 {/*react-and-socketio-chat-application*/}
[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
@ -29,7 +29,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 {/*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.
@ -41,7 +41,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 {/*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.
@ -51,7 +51,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 {/*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.
@ -63,7 +63,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 {/*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:

6
beta/src/pages/blog/2013/06/21/react-v0-3-3.md

@ -5,16 +5,16 @@ author: [zpao]
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 {/*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 {/*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 {/*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.

12
beta/src/pages/blog/2013/06/27/community-roundup-3.md

@ -5,7 +5,7 @@ author: [vjeux]
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 {/*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 {/*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)
## Backbone/Handlebars Nested Views {#backbonehandlebars-nested-views}
## Backbone/Handlebars Nested Views {/*backbonehandlebars-nested-views*/}
[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 {/*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.
<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
## CoffeeScript integration {#coffeescript-integration}
## CoffeeScript integration {/*coffeescript-integration*/}
[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 {/*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.

4
beta/src/pages/blog/2013/07/02/react-v0-4-autobind-by-default.md

@ -6,7 +6,7 @@ author: [zpao]
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? {/*what-is-reactautobind*/}
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? {/*whats-changing-in-v04*/}
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.

8
beta/src/pages/blog/2013/07/03/community-roundup-4.md

@ -5,7 +5,7 @@ author: [vjeux]
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 {/*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
[![](/images/blog/monkeys.gif)](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
## React Snippets {#react-snippets}
## React Snippets {/*react-snippets*/}
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 {/*introduction-to-react-screencast*/}
[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
<figure><iframe src="https://player.vimeo.com/video/67248575" width="100%" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
## Snake in React {#snake-in-react}
## Snake in React {/*snake-in-react*/}
[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.

4
beta/src/pages/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md

@ -5,7 +5,7 @@ author: [zpao]
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 {/*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.
@ -27,7 +27,7 @@ React.createClass({
});
```
## Default Values {#default-values}
## Default Values {/*default-values*/}
One common pattern we've seen with our React code is to do something like this:

6
beta/src/pages/blog/2013/07/17/react-v0-4-0.md

@ -11,7 +11,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 {/*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>`)
@ -23,7 +23,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 {/*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
@ -31,7 +31,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 {/*react-tools*/}
- Fixed a number of bugs when transforming directories
- No longer re-write `require()`s to be relative unless specified

12
beta/src/pages/blog/2013/07/23/community-roundup-5.md

@ -5,7 +5,7 @@ author: [vjeux]
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 :)
## Cross-browser onChange {#cross-browser-onchange}
## Cross-browser onChange {/*cross-browser-onchange*/}
[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.
@ -15,7 +15,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 {/*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).
@ -48,7 +48,7 @@ Learning a new library is always easier when you have working examples you can p
> [#4](https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html)
> - Toggle [#1](https://rawgithub.com/jhw/react-samples/master/html/toggle.html)
## React Chosen Wrapper {#react-chosen-wrapper}
## React Chosen Wrapper {/*react-chosen-wrapper*/}
[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.
@ -62,19 +62,19 @@ React.renderComponent(
);
```
## JSX and ES6 Template Strings {#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.
<figure><iframe src="https://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="100%" height={356} frameBorder={0} marginWidth={0} marginHeight={0} scrolling="no" style={{border: '1px solid #CCC', borderWidth: '1px 1px 0', marginBottom: 5}} allowFullScreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
## React Presentation {#react-presentation}
## React Presentation {/*react-presentation*/}
[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.
<figure><iframe width={650} height={400} src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameBorder={0} allowFullScreen /></figure>
## Docs {#docs}
## Docs {/*docs*/}
[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.

4
beta/src/pages/blog/2013/07/26/react-v0-4-1.md

@ -5,7 +5,7 @@ author: [zpao]
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 {/*react*/}
- `setState` callbacks are now executed in the scope of your component.
- `click` events now work on Mobile Safari.
@ -14,7 +14,7 @@ React v0.4.1 is a small update, mostly containing correctness fixes. Some code h
- Improved support for `<iframe>` attributes.
- Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
## JSXTransformer {#jsxtransformer}
## JSXTransformer {/*jsxtransformer*/}
- Improved environment detection so it can be run in a non-browser environment.

8
beta/src/pages/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md

@ -10,7 +10,7 @@ This gem has 2 primary purposes:
1. To package `react.js` in a way that's easy to use and easy to update.
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 {/*packaging-reactjs*/}
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:
@ -29,7 +29,7 @@ end
//= require react
```
## Writing JSX {#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.
@ -38,10 +38,10 @@ When you name your file with `myfile.js.jsx`, `react-rails` will automatically t
React.renderComponent(<MyComponent />, document.getElementById('example'));
```
## Asset Pipeline {#asset-pipeline}
## Asset Pipeline {/*asset-pipeline*/}
`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*/}
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.

10
beta/src/pages/blog/2013/08/05/community-roundup-6.md

@ -5,13 +5,13 @@ author: [vjeux]
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 {/*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.
<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/images/blog/dog-tutorial.png"/></a></figure>
## Reactify {#reactify}
## Reactify {/*reactify*/}
[Andrey Popp](http://andreypopp.com/) created a [Browserify](http://browserify.org/) helper to compile JSX files.
@ -25,7 +25,7 @@ This is the first Community Round-up where none of the items are from Facebook/I
>
> [Check it out on GitHub...](https://github.com/andreypopp/reactify)
## React Integration with Este {#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.
@ -49,7 +49,7 @@ este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.
[Check it out on GitHub...](https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee)
## React Stylus Boilerplate {#react-stylus-boilerplate}
## React Stylus Boilerplate {/*react-stylus-boilerplate*/}
[Zaim Bakar](https://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
@ -63,7 +63,7 @@ este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.
>
> [Check it out on GitHub...](https://github.com/zaim/react-stylus-boilerplate)
## WebFUI {#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).

6
beta/src/pages/blog/2013/08/19/use-react-and-jsx-in-python-applications.md

@ -5,7 +5,7 @@ author: [kmeht]
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 {/*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 {/*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 {/*installation*/}
PyReact is hosted on PyPI, and can be installed with `pip`:

6
beta/src/pages/blog/2013/08/26/community-roundup-7.md

@ -13,13 +13,13 @@ It's been three months since we open sourced React and it is going well. Some st
- [15 blog posts](/blog/)
- 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 {/*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.
<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/images/blog/wolfenstein_react.png"/></a></figure>
## React & Meteor {#react--meteor}
## React & Meteor {/*react--meteor*/}
[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.
@ -45,7 +45,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 {/*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.

12
beta/src/pages/blog/2013/09/24/community-roundup-8.md

@ -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 {/*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.
@ -23,13 +23,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 {/*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.
<div style={{marginLeft: 74}}><blockquote className="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform("/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */" + element.innerHTML).code</p>— Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
## Remarkable React {#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.
@ -47,19 +47,19 @@ 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 {/*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.
<figure><a href="https://github.com/sophiebits/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="/images/blog/markdown_refactor.png"/></a></figure>
## Unite from BugBusters {#unite-from-bugbusters}
## Unite from BugBusters {/*unite-from-bugbusters*/}
[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.
<figure><a href="https://unite.bugbuster.com/"><img src="/images/blog/unite.png"/></a></figure>
## #reactjs IRC Logs {#reactjs-irc-logs}
## #reactjs IRC Logs {/*reactjs-irc-logs*/}
[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.

12
beta/src/pages/blog/2013/10/03/community-roundup-9.md

@ -7,7 +7,7 @@ We organized a React hackathon last week-end in the Facebook Seattle office. 50
![](/images/blog/react-hackathon.jpg)
## React Hackathon Winner {#react-hackathon-winner}
## React Hackathon Winner {/*react-hackathon-winner*/}
[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
>
> [Read More...](http://bold-it.com/javascript/facebook-react-example/)
## JSConf EU Talk: Rethinking Best Practices {#jsconf-eu-talk-rethinking-best-practices}
## JSConf EU Talk: Rethinking Best Practices {/*jsconf-eu-talk-rethinking-best-practices*/}
[Pete Hunt](http://www.petehunt.net/) presented React at JSConf EU. He covers three controversial design decisions of React:
@ -31,7 +31,7 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
<figure><iframe src="https://www.slideshare.net/slideshow/embed_code/26589373" width="100%" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
## Pump - Clojure bindings for React {#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.
@ -50,7 +50,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 {/*jsxhint*/}
[Todd Kennedy](http://blog.selfassembled.org/) working at [Cond&eacute; Nast](http://www.condenast.com/) implemented a wrapper on-top of [JSHint](http://www.jshint.com/) that first converts JSX files to JS.
@ -62,7 +62,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 {/*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.
@ -76,7 +76,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 {/*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.

10
beta/src/pages/blog/2013/10/16/react-v0.5.0.md

@ -9,15 +9,15 @@ 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 {/*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 {/*changelog*/}
### React {#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.
@ -38,11 +38,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!) {/*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 {/*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.

6
beta/src/pages/blog/2013/10/29/react-v0-5-1.md

@ -5,16 +5,16 @@ author: [zpao]
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 {/*changelog*/}
### React {#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 {/*react-with-addons*/}
- Fixed bug with transition and animation event detection.

16
beta/src/pages/blog/2013/11/06/community-roundup-10.md

@ -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 {/*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!
@ -21,13 +21,13 @@ 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 {/*react-rethinking-best-practices*/}
[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
<figure><iframe width="650" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
## Server-side React with PHP {#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.
@ -48,7 +48,7 @@ The best part is that no drastic changes have been required to support all those
>
> <figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="/images/blog/react-php.png"/></a></figure>
## TodoMVC Benchmarks {#todomvc-benchmarks}
## TodoMVC Benchmarks {/*todomvc-benchmarks*/}
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):
@ -87,13 +87,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 {/*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.
<figure><a href="http://guessthefilter.com/"><img src="/images/blog/guess_filter.jpg"/></a></figure>
## React vs FruitMachine {#react-vs-fruitmachine}
## React vs FruitMachine {/*react-vs-fruitmachine*/}
[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.
@ -103,7 +103,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 {/*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/).
@ -115,7 +115,7 @@ Even though we weren't inspired by FruitMachine (React has been used in producti
>
> [Read more...](https://npmjs.org/package/react-brunch)
## Random Tweet {#random-tweet}
## Random Tweet {/*random-tweet*/}
I'm going to start adding a tweet at the end of each round-up. We'll start with this one:

18
beta/src/pages/blog/2013/11/18/community-roundup-11.md

@ -5,13 +5,13 @@ author: [vjeux]
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 {/*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.
<figure><iframe width="650" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
## React Tips {#react-tips}
## React Tips {/*react-tips*/}
[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)!
@ -28,7 +28,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
- [Load Initial Data via AJAX](/tips/initial-ajax.html)
- [False in JSX](/tips/false-in-jsx.html)
## Intro to the React Framework {#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.
@ -38,20 +38,20 @@ 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)
## 140-characters textarea {#140-characters-textarea}
## 140-characters textarea {/*140-characters-textarea*/}
[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.
<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
<script async src="//codepen.io/assets/embed/ei.js"></script>
## Genesis Skeleton {#genesis-skeleton}
## Genesis Skeleton {/*genesis-skeleton*/}
[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.
<figure><a href="http://genesis-skeleton.com/"><img src="/images/blog/genesis_skeleton.png"/></a>a></figure>
## AgFlow Talk {#agflow-talk}
## AgFlow Talk {/*agflow-talk*/}
[Robert Zaremba](http://rz.scale-it.pl/) working on [AgFlow](http://www.agflow.com/) recently talked in Poland about React.
@ -63,7 +63,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="100%" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
## JSX {#jsx}
## JSX {/*jsx*/}
[Todd Kennedy](http://tck.io/) working at Cond&eacute; Nast wrote [JSXHint](https://github.com/CondeNast/JSXHint) and explains in a blog post his perspective on JSX.
@ -74,13 +74,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 {/*photo-gallery*/}
[Maykel Loomans](http://miekd.com/), designer at Instagram, wrote a gallery for photos he shot using React.
<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="/images/blog/xoxo2013.png"/></a>a></figure>
## Random Tweet {#random-tweet}
## Random Tweet {/*random-tweet*/}
<img src="/images/blog/steve_reverse.gif" style={{float: 'right'}} />

10
beta/src/pages/blog/2013/12/19/react-v0.8.0.md

@ -15,9 +15,9 @@ In order to make the transition to 0.8 for our current users as painless as poss
We hope that by releasing `react` on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React {#react}
### React {/*react*/}
- Added support for more attributes:
- `rows` & `cols` for `<textarea>`
@ -28,16 +28,16 @@ We hope that by releasing `react` on npm, we will enable a new set of uses that
- Fixed Selection events in IE11
- Added `onContextMenu` events
### React with Addons {#react-with-addons}
### React with Addons {/*react-with-addons*/}
- Fixed bugs with TransitionGroup when children were undefined
- Added support for `onTransition`
### react-tools {#react-tools}
### react-tools {/*react-tools*/}
- Upgraded `jstransform` and `esprima-fb`
### JSXTransformer {#jsxtransformer}
### JSXTransformer {/*jsxtransformer*/}
- Added support for use in IE8
- Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)

18
beta/src/pages/blog/2013/12/23/community-roundup-12.md

@ -5,7 +5,7 @@ author: [vjeux]
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 {/*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.
@ -19,7 +19,7 @@ React got featured on the front-page of Hacker News thanks to the Om library. If
>
> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
## Scroll Position with React {#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.
@ -41,7 +41,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 {/*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.
@ -49,7 +49,7 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
[Try it out!](https://chenglou.github.io/react-lights-out/)
## Reactive Table Bookmarklet {#reactive-table-bookmarklet}
## Reactive Table Bookmarklet {/*reactive-table-bookmarklet*/}
[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.
@ -57,13 +57,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 {/*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 {/*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.
@ -75,7 +75,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 {/*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.
@ -85,7 +85,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 {/*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.
@ -93,6 +93,6 @@ Ever wanted to have a quick way to see what a JSX tag would be converted to? [Ti
[Try it out!](/jsx-compiler.html)
## Random Tweet {#random-tweet}
## Random Tweet {/*random-tweet*/}
<center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn&#39;t force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center>

16
beta/src/pages/blog/2013/12/30/community-roundup-13.md

@ -5,7 +5,7 @@ author: [vjeux]
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 {/*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.
@ -13,13 +13,13 @@ 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 {/*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.
<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
## JSX: E4X The Good Parts {#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.
@ -31,7 +31,7 @@ JSX is often compared to the now defunct E4X, [Vjeux](http://blog.vjeux.com/) we
>
> [Continue reading ...](http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html)
## React + Socket.io {#react--socketio}
## React + Socket.io {/*react--socketio*/}
[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!
@ -55,7 +55,7 @@ componentWillUnmount: function () {
[Check it out on GitHub...](https://github.com/Enome/react.io)
## cssobjectify {#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.
@ -83,7 +83,7 @@ var MyComponent = React.createClass({
[Check it out on GitHub...](https://github.com/andreypopp/cssobjectify)
## ngReact {#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.
@ -93,7 +93,7 @@ var MyComponent = React.createClass({
>
> [Read the full article...](http://davidandsuzi.com/ngreact-react-components-in-angular/)
## vim-jsx {#vim-jsx}
## vim-jsx {/*vim-jsx*/}
[Max Wang](https://github.com/mxw) made a vim syntax highlighting and indentation plugin for vim.
@ -105,6 +105,6 @@ var MyComponent = React.createClass({
>
> [View on GitHub...](https://github.com/mxw/vim-jsx)
## Random Tweet {#random-tweet}
## Random Tweet {/*random-tweet*/}
<center><blockquote class="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>&mdash; Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center>

16
beta/src/pages/blog/2014/01/06/community-roundup-14.md

@ -5,7 +5,7 @@ author: [vjeux]
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-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.
@ -17,14 +17,14 @@ 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 {/*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.
[![](/images/blog/animal-sounds.jpg)](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
[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 {/*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.
@ -40,7 +40,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 {/*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.
@ -48,7 +48,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 {/*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.
@ -64,13 +64,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 {/*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-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.
@ -80,6 +80,6 @@ React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31
>
> [Read the full post...](http://skulbuny.com/2013/10/31/react-vs-angular/)
## Random Tweet {#random-tweet}
## Random Tweet {/*random-tweet*/}
<div><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I&#39;ve looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>&mdash; Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></div>

22
beta/src/pages/blog/2014/02/05/community-roundup-15.md

@ -7,7 +7,7 @@ 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" {/*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".
@ -15,7 +15,7 @@ To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnorman
>
> [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 {/*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.
@ -25,7 +25,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 {/*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:
@ -37,7 +37,7 @@ Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
## Kioo: Separating markup and logic {#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.
@ -85,7 +85,7 @@ A basic example from github:
(om/root app-state my-page (.-body js/document))
```
## Om {#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 {/*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,22 +105,22 @@ In a separate post, Dyrkell breaks down [how to build a binary clock component](
[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]
### Time Travel: Implementing undo in Om {#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 {/*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 {/*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 {/*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 {/*not-so-random-tweet*/}
<div><blockquote class="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>&mdash; Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>

20
beta/src/pages/blog/2014/02/15/community-roundup-16.md

@ -5,19 +5,19 @@ author: [jgebhardt]
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 {/*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):
<iframe src="//slid.es/johnlynch/reactjs/embed" width="100%" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
## React's diff algorithm {#reacts-diff-algorithm}
## React's diff algorithm {/*reacts-diff-algorithm*/}
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>[![](/images/blog/react-diff-tree.png)](http://calendar.perfplanet.com/2013/diff/)</figure>
While we're talking about tree diffing: Matt Esch ([@MatthewEsch](https://twitter.com/MatthewEsch)) created [this project](https://github.com/Matt-Esch/virtual-dom), which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.
## Many, many new introductions to React! {#many-many-new-introductions-to-react}
## Many, many new introductions to React! {/*many-many-new-introductions-to-react*/}
James Padosley wrote a short post on the basics (and merits) of React: [What is React?](http://james.padolsey.com/javascript/what-is-react/)
@ -33,23 +33,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 {/*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 {/*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 {/*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 {/*eggheadio-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" {/*react-finally-a-great-serverclient-web-stack*/}
Eric Florenzano ([@ericflo](https://twitter.com/ericflo)) sheds some light on what makes React perfect for server rendering:
@ -59,11 +59,11 @@ 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 {/*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>[![](/images/blog/resistance-calculator.png)](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
## Random Tweets {#random-tweets}
## Random Tweets {/*random-tweets*/}
<div><blockquote class="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>&mdash; Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>

16
beta/src/pages/blog/2014/02/16/react-v0.9-rc1.md

@ -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 {/*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:
@ -46,11 +46,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 {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Breaking Changes {#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
@ -62,7 +62,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 {/*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
@ -85,7 +85,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 {/*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
@ -105,7 +105,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-with-addons*/}
- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
- `React.addons.TransitionGroup` was added as a more general animation wrapper
@ -115,7 +115,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 {/*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.

18
beta/src/pages/blog/2014/02/20/react-v0.9.md

@ -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? {/*whats-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 {/*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:
@ -54,11 +54,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 {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Breaking Changes {#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
@ -70,7 +70,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 {/*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`
@ -95,7 +95,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 {/*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
@ -116,7 +116,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-with-addons*/}
- `React.addons.TestUtils` was added to help write unit tests
- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
@ -127,7 +127,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 {/*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.

40
beta/src/pages/blog/2014/02/24/community-roundup-17.md

@ -5,51 +5,51 @@ author: [jgebhardt]
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 {/*react-in-the-real-world*/}
### Facebook Lookback video editor {#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 {/*russias-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*/}
[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 &ndash; it's super fast!
### Makona Editor {#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.
[![](/images/blog/makona-editor.png)](https://johnthethird.github.io/makona-editor/)
### Create Chrome extensions using React {#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).
### Twitter Streaming Client {#twitter-streaming-client}
### Twitter Streaming Client {/*twitter-streaming-client*/}
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*/}
[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.
### Instant Domain Search {#instant-domain-search}
### Instant Domain Search {/*instant-domain-search*/}
[Instant Domain Search](https://instantdomainsearch.com/) also uses React. It sure is instant!
### SVG-based graphical node editor {#svg-based-graphical-node-editor}
### SVG-based graphical node editor {/*svg-based-graphical-node-editor*/}
[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.
[![](/images/blog/react-svg-fbp.png)](https://forresto.github.io/prototyping/react/)
### Ultimate Tic-Tac-Toe Game 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 {/*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.
@ -57,34 +57,34 @@ Emanuele shared this awesome demo video with us:
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
## React Components {#react-components}
## React Components {/*react-components*/}
### Table Sorter {#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 {/*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 {/*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 {/*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*/}
[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 {/*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.
Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [react-client-server-starter](https://github.com/adelevie/react-client-server-starter), another detailed walk-through of how to server-render your app.
## Random Tweet {#random-tweet}
## Random Tweet {/*random-tweet*/}
<div><blockquote class="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>&mdash; Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>

30
beta/src/pages/blog/2014/03/14/community-roundup-18.md

@ -5,11 +5,11 @@ author: [jgebhardt]
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" {/*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 {/*architecting-your-app-with-react*/}
Brandon Konkle ([@bkonkle](https://twitter.com/bkonkle))
[Architecting your app with react](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
@ -19,11 +19,11 @@ 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 {/*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 {/*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.
@ -33,16 +33,16 @@ 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 {/*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 {/*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 {/*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).
@ -52,15 +52,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 {/*react-and-objectobserve*/}
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 {/*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 {/*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.
@ -74,11 +74,11 @@ React was also recently mentioned at ng-conf, where the Angular team commented o
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
## React and Web Components {#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 {/*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:
@ -86,16 +86,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 {/*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 {/*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 {/*random-tweets*/}
<div><blockquote class="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>&mdash; John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>

14
beta/src/pages/blog/2014/03/19/react-v0.10-rc1.md

@ -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 {/*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,11 +47,11 @@ 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 {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### New Features {#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)
@ -59,16 +59,16 @@ The plan for v0.11 is that we will go fully to "descriptors". Method calls on th
- `srcSet` for `<img>` to specify images at different pixel ratios
- `textAnchor` for SVG
#### Bug Fixes {#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 {/*addons*/}
- `update` function to deal with immutable data. [Read the docs](/docs/update.html)
### react-tools {#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).

14
beta/src/pages/blog/2014/03/21/react-v0.10.md

@ -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 {/*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,11 +47,11 @@ 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 {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### New Features {#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)
@ -59,16 +59,16 @@ The plan for v0.11 is that we will go fully to "descriptors". Method calls on th
- `srcSet` for `<img>` to specify images at different pixel ratios
- `textAnchor` for SVG
#### Bug Fixes {#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 {/*addons*/}
- `update` function to deal with immutable data. [Read the docs](/docs/update.html)
### react-tools {#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).

16
beta/src/pages/blog/2014/03/28/the-road-to-1.0.md

@ -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 {/*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 {/*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 {/*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 {/*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 {/*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 {/*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 {/*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 {/*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.

2
beta/src/pages/blog/2014/04/04/reactnet.md

@ -25,7 +25,7 @@ Web Forms applications as well as non-web applications (for example, in build
scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
on support for Linux and Mac OS X via Mono as well.
## Installation {#installation}
## Installation {/*installation*/}
ReactJS.NET is packaged in NuGet. Simply run `Install-Package React.Mvc4` in the
package manager console or search NuGet for "React" to install it.

18
beta/src/pages/blog/2014/06/27/community-roundup-19.md

@ -3,13 +3,13 @@ title: 'Community Round-up #19'
author: [chenglou]
---
## React Meetups! {#react-meetups}
## React Meetups! {/*react-meetups*/}
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 {/*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:
@ -21,7 +21,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 {/*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:
@ -33,28 +33,28 @@ 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 {/*even-more-people-using-react*/}
### Prismatic {#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 {/*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*/}
[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*/}
[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 {/*random-tweets*/}
<blockquote class="twitter-tweet" lang="en"><p>Spent 12 hours so far with <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we&#39;ve been doing JS frameworks wrong until now. React makes me happy.</p>&mdash; Paul Irwin (@paulirwin) <a href="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>

26
beta/src/pages/blog/2014/07/13/react-v0.11-rc1.md

@ -20,11 +20,11 @@ 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` {/*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` {/*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!
@ -46,7 +46,7 @@ render: function() {
}
```
## JSX Namespacing {#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/>`.
@ -69,7 +69,7 @@ render: function() {
}
```
## Improved keyboard event normalization {#improved-keyboard-event-normalization}
## Improved keyboard event normalization {/*improved-keyboard-event-normalization*/}
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:
@ -87,22 +87,22 @@ handleKeyDown: function(e) {
Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Breaking Changes {#breaking-changes}
#### Breaking Changes {/*breaking-changes*/}
- `getDefaultProps()` is now called once per class and shared across all instances
#### New Features {#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 {/*bug-fixes*/}
- Re-renders are batched in more cases
- Events: `e.view` properly normalized
@ -116,19 +116,19 @@ 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 {/*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 {/*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 {/*jsx*/}
- Added support for namespaces, eg `<Components.Checkbox />`
- JSXTransformer
@ -136,7 +136,7 @@ Keyboard and mouse events also now include a normalized `e.getModifierState()` t
- 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 {/*react-tools-module*/}
- Improved readme with usage and API information
- Improved ES6 transforms available with `--harmony` option

30
beta/src/pages/blog/2014/07/17/react-v0.11.md

@ -26,11 +26,11 @@ 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` {/*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` {/*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!
@ -52,7 +52,7 @@ render: function() {
}
```
## JSX Namespacing {#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/>`.
@ -75,7 +75,7 @@ render: function() {
}
```
## Improved keyboard event normalization {#improved-keyboard-event-normalization}
## Improved keyboard event normalization {/*improved-keyboard-event-normalization*/}
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:
@ -93,35 +93,35 @@ handleKeyDown: function(e) {
Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
## Descriptors {#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 {/*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 {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Breaking Changes {#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 {/*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 {/*bug-fixes*/}
- Re-renders are batched in more cases
- Events: `e.view` properly normalized
@ -135,19 +135,19 @@ 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 {/*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 {/*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 {/*jsx*/}
- Added support for namespaces, eg `<Components.Checkbox />`
- JSXTransformer
@ -155,7 +155,7 @@ Previously `React.PropTypes` validation worked by simply logging to the console.
- 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 {/*react-tools-module*/}
- Improved readme with usage and API information
- Improved ES6 transforms available with `--harmony` option

8
beta/src/pages/blog/2014/07/25/react-v0.11.1.md

@ -28,11 +28,11 @@ We've also published version `0.11.1` 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.
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Bug Fixes {#bug-fixes}
#### Bug Fixes {/*bug-fixes*/}
- `setState` can be called inside `componentWillMount` in non-DOM environments
- `SyntheticMouseEvent.getEventModifierState` correctly renamed to `getModifierState`
@ -40,6 +40,6 @@ Please try these builds out and [file an issue on GitHub](https://github.com/fac
- `getModifierState` is now correctly case sensitive
- Empty Text node used in IE8 `innerHTML` workaround is now removed, fixing rerendering in certain cases
### JSXTransformer {#jsxtransformer}
### JSXTransformer {/*jsxtransformer*/}
- Fix duplicate variable declaration (caused issues in some browsers)

20
beta/src/pages/blog/2014/07/28/community-roundup-20.md

@ -5,25 +5,25 @@ author: [LoukaN]
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-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.
[<img src="/images/blog/gpu-cursor-move.gif" style={{width: '100%'}} />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
## Why Does React Scale? {#why-does-react-scale}
## Why Does React Scale? {/*why-does-react-scale*/}
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).
<iframe width={650} height={315} src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameBorder={0} allowFullScreen />
## Live Editing {#live-editing}
## Live Editing {/*live-editing*/}
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/)!
<iframe src="//player.vimeo.com/video/100010922" width="100%" height={315} webkitallowfullscreen mozallowfullscreen allowFullScreen />
## ReactIntl Mixin by Yahoo {#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.
@ -48,11 +48,11 @@ React.renderComponent(
);
```
## Thinking and Learning React {#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 {/*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.
@ -65,17 +65,17 @@ 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 {/*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/).
<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="/images/blog/kendoui.png" /></a></figure>
## Acorn JSX {#acorn-jsx}
## Acorn JSX {/*acorn-jsx*/}
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 {/*reactscriptloader*/}
Yariv Sadan created [ReactScriptLoader](https://github.com/yariv/ReactScriptLoader) to make it easier to write components that require an external script.
@ -105,6 +105,6 @@ var Foo = React.createClass({
});
```
## Random Tweet {#random-tweet}
## Random Tweet {/*random-tweet*/}
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <a href="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>&mdash; Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>

8
beta/src/pages/blog/2014/07/30/flux-actions-and-the-dispatcher.md

@ -7,11 +7,11 @@ Flux is the application architecture Facebook uses to build JavaScript applicati
Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](https://facebook.github.io/flux/), we've now open sourced the same [dispatcher](https://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
## Where the Dispatcher Fits in the Flux Data Flow {#where-the-dispatcher-fits-in-the-flux-data-flow}
## Where the Dispatcher Fits in the Flux Data Flow {/*where-the-dispatcher-fits-in-the-flux-data-flow*/}
The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each _store_ registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.
## Actions and ActionCreators {#actions-and-actioncreators}
## Actions and ActionCreators {/*actions-and-actioncreators*/}
When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an _action_ — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.
@ -21,7 +21,7 @@ Letting the stores update themselves eliminates many entanglements typically fou
<img src="/images/blog/flux-diagram.png" style={{width: '100%'}} />
## Why We Need a Dispatcher {#why-we-need-a-dispatcher}
## Why We Need a Dispatcher {/*why-we-need-a-dispatcher*/}
As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.
@ -31,7 +31,7 @@ Further, the waitFor() method may be used in different ways for different action
Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.
## Example Chat App {#example-chat-app}
## Example Chat App {/*example-chat-app*/}
Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/master/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.

20
beta/src/pages/blog/2014/08/03/community-roundup-21.md

@ -3,7 +3,7 @@ title: 'Community Round-up #21'
author: [LoukaN]
---
## React Router {#react-router}
## React Router {/*react-router*/}
[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!
@ -21,7 +21,7 @@ React.renderComponent(
);
```
## Going Big with React {#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"
@ -31,7 +31,7 @@ Areeb Malik, from Facebook, talks about his experience using React. "On paper, a
<iframe allowfullscreen="" data-progress="true" frameborder="0" height="390" id="vimeo-player" mozallowfullscreen="" src="//player.vimeo.com/video/100245392?api=1&amp;title=0" webkitallowfullscreen="" width="640"></iframe>
-->
## What is React? {#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
- Are components a better way to build an application?
- Can I build something complex with React?
## Referencing Dynamic Children {#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).
@ -67,25 +67,25 @@ var App = React.createClass({
});
```
## JSX with Sweet.js using Readtables {#jsx-with-sweetjs-using-readtables}
## JSX with Sweet.js using Readtables {/*jsx-with-sweetjs-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).
[![](/images/blog/sweet-jsx.png)](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 {/*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
<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="/images/blog/first-look.png" /></a></figure>
## React Draggable {#react-draggable}
## React Draggable {/*react-draggable*/}
[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
[![](/images/blog/react-draggable.png)](https://mzabriskie.github.io/react-draggable/example/)
## HTML Parser2 React {#html-parser2-react}
## HTML Parser2 React {/*html-parser2-react*/}
[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.
@ -99,13 +99,13 @@ var html =
var parsedComponent = reactParser(html, React);
```
## Building UIs with 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!
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
## Random Tweets {#random-tweets}
## Random Tweets {/*random-tweets*/}
<blockquote class="twitter-tweet" lang="en"><p>We shipped reddit&#39;s first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process.&#10;&#10;<a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>&mdash; Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
<blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>&mdash; spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>

18
beta/src/pages/blog/2014/09/12/community-round-up-22.md

@ -15,17 +15,17 @@ This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb a
<blockquote width="300" class="twitter-tweet" lang="en"><p>We shipped reddit&#39;s first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process.&#10;&#10;<a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>&mdash; Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
</td></tr></table>
## React's Architecture {#reacts-architecture}
## React's Architecture {/*reacts-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/).
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
## v8 optimizations {#v8-optimizations}
## v8 optimizations {/*v8-optimizations*/}
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 {/*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.
@ -40,13 +40,13 @@ var translated = (
);
```
## React + Browserify + Gulp {#react--browserify--gulp}
## React + Browserify + Gulp {/*react--browserify--gulp*/}
[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/).
<figure><a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/"><img src="/images/blog/react-browserify-gulp.jpg" /></a></figure>
## React Style {#react-style}
## React Style {/*react-style*/}
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.
@ -70,7 +70,7 @@ var Button = React.createClass({
});
```
## Virtual DOM in Elm {#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.
@ -78,13 +78,13 @@ var Button = React.createClass({
>
> [Read the full article](http://elm-lang.org/blog/Blazing-Fast-Html.elm)
## Components Tutorial {#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.
<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
## Saving time & staying sane? {#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).
@ -97,7 +97,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 {/*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.

8
beta/src/pages/blog/2014/09/16/react-v0.11.2.md

@ -26,20 +26,20 @@ We've also published version `0.11.2` 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.
### React Core {#react-core}
### React Core {/*react-core*/}
#### New Features {#new-features}
#### New Features {/*new-features*/}
- Added support for `<dialog>` element and associated `open` attribute
- Added support for `<picture>` element and associated `media` and `sizes` attributes
- Added `React.createElement` API in preparation for React v0.12
- `React.createDescriptor` has been deprecated as a result
### JSX {#jsx}
### JSX {/*jsx*/}
- `<picture>` is now parsed into `React.DOM.picture`
### React Tools {#react-tools}
### React Tools {/*react-tools*/}
- Update `esprima` and `jstransform` for correctness fixes
- The `jsx` executable now exposes a `--strip-types` flag which can be used to remove TypeScript-like type annotations

12
beta/src/pages/blog/2014/09/24/testing-flux-applications.md

@ -7,7 +7,7 @@ author: [fisherwebdev]
[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](https://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](https://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
## Testing with Jest {#testing-with-jest}
## Testing with Jest {/*testing-with-jest*/}
For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/master/examples/flux-todomvc).
@ -38,7 +38,7 @@ jest.dontMock('TodoStore');
This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.
## Testing Stores {#testing-stores}
## Testing Stores {/*testing-stores*/}
At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it's not entirely obvious how to test them.
@ -81,7 +81,7 @@ var keys = Object.keys(all);
expect(all[keys[0]].text).toEqual('foo');
```
## Putting it All Together {#putting-it-all-together}
## Putting it All Together {/*putting-it-all-together*/}
The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let's look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store's registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.
@ -149,7 +149,7 @@ describe('TodoStore', function () {
You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well.
## Mocking Data Derived from Other Stores {#mocking-data-derived-from-other-stores}
## Mocking Data Derived from Other Stores {/*mocking-data-derived-from-other-stores*/}
Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we'll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.
@ -173,7 +173,7 @@ A brief example of this technique is up on GitHub within the Flux Chat example's
For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](https://facebook.github.io/jest/docs/mock-functions.html).
## Moving Logic from React to Stores {#moving-logic-from-react-to-stores}
## Moving Logic from React to Stores {/*moving-logic-from-react-to-stores*/}
What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application's behavior, and when application logic slips into our view layer, this becomes more difficult.
@ -306,7 +306,7 @@ render: function() {
To learn how to test React components themselves, check out the [Jest tutorial for React](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/docs/test-utils.html).
## Further Reading {#further-reading}
## Further Reading {/*further-reading*/}
- [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler
- [Jest API Reference](https://facebook.github.io/jest/docs/api.html)

20
beta/src/pages/blog/2014/10/14/introducing-react-elements.md

@ -21,13 +21,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 {/*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 {/*creating-a-reactelement*/}
We now expose an external API for programmatically creating a `ReactElement` object.
@ -42,7 +42,7 @@ var div = React.createFactory('div');
var reactDivElement = div(props, children);
```
## Deprecated: Auto-generated Factories {#deprecated-auto-generated-factories}
## Deprecated: Auto-generated Factories {/*deprecated-auto-generated-factories*/}
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`:
@ -66,9 +66,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 {/*upgrading-to-012*/}
### React With JSX {#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.
@ -92,7 +92,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 {/*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:
@ -148,7 +148,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.
### Anti-Pattern: Exporting Factories {#anti-pattern-exporting-factories}
### Anti-Pattern: Exporting Factories {/*anti-pattern-exporting-factories*/}
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:
@ -165,7 +165,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 {/*third-party-languages*/}
The signature of a `ReactElement` is something like this:
@ -180,7 +180,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 {/*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:
@ -202,7 +202,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 {/*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:

22
beta/src/pages/blog/2014/10/16/react-v0.12-rc1.md

@ -18,27 +18,27 @@ 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 {/*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 {/*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! {/*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 {/*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.
### JSX Lower-case Convention {#jsx-lower-case-convention}
### JSX Lower-case Convention {/*jsx-lower-case-convention*/}
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:
@ -56,7 +56,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()`.
### JSX Spread Attributes {#jsx-spread-attributes}
### JSX Spread Attributes {/*jsx-spread-attributes*/}
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.
@ -81,7 +81,7 @@ You can now switch to using Spread Attributes instead:
return <MyComponent {...myProps} />;
```
## 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` {/*breaking-change-key-and-ref-removed-from-thisprops*/}
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.
@ -95,13 +95,13 @@ 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.
## Breaking Change: Default Props Resolution {#breaking-change-default-props-resolution}
## Breaking Change: Default Props Resolution {/*breaking-change-default-props-resolution*/}
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`.
## Deprecated: transferPropsTo {#deprecated-transferpropsto}
## Deprecated: transferPropsTo {/*deprecated-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.
@ -119,11 +119,11 @@ 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 {/*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 {/*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:

28
beta/src/pages/blog/2014/10/17/community-roundup-23.md

@ -5,13 +5,13 @@ author: [LoukaN]
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 {/*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.
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
# Yahoo {#yahoo}
# Yahoo {/*yahoo*/}
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.
@ -20,7 +20,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
- [Fetchr](https://github.com/yahoo/fetchr)
- [Flux Examples](https://github.com/yahoo/flux-examples)
## Reflux {#reflux}
## Reflux {/*reflux*/}
[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/).
@ -28,7 +28,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/images/blog/reflux-flux.png" width="400" /></a>
</center>
## React and Flux Interview {#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.
@ -38,7 +38,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 {/*adobes-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/).
@ -46,7 +46,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
<a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/"><img src="/images/blog/flux-diagram.png" width="400" /></a>
</center>
## Async Requests with Flux Revisited {#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.
@ -62,7 +62,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 {/*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!
@ -82,7 +82,7 @@ undo: function() {
},
```
## Flux in practice {#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.
@ -90,13 +90,13 @@ 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 {/*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.
<iframe src="//slides.com/danabramov/components-react-flux-wip/embed" width="100%" height="315" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
## React and Flux {#react-and-flux}
## React and Flux {/*react-and-flux*/}
[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.
@ -106,7 +106,7 @@ undo: function() {
>
> [Read the full article...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
## Flux: Step by Step approach {#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/).
@ -114,7 +114,7 @@ undo: function() {
<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/images/blog/flux-chart.png" width="400" /></a>
</center>
## DeLorean: Back to the future! {#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).
@ -126,12 +126,12 @@ undo: function() {
> - Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others
> - Improve your UI/data consistency using rollbacks
## Facebook's iOS Infrastructure {#facebooks-ios-infrastructure}
## Facebook's iOS Infrastructure {/*facebooks-ios-infrastructure*/}
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.
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
## Random Tweet {#random-tweet}
## Random Tweet {/*random-tweet*/}
<blockquote class="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>&mdash; Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/507309645372076034">September 3, 2014</a></blockquote>

36
beta/src/pages/blog/2014/10/28/react-v0.12.md

@ -20,7 +20,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 {/*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`.
@ -28,7 +28,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 {/*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.
@ -37,13 +37,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` {#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 {/*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.
@ -51,11 +51,11 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Breaking Changes {#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
@ -63,12 +63,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 {/*new-features*/}
- Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo`
- Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`
#### Deprecations {#deprecations}
#### Deprecations {/*deprecations*/}
- `React.renderComponent` --> `React.render`
- `React.renderComponentToString` --> `React.renderToString`
@ -82,7 +82,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 {/*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
@ -95,32 +95,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 {/*react-with-addons*/}
#### New Features {#new-features-1}
#### New Features {/*new-features-1*/}
- `React.addons.batchedUpdates` added to API for hooking into update cycle
#### Breaking Changes {#breaking-changes-1}
#### Breaking Changes {/*breaking-changes-1*/}
- `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 {/*bug-fixes-1*/}
- Fixed some issues with CSS Transitions
### JSX {#jsx}
### JSX {/*jsx*/}
#### Breaking Changes {#breaking-changes-2}
#### Breaking Changes {/*breaking-changes-2*/}
- 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 {/*new-features-2*/}
- `@jsx React.DOM` no longer required
- spread (`{...}`) operator introduced to allow easier use of props
#### Bug Fixes {#bug-fixes-2}
#### Bug Fixes {/*bug-fixes-2*/}
- JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)

22
beta/src/pages/blog/2014/11/25/community-roundup-24.md

@ -3,7 +3,7 @@ title: 'Community Round-up #24'
author: [steveluscher]
---
## Keep it Simple {#keep-it-simple}
## Keep it Simple {/*keep-it-simple*/}
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.
@ -19,7 +19,7 @@ James Pearce ([jamesgpearce](https://github.com/jamesgpearce)) carried Big-Coffe
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
## All About Isomorphism {#all-about-isomorphism}
## All About Isomorphism {/*all-about-isomorphism*/}
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.
@ -29,11 +29,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 {/*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 {/*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
@ -43,13 +43,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 {/*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.
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
## Community Components {#community-components}
## Community Components {/*community-components*/}
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.
@ -57,23 +57,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 {/*waiter-theres-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 {/*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 {/*youve-got-the-hang-of-flux-now-lets-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 {/*countdown-to-reactjs-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 {/*react-meetups-around-the-world*/}
<blockquote class="twitter-tweet" lang="en"><p>React JS meetup having pretty good turn up rate today <a href="https://twitter.com/hashtag/londonreact?src=hash">#londonreact</a> <a href="http://t.co/c360dlVVAe">pic.twitter.com/c360dlVVAe</a></p>&mdash; Alexander Savin (@karismafilms) <a href="https://twitter.com/karismafilms/status/535152580377468928">November 19, 2014</a></blockquote>

6
beta/src/pages/blog/2014/12/18/react-v0.12.2.md

@ -22,15 +22,15 @@ We've also published version `0.12.2` 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.
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
- Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth`
- Added `strokeOpacity` to the list of unitless CSS properties
- Removed trailing commas (allows npm module to be bundled and used in IE8)
- Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning
### React Tools {#react-tools}
### React Tools {/*react-tools*/}
- JSX-related transforms now always use double quotes for props and `displayName`

6
beta/src/pages/blog/2014/12/19/react-js-conf-diversity-scholarship.md

@ -18,19 +18,19 @@ Facebook will make determinations on scholarship recipients in its sole discreti
To apply for the scholarship, please visit the Application Page: <https://www.surveymonkey.com/s/XVJGK6R>
## Award Includes {#award-includes}
## Award Includes {/*award-includes*/}
- Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA
- Paid travel and lodging expenses
- Additional \$200 meal stipend
## Important Dates {#important-dates}
## Important Dates {/*important-dates*/}
- Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full
- Friday, January 9, 2015: Award recipients will be notified by email of their acceptance
- Wednesday & Thursday, January 28 & 29, 2015: React.js Conf
## Eligibility {#eligibility}
## Eligibility {/*eligibility*/}
- Must currently be studying or working in Computer Science or a related field
- International applicants are welcome, but you will be responsible for securing your own visa to attend the conference

12
beta/src/pages/blog/2015/01/27/react-v0.13.0-beta-1.md

@ -11,7 +11,7 @@ We just published a beta version of React v0.13.0 to [npm](https://www.npmjs.com
So what is that one feature I'm so excited about that I just couldn't wait to share?
## Plain JavaScript Classes!! {#plain-javascript-classes}
## Plain JavaScript Classes!! {/*plain-javascript-classes*/}
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.
@ -19,7 +19,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`.
### ES6 Classes {#es6-classes}
### ES6 Classes {/*es6-classes*/}
```javascript
class HelloMessage extends React.Component {
@ -50,7 +50,7 @@ Counter.propTypes = {initialCount: React.PropTypes.number};
Counter.defaultProps = {initialCount: 0};
```
### ES7+ Property Initializers {#es7-property-initializers}
### ES7+ Property Initializers {/*es7-property-initializers*/}
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:
@ -71,7 +71,7 @@ export class Counter extends React.Component {
This was inspired by TypeScript's property initializers.
### Autobinding {#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.
@ -101,7 +101,7 @@ class Counter extends React.Component {
}
```
### Mixins {#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.
@ -115,7 +115,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! {/*other-languages*/}
Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.

4
beta/src/pages/blog/2015/02/18/react-conf-roundup-2015.md

@ -5,7 +5,7 @@ author: [steveluscher]
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 {/*the-talks*/}
<div class="skinny-row">
<div class="skinny-col">
@ -247,7 +247,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</div>
</div>
## Reactions {#reactions}
## Reactions {/*reactions*/}
The conference is over, but the conversation has just begun.

12
beta/src/pages/blog/2015/02/20/introducing-relay-and-graphql.md

@ -3,7 +3,7 @@ title: 'Introducing Relay and GraphQL'
author: [wincent]
---
## Data fetching for React applications {#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.
@ -13,7 +13,7 @@ The two projects &mdash; Relay and GraphQL &mdash; have been in use in productio
<script async class="speakerdeck-embed" data-id="7af7c2f33bf9451a892dcd91de55b7c2" data-ratio="1.29456384323641" src="//speakerdeck.com/assets/embed.js"></script>
## What is Relay? {#what-is-relay}
## What is Relay? {/*what-is-relay*/}
Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).
@ -21,13 +21,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? {/*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 {/*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.
@ -47,13 +47,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? {/*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 {/*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
beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md

@ -23,11 +23,11 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Breaking Changes {#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
@ -36,7 +36,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 {/*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.
@ -44,32 +44,32 @@ 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 {/*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 {/*react-with-add-ons*/}
#### Deprecations {#deprecations-1}
#### Deprecations {/*deprecations-1*/}
- `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 {/*react-tools*/}
#### Breaking Changes {#breaking-changes-1}
#### Breaking Changes {/*breaking-changes-1*/}
- 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 {/*new-features-1*/}
- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
- `es5` is the default.
- `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
- The transform for the call spread operator has also been enabled.
### JSX {#jsx}
### JSX {/*jsx*/}
#### Breaking Changes {#breaking-changes-2}
#### Breaking Changes {/*breaking-changes-2*/}
- 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.

40
beta/src/pages/blog/2015/02/24/streamlining-react-elements.md

@ -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 {/*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 {/*problem-mutating-props-you-dont-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 {/*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.
### Solution: Immutable Props {#solution-immutable-props}
### Solution: Immutable Props {/*solution-immutable-props*/}
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.
@ -79,7 +79,7 @@ return <Foo nestedObject={this.state.myModel} />;
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 {/*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 {/*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.
@ -110,7 +110,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 {/*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:
@ -125,7 +125,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.
### Problem: Timing Matters {#problem-timing-matters}
### Problem: Timing Matters {/*problem-timing-matters*/}
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:
@ -144,25 +144,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 {/*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 {/*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 {/*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 {/*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 {/*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.
@ -170,11 +170,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 {/*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 {/*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.
@ -188,13 +188,13 @@ return <div>{children}</div>;
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 {/*problem-cant-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={…} {/*solution-just-use-an-array-and-key*/}
Most of the time you can just use an array with keyed ReactElements.
@ -203,7 +203,7 @@ var children = items.map((item) => <span key={item.title} />);
<div>{children}</div>;
```
### Solution: React.addons.createFragment {#solution-reactaddonscreatefragment}
### Solution: React.addons.createFragment {/*solution-reactaddonscreatefragment*/}
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.
@ -215,7 +215,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.
## Compiler Optimizations: Unlocked! {#compiler-optimizations-unlocked}
## Compiler Optimizations: Unlocked! {/*compiler-optimizations-unlocked*/}
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`\*!
@ -227,7 +227,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 {/*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.

2
beta/src/pages/blog/2015/03/03/react-v0.13-rc2.md

@ -25,7 +25,7 @@ We've also published version `0.13.0-rc2` of the `react` and `react-tools` packa
---
## React.cloneElement {#reactcloneelement}
## React.cloneElement {/*reactcloneelement*/}
In React v0.13 RC2 we will introduce a new API, similar to `React.addons.cloneWithProps`, with this signature:

10
beta/src/pages/blog/2015/03/04/community-roundup-25.md

@ -3,7 +3,7 @@ title: 'Community Round-up #25'
author: [matthewjohnston4]
---
## React 101 {#react-101}
## React 101 {/*react-101*/}
Interest in React has been exploding recently, so it's a good time to explore some great recent tutorials and videos that cover getting started.
@ -21,7 +21,7 @@ Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Pl
<iframe style={{border: 'none'}} src="//html5-player.libsyn.com/embed/episode/id/3370114/height/75/width/200/theme/standard-mini/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" height={26} width="100%" scrolling="no" allowFullScreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen />
## Community Additions {#community-additions}
## Community Additions {/*community-additions*/}
[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.
@ -33,7 +33,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 {/*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.
@ -45,11 +45,11 @@ A team from New Zealand called [Atomic](https://atomic.io/) is [building web and
<center><a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here"><img src="/images/blog/polarr.jpg"/></a></center>
## It's F8! {#its-f8}
## It's F8! {/*its-f8*/}
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 {/*meetups*/}
<table><tr><td width="50%" valign="top">
<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> &#10;&#10;btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>&mdash; littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>

26
beta/src/pages/blog/2015/03/10/react-v0.13.md

@ -29,11 +29,11 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Breaking Changes {#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 {/*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,37 +52,37 @@ 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 {/*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 {/*react-with-add-ons*/}
#### New Features {#new-features-1}
#### New Features {/*new-features-1*/}
- [`React.addons.createFragment` was added](/docs/create-fragment.html) for adding keys to entire sets of children.
#### Deprecations {#deprecations-1}
#### Deprecations {/*deprecations-1*/}
- `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 {/*react-tools*/}
#### Breaking Changes {#breaking-changes-1}
#### Breaking Changes {/*breaking-changes-1*/}
- 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 {/*new-features-2*/}
- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
- `es5` is the default.
- `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
- The transform for the call spread operator has also been enabled.
### JSX {#jsx}
### JSX {/*jsx*/}
#### Breaking Changes {#breaking-changes-2}
#### Breaking Changes {/*breaking-changes-2*/}
- 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.

14
beta/src/pages/blog/2015/03/16/react-v0.13.1.md

@ -22,25 +22,25 @@ We've also published version `0.13.1` of the `react` and `react-tools` packages
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### Bug Fixes {#bug-fixes}
#### Bug Fixes {/*bug-fixes*/}
- Don't throw when rendering empty `<select>` elements
- Ensure updating `style` works when transitioning from `null`
### React with Add-Ons {#react-with-add-ons}
### React with Add-Ons {/*react-with-add-ons*/}
#### Bug Fixes {#bug-fixes-1}
#### Bug Fixes {/*bug-fixes-1*/}
- TestUtils: Don't warn about `getDOMNode` for ES6 classes
- TestUtils: Ensure wrapped full page components (`<html>`, `<head>`, `<body>`) are treated as DOM components
- Perf: Stop double-counting DOM components
### React Tools {#react-tools}
### React Tools {/*react-tools*/}
#### Bug Fixes {#bug-fixes-2}
#### Bug Fixes {/*bug-fixes-2*/}
- Fix option parsing for `--non-strict-es6module`

16
beta/src/pages/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md

@ -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-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 {/*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-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>`? {/*whats-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 {/*storys-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 {/*newsfeed-worthy*/}
Now that the `<Story>` is over we can continue with the `<NewsFeed>` component. Again, we'll start with a React version:
@ -155,7 +155,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 {/*all-the-news-fit-to-be-relayed*/}
`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
@ -209,7 +209,7 @@ Now when `loadMore()` is called, Relay will send a GraphQL request for the addit
<br/>
## In Conclusion {#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:

22
beta/src/pages/blog/2015/03/30/community-roundup-26.md

@ -7,13 +7,13 @@ We open sourced React Native last week and the community reception blew away all
<blockquote class="twitter-tweet" lang="en"><p><a href="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>&mdash; Ryan Florence (@ryanflorence) <a href="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? {/*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.
<iframe width="650" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
## Ray Wenderlich - Property Finder {#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.
@ -21,51 +21,51 @@ 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 {/*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. :)
<audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style={{ width: '100%' }}></audio>
## Hacker News {#hacker-news}
## Hacker News {/*hacker-news*/}
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!
[![](/images/blog/hacker-news-react-native.png)](https://github.com/iSimar/HackerNews-React-Native)
## Parse + React {#parse--react}
## Parse + React {/*parse--react*/}
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.
[![](/images/blog/parse-react.jpg)](http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/)
## tcomb-form-native {#tcomb-form-native}
## tcomb-form-native {/*tcomb-form-native*/}
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!
[![](/images/blog/tcomb-react-native.png)](https://github.com/gcanti/tcomb-form-native)
## Facebook Login with React Native {#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 {/*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.
[![](/images/blog/modus-create.gif)](http://moduscreate.com/react-native-has-landed/)
## React Native with Babel and webpack {#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 {/*a-dynamic-crazy-native-mobile-futurepowered-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 {/*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!

4
beta/src/pages/blog/2015/04/17/react-native-v0.4.md

@ -7,7 +7,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 {/*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:
@ -19,6 +19,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? {/*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.

14
beta/src/pages/blog/2015/04/18/react-v0.13.2.md

@ -20,11 +20,11 @@ We've also published version `0.13.2` of the `react` and `react-tools` packages
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### New Features {#new-features}
#### New Features {/*new-features*/}
- Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
- Added support for more DOM properties:
@ -32,19 +32,19 @@ We've also published version `0.13.2` of the `react` and `react-tools` packages
- `high`, `low`, `optimum` - for `<meter>` elements
- `unselectable` - IE-specific property to prevent user selection
#### Bug Fixes {#bug-fixes}
#### Bug Fixes {/*bug-fixes*/}
- Fixed a case where re-rendering after rendering null didn't properly pass context
- Fixed a case where re-rendering after rendering with `style={null}` didn't properly update `style`
- Update `uglify` dependency to prevent a bug in IE8
- Improved warnings
### React with Add-Ons {#react-with-add-ons}
### React with Add-Ons {/*react-with-add-ons*/}
#### Bug Fixes {#bug-fixes-1}
#### Bug Fixes {/*bug-fixes-1*/}
- Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
### React Tools {#react-tools}
### React Tools {/*react-tools*/}
- Improve documentation for new options

10
beta/src/pages/blog/2015/05/01/graphql-introduction.md

@ -11,7 +11,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? {/*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:
@ -60,11 +60,11 @@ We will dig into the syntax and semantics of GraphQL in a later post, but even a
- **Strongly-typed:** GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.
- **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.
## Why invent something new? {#why-invent-something-new}
## Why invent something new? {/*why-invent-something-new*/}
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*/}
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.
@ -81,7 +81,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 {/*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.
@ -96,6 +96,6 @@ 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? {/*whats-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.

12
beta/src/pages/blog/2015/05/08/react-v0.13.3.md

@ -20,23 +20,23 @@ We've also published version `0.13.3` of the `react` and `react-tools` packages
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React Core {#react-core}
### React Core {/*react-core*/}
#### New Features {#new-features}
#### New Features {/*new-features*/}
- Added `clipPath` element and attribute for SVG
- Improved warnings for deprecated methods in plain JS classes
#### Bug Fixes {#bug-fixes}
#### Bug Fixes {/*bug-fixes*/}
- Loosened `dangerouslySetInnerHTML` restrictions so `{__html: undefined}` will no longer throw
- Fixed extraneous context warning with non-pure `getChildContext`
- Ensure `replaceState(obj)` retains prototype of `obj`
### React with Add-ons {#react-with-add-ons}
### React with Add-ons {/*react-with-add-ons*/}
### Bug Fixes {#bug-fixes-1}
### Bug Fixes {/*bug-fixes-1*/}
- Test Utils: Ensure that shallow rendering works when components define `contextTypes`

8
beta/src/pages/blog/2015/06/12/deprecating-jstransform-and-react-tools.md

@ -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 {/*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 {/*other-deprecations*/}
### esprima-fb {#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*/}
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/).

4
beta/src/pages/blog/2015/07/03/react-v0.14-beta-1.md

@ -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 {/*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 {/*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.

20
beta/src/pages/blog/2015/08/03/new-react-devtools-beta.md

@ -8,7 +8,7 @@ out!
![The full devtools gif](/images/blog/devtools-full.gif)
## Why entirely new? {#why-entirely-new}
## Why entirely new? {/*why-entirely-new*/}
Perhaps the biggest reason was to create a defined API for dealing with
internals, so that other tools could benefit as well and not have to depend on
@ -20,18 +20,18 @@ is imperative, mutation-driven, and tightly integrated with Chrome-specific
APIs. The new devtools are much less coupled to Chrome, and easier to reason
about thanks to React.
## What are the benefits? {#what-are-the-benefits}
## What are the benefits? {/*what-are-the-benefits*/}
- 100% React
- Firefox compatible
- React Native compatible
- more extensible & hackable
## Are there any new features? {#are-there-any-new-features}
## Are there any new features? {/*are-there-any-new-features*/}
Yeah!
### The Tree View {#the-tree-view}
### The Tree View {/*the-tree-view*/}
![The new tree view of the devtools](/images/blog/devtools-tree-view.png)
@ -47,21 +47,21 @@ Yeah!
- Show the source for a component in the "Sources" pane
- Show the element in the "Elements" pane
### Searching {#searching}
### Searching {/*searching*/}
Select the search bar (or press "/"), and start searching for a component by
name.
![](/images/blog/devtools-search.gif)
### The Side Pane {#the-side-pane}
### The Side Pane {/*the-side-pane*/}
- Now shows the `context` for a component
- Right-click to store a prop/state value as a global variable
![](/images/blog/devtools-side-pane.gif)
## How do I install it? {#how-do-i-install-it}
## How do I install it? {/*how-do-i-install-it*/}
First, disable the Chrome web store version, or it will break things. Then
[download the .crx](https://github.com/facebook/react-devtools/releases) and
@ -72,19 +72,19 @@ there.
Once we've determined that there aren't any major regressions, we'll update
the official web store version, and everyone will be automatically upgraded.
### Also Firefox! {#also-firefox}
### Also Firefox! {/*also-firefox*/}
We also have an initial version of the devtools for Firefox, which you can
download from the same [release page](https://github.com/facebook/react-devtools/releases).
## Feedback welcome {#feedback-welcome}
## Feedback welcome {/*feedback-welcome*/}
Let us know what issues you run into
[on GitHub](https://github.com/facebook/react-devtools/issues), and check out
[the README](https://github.com/facebook/react-devtools/tree/devtools-next)
for more info.
## Update {#update}
## Update {/*update*/}
_August 12, 2015_

8
beta/src/pages/blog/2015/08/11/relay-technical-preview.md

@ -3,11 +3,11 @@ title: 'Relay Technical Preview'
author: [josephsavona]
---
# Relay {#relay}
# Relay {/*relay*/}
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 {/*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 {/*whats-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 {/*whats-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:

2
beta/src/pages/blog/2015/09/02/new-react-developer-tools.md

@ -17,7 +17,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 {/*installation*/}
Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox, and [Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/gpphkfbcpidddadnkolkpfckpihlkkil) for Edge. If you're developing using React, we highly recommend installing these devtools.

16
beta/src/pages/blog/2015/09/10/react-v0.14-rc1.md

@ -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 {/*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 {/*changelog*/}
### Major changes {#major-changes}
### Major changes {/*major-changes*/}
- #### Two Packages: React and React DOM
@ -117,7 +117,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 {/*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.
@ -132,7 +132,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 {/*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.
@ -144,7 +144,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 {/*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.)
@ -160,13 +160,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 {/*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 {/*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.

12
beta/src/pages/blog/2015/09/14/community-roundup-27.md

@ -5,7 +5,7 @@ author: [steveluscher]
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 {/*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.
@ -23,7 +23,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.
## GraphQL beyond JavaScript {#graphql-beyond-javascript}
## GraphQL beyond JavaScript {/*graphql-beyond-javascript*/}
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).
@ -37,7 +37,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 {/*show-me-dont-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)).
@ -47,19 +47,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 &ndash; 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 {/*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 {/*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).
## In your words {#in-your-words}
## In your words {/*in-your-words*/}
<div class="skinny-row">
<div class="skinny-col">

4
beta/src/pages/blog/2015/10/01/react-render-and-top-level-api.md

@ -23,7 +23,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 {/*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`.
@ -31,7 +31,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.
## Object Oriented Updates {#object-oriented-updates}
## Object Oriented Updates {/*object-oriented-updates*/}
If you call `ReactDOM.render` a second time to update properties, all your props are completely replaced.

18
beta/src/pages/blog/2015/10/07/react-v0.14.md

@ -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 {/*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 {/*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 {/*changelog*/}
### Major changes {#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 {/*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 {/*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 {/*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 {/*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 {/*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.

28
beta/src/pages/blog/2015/10/19/reactiflux-is-moving-to-discord.md

@ -5,45 +5,45 @@ author: [benigeri]
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? {/*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? {/*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 {/*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 {/*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 {/*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 {/*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 {/*its-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 {/*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? {/*and-whats-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:
### Difficult channel management {#difficult-channel-management}
### Difficult channel management {/*difficult-channel-management*/}
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 {/*no-search*/}
Lack of search is clearly a bummer, but Discord is working on it. Search is coming!
### Firewall {#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? {/*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! {/*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/)

10
beta/src/pages/blog/2015/10/28/react-v0.14.1.md

@ -21,9 +21,9 @@ We've also published version `0.14.1` of the `react`, `react-dom`, and addons pa
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React DOM {#react-dom}
### React DOM {/*react-dom*/}
- Fixed bug where events wouldn't fire in old browsers when using React in development mode
- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
@ -31,14 +31,14 @@ We've also published version `0.14.1` of the `react`, `react-dom`, and addons pa
- Added support for `color` attribute
- Ensured legacy `.props` access on DOM nodes is updated on re-renders
### React TestUtils Add-on {#react-testutils-add-on}
### React TestUtils Add-on {/*react-testutils-add-on*/}
- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
### React CSSTransitionGroup Add-on {#react-csstransitiongroup-add-on}
### React CSSTransitionGroup Add-on {/*react-csstransitiongroup-add-on*/}
- Fix bug preventing `0` to be used as a timeout value
### React on Bower {#react-on-bower}
### React on Bower {/*react-on-bower*/}
- Added `react-dom.js` to `main` to improve compatibility with tooling

4
beta/src/pages/blog/2015/11/02/react-v0.14.2.md

@ -21,9 +21,9 @@ We've also published version `0.14.2` of the `react`, `react-dom`, and addons pa
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React DOM {#react-dom}
### React DOM {/*react-dom*/}
- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
- Fixed bug with development build when using es5-sham in older versions of Internet Explorer

10
beta/src/pages/blog/2015/11/18/react-v0.14.3.md

@ -24,21 +24,21 @@ We've also published version `0.14.3` of the `react`, `react-dom`, and addons pa
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React DOM {#react-dom}
### React DOM {/*react-dom*/}
- Added support for `nonce` attribute for `<script>` and `<style>` elements
- Added support for `reversed` attribute for `<ol>` elements
### React TestUtils Add-on {#react-testutils-add-on}
### React TestUtils Add-on {/*react-testutils-add-on*/}
- Fixed bug with shallow rendering and function refs
### React CSSTransitionGroup Add-on {#react-csstransitiongroup-add-on}
### React CSSTransitionGroup Add-on {/*react-csstransitiongroup-add-on*/}
- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
### React on Bower {#react-on-bower}
### React on Bower {/*react-on-bower*/}
- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser

6
beta/src/pages/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md

@ -25,18 +25,18 @@ At Facebook, we believe that anyone anywhere can make a positive impact by devel
To apply for the scholarship, please visit the application page: **<http://goo.gl/forms/PEmKj8oUp4>**
## Award Includes {#award-includes}
## Award Includes {/*award-includes*/}
- Paid registration fee for the React.js Conf February 22 & 23 in downtown San Francisco, CA
- Paid lodging expenses for February 21, 22, 23
## Important Dates {#important-dates}
## Important Dates {/*important-dates*/}
- Sunday December 13th 2015 - 11:59 PST: Applications for the React.js Conf Scholarship must be submitted in full
- Wednesday, December 16th, 2015: Award recipients will be notified by email of their acceptance
- Monday & Tuesday, February 22 & 23, 2016: React.js Conf
## Eligibility {#eligibility}
## Eligibility {/*eligibility*/}
- Must currently be studying or working in Computer Science or a related field
- International applicants are welcome, but you will be responsible for securing your own visa to attend the conference

18
beta/src/pages/blog/2015/12/18/react-components-elements-and-instances.md

@ -5,7 +5,7 @@ author: [gaearon]
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 {/*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 {/*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 {/*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 {/*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 {/*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 {/*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.**
### Top-Down Reconciliation {#top-down-reconciliation}
### Top-Down Reconciliation {/*top-down-reconciliation*/}
When you call:
@ -363,7 +363,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 {/*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.
@ -377,7 +377,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.
## Further Reading {#further-reading}
## Further Reading {/*further-reading*/}
- [Introducing React Elements](/blog/2014/10/14/introducing-react-elements.html)
- [Streamlining React Elements](/blog/2015/02/24/streamlining-react-elements.html)

8
beta/src/pages/blog/2015/12/29/react-v0.14.4.md

@ -24,17 +24,17 @@ We've also published version `0.14.4` of the `react`, `react-dom`, and addons pa
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React {#react}
### React {/*react*/}
- Minor internal changes for better compatibility with React Native
### React DOM {#react-dom}
### React DOM {/*react-dom*/}
- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
- Fixed bug with controlled `<select>` elements not handling updates properly
### React Perf Add-on {#react-perf-add-on}
### React Perf Add-on {/*react-perf-add-on*/}
- Some DOM operation names have been updated for clarity in the output of `.printDOM()`

10
beta/src/pages/blog/2016/02/19/new-versioning-scheme.md

@ -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 {/*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
<img src="/images/blog/versioning-poll.png" width={596} />
## Introducing Minor Releases {#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? {/*what-happened-to-100*/}
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 {/*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 {/*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.

16
beta/src/pages/blog/2016/03/07/react-v15-rc1.md

@ -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 {/*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 {/*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 {/*changelog*/}
### Major changes {#major-changes}
### Major changes {/*major-changes*/}
- #### `document.createElement` is in and `data-reactid` is out
@ -57,7 +57,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
All SVG tags and attributes are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes match their original capitalization and hyphenation as defined in the specification (ex: `gradientTransform` must be camel-cased but `clip-path` should be hyphenated).
### Breaking changes {#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.
@ -67,13 +67,13 @@ 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 {/*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 {/*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.)
@ -81,7 +81,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 {/*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.

2
beta/src/pages/blog/2016/03/16/react-v15-rc2.md

@ -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 {/*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:

4
beta/src/pages/blog/2016/03/29/react-v0.14.8.md

@ -26,8 +26,8 @@ We've also published version `0.14.8` of the `react`, `react-dom`, and addons pa
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React {#react}
### React {/*react*/}
- Fixed memory leak when rendering on the server

18
beta/src/pages/blog/2016/04/07/react-v15.md

@ -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 {/*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 {/*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 {/*changelog*/}
### Major changes {#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 {/*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 {/*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 {/*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 {/*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 {/*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>

6
beta/src/pages/blog/2016/04/08/react-v15.0.1.md

@ -23,14 +23,14 @@ As usual, you can get install the `react` package via npm or download a browser
Dev build with warnings: <https://fb.me/react-dom-15.0.1.js>
Minified build for production: <https://fb.me/react-dom-15.0.1.min.js>
## Changelog {#changelog}
## Changelog {/*changelog*/}
### React {#react}
### React {/*react*/}
- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated.
<small>[@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444)</small>
### ReactDOM {#reactdom}
### ReactDOM {/*reactdom*/}
- Fixed issue resulting in loss of cursor position in controlled inputs.
<small>[@sophiebits](https://github.com/sophiebits) in [#6449](https://github.com/facebook/react/pull/6449)</small>

36
beta/src/pages/blog/2016/07/13/mixins-considered-harmful.md

@ -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 {/*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.
### Mixins introduce implicit dependencies {#mixins-introduce-implicit-dependencies}
### Mixins introduce implicit dependencies {/*mixins-introduce-implicit-dependencies*/}
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 {/*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 {/*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 {/*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!
### Performance Optimizations {#performance-optimizations}
### Performance Optimizations {/*performance-optimizations*/}
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:
@ -77,7 +77,7 @@ var Button = React.createClass({
});
```
#### Solution {#solution}
#### Solution {/*solution*/}
To express the same without mixins, you can use the [`shallowCompare`](/docs/shallow-compare.html) function directly instead:
@ -97,7 +97,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 {/*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()`.
@ -143,13 +143,13 @@ var CommentList = React.createClass({
module.exports = CommentList;
```
#### Solution {#solution-1}
#### Solution {/*solution-1*/}
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.
#### Higher-Order Components Explained {#higher-order-components-explained}
#### Higher-Order Components Explained {/*higher-order-components-explained*/}
Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:
@ -337,7 +337,7 @@ var CommentListWithSubscription = withSubscription(CommentList);
module.exports = CommentListWithSubscription;
```
#### Solution, Revisited {#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:
@ -393,7 +393,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 {/*rendering-logic*/}
The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.
@ -432,7 +432,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 {/*solution-2*/}
If you see rendering logic inside a mixin, it’s time to extract a component!
@ -465,7 +465,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 {/*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.
@ -502,7 +502,7 @@ var Link = React.createClass({
module.exports = Link;
```
#### Solution {#solution-3}
#### Solution {/*solution-3*/}
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.
@ -543,7 +543,7 @@ module.exports = withRouter(Link);
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 {/*utility-methods*/}
Sometimes, mixins are used solely to share utility functions between components:
@ -568,7 +568,7 @@ var Button = React.createClass({
});
```
#### Solution {#solution-4}
#### Solution {/*solution-4*/}
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:
@ -583,7 +583,7 @@ var Button = React.createClass({
});
```
### Other Use Cases {#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.

24
beta/src/pages/blog/2016/07/22/create-apps-with-no-configuration.md

@ -5,9 +5,9 @@ author: [gaearon]
**[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 {/*getting-started*/}
### Installation {#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 {/*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
![created folder](/images/blog/create-apps-with-no-configuration/created-folder.png)
### Starting the Server {#starting-the-server}
### Starting the Server {/*starting-the-server*/}
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 {/*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 {/*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 {/*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 {/*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! {/*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 {/*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? {/*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 <abbr title="Command Line Interface">CLI</abbr> {#the-quest-for-a-react-abbr-titlecommand-line-interfacecliabbr}
## The Quest for a React <abbr title="Command Line Interface">CLI</abbr> {/*the-quest-for-a-react-abbr-titlecommand-line-interfacecliabbr*/}
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).

14
beta/src/pages/blog/2016/08/05/relay-state-of-the-state.md

@ -5,7 +5,7 @@ author: [josephsavona]
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-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!
# Retrospective & Roadmap {#retrospective--roadmap}
# Retrospective & Roadmap {/*retrospective--roadmap*/}
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 {/*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 {/*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 {/*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 {/*whats-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 {/*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:

12
beta/src/pages/blog/2016/09/28/our-first-50000-stars.md

@ -5,7 +5,7 @@ author: [vjeux]
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 {/*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 {/*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 {/*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! ;)
@ -94,7 +94,7 @@ Realizing that FBolt wouldn't be a great name for the library when used on its o
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 {/*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.
@ -176,7 +176,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 {/*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:
@ -210,7 +210,7 @@ As the project was about to be open sourced, [Lee Byron](https://twitter.com/lee
- objectWillAction
- objectDidAction
## Instagram {#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.

20
beta/src/pages/blog/2016/11/16/react-v15.4.0.md

@ -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 {/*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 {/*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 {/*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 {/*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 {/*changelog*/}
### React {#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 {/*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 {/*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 {/*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 {/*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.

26
beta/src/pages/blog/2017/04/07/react-v15.5.0.md

@ -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 {/*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 {/*migrating-from-reactproptypes*/}
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.
@ -64,7 +64,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 {/*migrating-from-reactcreateclass*/}
When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: `React.createClass`.
@ -105,7 +105,7 @@ Basic usage:
jscodeshift -t react-codemod/transforms/class.js path/to/components
```
### Discontinuing support for React Addons {#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.
@ -120,7 +120,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 {/*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:
@ -146,7 +146,7 @@ import {createRenderer} from 'react-test-renderer/shallow';
---
## Acknowledgements {#acknowledgements}
## Acknowledgements {/*acknowledgements*/}
A special thank you to these folks for transferring ownership of npm package names:
@ -156,7 +156,7 @@ A special thank you to these folks for transferring ownership of npm package nam
---
## Installation {#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.
@ -195,11 +195,11 @@ We've also published version `15.5.0` of the `react`, `react-dom`, and addons pa
---
## Changelog {#changelog}
## Changelog {/*changelog*/}
## 15.5.0 (April 7, 2017) {#1550-april-7-2017}
## 15.5.0 (April 7, 2017) {/*1550-april-7-2017*/}
### React {#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))
@ -208,17 +208,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 {/*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 {/*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 {/*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))

16
beta/src/pages/blog/2017/05/18/whats-new-in-create-react-app.md

@ -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 {/*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 {/*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)._
@ -43,7 +43,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 {/*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)._
@ -55,7 +55,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 {/*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)._
@ -67,7 +67,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() {/*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)._
@ -77,7 +77,7 @@ In this release, we are adding support for the [dynamic `import()` proposal](htt
![Creating chunks with dynamic import](/images/blog/cra-dynamic-import.gif)
### Better Console Output {#better-console-output}
### Better Console Output {/*better-console-output*/}
> _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)._
@ -89,13 +89,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! {/*but-wait-theres-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 {/*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.

16
beta/src/pages/blog/2017/06/13/react-v15.6.0.md

@ -5,7 +5,7 @@ author: [flarnie]
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 {/*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 {/*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 {/*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 {/*changelog*/}
## 15.6.0 (June 13, 2017) {#1560-june-13-2017}
## 15.6.0 (June 13, 2017) {/*1560-june-13-2017*/}
### React {#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 {/*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 {/*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))

Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save