v0.13.3

Preserve prototype with replaceState

.eslintignore

@@ -14,6 +14,8 @@ vendor/jasmine-jsreporter/
 # But not in docs/_js/examples/*
 docs/_js/*.js
 docs/js/
+# gems
+docs/vendor/bundle/
 # This should be more like examples/**/thirdparty/** but
 # we should fix https://github.com/facebook/esprima/pull/85 first
-examples/
+examples/

.gitignore

@@ -9,11 +9,13 @@ __benchmarks__
 build/
 .module-cache
 *.gem
+docs/.bundle
 docs/code
 docs/_site
 docs/.sass-cache
 docs/js/*
 docs/downloads
+docs/vendor/bundle
 examples/shared/*.js
 test/the-files-to-test.generated.js
 *.log*

.travis.yml

@@ -5,20 +5,45 @@ node_js:
 sudo: false
 cache:
   directories:
+  - docs/vendor/bundle
   - node_modules
 before_install:
 - |
-    if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then
-      PR_FIRST=$(curl -s https://github.com/${TRAVIS_REPO_SLUG}/pull/${TRAVIS_PULL_REQUEST}.patch | head -1 | grep -o -E '\b[0-9a-f]{40}\b' | tr -d '\n')
-      TRAVIS_COMMIT_RANGE=$PR_FIRST^..$TRAVIS_COMMIT
-    fi
-    git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/' || {
+    if [ "$TEST_TYPE" != build_website ] && \
+      ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
+    then
       echo "Only docs were updated, stopping build process."
       exit
-    }
+    fi
 script:
 - |
-    grunt $TEST_TYPE
+    if [ "$TEST_TYPE" = build_website ]; then
+      if [ "$TRAVIS_BRANCH" = "$REACT_WEBSITE_BRANCH" ] && [ "$TRAVIS_PULL_REQUEST" = false ]; then
+        set -e
+
+        GH_PAGES_DIR="$TRAVIS_BUILD_DIR"/../react-gh-pages
+        echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
+        git config --global user.name "Travis CI"
+        git config --global user.email "travis@reactjs.org"
+
+        git clone --branch gh-pages --depth=50 \
+          https://reactjs-bot@github.com/facebook/react.git \
+          $GH_PAGES_DIR
+        pushd docs
+        bundle install --jobs=3 --retry=3 --path=vendor/bundle
+        bundle exec rake release
+        cd $GH_PAGES_DIR
+        git status
+        if ! git diff-index --quiet HEAD --; then
+          git add -A .
+          git commit -m "Rebuild website"
+          git push origin gh-pages
+        fi
+        popd
+      fi
+    else
+      grunt $TEST_TYPE
+    fi
 after_script:
 - |
     if [ "$TEST_TYPE" = test ] && [ "$SERVER" ]; then
@@ -43,12 +68,15 @@ env:
   - TEST_TYPE=test
   - TEST_TYPE=jest
   - TEST_TYPE=lint
+  - TEST_TYPE=build_website
   - TEST_TYPE=test:webdriver:saucelabs:modern
   global:
   # SERVER
   - secure: qPvsJ46XzGrdIuPA70b55xQNGF8jcK7N1LN5CCQYYocXLa+fBrl+fTE77QvehOPhqwJXcj6kOxI+sY0KrVwV7gmq2XY2HZGWUSCxTN0SZlNIzqPA80Y7G/yOjA4PUt8LKgP+8tptyhTAY56qf+hgW8BoLiKOdztYF2p+3zXOLuA=
   # SECRET_TOKEN
   - secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
+  # GITHUB_TOKEN
+  - secure: EHCyCSKMwKlLHNtcj9nmkRzmiiPE3aDGlPcnEyrDJeRI0SeN/iCXHXfFivR0vFq3vr+9naMBczAR2AEidtps5KbJrKqdZnjPFRbmfVtzWr/LlvVCub3u13Pub6TdKIVBTny1PuZ5X8GvdxMNVig89jGjvzhhWuQRaz3VhJnTra4=
 matrix:
   fast_finish: true
   allow_failures:

CHANGELOG.md

@@ -1,3 +1,79 @@
+## 0.13.3 (May 8, 2015)
+
+### React Core
+
+#### New Features
+
+* Added `clipPath` element and attribute for SVG
+* Improved warnings for deprecated methods in plain JS classes
+
+#### 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
+
+### Bug Fixes
+
+* Test Utils: Ensure that shallow rendering works when components define `contextTypes`
+
+
+## 0.13.2 (April 18, 2015)
+
+### React Core
+
+#### New Features
+
+* Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
+* Added support for more DOM properties:
+  * `scoped` - for `<style>` elements
+  * `high`, `low`, `optimum` - for `<meter>` elements
+  * `unselectable` - IE-specific property to prevent user selection
+
+#### 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
+
+#### Bug Fixes
+
+* Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
+
+### React Tools
+
+* Improve documentation for new options
+
+
+## 0.13.1 (March 16, 2015)
+
+### React Core
+
+#### Bug Fixes
+
+* Don't throw when rendering empty `<select>` elements
+* Ensure updating `style` works when transitioning from `null`
+
+### React with Add-Ons
+
+#### Bug Fixes
+
+* 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
+
+#### Bug Fixes
+
+* Fix option parsing for `--non-strict-es6module`
+
+
 ## 0.13.0 (March 10, 2015)
 
 ### React Core
@@ -14,7 +90,7 @@
 
 #### New Features
 
-* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
+* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://facebook.github.io/react/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.
 * Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
 * New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
@@ -250,7 +326,7 @@
 
 #### 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`](http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
+* 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`](https://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
 * Added support for more attributes:
   * `srcSet` for `<img>` to specify images at different pixel ratios
   * `textAnchor` for SVG
@@ -262,7 +338,7 @@
 
 ### Addons
 
-* `update` function to deal with immutable data. [Read the docs](http://facebook.github.io/react/docs/update.html)
+* `update` function to deal with immutable data. [Read the docs](https://facebook.github.io/react/docs/update.html)
 
 ### 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).
@@ -424,7 +500,7 @@
 
 ### 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](http://facebook.github.io/react/docs/addons.html).
+* 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](https://facebook.github.io/react/docs/addons.html).
 
 ### JSX
 
@@ -457,10 +533,10 @@
 * 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>`)
 * Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
-* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
-* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
-* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
+* `prop` improvements: validation and default values. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
+* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://facebook.github.io/react/docs/multiple-components.html)
+* Removed `React.autoBind`. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
+* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](https://facebook.github.io/react/docs/forms.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 it's 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.
 

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing to React
 
-React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
+React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://www.facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
 
 ## Our Development Process
 
@@ -45,8 +45,8 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 
 ## How to Get in Touch
 
-* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
-* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)
+* IRC - [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
+* Mailing list - [reactjs on Google Groups](https://groups.google.com/group/reactjs)
 
 ## Style Guide
 

Gruntfile.js

@@ -18,7 +18,6 @@ module.exports = function(grunt) {
 
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
-    copy: require('./grunt/config/copy'),
     jsx: require('./grunt/config/jsx'),
     browserify: require('./grunt/config/browserify'),
     populist: require('./grunt/config/populist')(grunt),
@@ -269,7 +268,6 @@ module.exports = function(grunt) {
     'npm-react:pack',
     'npm-react-tools:release',
     'npm-react-tools:pack',
-    'copy:react_docs',
     'compare_size'
   ]);
 

PATENTS

@@ -1,23 +1,33 @@
-Additional Grant of Patent Rights
+Additional Grant of Patent Rights Version 2
 
 "Software" means the React software distributed by Facebook, Inc.
 
-Facebook hereby grants you a perpetual, worldwide, royalty-free, non-exclusive,
-irrevocable (subject to the termination provision below) license under any
-rights in any patent claims owned by Facebook, to make, have made, use, sell,
-offer to sell, import, and otherwise transfer the Software. For avoidance of
-doubt, no license is granted under Facebook’s rights in any patent claims that
-are infringed by (i) modifications to the Software made by you or a third party,
-or (ii) the Software in combination with any software or other technology
-provided by you or a third party.
+Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software
+("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable
+(subject to the termination provision below) license under any Necessary
+Claims, to make, have made, use, sell, offer to sell, import, and otherwise
+transfer the Software. For avoidance of doubt, no license is granted under
+Facebook's rights in any patent claims that are infringed by (i) modifications
+to the Software made by you or any third party or (ii) the Software in
+combination with any software or other technology.
 
 The license granted hereunder will terminate, automatically and without notice,
-for anyone that makes any claim (including by filing any lawsuit, assertion or
-other action) alleging (a) direct, indirect, or contributory infringement or
-inducement to infringe any patent: (i) by Facebook or any of its subsidiaries or
-affiliates, whether or not such claim is related to the Software, (ii) by any
-party if such claim arises in whole or in part from any software, product or
-service of Facebook or any of its subsidiaries or affiliates, whether or not
-such claim is related to the Software, or (iii) by any party relating to the
-Software; or (b) that any right in any patent claim of Facebook is invalid or
-unenforceable.
+if you (or any of your subsidiaries, corporate affiliates or agents) initiate
+directly or indirectly, or take a direct financial interest in, any Patent
+Assertion: (i) against Facebook or any of its subsidiaries or corporate
+affiliates, (ii) against any party if such Patent Assertion arises in whole or
+in part from any software, technology, product or service of Facebook or any of
+its subsidiaries or corporate affiliates, or (iii) against any party relating
+to the Software. Notwithstanding the foregoing, if Facebook or any of its
+subsidiaries or corporate affiliates files a lawsuit alleging patent
+infringement against you in the first instance, and you respond by filing a
+patent infringement counterclaim in that lawsuit against that party that is
+unrelated to the Software, the license granted hereunder will not terminate
+under section (i) of this paragraph due to such counterclaim.
+
+A "Necessary Claim" is a claim of a patent owned by Facebook that is
+necessarily infringed by the Software standing alone.
+
+A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
+or contributory infringement or inducement to infringe any patent, including a
+cross-claim or counterclaim.

README.md

@@ -1,16 +1,18 @@
-# [React](http://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=master)](https://travis-ci.org/facebook/react)
+# [React](https://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=0.13-stable)](https://travis-ci.org/facebook/react)
 
 React is a JavaScript library for building user interfaces.
 
 * **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
-* **Virtual DOM:** React uses a *virtual DOM* diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.
+* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](https://facebook.github.io/react-native/).
 * **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
 
-[Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html)
+**NEW**! Check out our newest project [React Native](https://github.com/facebook/react-native), which uses React and JavaScript to create native mobile apps.
+
+[Learn how to use React in your own project.](https://facebook.github.io/react/docs/getting-started.html).
 
 ## Examples
 
-We have several examples [on the website](http://facebook.github.io/react/). Here is the first one to get you started:
+We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started:
 
 ```js
 var HelloMessage = React.createClass({
@@ -27,7 +29,7 @@ React.render(
 
 This example will render "Hello John" into a container on the page.
 
-You'll notice that we used an HTML-like syntax; [we call it JSX](http://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
+You'll notice that we used an HTML-like syntax; [we call it JSX](https://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
 
 ## Installation
 
@@ -35,12 +37,12 @@ The fastest way to get started is to serve JavaScript from the CDN (also availab
 
 ```html
 <!-- The core React library -->
-<script src="http://fb.me/react-0.12.2.js"></script>
+<script src="https://fb.me/react-0.13.3.js"></script>
 <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
-<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
+<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
 ```
 
-We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.12.2.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
+We've also built a [starter kit](https://facebook.github.io/react/downloads/react-0.13.3.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
 
 If you'd like to use [bower](http://bower.io), it's as easy as:
 

bin/jsx

@@ -44,7 +44,7 @@ require('commoner').version(
     sourceMap: this.options.sourceMapInline,
     stripTypes: this.options.stripTypes,
     es6module: this.options.es6module,
-    nonStrictEs6Module: this.options.nonStrictEs6Module,
+    nonStrictEs6module: this.options.nonStrictEs6module,
     target: this.options.target
   };
   return transform(source, options);

docs/_config.yml

@@ -1,7 +1,7 @@
 ---
 name: React
 description: A JavaScript library for building user interfaces
-url: http://facebook.github.io
+url: https://facebook.github.io
 baseurl: "/react"
 permalink: "/blog/:year/:month/:day/:title.html"
 paginate_path: "/blog/page:num/"
@@ -25,13 +25,15 @@ exclude:
 - Gemfile.lock
 - README.md
 - Rakefile
+- vendor/bundle
 markdown: redcarpet
 redcarpet:
   extensions:
   - fenced_code_blocks
+  - footnotes
 sass:
   style: :compressed
   sass_dir: _css
 gems:
 - jekyll-redirect-from
-react_version: 0.13.0-rc2
+react_version: 0.13.2

docs/_data/nav_docs.yml

@@ -58,7 +58,7 @@
     - id: test-utils
       title: Test Utilities
     - id: clone-with-props
-      title: Cloning Components
+      title: Cloning Elements
     - id: create-fragment
       title: Keyed Fragments
     - id: update
@@ -93,7 +93,7 @@
   items:
   - id: flux-overview
     title: Flux Overview
-    href: http://facebook.github.io/flux/docs/overview.html
+    href: https://facebook.github.io/flux/docs/overview.html
   - id: flux-todo-list
     title: Flux TodoMVC Tutorial
-    href: http://facebook.github.io/flux/docs/todo-list.html
+    href: https://facebook.github.io/flux/docs/todo-list.html

docs/_js/examples/markdown.js

@@ -1,12 +1,10 @@
 var MARKDOWN_COMPONENT = `
-var converter = new Showdown.converter();
-
 var MarkdownEditor = React.createClass({
   getInitialState: function() {
     return {value: 'Type some *markdown* here!'};
   },
   handleChange: function() {
-    this.setState({value: this.refs.textarea.getDOMNode().value});
+    this.setState({value: React.findDOMNode(this.refs.textarea).value});
   },
   render: function() {
     return (
@@ -20,7 +18,7 @@ var MarkdownEditor = React.createClass({
         <div
           className="content"
           dangerouslySetInnerHTML={{
-            __html: converter.makeHtml(this.state.value)
+            __html: marked(this.state.value, {sanitize: true})
           }}
         />
       </div>

docs/_js/examples/todo.js

@@ -1,8 +1,8 @@
 var TODO_COMPONENT = `
 var TodoList = React.createClass({
   render: function() {
-    var createItem = function(itemText) {
-      return <li>{itemText}</li>;
+    var createItem = function(itemText, index) {
+      return <li key={index + itemText}>{itemText}</li>;
     };
     return <ul>{this.props.items.map(createItem)}</ul>;
   }

docs/_js/live_editor.js

@@ -21,7 +21,7 @@ var CodeMirrorEditor = React.createClass({
   componentDidMount: function() {
     if (IS_MOBILE) return;
 
-    this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
+    this.editor = CodeMirror.fromTextArea(React.findDOMNode(this.refs.editor), {
       mode: 'javascript',
       lineNumbers: this.props.lineNumbers,
       lineWrapping: true,
@@ -194,7 +194,7 @@ var ReactPlayground = React.createClass({
   },
 
   executeCode: function() {
-    var mountNode = this.refs.mount.getDOMNode();
+    var mountNode = React.findDOMNode(this.refs.mount);
 
     try {
       React.unmountComponentAtNode(mountNode);

docs/_layouts/default.html

@@ -8,8 +8,8 @@
   <meta name="viewport" content="width=device-width">
   <meta property="og:title" content="{{ page.title }} | React">
   <meta property="og:type" content="website">
-  <meta property="og:url" content="http://facebook.github.io/react{{ page.url }}">
-  <meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
+  <meta property="og:url" content="https://facebook.github.io/react{{ page.url }}">
+  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
   <meta property="og:description" content="A JavaScript library for building user interfaces">
   <meta property="fb:app_id" content="623268441017527">
 
@@ -33,7 +33,6 @@
   <script type="text/javascript" src="/react/js/react.js"></script>
   <script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
   <script type="text/javascript" src="/react/js/live_editor.js"></script>
-  <script type="text/javascript" src="/react/js/showdown.js"></script>
 </head>
 <body>
 
@@ -45,12 +44,16 @@
           <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
           React
         </a>
-        <ul class="nav-site">
-          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>docs</a></li>
-          <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>support</a></li>
-          <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>download</a></li>
-          <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>blog</a></li>
-          <li><a href="https://github.com/facebook/react">github</a>
+        <ul class="nav-site nav-site-internal">
+          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>Docs</a></li>
+          <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>Support</a></li>
+          <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>Download</a></li>
+          <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
+        </ul>
+
+        <ul class="nav-site nav-site-external">
+          <li><a href="https://github.com/facebook/react">GitHub</a>
+          <li><a href="https://facebook.github.io/react-native/">React Native</a>
         </ul>
       </div>
     </div>

docs/_posts/2013-06-02-jsfiddle-integration.md

@@ -3,7 +3,7 @@ title: JSFiddle Integration
 author: Christopher Chedeau
 ---
 
-[JSFiddle](http://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
+[JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](https://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](https://jsfiddle.net/vjeux/VkebS/) is also available.
 
 
 <blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>

docs/_posts/2013-06-05-why-react.md

@@ -40,7 +40,7 @@ React really shines when your data changes over time.
 In a traditional JavaScript application, you need to look at what data changed
 and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
 which provides a declarative interface via directives and data binding [requires
-a linking function to manually update DOM nodes](http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
+a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
 
 React takes a different approach.
 
@@ -56,7 +56,7 @@ to the DOM.
 > lightweight description of what the DOM should look like.
 
 We call this process **reconciliation**. Check out
-[this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of
+[this jsFiddle](https://jsfiddle.net/fv6RD/3/) to see an example of
 reconciliation in action.
 
 Because this re-render is so fast (around 1ms for TodoMVC), the developer
@@ -74,7 +74,7 @@ some pretty cool things with it:
 - We've built internal prototypes that run React apps in a web worker and use
   React to drive **native iOS views** via an Objective-C bridge.
 - You can run React
-  [on the server](http://github.com/petehunt/react-server-rendering-example)
+  [on the server](https://github.com/petehunt/react-server-rendering-example)
   for SEO, performance, code sharing and overall flexibility.
 - Events behave in a consistent, standards-compliant way in all browsers
   (including IE8) and automatically use

docs/_posts/2013-06-12-community-roundup.md

@@ -38,10 +38,10 @@ It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of
 
 ## Origins of React
 
-[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
+[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/react/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
 
 > React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.
 >
 > React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.
 >
-> [Read the full post...](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)
+> [Read the full post...](https://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)

docs/_posts/2013-06-19-community-roundup-2.md

@@ -21,12 +21,12 @@ Since the launch we have received a lot of feedback and are actively working on
 
 ## React and Socket.IO Chat Application
 
-[Danial Khosravi](http://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
+[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
 
 > A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
-> <figure>[![](/react/img/blog/chatapp.png)](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
+> <figure>[![](/react/img/blog/chatapp.png)](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
 >
-> [Read the full post...](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
+> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
 
 ## React and Other Frameworks
 
@@ -36,9 +36,9 @@ Since the launch we have received a lot of feedback and are actively working on
 >
 > We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
 >
-> [Read the full post...](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
+> [Read the full post...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
 
-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/).
+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](https://jsfiddle.net/vla/Cdrse/).
 
 ## Web Components: React & x-tags
 
@@ -64,7 +64,7 @@ Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.v
 
 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:
 
-  - [Whitespace removal](http://facebook.github.io/react/docs/jsx-is-not-html.html)
-  - [HTML Entities](http://facebook.github.io/react/docs/jsx-is-not-html.html)
-  - [Comments](http://facebook.github.io/react/docs/jsx-is-not-html.html)
-  - [Custom HTML Attributes](http://facebook.github.io/react/docs/jsx-is-not-html.html)
+  - [Whitespace removal](/react/docs/jsx-is-not-html.html)
+  - [HTML Entities](/react/docs/jsx-is-not-html.html)
+  - [Comments](/react/docs/jsx-is-not-html.html)
+  - [Custom HTML Attributes](/react/docs/jsx-is-not-html.html)

docs/_posts/2013-06-27-community-roundup-3.md

@@ -7,7 +7,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
 
 ## Moving From Backbone To React
 
-[Clay Allsopp](http://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, 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.
 
 > [<img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
 >
@@ -19,7 +19,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
 
 ## Grunt Task for JSX
 
-[Eric Clemmons](http://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.
+[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.
 
 > Grunt task for compiling Facebook React's .jsx templates into .js
 >

docs/_posts/2013-07-02-react-v0-4-autobind-by-default.md

@@ -8,7 +8,7 @@ React v0.4 is very close to completion. As we finish it off, we'd like to share
 
 ## What is React.autoBind?
 
-If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](http://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.
+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.
 
 Before we launched React, we would write this:
 

docs/_posts/2013-07-03-community-roundup-4.md

@@ -26,12 +26,12 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
 
 > [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk)
 >
->  * [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
+>  * [JSFiddle](https://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
 >
 > [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo)
 >
->  * [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
->  * [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
+>  * [JSFiddle](https://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
+>  * [JSFiddle](https://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
 >
 > [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4)
 >
@@ -41,7 +41,7 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
 >
 > [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4)
 >
-> * [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().
+> * [JSFiddle](https://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
 
@@ -54,4 +54,4 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
 [Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
 
 > [Check the source on Github](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
-> <figure>[![](/react/img/blog/snake.png)](http://tomocchino.github.io/react-snake/)</figure>
+> <figure>[![](/react/img/blog/snake.png)](https://tomocchino.github.io/react-snake/)</figure>

docs/_posts/2013-07-17-react-v0-4-0.md

@@ -6,7 +6,7 @@ author: Paul O'Shannessy
 Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!
 
 
-This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](http://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
+This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](https://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
 
 React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.
 
@@ -18,10 +18,10 @@ When you're ready, [go download it](/react/downloads.html)!
 * 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>`)
 * Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
-* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
-* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
-* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
+* `prop` improvements: validation and default values. [Read our blog post for details...](/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
+* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/react/docs/multiple-components.html)
+* Removed `React.autoBind`. [Read our blog post for details...](/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
+* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](/react/docs/forms.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.
 

docs/_posts/2013-07-23-community-roundup-5.md

@@ -52,7 +52,7 @@ Learning a new library is always easier when you have working examples you can p
 
 ## React Chosen Wrapper
 
-[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](http://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.
+[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.
 
 ```javascript
 React.renderComponent(
@@ -60,7 +60,7 @@ React.renderComponent(
     <option value="Facebook">Facebook</option>
     <option value="Harvest">Harvest</option>
   </Chosen>
-, document.body);
+, document.getElementById('example'));
 ```
 
 
@@ -75,7 +75,7 @@ React.renderComponent(
 
 [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.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
+<figure><iframe width="650" height="400" src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
 
 
 ## Docs

docs/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md

@@ -38,7 +38,7 @@ When you name your file with `myfile.js.jsx`, `react-rails` will automatically t
 
 ```js
 /** @jsx React.DOM */
-React.renderComponent(<MyComponent/>, document.body)
+React.renderComponent(<MyComponent/>, document.getElementById('example'))
 ```
 
 

docs/_posts/2013-08-05-community-roundup-6.md

@@ -54,7 +54,7 @@ este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.
 
 ## React Stylus Boilerplate
 
-[Zaim Bakar](http://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
+[Zaim Bakar](https://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
 
 > This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.
 >

docs/_posts/2013-08-26-community-roundup-7.md

@@ -10,7 +10,7 @@ It's been three months since we open sourced React and it is going well. Some st
 * [226 posts on Google Group](https://groups.google.com/forum/#!forum/reactjs)
 * [76 Github projects using React](https://gist.github.com/vjeux/6335762)
 * [30 contributors](https://github.com/facebook/react/graphs/contributors)
-* [15 blog posts](http://facebook.github.io/react/blog/)
+* [15 blog posts](/react/blog/)
 * 2 early adopters: [Khan Academy](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)
 
 

docs/_posts/2013-09-24-community-roundup-8.md

@@ -66,4 +66,4 @@ While this is not going to work for all the attributes since they are camelCased
 
 [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.
 
-<iframe width="100%" height="300" src="https://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+[View the source on JSFiddle...](http://jsfiddle.net/vjeux/QL9tz)

docs/_posts/2013-11-05-thinking-in-react.md

@@ -30,7 +30,7 @@ Our JSON API returns some data that looks like this:
 
 The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
 
-But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](http://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
+But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
 
 Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same *information architecture* which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
 
@@ -56,7 +56,7 @@ Now that we've identified the components in our mock, let's arrange them into a
 
 ## Step 2: Build a static version in React
 
-<iframe width="100%" height="300" src="https://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="https://jsfiddle.net/reactjs/yun1vgqb/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
 
@@ -66,17 +66,17 @@ You can build top-down or bottom-up. That is, you can either start with building
 
 At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `renderComponent()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.
 
-Simply refer to the [React docs](http://facebook.github.io/react/docs/) if you need help executing this step.
+Simply refer to the [React docs](/react/docs/) if you need help executing this step.
 
 ### A brief interlude: props vs state
 
-There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
+There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
 
 ## Step 3: Identify the minimal (but complete) representation of UI state
 
-To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with **state**.
+To make your UI interactive, you need to be able to trigger changes to your underlying data model. React makes this easy with **state**.
 
-To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: *Don't Repeat Yourself*. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.
+To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: *Don't Repeat Yourself*. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.
 
 Think of all of the pieces of data in our example application. We have:
 
@@ -100,7 +100,7 @@ So finally, our state is:
 
 ## Step 4: Identify where your state should live
 
-<iframe width="100%" height="300" src="https://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="https://jsfiddle.net/reactjs/zafjbw1e/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or *owns*, this state.
 
@@ -125,13 +125,13 @@ You can start seeing how your application will behave: set `filterText` to `"bal
 
 ## Step 5: Add inverse data flow
 
-<iframe width="100%" height="300" src="https://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="https://jsfiddle.net/reactjs/n47gckhr/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
 
 React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called `ReactLink` to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.
 
-If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
+If you try to type or check the box in the current version of the example, you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
 
 Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass a callback to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. And the callback passed by `FilterableProductTable` will call `setState()` and the app will be updated.
 
@@ -139,4 +139,4 @@ Though this sounds like a lot it's really just a few lines of code. And it's rea
 
 ## And that's it
 
-Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)
+Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink. :)

docs/_posts/2013-11-06-community-roundup-10.md

@@ -26,7 +26,7 @@ The best part is that no drastic changes have been required to support all those
 
 [Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
 
-<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
+<figure><iframe width="600" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
 
 
 ## Server-side React with PHP

docs/_posts/2013-11-18-community-roundup-11.md

@@ -9,25 +9,25 @@ This round-up is the proof that React has taken off from its Facebook's root: it
 
 [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="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
+<figure><iframe width="600" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
 
 
 ## 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](http://facebook.github.io/react/tips/introduction.html)!
+[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](/react/tips/introduction.html)!
 
-- [Inline Styles](http://facebook.github.io/react/tips/inline-styles.html)
-- [If-Else in JSX](http://facebook.github.io/react/tips/if-else-in-JSX.html)
-- [Self-Closing Tag](http://facebook.github.io/react/tips/self-closing-tag.html)
-- [Maximum Number of JSX Root Nodes](http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html)
-- [Shorthand for Specifying Pixel Values in style props](http://facebook.github.io/react/tips/style-props-value-px.html)
-- [Type of the Children props](http://facebook.github.io/react/tips/children-props-type.html)
-- [Value of null for Controlled Input](http://facebook.github.io/react/tips/controlled-input-null-value.html)
-- [`componentWillReceiveProps` Not Triggered After Mounting](http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
-- [Props in getInitialState Is an Anti-Pattern](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)
-- [DOM Event Listeners in a Component](http://facebook.github.io/react/tips/dom-event-listeners.html)
-- [Load Initial Data via AJAX](http://facebook.github.io/react/tips/initial-ajax.html)
-- [False in JSX](http://facebook.github.io/react/tips/false-in-jsx.html)
+- [Inline Styles](/react/tips/inline-styles.html)
+- [If-Else in JSX](/react/tips/if-else-in-JSX.html)
+- [Self-Closing Tag](/react/tips/self-closing-tag.html)
+- [Maximum Number of JSX Root Nodes](/react/tips/maximum-number-of-jsx-root-nodes.html)
+- [Shorthand for Specifying Pixel Values in style props](/react/tips/style-props-value-px.html)
+- [Type of the Children props](/react/tips/children-props-type.html)
+- [Value of null for Controlled Input](/react/tips/controlled-input-null-value.html)
+- [`componentWillReceiveProps` Not Triggered After Mounting](/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
+- [Props in getInitialState Is an Anti-Pattern](/react/tips/props-in-getInitialState-as-anti-pattern.html)
+- [DOM Event Listeners in a Component](/react/tips/dom-event-listeners.html)
+- [Load Initial Data via AJAX](/react/tips/initial-ajax.html)
+- [False in JSX](/react/tips/false-in-jsx.html)
 
 
 ## Intro to the React Framework
@@ -50,7 +50,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
 
 ## Genesis Skeleton
 
-[Eric Clemmons](http://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.
+[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>[![](/react/img/blog/genesis_skeleton.png)](http://genesis-skeleton.com/)</figure>
 
 

docs/_posts/2013-12-18-react-v0.5.2-v0.4.2.md

@@ -15,7 +15,7 @@ While we've encouraged responsible disclosure as part of [Facebook's whitehat bo
 
 You can learn more about the vulnerability discussed here: [CVE-2013-7035][cve].
 
-[download]: http://facebook.github.io/react/downloads.html
+[download]: /react/downloads.html
 [bounty]: https://www.facebook.com/whitehat/
 [ember]: http://emberjs.com/security/
 [cve]: https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU

docs/_posts/2013-12-23-community-roundup-12.md

@@ -3,26 +3,26 @@ title: "Community Round-up #12"
 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](/react/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](http://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!
+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](/react/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
 
-[David Nolen](http://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](http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
+[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](/react/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
 
 > We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.
 >
 > Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
 >
 > A whole lot.
-> <figure>[![](/react/img/blog/om-backbone.png)](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
+> <figure>[![](/react/img/blog/om-backbone.png)](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
 >
-> [Read the full article...](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
+> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
 
 
 
 ## 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](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
+Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](/react/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](/react/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
 
 > We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
 >
@@ -45,10 +45,10 @@ componentDidUpdate: function() {
 
 ## 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](http://facebook.github.io/react/docs/animation.html) to implement animations.
-<figure>[![](/react/img/blog/lights-out.png)](http://chenglou.github.io/react-lights-out/)</figure>
+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](/react/docs/animation.html) to implement animations.
+<figure>[![](/react/img/blog/lights-out.png)](https://chenglou.github.io/react-lights-out/)</figure>
 
-[Try it out!](http://chenglou.github.io/react-lights-out/)
+[Try it out!](https://chenglou.github.io/react-lights-out/)
 
 
 ## Reactive Table Bookmarklet
@@ -63,9 +63,7 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
 
 [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.
 
-<iframe width="100%" height="300" src="https://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-[View the source on JSFiddle...](http://jsfiddle.net/ssorallen/fEsYt/)
+[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
 
 ## Writing Good React Components
 
@@ -93,9 +91,9 @@ hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
 ## 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.
-<figure>[![](/react/img/blog/jsx-compiler.png)](http://facebook.github.io/react/jsx-compiler.html)</figure>
+<figure>[![](/react/img/blog/jsx-compiler.png)](/react/jsx-compiler.html)</figure>
 
-[Try it out!](http://facebook.github.io/react/jsx-compiler.html)
+[Try it out!](/react/jsx-compiler.html)
 
 
 

docs/_posts/2013-12-30-community-roundup-13.md

@@ -12,14 +12,14 @@ Happy holidays! This blog post is a little-late Christmas present for all the Re
 
 <figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
 
-[Try out the demos!](http://petehunt.github.io/react-touch/)
+[Try out the demos!](https://petehunt.github.io/react-touch/)
 
 
 ## 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="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
+<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
 
 
 ## JSX: E4X The Good Parts

docs/_posts/2014-01-02-react-chrome-developer-tools.md

@@ -5,7 +5,7 @@ author: Sebastian Markbåge
 
 With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), an extension to the Chrome Developer Tools. [Download them from the Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).
 
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
+<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
 
 You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.
 

docs/_posts/2014-01-06-community-roundup-14.md

@@ -28,7 +28,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
 
 ## React Rails Tutorial
 
-[Selem Delul](http://selem.im) bundled the [React Tutorial](http://facebook.github.io/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
+[Selem Delul](http://selem.im) bundled the [React Tutorial](/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
 
 > ```
 git clone https://github.com/necrodome/react-rails-tutorial
@@ -45,7 +45,7 @@ rails s
 
 [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.
 
-<iframe width="100%" height="300" src="https://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+[View code on JSFiddle](http://jsfiddle.net/djkojb/qZf48/13/)
 
 [Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
 
@@ -71,8 +71,7 @@ rails s
 
 [Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
 
-<iframe width="100%" height="300" src="https://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
+[View the source on JSFiddle...](http://jsfiddle.net/SubtleGradient/ue2Aa)
 
 ## React vs Angular
 

docs/_posts/2014-02-05-community-roundup-15.md

@@ -3,7 +3,7 @@ title: "Community Round-up #15"
 author: Jonas Gebhardt
 ---
 
-Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of Javascript MVC Frameworks"](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
+Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of Javascript MVC Frameworks"](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
 
 In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.
 
@@ -15,13 +15,13 @@ 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
-Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](http://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
+Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
 
 > It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
 >
 > The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.
 >
-> [Check it out on Github...](http://holmsand.github.io/reagent/)
+> [Check it out on Github...](https://holmsand.github.io/reagent/)
 
 
 ## Functional DOM programming
@@ -34,7 +34,7 @@ React's one-way data-binding naturally lends itself to a functional programming
 
 Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
 
-<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
 
 
 
@@ -106,7 +106,7 @@ 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
-David Nolen shows how to leverage immutable data structures to [add global undo](http://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
+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
 

docs/_posts/2014-02-15-community-roundup-16.md

@@ -54,7 +54,7 @@ It's great to see the React community expand internationally. [This site](http:/
 
 ### Egghead.io video tutorials
 
-Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube.com/watch?v=5yvFLrt7N8M)]
+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/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube-nocookie.com/watch?v=5yvFLrt7N8M)]
 
 ### "React: Finally, a great server/client web stack"
 

docs/_posts/2014-02-16-react-v0.9-rc1.md

@@ -8,13 +8,13 @@ We're almost ready to release React v0.9! We're posting a release candidate so t
 The release candidate is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.9.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.9.0-rc1.min.js>
+  Dev build with warnings: <https://fb.me/react-0.9.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-0.9.0-rc1.min.js>
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.9.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.9.0-rc1.min.js>
+  Dev build with warnings: <https://fb.me/react-with-addons-0.9.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.9.0-rc1.min.js>
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.9.0-rc1.js>
+  <https://fb.me/JSXTransformer-0.9.0-rc1.js>
 
 We've also published version `0.9.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 

docs/_posts/2014-02-20-react-v0.9.md

@@ -10,13 +10,13 @@ Thanks to everyone who tested the release candidate; we were able to find and fi
 As always, the release is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.9.0.js>  
-  Minified build for production: <http://fb.me/react-0.9.0.min.js>
+  Dev build with warnings: <https://fb.me/react-0.9.0.js>  
+  Minified build for production: <https://fb.me/react-0.9.0.min.js>
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.9.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.9.0.min.js>
+  Dev build with warnings: <https://fb.me/react-with-addons-0.9.0.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.9.0.min.js>
 * **In-Browser JSX Transformer**  
-  <http://fb.me/JSXTransformer-0.9.0.js>
+  <https://fb.me/JSXTransformer-0.9.0.js>
 
 We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 

docs/_posts/2014-02-24-community-roundup-17.md

@@ -15,12 +15,12 @@ Large parts of Facebook's web frontend are already powered by React. The recentl
 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](http://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!
+[Relato](https://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!
 
 ### Makona Editor
 
  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.
-<figure>[![](/react/img/blog/makona-editor.png)](http://johnthethird.github.io/makona-editor/)</figure>
+<figure>[![](/react/img/blog/makona-editor.png)](https://johnthethird.github.io/makona-editor/)</figure>
 
 ### 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).
@@ -40,12 +40,12 @@ Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a si
 
 
 ### 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](http://forresto.github.io/prototyping/react/) in React.
- <figure>[![](/react/img/blog/react-svg-fbp.png)](http://forresto.github.io/prototyping/react/)</figure>
+[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.
+ <figure>[![](/react/img/blog/react-svg-fbp.png)](https://forresto.github.io/prototyping/react/)</figure>
 
 
 ### Ultimate Tic-Tac-Toe Game in React
-Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](http://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).
+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).
 
 
 
@@ -55,7 +55,7 @@ Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React ver
 
 Emanuele shared this awesome demo video with us:
 
-<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
 
 
 
@@ -63,7 +63,7 @@ Emanuele shared this awesome demo video with us:
 
 
 ### Table Sorter
-[Table Sorter](http://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.
+[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
 
@@ -83,7 +83,7 @@ Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search in
 
 ## 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](http://twitter.com/hichaelmart)) walks through the necessary steps.
+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.
 

docs/_posts/2014-03-14-community-roundup-18.md

@@ -41,7 +41,7 @@ Thomas Boyt ([@thomasaboyt](https://twitter.com/thomasaboyt)) wrote [this detail
 
 ## 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"](http://instructure.github.io/blog/2013/12/17/facebook-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
@@ -75,7 +75,7 @@ Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [exp
 
 React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:
 
-<iframe width="560" height="315" src="//www.youtube.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
 
 ## React and Web Components
 

docs/_posts/2014-03-19-react-v0.10-rc1.md

@@ -3,18 +3,18 @@ title: React v0.10 RC
 author: Paul O’Shannessy
 ---
 
-[v0.9 has only been out for a month](http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html), but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
+[v0.9 has only been out for a month](/react/blog/2014/02/20/react-v0.9.html), but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
 
 The release candidate is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.10.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.10.0-rc1.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.10.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-0.10.0-rc1.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.10.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.10.0-rc1.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.10.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.10.0-rc1.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.10.0-rc1.js>
+  <https://fb.me/JSXTransformer-0.10.0-rc1.js>
 
 We've also published version `0.10.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 
@@ -24,7 +24,7 @@ Please try these builds out and [file an issue on GitHub](https://github.com/fac
 
 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.
 
-In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
+In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
 
 Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
 

docs/_posts/2014-03-21-react-v0.10.md

@@ -8,13 +8,13 @@ Hot on the heels of the [release candidate earlier this week](/react/blog/2014/0
 The release is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.10.0.js>  
-  Minified build for production: <http://fb.me/react-0.10.0.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.10.0.js>  
+  Minified build for production: <https://fb.me/react-0.10.0.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.10.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.10.0.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.10.0.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.10.0.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.10.0.js>
+  <https://fb.me/JSXTransformer-0.10.0.js>
 
 We've also published version `0.10.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 
@@ -24,7 +24,7 @@ Please try these builds out and [file an issue on GitHub](https://github.com/fac
 
 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.
 
-In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
+In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
 
 Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
 

docs/_posts/2014-03-28-the-road-to-1.0.md

@@ -51,6 +51,6 @@ Finding a way to define animations in a declarative way is a hard problem. We've
 
 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.
 
-[v0.10]: http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html
+[v0.10]: /react/blog/2014/03/21/react-v0.10.html
 [pitofsuccess]: http://blog.codinghorror.com/falling-into-the-pit-of-success/
 [projects]: https://github.com/facebook/react/wiki/Projects

docs/_posts/2014-05-06-flux.md

@@ -5,7 +5,7 @@ author: Bill Fisher and Jing Chen
 
 We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React.  Check out the video here:
 
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
+<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
 
 To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.
 
@@ -13,4 +13,4 @@ In Flux, the Dispatcher is a singleton that directs the flow of data and ensures
 
 When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
 
-Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](http://facebook.github.io/flux/docs/overview.html) and a [tutorial](http://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
+Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.

docs/_posts/2014-05-29-one-year-of-open-source-react.md

@@ -5,9 +5,9 @@ author: Cheng Lou
 
 Today marks the one-year open-source anniversary of React.
 
-It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
+It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](/react/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
 
-Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
+Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](https://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](/react/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
 
 Fast forward one year, React has strongly [grown in popularity](https://news.ycombinator.com/item?id=7489959). Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the [individual contributors](https://github.com/facebook/react/graphs/contributors) who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.
 

docs/_posts/2014-06-27-community-roundup-19.md

@@ -13,7 +13,7 @@ In case you haven't seen it, we've consolidated the tooling solution around Reac
 
 - [Ryan Florence](https://github.com/rpflorence) and [Michael Jackson](https://github.com/mjackson)'s [react-nested-router](https://github.com/rpflorence/react-nested-router), which is a translation of the Ember router API to React.
 
-- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](http://react-bootstrap.github.io/components.html) features live-editable demos.
+- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](https://react-bootstrap.github.io/components.html) features live-editable demos.
 
 - [Andrey Popp](https://github.com/andreypopp)'s [react-quickstart](https://github.com/andreypopp/react-quickstart), which gives you a quick template for server-side rendering and routing, among other features.
 
@@ -23,7 +23,7 @@ These are some of the links that often pop up on the #reactjs IRC channel. If yo
 
 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:
 
-<iframe width="560" height="315" src="//www.youtube.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
 
 And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
 

docs/_posts/2014-07-13-react-v0.11-rc1.md

@@ -8,13 +8,13 @@ It's that time again… we're just about ready to ship a new React release! v0.1
 The release candidate is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.11.0-rc1.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.11.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-0.11.0-rc1.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.0-rc1.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.11.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.11.0-rc1.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.0-rc1.js>
+  <https://fb.me/JSXTransformer-0.11.0-rc1.js>
 
 We've also published version `0.11.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 

docs/_posts/2014-07-17-react-v0.11.md

@@ -15,13 +15,13 @@ This version has been cooking for a couple months now and includes a wide array
 The release is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.0.js>  
-  Minified build for production: <http://fb.me/react-0.11.0.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.11.0.js>  
+  Minified build for production: <https://fb.me/react-0.11.0.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.0.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.11.0.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.11.0.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.0.js>
+  <https://fb.me/JSXTransformer-0.11.0.js>
 
 We've also published version `0.11.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 
@@ -100,7 +100,7 @@ Keyboard and mouse events also now include a normalized `e.getModifierState()` t
 
 ## Descriptors
 
-In our [v0.10 release notes](http://facebook.github.io/react/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.
+In our [v0.10 release notes](/react/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.
 

docs/_posts/2014-07-25-react-v0.11.1.md

@@ -16,13 +16,13 @@ We'd also like to call out a couple additional breaking changes that we failed t
 The release is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.1.js>  
-  Minified build for production: <http://fb.me/react-0.11.1.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.11.1.js>  
+  Minified build for production: <https://fb.me/react-0.11.1.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.1.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.11.1.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.11.1.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.1.js>
+  <https://fb.me/JSXTransformer-0.11.1.js>
 
 We've also published version `0.11.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 

docs/_posts/2014-07-28-community-roundup-20.md

@@ -9,19 +9,19 @@ It's an exciting time for React as there are now more commits from open source c
 
 [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="http://blog.atom.io/img/posts/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
+[<img src="/react/img/blog/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
 
 
 ## 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.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
 
 
 ## 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](http://gaearon.github.io/react-hot-loader/)!
+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="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 
@@ -63,7 +63,7 @@ If you missed the last [London React Meetup](http://www.meetup.com/London-React-
 - React on Rails - How to use React with Ruby on Rails to build isomorphic apps
 - Building an isomorphic, real-time to-do list with moped and node.js
 
-<iframe width="650" height="315" src="//www.youtube.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
 
 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.
 

docs/_posts/2014-07-30-flux-actions-and-the-dispatcher.md

@@ -3,9 +3,9 @@ title: "Flux: Actions and the Dispatcher"
 author: Bill Fisher
 ---
 
-Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow.  We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](http://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](http://facebook.github.io/flux/docs/todo-list.html).
+Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow.  We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
 
-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](http://facebook.github.io/flux/), we've now open sourced the same [dispatcher](http://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
+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
@@ -21,7 +21,7 @@ When new data enters the system, whether through a person interacting with the a
 
 Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.
 
-Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](http://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
+Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
 
 <img src="/react/img/blog/flux-diagram.png" style="width: 100%;" />
 

docs/_posts/2014-08-03-community-roundup-21.md

@@ -4,7 +4,7 @@ author: Lou Husson
 ---
 
 ## React Router
-[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](http://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!
+[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](https://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
 
 ```javascript
 React.renderComponent((
@@ -16,7 +16,7 @@ React.renderComponent((
       </Route>
     </Route>
   </Routes>
-), document.body);
+), document.getElementById('example'));
 ```
 
 ## Going Big with React
@@ -49,7 +49,7 @@ Areeb Malik, from Facebook, talks about his experience using React. "On paper, a
 
 ## Referencing Dynamic Children
 
-While Matt Zabriskie was working on [react-tabs](https://www.npmjs.org/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).
+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).
 
 ```javascript
 var App = React.createClass({
@@ -83,12 +83,12 @@ Have you ever wondered how JSX was implemented? James Long wrote a very instruct
 
 [Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
 
-[![](/react/img/blog/react-draggable.png)](http://mzabriskie.github.io/react-draggable/example/)
+[![](/react/img/blog/react-draggable.png)](https://mzabriskie.github.io/react-draggable/example/)
 
 
 ## HTML Parser2 React
 
-[Jason Brown](http://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.org/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
+[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.
 
 ```javascript
@@ -104,7 +104,7 @@ var parsedComponent = reactParser(html, 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.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
 
 
 ## Random Tweets

docs/_posts/2014-09-03-introducing-the-jsx-specification.md

@@ -7,7 +7,7 @@ At Facebook we've been using JSX for a long time. We originally introduced it to
 
 In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.
 
-Read the spec now at <http://facebook.github.io/jsx/>.
+Read the spec now at <https://facebook.github.io/jsx/>.
 
 This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.
 

docs/_posts/2014-09-12-community-round-up-22.md

@@ -20,7 +20,7 @@ This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb a
 
 [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.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
 
 
 ## v8 optimizations
@@ -30,7 +30,7 @@ Jakob Kummerow landed [two optimizations to V8](http://www.chromium.org/develope
 
 ## Reusable Components by Khan Academy
 
-[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](http://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
+[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.
 
 ```javascript
 var TeX = require('react-components/js/tex.jsx');
@@ -89,7 +89,7 @@ var Button = React.createClass({
 
 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.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
+<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
 
 
 ## Saving time & staying sane?

docs/_posts/2014-09-16-react-v0.11.2.md

@@ -14,13 +14,13 @@ And lastly, on the heels of announcing Flow at [@Scale](http://atscaleconference
 The release is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.2.js>  
-  Minified build for production: <http://fb.me/react-0.11.2.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.11.2.js>  
+  Minified build for production: <https://fb.me/react-0.11.2.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.2.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.2.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.11.2.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.11.2.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.2.js>
+  <https://fb.me/JSXTransformer-0.11.2.js>
 
 We've also published version `0.11.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 

docs/_posts/2014-09-24-testing-flux-applications.md

@@ -3,9 +3,9 @@ title: "Testing Flux Applications"
 author: Bill Fisher
 ---
 
-**A more up-to-date version of this post is available as part of the [Flux documentation](http://facebook.github.io/flux/docs/testing-flux-applications.html).**
+**A more up-to-date version of this post is available as part of the [Flux documentation](https://facebook.github.io/flux/docs/testing-flux-applications.html).**
 
-[Flux](http://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](http://facebook.github.io/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](http://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](http://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](http://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
+[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/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](/react/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
@@ -180,7 +180,7 @@ Now we have a collection of objects that will come back from MyOtherStore whenev
 
 A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
 
-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](http://facebook.github.io/jest/docs/mock-functions.html).
+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
@@ -315,11 +315,11 @@ render: function() {
 },
 ```
 
-To learn how to test React components themselves, check out the [Jest tutorial for React](http://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](http://facebook.github.io/react/docs/test-utils.html).
+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](/react/docs/test-utils.html).
 
 
 Further Reading
 ---------------
 
 - [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler
-- [Jest API Reference](http://facebook.github.io/jest/docs/api.html)
+- [Jest API Reference](https://facebook.github.io/jest/docs/api.html)

docs/_posts/2014-10-14-introducing-react-elements.md

@@ -4,7 +4,7 @@ author: Sebastian Markbåge
 redirect_from: "blog/2014/10/14/introducting-react-elements.html"
 ---
 
-The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](http://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
+The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](https://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
 
 If you currently use JSX everywhere, you don't really have to do anything to get these benefits! The updated transformer will do it for you.
 
@@ -72,7 +72,7 @@ This is the biggest change to 0.12. Don't worry though. This functionality conti
 
 ### React With JSX
 
-If you use the React specific [JSX](http://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
+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.
 
 ```javascript
 // If you use node/browserify modules make sure
@@ -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](http://facebook.github.io/jsx/) with a different transpiler for custom purposes.*
+*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
 

docs/_posts/2014-10-16-react-v0.12-rc1.md

@@ -9,13 +9,13 @@ We are finally ready to share the work we've been doing over the past couple mon
 The release candidate is available for download:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.12.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.12.0-rc1.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.12.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-0.12.0-rc1.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.12.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.12.0-rc1.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.12.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.12.0-rc1.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.12.0-rc1.js>
+  <https://fb.me/JSXTransformer-0.12.0-rc1.js>
 
 We've also published version `0.12.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 
@@ -27,7 +27,7 @@ The biggest conceptual change we made in v0.12 is the move to React Elements. [W
 
 ## JSX Changes
 
-Earlier this year we decided to write [a specification for JSX](http://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.
+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!

docs/_posts/2014-10-17-community-roundup-23.md

@@ -4,13 +4,13 @@ layout: post
 author: Lou Husson
 ---
 
-This round-up is a special edition on [Flux](http://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
+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
 
 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.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
 
 # Yahoo
 
@@ -24,10 +24,10 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
 
 ## Reflux
 
-[Mikael Brassman](http://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](http://spoike.ghost.io/deconstructing-reactjss-flux/).
+[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/).
 
 <center>
-<a href="http://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
+<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
 </center>
 
 
@@ -107,22 +107,22 @@ undo: function() {
 
 ## React and Flux
 
-[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](http://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.
+[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.
 
 > Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.
 >
 > Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current "parent controller or models".
 >
-> [Read the full article...](http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
+> [Read the full article...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
 
 
 
 ## 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](http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
+[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/).
 
 <center>
-<a href="http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
+<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
 </center>
 
 
@@ -144,7 +144,7 @@ undo: function() {
 
 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.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
 
 
 ## Random Tweet

docs/_posts/2014-10-28-react-v0.12.md

@@ -11,13 +11,13 @@ We have talked a lot about some of the bigger changes in this release. [We intro
 The release is available for download:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.12.0.js>  
-  Minified build for production: <http://fb.me/react-0.12.0.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.12.0.js>  
+  Minified build for production: <https://fb.me/react-0.12.0.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.12.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.12.0.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.12.0.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.12.0.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.12.0.js>
+  <https://fb.me/JSXTransformer-0.12.0.js>
 
 We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 

docs/_posts/2014-11-25-community-roundup-24.md

@@ -14,11 +14,11 @@ Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic
 
 I ([steveluscher](https://github.com/steveluscher)) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.
 
-<iframe width="560" height="315" src="//www.youtube.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
 
 James Pearce ([jamesgpearce](https://github.com/jamesgpearce)) carried Big-Coffee all the way to Raleigh, NC. At the _All Things Open_ conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.
 
-<iframe width="560" height="315" src="//www.youtube.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
 
 ## All About Isomorphism
 
@@ -38,7 +38,7 @@ Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson
 
 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
 
-<iframe width="420" height="315" src="//www.youtube.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
+<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
 
 If you take a peek under the covers, you'll find that React powers [Carousel](https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/), Dropbox's new photo and video gallery app.
 
@@ -48,11 +48,11 @@ We enjoyed a cinematic/narrative experience with this React-powered, interactive
 
 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="420" height="315" src="//www.youtube.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
+<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
 
 ## Community Components
 
-Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](http://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](http://tomchentw.github.io/react-prism/) component, for good measure.
+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.
 
 Jed Watson ([jedwatson](https://github.com/JedWatson)) helps you manage touch, tap, and press events using the [react-tappable](https://github.com/JedWatson/react-tappable) component.
 

docs/_posts/2014-12-18-react-v0.12.2.md

@@ -10,13 +10,13 @@ You may have noticed that we did not do an announcement for v0.12.1. That releas
 The release is available for download from the CDN:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.12.2.js>  
-  Minified build for production: <http://fb.me/react-0.12.2.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.12.2.js>  
+  Minified build for production: <https://fb.me/react-0.12.2.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.12.2.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.12.2.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.12.2.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.12.2.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.12.2.js>
+  <https://fb.me/JSXTransformer-0.12.2.js>
 
 We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.
 

docs/_posts/2014-12-19-react-js-conf-diversity-scholarship.md

@@ -11,7 +11,7 @@ I'm really excited about this and I hope you are too! The full announcement is b
 
 The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!
 
-Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the [website](http://conf.reactjs.com/) and [previous](http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html) [updates](http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html) on our blog.
+Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the [website](http://conf.reactjs.com/) and [previous](/react/blog/2014/10/27/react-js-conf.html) [updates](/react/blog/2014/11/24/react-js-conf-updates.html) on our blog.
 
 At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
 Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.

docs/_posts/2015-02-18-react-conf-roundup-2015.md

@@ -16,7 +16,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -28,7 +28,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -40,7 +40,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -52,7 +52,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -64,7 +64,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -76,7 +76,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -88,7 +88,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -96,11 +96,11 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
   <div class="skinny-col">
     <h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
     <p>
-      <strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="http://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
+      <strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="https://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -112,7 +112,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -124,7 +124,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -136,7 +136,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -148,7 +148,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -160,7 +160,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
     </p>
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -171,7 +171,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
       <strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -182,7 +182,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
       <strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -193,7 +193,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
       <strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -204,7 +204,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
       <strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -215,7 +215,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
       <strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -226,7 +226,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
       <strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -237,7 +237,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
       <strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&amp;A session.
   </div>
   <div class="skinny-col">
-    <iframe width="305" height="171" src="https://www.youtube.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
+    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
   </div>
 </div>
 
@@ -266,4 +266,4 @@ And, in case you missed a session, you can borrow **Michael Chan’s** [drawings
 
 **All proceeds from React.js Conf 2015 were donated to the wonderful programs at [code.org](http://code.org)**. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.
 
-<iframe width="305" height="171" src="https://www.youtube.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
+<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>

docs/_posts/2015-02-20-introducing-relay-and-graphql.md

@@ -8,7 +8,7 @@ author: Greg Hurrell
 
 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.
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
 
 The two projects &mdash; Relay and GraphQL &mdash; have been in use in production at Facebook for some time, and we're excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.
 

docs/_posts/2015-02-24-react-v0.13-rc1.md

@@ -12,13 +12,13 @@ We've talked a little bit about the changes that are coming. The splashiest of t
 The release candidate is available for download:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.13.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.13.0-rc1.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.13.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-0.13.0-rc1.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.13.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.13.0-rc1.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.13.0-rc1.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.13.0-rc1.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.13.0-rc1.js>
+  <https://fb.me/JSXTransformer-0.13.0-rc1.js>
 
 We've also published version `0.13.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 
@@ -39,7 +39,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
 
 #### New Features
 
-* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
+* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/react/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.
 * New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`)
 * `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.

docs/_posts/2015-03-03-react-v0.13-rc2.md

@@ -13,13 +13,13 @@ Thanks to everybody who has already been testing the release candidate. We've re
 The release candidate is available for download:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.13.0-rc2.js>  
-  Minified build for production: <http://fb.me/react-0.13.0-rc2.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.13.0-rc2.js>  
+  Minified build for production: <https://fb.me/react-0.13.0-rc2.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.13.0-rc2.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.13.0-rc2.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.13.0-rc2.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.13.0-rc2.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.13.0-rc2.js>
+  <https://fb.me/JSXTransformer-0.13.0-rc2.js>
 
 We've also published version `0.13.0-rc2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 

docs/_posts/2015-03-04-community-roundup-25.md

@@ -12,7 +12,7 @@ Interest in React has been exploding recently, so it's a good time to explore so
 
 [Formidable Labs](https://github.com/FormidableLabs) and [Seattle JS](http://www.meetup.com/seattlejs/) recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:
 
-<iframe width="650" height="300" src="//www.youtube.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
+<iframe width="650" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
 
 [AEFlash](https://github.com/aearly) writes up [some best practices and tips](http://aeflash.com/2015-02/react-tips-and-best-practices.html) to help you avoid potential pitfalls when developing with React.
 
@@ -40,7 +40,7 @@ Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Pl
 
 [Andrew Hillel](https://twitter.com/andyhillel) of the BBC gives [an excellent and thorough breakdown](http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d) of the stack they used to rebuild their homepage, with React as an integral part of the front-end.
 
-A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](http://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.
+A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](https://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.
 
 [Polarr](https://github.com/Polarrco) have rebuilt [their browser-based photo editor](http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here) with React.
 

docs/_posts/2015-03-10-react-v0.13.md

@@ -17,13 +17,13 @@ Our planned optimizations require that ReactElement objects are immutable, which
 The release is now available for download:
 
 * **React**  
-  Dev build with warnings: <http://fb.me/react-0.13.0.js>  
-  Minified build for production: <http://fb.me/react-0.13.0.min.js>  
+  Dev build with warnings: <https://fb.me/react-0.13.0.js>  
+  Minified build for production: <https://fb.me/react-0.13.0.min.js>  
 * **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.13.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.13.0.min.js>  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.13.0.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.13.0.min.js>  
 * **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.13.0.js>
+  <https://fb.me/JSXTransformer-0.13.0.js>
 
 We've also published version `0.13.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
 
@@ -45,7 +45,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
 
 #### New Features
 
-* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
+* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/react/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.
 * Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
 * New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).

docs/_posts/2015-03-16-react-v0.13.1.md

@@ -0,0 +1,47 @@
+---
+title: "React v0.13.1"
+author: Paul O’Shannessy
+---
+
+It's been less than a week since we shipped v0.13.0 but it's time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.
+
+Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren't on the core team!
+
+The release is now available for download:
+
+* **React**  
+  Dev build with warnings: <https://fb.me/react-0.13.1.js>  
+  Minified build for production: <https://fb.me/react-0.13.1.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.13.1.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.13.1.min.js>  
+* **In-Browser JSX transformer**  
+  <https://fb.me/JSXTransformer-0.13.1.js>
+
+We've also published version `0.13.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+- - -
+
+## Changelog
+
+### React Core
+
+#### Bug Fixes
+
+* Don't throw when rendering empty `<select>` elements
+* Ensure updating `style` works when transitioning from `null`
+
+### React with Add-Ons
+
+### Bug Fixes
+
+* 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
+
+#### Bug Fixes
+
+* Fix option parsing for `--non-strict-es6module`
+

docs/_posts/2015-03-19-building-the-facebook-news-feed-with-relay.md

@@ -0,0 +1,222 @@
+---
+title: "Building The Facebook News Feed With Relay"
+author: Joseph Savona
+---
+
+At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/watch?v=9sc8Pyc51uU).
+
+We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.
+
+<br/>
+
+## The Relay Architecture
+
+The diagram below shows the main parts of the Relay architecture on the client and the server:
+
+<img src="/react/img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" />
+
+The main pieces are as follows:
+
+- Relay Components: React components annotated with declarative data descriptions.
+- Actions: Descriptions of how data should change in response to user actions.
+- Relay Store: A client-side data store that is fully managed by the framework.
+- Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.
+
+This post will focus on **Relay components** that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.
+
+<br/>
+
+## 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:
+
+<img src="/react/img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" />
+
+<br/>
+
+## 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.
+
+```javascript
+// Story.react.js
+class Story extends React.Component {
+  render() {
+    var story = this.props.story;
+    return (
+      <View>
+        <Image uri={story.author.profile_picture.uri} />
+        <Text>{story.author.name}</Text>
+        <Text>{story.text}</Text>
+      </View>
+    );
+  }
+}
+
+module.exports = Story;
+```
+
+<br/>
+
+## What's the `<Story>`?
+
+Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):
+
+```javascript
+// Story.react.js
+class Story extends React.Component { ... }
+
+module.exports = Relay.createContainer(Story, {
+  queries: {
+    story: /* TODO */
+  }
+});
+```
+
+Before adding the GraphQL query, let's look at the component hierarchy this creates:
+
+<img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
+
+Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for `story`:
+
+```javascript
+// Story.react.js
+class Story extends React.Component { ... }
+
+module.exports = Relay.createContainer(Story, {
+  queries: {
+    story: graphql`
+      Story {
+        author {
+          name,
+          profile_picture {
+            uri
+          }
+        },
+        text
+      }
+    `
+  }
+});
+```
+
+Queries use ES6 template literals tagged with the `graphql` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in `<Story>`'s render function.
+
+<br/>
+
+## `<Story>`s on Demand
+
+We can render a Relay component by providing Relay with the component (`<Story>`) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then `render()` the component. The value of `props.story` will be a plain JavaScript object such as the following:
+
+```javascript
+{
+  author: {
+    name: "Greg",
+    profile_picture: {
+      uri: "https://…"
+    }
+  },
+  text: "The first Relay blog post is up…"
+}
+```
+
+Relay guarantees that all data required to render a component will be available before it is rendered. This means that `<Story>` does not need to handle a loading state; the `story` is *guaranteed* to be available before `render()` is called. We have found that this invariant simplifies our application code *and* improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.
+
+The diagram below shows how Relay containers make data available to our React components:
+
+<img src="/react/img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" />
+
+<br/>
+
+## `<NewsFeed>` Worthy
+
+Now that the `<Story>` is over we can continue with the `<NewsFeed>` component. Again, we'll start with a React version:
+
+```javascript
+// NewsFeed.react.js
+class NewsFeed extends React.Component {
+  render() {
+    var stories = this.props.viewer.stories; // `viewer` is the active user
+    return (
+      <View>
+        {stories.map(story => <Story story={story} />)}
+        <Button onClick={() => this.loadMore()}>Load More</Button>
+      </View>
+    );
+  }
+
+  loadMore() {
+    // TODO: fetch more stories
+  }
+}
+
+module.exports = NewsFeed;
+```
+
+<br/>
+
+## All the News Fit to be Relayed
+
+`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
+
+Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getQuery('prop')}`. Pagination can be accomplished with a query parameter, specified with `<param>` (as in `stories(first: <count>)`):
+
+```javascript
+// NewsFeed.react.js
+class NewsFeed extends React.Component { ... }
+
+module.exports = Relay.createContainer(NewsFeed, {
+  queryParams: {
+    count: 3                             /* default to 3 stories */
+  },
+  queries: {
+    viewer: graphql`
+      Viewer {
+        stories(first: <count>) {        /* fetch viewer's stories */
+          edges {                        /* traverse the graph */
+            node {
+              ${Story.getQuery('story')} /* compose child query */
+            }
+          }
+        }
+      }
+    `
+  }
+});
+```
+
+Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
+
+Query parameters are available to components as `props.queryParams` and can be modified with `props.setQueryParams(nextParams)`. We can use these to implement pagination:
+
+```javascript
+// NewsFeed.react.js
+class NewsFeed extends React.Component {
+  render() { ... }
+
+  loadMore() {
+    // read current params
+    var count = this.props.queryParams.count;
+    // update params
+    this.props.setQueryParams({
+      count: count + 5
+    });
+  }
+}
+```
+
+Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.queryParams.count`.
+
+<br/>
+
+## 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:
+
+- Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.
+- Trivial pagination with automatic optimizations to fetch only the additional items.
+- View composition and reusability, so that `<Story>` can be used on its own or within `<NewsFeed>`, without any changes to either component.
+- Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.
+- Exactly *zero* lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.
+
+But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.

docs/_posts/2015-03-26-introducing-react-native.md

@@ -0,0 +1,16 @@
+---
+title: "Introducing React Native"
+author: Ben Alpert
+---
+
+In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We're happy to announce that we're open-sourcing React Native and you can start building your apps with it today.
+
+For more details, see [Tom Occhino's post on the Facebook Engineering blog](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/):
+
+> *What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.*
+>
+> *With a bit of work, we can make it so the exact same React that's on GitHub can power truly native mobile applications. The only difference in the mobile environment is that instead of running React in the browser and rendering to divs and spans, we run it an embedded instance of JavaScriptCore inside our apps and render to higher-level platform-specific components.*
+>
+> *It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”*
+
+To learn more, visit the [React Native website](https://facebook.github.io/react-native/).

docs/_posts/2015-03-30-community-roundup-26.md

@@ -0,0 +1,95 @@
+---
+title: "Community Round-up #26"
+layout: post
+author: Vjeux
+---
+
+We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!
+
+<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?
+
+**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="560" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
+
+
+## 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.
+
+<center>
+[![](/react/img/blog/property-finder.png)](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript)
+</center>
+
+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
+
+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="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
+
+
+## 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!
+
+<center>
+[![](/react/img/blog/hacker-news-react-native.png)](https://github.com/iSimar/HackerNews-React-Native)
+</center>
+
+
+## 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.
+
+<center>
+[![](/react/img/blog/parse-react.jpg)](http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/)
+</center>
+
+
+## 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!
+
+<center>
+[![](/react/img/blog/tcomb-react-native.png)](https://github.com/gcanti/tcomb-form-native)
+</center>
+
+
+## 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
+
+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.
+
+<center>
+[![](/react/img/blog/modus-create.gif)](http://moduscreate.com/react-native-has-landed/)
+</center>
+
+
+## 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 and Babel. 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
+
+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
+
+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!
+
+<blockquote class="twitter-tweet" lang="en"><p>Wow. Getting started with React Native might have been the smoothest experience I’ve ever had with a new developer product.</p>&mdash; Andreas Eldh (@eldh) <a href="https://twitter.com/eldh/status/581186172094980096">March 26, 2015</a></blockquote>
+

docs/_posts/2015-04-17-react-native-v0.4.md

@@ -0,0 +1,25 @@
+---
+title: "React Native v0.4"
+layout: post
+author: Vjeux
+---
+
+It's been three weeks since we open sourced React Native and there's been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus [35 plugins](http://react.parts/native-ios) and [1 app in the app store](http://herman.asia/building-a-flashcard-app-with-react-native)! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!
+
+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
+
+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:
+
+* **Error messages and documentation**: We want React Native to be the absolute best developer experience for building mobile apps. We've added a lot of warnings, improved the documentation, and fixed many bugs. If you encounter anything, and I really mean anything, that is not expected or clear, please create an issue - we want to hear about it and fix it.
+* **NPM modules compatibility**: There are a lot of libraries on NPM that do not depend on node/browser internals that would be really useful in React Native, such as superagent, underscore, parse, and many others.  The packager is now a lot more faithful to node/browserify/webpack dependency resolution. If your favorite library doesn't work out of the box, please open up an issue.
+* **Infrastructure**: We are refactoring the internals of React Native to make it easier to plug in to existing iOS codebases, as well as improve performance by removing redundant views and shadow views, supporting multiple root views and manually registering classes to reduce startup time.
+* **Components**: The API for a lot of UI components and APIs, especially the ones we're not using heavily inside of Facebook, has dramatically improved thanks to many of your pull requests.
+* **Tests**: We ported JavaScript tests, iOS Snapshot tests, and End to End tests to Travis CI. We have broken GitHub master a couple of times (whoops!) when syncing and we hope that with this growing suite of tests it's going to become harder and harder to do so.
+* **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?
+
+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.

docs/_posts/2015-04-18-react-v0.13.2.md

@@ -0,0 +1,51 @@
+---
+title: "React v0.13.2"
+author: Paul O’Shannessy
+---
+
+Yesterday the [React Native team shipped v0.4](/react/blog/2015/04/17/react-native-v0.4.html). Those of us working on the web team just a few feet away couldn't just be shown up like that so we're shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.
+
+The release is now available for download:
+
+* **React**  
+  Dev build with warnings: <https://fb.me/react-0.13.2.js>  
+  Minified build for production: <https://fb.me/react-0.13.2.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.13.2.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.13.2.min.js>  
+* **In-Browser JSX transformer**  
+  <https://fb.me/JSXTransformer-0.13.2.js>
+
+We've also published version `0.13.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+- - -
+
+## Changelog
+
+### React Core
+
+#### New Features
+
+* Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
+* Added support for more DOM properties:
+  * `scoped` - for `<style>` elements
+  * `high`, `low`, `optimum` - for `<meter>` elements
+  * `unselectable` - IE-specific property to prevent user selection
+
+#### 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
+
+#### Bug Fixes
+
+* Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
+
+### React Tools
+
+* Improve documentation for new options
+

docs/_posts/2015-05-01-graphql-introduction.md

@@ -0,0 +1,107 @@
+---
+title: "GraphQL Introduction"
+author: Nick Schrock
+---
+
+At the React.js conference in late January 2015, we revealed our next major technology in the React family: [Relay](http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html). 
+
+Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application – or embedding this logic in a custom endpoint on the server – we instead co-locate a *declarative* data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.
+
+GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook's HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion's share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.
+
+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?
+
+A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query: 
+
+```js
+{
+  user(id: 3500401) {
+    id,
+    name,
+    isViewerFriend,
+    profilePicture(size: 50)  {
+      uri,
+      width,
+      height
+    }
+  }
+}
+```
+
+(Note: this syntax is slightly different from previous GraphQL examples. We've recently been making improvements to the language.)
+
+And here is the response to that query.
+
+```json
+{
+  "user" : {
+    "id": 3500401,
+    "name": "Jing Chen",
+    "isViewerFriend": true,
+    "profilePicture": {
+      "uri": "http://someurl.cdn/pic.jpg",
+      "width": 50,
+      "height": 50
+    }
+  }
+}
+```
+
+We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:
+
+* **Hierarchical:** Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.
+* **Product-centric:** GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.
+* **Client-specified queries:** In GraphQL, the specification for queries are encoded in the *client* rather than the *server*. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.
+* **Backwards Compatible:** In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for *at least* two years. This means there are at a *minimum* 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.
+* **Structured, Arbitrary Code:** Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by *arbitrary code*. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.
+* **Application-Layer Protocol:** GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.
+* **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?
+
+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 an acronym for Representational State Transfer, which 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.
+
+Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches and object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.
+
+We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:
+
+* Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
+* Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
+* REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developer deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
+* Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” [according to its inventor](http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven). This is not a requirement for APIs that serve a client app built within the same organization.
+
+Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all *internal* REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.
+
+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
+
+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.
+
+* These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
+* Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult remove data from a custom endpoint.
+* Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL  – unless the data in the view is completely new to the entire system  – a product developer adds a field to a GraphQL query and the work on the client continues unabated.
+* Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of *ad hoc* endpoints remain.
+
+We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.
+
+This is a liberating platform for product developers. With GraphQL, no more contending with *ad hoc* endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more  frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from *ad hoc* endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.
+
+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?
+
+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.
+

docs/acknowledgements.md

@@ -16,4 +16,4 @@ We'd like to thank all of our contributors:
   {% endfor %}
 </div>
 
-In addition, we're grateful to [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.org/package/react) package name on npm and to [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter.  We'd also like to thank [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.org/package/flux) package name on npm.
+In addition, we're grateful to [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.com/package/react) package name on npm and to [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter.  We'd also like to thank [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.com/package/flux) package name on npm.

docs/css/react.scss

@@ -76,6 +76,10 @@ li {
   margin-left: 20px;
 }
 
+li + li {
+  margin-top: 10px;
+}
+
 // Make header navigation linkable and on the screen. Used in documentation and
 // blog posts.
 h1, h2, h3, h4, h5, h6 {
@@ -111,25 +115,30 @@ h1, h2, h3, h4, h5, h6 {
     text-decoration: none;
   }
 
-  .nav-site {
+  .nav-site-internal {
+    margin: 0 0 0 20px;
+  }
+
+  .nav-site-external {
     float: right;
     margin: 0;
+  }
 
+  .nav-site {
     li {
       margin: 0;
     }
 
     a {
-      padding: 0 8px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
+      box-sizing: content-box;
+      padding: 0 10px;
       line-height: $navHeight;
       display: inline-block;
       height: $navHeight;
-      color: $mediumTextColor;
+      color: #ddd;
 
       &:hover {
-        color: $lightTextColor;
+        color: #fff;
       }
 
       &.active {
@@ -154,7 +163,8 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   ul {
-    display: inline;
+    display: inline-block;
+    vertical-align: top;
   }
 
   li {
@@ -416,6 +426,12 @@ section.black content {
     border-left: 5px solid #f7ebc6;
   }
 
+  h2 > code {
+    font-size: inherit;
+    line-height: inherit;
+    color: #555;
+    background-color: rgba(0,0,0,0.04);
+  }
 }
 
 /**

docs/docs/01-why-react.ko-KR.md

@@ -0,0 +1,30 @@
+---
+id: why-react-ko-KR
+title: 왜 React인가?
+permalink: why-react-ko-KR.html
+next: displaying-data-ko-KR.html
+---
+
+React는 페이스북과 인스타그램에서 사용자 인터페이스를 구성하기 위해 만들어진 라이브러리입니다. 많은 사람들은 React를 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 에서의 **V** 로 생각하는 경향이 있습니다.
+
+우리는 단 하나의 문제를 해결하기 위해 React를 만들었습니다: **지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기.** 이 문제를 해결하기 위해, React는 두가지 컨셉을 도입했습니다.
+
+## 단순함
+
+당신의 애플리케이션이 특정 시점에 어떻게 보여야 할지를 단순히 표현하는 것만으로, 데이터가 변할 때 React는 자동으로 모든 UI 업데이트를 관리해줍니다.
+
+## 선언적 문법
+
+데이터가 변할 때 React는 "새로 고침" 버튼을 누르듯이 작동하며, 데이터의 바뀐 부분만을 업데이트할 수 있습니다.
+
+## 구성적인 컴포넌트를 만드세요
+
+React는 재사용 가능한 컴포넌트들을 만드는 데에 도움이 됩니다. 사실, React를 사용하면 *단지* 컴포넌트를 만드는 일만 하게 됩니다. 컴포넌트들은 잘 캡슐화되어 되어 있기 때문에, 컴포넌트들은 코드의 재사용성을 높이고, 테스트를 쉽게 해 주며, 관심 분리의 원칙(separation of concerns)을 지키게 해 줍니다.
+
+## 5분만 투자하세요
+
+React는 많은 관습적인 사고에 도전하며, 첫눈에 볼 때는 이상한 아이디어들의 모음이라고 생각할 수도 있습니다. 이 가이드를 읽기 위해 [5분만 투자하세요](https://signalvnoise.com/posts/3124-give-it-five-minutes); 그 이상한 아이디어들은 페이스북과 인스타그램 안팎의 수천 개의 컴포넌트들을 만드는 데에 사용되었기 때문입니다.
+
+## 더 알아보기
+
+[이 블로그 포스트](/react/blog/2013/06/05/why-react.html)에서 React를 만든 우리의 동기에 대해 알아볼 수 있습니다.

docs/docs/01-why-react.md

@@ -4,15 +4,15 @@ title: Why React?
 permalink: why-react.html
 next: displaying-data.html
 ---
-React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
+React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
 
 We built React to solve one problem: **building large applications with data that changes over time**. To do this, React uses two main ideas.
 
-### Simple
+## Simple
 
 Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
 
-### Declarative
+## Declarative
 
 When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
 
@@ -22,8 +22,8 @@ React is all about building reusable components. In fact, with React the *only*
 
 ## Give It Five Minutes
 
-React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
+React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](https://signalvnoise.com/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
 
 ## Learn More
 
-You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html).
+You can learn more about our motivations behind building React in [this blog post](/react/blog/2013/06/05/why-react.html).

docs/docs/01-why-react.zh-CN.md

@@ -5,7 +5,7 @@ permalink: why-react-zh-CN.html
 next: displaying-data-zh-CN.html
 ---
 
-React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
+React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
 
 我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。为了达到这个目标，React 采用下面两个主要的思想。
 
@@ -23,10 +23,10 @@ React 都是关于构建可复用的组件。事实上，通过 React 你*唯一
 
 ## 给它5分钟的时间
 
-React挑战了很多传统的知识，第一眼看上去可能很多想法有点疯狂。当你阅读这篇指南，请[给它5分钟的时间](http://37signals.com/svn/posts/3124-give-it-five-minutes)；那些疯狂的想法已经帮助 Facebook 和 Instagram 从里到外创建了上千的组件了。
+React挑战了很多传统的知识，第一眼看上去可能很多想法有点疯狂。当你阅读这篇指南，请[给它5分钟的时间](https://signalvnoise.com/posts/3124-give-it-five-minutes)；那些疯狂的想法已经帮助 Facebook 和 Instagram 从里到外创建了上千的组件了。
 
 ## 了解更多
 
-你可以从这篇[博客](http://facebook.github.io/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。
+你可以从这篇[博客](/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。
 
 

docs/docs/02-displaying-data.ko-KR.md

@@ -0,0 +1,126 @@
+---
+id: displaying-data-ko-KR
+title: 데이터를 표시하기
+permalink: displaying-data-ko-KR.html
+prev: why-react-ko-KR.html
+next: jsx-in-depth-ko-KR.html
+---
+
+UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하는 것입니다. React는 데이터를 표시하고 데이터가 변할 때마다 인터페이스를 최신의 상태로 자동으로 유지하기 쉽게 해 줍니다.
+
+## 시작하기
+
+정말 간단한 예제를 보도록 하죠. 다음과 같은 코드의 `hello-react.html` 파일을 만듭시다.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello React</title>
+    <script src="https://fb.me/react-{{site.react_version}}.js"></script>
+    <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
+  </head>
+  <body>
+    <div id="example"></div>
+    <script type="text/jsx">
+
+      // ** 코드는 여기에 작성하면 됩니다! **
+
+    </script>
+  </body>
+</html>
+```
+
+문서의 나머지에서, 코드가 위와 같은 HTML 템플릿에 들어갔다고 가정하고 JavaScript 코드에만 집중할 것입니다. 위의 주석 부분을 다음과 같은 JSX 코드로 바꿔 보세요:
+
+```javascript
+var HelloWorld = React.createClass({
+  render: function() {
+    return (
+      <p>
+        안녕, <input type="text" placeholder="이름을 여기에 작성하세요" />!
+        지금 시간은 {this.props.date.toTimeString()} 입니다.
+      </p>
+    );
+  }
+});
+
+setInterval(function() {
+  React.render(
+    <HelloWorld date={new Date()} />,
+    document.getElementById('example')
+  );
+}, 500);
+```
+
+
+## 반응 적(Reactive) 업데이트
+
+`hello-react.html` 파일을 웹 브라우저에서 열어 당신의 이름을 텍스트 필드에 써 보세요. React는 단지 시간을 표시하는 부분만을 바꿉니다 — 텍스트 필드 안에 입력한 것은 그대로 남아 있구요, 당신이 이 동작을 관리하는 그 어떤 코드도 쓰지 않았음에도 불구하고 말이죠. React는 그걸 올바른 방법으로 알아서 해줍니다.
+
+우리가 이걸 할 수 있었던 건, React는 필요한 경우에만 DOM을 조작하기 때문입니다. **React는 빠른 React 내부의 DOM 모형을 이용하여 변경된 부분을 측정하고, 가장 효율적인 DOM 조작 방법을 계산해 줍니다.**
+
+이 컴포넌트에 대한 입력은 `props` 라고 불립니다 — "properties" 를 줄인 것이죠. 그들은 JSX 문법에서는 어트리뷰트로서 전달됩니다. 당신은 `props` 를 컴포넌트 안에서 불변의(immutable) 엘리먼트로서 생각해야 하고, `this.props` 를 덮어씌우려고 해서는 안됩니다.
+
+
+## 컴포넌트들은 함수와 같습니다
+
+React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props` 와 `state` (이것들은 나중에 언급할 것입니다) 를 받고 HTML을 렌더링하는 단순한 함수들로 생각해도 됩니다. 그것들은 너무 단순하기 때문에, 그것들의 작동을 이해하는 것 또한 쉽게 만듭니다.
+
+> 주의:
+>
+> **한가지 제약이 있습니다**: React 컴포넌트들은 단 하나의 루트 노드(root node)만을 렌더할 수 있습니다. 만약 여러개의 노드들을 리턴하고 싶다면, 그것들은 단 하나의 루트 노드로 싸여져 있어야만 합니다.
+
+
+## JSX 문법
+
+우리는 컴포넌트를 사용하는 것이 "템플릿"과 "디스플레이 로직(display logic)"을 이용하는 것보다 관심을 분리(separate concerns)하는 데에 올바른 방법이라고 강하게 믿고 있습니다. 우리는 마크업과 그것을 만들어내는 코드는 친밀하게 함께 결합되어있다고 생각합니다. 또한, 디스플레이 로직은 종종 매우 복잡하고, 그것을 템플릿 언어를 이용해 표현하는 것은 점점 사용하기 어렵게 됩니다.
+
+우리는 이 문제를 해결하는 최고의 해결책은, UI를 만드는 진짜 프로그래밍 언어의 표현력을 모두 사용할 수 있는 JavaScript 코드로부터 HTML과 컴포넌트 트리들을 생성하는 것임을 발견했습니다.
+
+이것을 더 쉽게 하기 위해서, 우리는 매우 간단하고, **선택적인** HTML과 비슷한 문법을 추가하여 이 React 트리 노드들을 만들 수 있게 했습니다.
+
+**JSX는 당신으로 하여금 HTML 문법을 이용해 JavaScript 객체를 만들게 해줍니다.** React를 이용해 순수한 JavaScript 문법으로 링크를 만드려고 한다면, 코드는 다음과 같습니다:
+
+`React.createElement('a', {href: 'https://facebook.github.io/react/'}, '안녕하세요!')`
+
+JSX를 이용하면:
+
+`<a href="https://facebook.github.io/react/">안녕하세요!</a>`
+
+우리는 이것이 React 앱들을 만들기 쉽게 하고, 디자이너들이 이 문법을 더 선호하는 것을 발견했습니다, 하지만 모든 사람은 그들만의 선호하는 워크플로우가 있기 마련이므로, **JSX는 React를 사용하기 위해 필수적이지는 않습니다.**
+
+JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html). 를 살펴 보시기 바랍니다. 또는, [우리의 온라인 JSX 컴파일러](/react/jsx-compiler.html)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
+
+JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/react/docs/jsx-gotchas-ko-KR.html)에 중요한 차이점들에 대해 설명되어 있습니다.
+
+JSX를 사용하기 시작하기 위한 가장 쉬운 방법은 브라우저에서 작동하는 `JSXTransformer`를 사용하는 것입니다. 우리는 이것을 프로덕션에서는 사용하지 않기를 강하게 권장하는 바입니다. 당신은 우리의 커맨드 라인 [react-tools](https://www.npmjs.com/package/react-tools) 패키지를 이용하여 미리 컴파일(precompile)해 사용할 수 있습니다.
+
+
+## JSX 없이 React 사용하기
+
+JSX는 완전히 선택적입니다. 당신은 React와 JSX를 함께 사용하지 않아도 상관없습니다. 그냥 JavaScript에서 React 엘리먼트를 `React.createElement`로 만들 수 있습니다. 여기에 태그 이름이나 컴포넌트, 속성 객체, 자식 엘리먼트들을 전달하면 됩니다.
+
+```javascript
+var child1 = React.createElement('li', null, 'First Text Content');
+var child2 = React.createElement('li', null, 'Second Text Content');
+var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
+React.render(root, document.getElementById('example'));
+```
+
+편의를 위하여, 당신은 팩토리 함수 헬퍼들을 이용해 커스텀 컴포넌트로부터 엘리먼트들을 만들 수 있습니다.
+
+```javascript
+var Factory = React.createFactory(ComponentClass);
+...
+var root = Factory({ custom: 'prop' });
+React.render(root, document.getElementById('example'));
+```
+
+React는 이미 일반적인 HTML 태그에 대한 빌트인 팩토리를 가지고 있습니다.
+
+```javascript
+var root = React.DOM.ul({ className: 'my-list' },
+             React.DOM.li(null, '텍스트')
+           );
+```

docs/docs/02-displaying-data.md

@@ -18,8 +18,8 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
 <html>
   <head>
     <title>Hello React</title>
-    <script src="http://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
+    <script src="https://fb.me/react-{{site.react_version}}.js"></script>
+    <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
   </head>
   <body>
     <div id="example"></div>
@@ -32,7 +32,7 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
 </html>
 ```
 
-For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:
+For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JSX:
 
 ```javascript
 var HelloWorld = React.createClass({
@@ -83,11 +83,11 @@ In order to make this easier, we've added a very simple, **optional** HTML-like
 
 **JSX lets you create JavaScript objects using HTML syntax.** To generate a link in React using pure JavaScript you'd write:
 
-`React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')`
+`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
 
 With JSX this becomes:
 
-`<a href="http://facebook.github.io/react/">Hello!</a>`
+`<a href="https://facebook.github.io/react/">Hello!</a>`
 
 We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
 
@@ -95,7 +95,7 @@ JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in
 
 JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
 
-The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](http://npmjs.org/package/react-tools) package.
+The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](https://www.npmjs.com/package/react-tools) package.
 
 
 ## React without JSX
@@ -106,7 +106,7 @@ JSX is completely optional; you don't have to use JSX with React. You can create
 var child1 = React.createElement('li', null, 'First Text Content');
 var child2 = React.createElement('li', null, 'Second Text Content');
 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 As a convenience you can create short-hand factory functions to create elements from custom components.
@@ -115,7 +115,7 @@ As a convenience you can create short-hand factory functions to create elements
 var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 React already has built-in factories for common HTML tags:

docs/docs/02-displaying-data.zh-CN.md

@@ -19,8 +19,8 @@ next: jsx-in-depth-zh-CN.html
 <html>
   <head>
     <title>Hello React</title>
-    <script src="http://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
+    <script src="https://fb.me/react-{{site.react_version}}.js"></script>
+    <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
   </head>
   <body>
     <div id="example"></div>
@@ -82,11 +82,11 @@ React 组件非常简单。你可以认为它们就是简单的函数，接受 `
 
 **JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： 
 
-`React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`。
+`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello React!')`。
 
 通过 JSX 这就变成了
 
-`<a href="http://facebook.github.io/react/">Hello React!</a>`。
+`<a href="https://facebook.github.io/react/">Hello React!</a>`。
 
 我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。**
 
@@ -94,7 +94,7 @@ JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性
 
 JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。
 
-最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。
+最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](https://www.npmjs.com/package/react-tools) 包来预编译你的代码。
 
 
 ## 没有 JSX 的 React
@@ -104,7 +104,7 @@ JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx
 ```javascript
 var child = React.createElement('li', null, 'Text Content');
 var root = React.createElement('ul', { className: 'my-list' }, child);
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 方便起见，你可以创建基于自定义组件的速记工厂方法。
@@ -113,7 +113,7 @@ React.render(root, document.body);
 var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
-React.render(root, document.body);
+React.render(root, document.getElementById('example'));
 ```
 
 React 已经为 HTML 标签提供内置工厂方法。

docs/docs/02.1-jsx-in-depth.ko-KR.md

@@ -0,0 +1,210 @@
+---
+id: jsx-in-depth-ko-KR
+title: JSX 깊이보기
+permalink: jsx-in-depth-ko-KR.html
+prev: displaying-data-ko-KR.html
+next: jsx-spread-ko-KR.html
+---
+
+[JSX](https://facebook.github.io/jsx/)는 XML과 비슷한 JavaScript문법 확장입니다. React에서 변환되는 간단한 JSX 구문을 사용하실 수 있습니다.
+
+## 왜 JSX인가?
+
+React를 위해 꼭 JSX를 사용할 필요는 없고, 그냥 일반 JS를 사용할 수도 있습니만 JSX를 사용하기를 추천합니다. 왜냐하면, 어트리뷰트를 가진 트리 구조로 정의할 수 있는 간결하고 익숙한 문법이기 때문입니다.
+
+이것은 디자이너 같은 케쥬얼 개발자에게 더 익숙합니다.
+
+XML에는 여닫는 태그의 장점이 있습니다. 태그는 큰 트리일 때 함수 호출이나 객체 리터럴보다 읽기 쉬워 집니다.
+
+JSX는 JavaScript의 시맨틱을 변경하지 않습니다.
+
+## HTML 태그 vs. React 컴포넌트
+
+React는 렌더 HTML 태그(문자열)이나 React 컴포넌트(클래스)일 수 있습니다.
+
+HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세요.
+
+```javascript
+var myDivElement = <div className="foo" />;
+React.render(myDivElement, document.getElementById('example'));
+```
+
+React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.
+
+```javascript
+var MyComponent = React.createClass({/*...*/});
+var myElement = <MyComponent someProperty={true} />;
+React.render(myElement, document.getElementById('example'));
+```
+
+React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.
+
+> 주의:
+>
+> JSX가 JavaScript기 때문에, `class`, `for`같은 식별자는 XML 어트리뷰트 이름으로
+> 권장하지 않습니다. 대신, React DOM 컴포넌트는 각각 `className`, `htmlFor`같은
+> DOM 프로퍼티 이름을 기대합니다.
+
+<a name="the-transform"></a>
+## 변환
+
+React JSX는 XML같은 문법에서 네이티브 JavaScript로 변환됩니다. XML 엘리먼트, 어트리뷰트, 자식은 `React.createElement`에 넘겨지는 인자로 변환됩니다.
+
+```javascript
+var Nav;
+// 입력 (JSX):
+var app = <Nav color="blue" />;
+// 출력 (JS):
+var app = React.createElement(Nav, {color:"blue"});
+```
+
+`<Nav />`를 사용하려면, `Nav`변수는 스코프에 있어야 합니다.
+
+JSX에서는 XML 구문으로 자식을 지정할 수도 있습니다.
+
+```javascript
+var Nav, Profile;
+// 입력 (JSX):
+var app = <Nav color="blue"><Profile>click</Profile></Nav>;
+// 출력 (JS):
+var app = React.createElement(
+  Nav,
+  {color:"blue"},
+  React.createElement(Profile, null, "click")
+);
+```
+
+클래스에 [displayName](/react/docs/component-specs-ko-KR.html#displayName)이 정의되어 있지 않으면 JSX는 변수명을 displayName으로 간주할 것입니다:
+
+```javascript
+// 입력 (JSX):
+var Nav = React.createClass({ });
+// 출력 (JS):
+var Nav = React.createClass({displayName: "Nav", });
+```
+
+[JSX 컴파일러](/react/jsx-compiler.html)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
+
+JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.
+
+> 주의:
+>
+> JSX 표현식은 언제나 ReactElement로 평가됩니다. 실제 구현의 세부사항은 많이
+> 다를 수 있습니다. 최적화 모드는ReactElement를 `React.createElement`에서 검증
+> 코드를 우회하는 객체 리터럴로 ReactElement를 인라인으로 만들 수 있습니다.
+
+## 네임스페이스를 사용한 컴포넌트
+
+폼같은 자식을 많이 가지는 컴포넌트를 만든다면, 많은 변수 선언을 하게 될 것입니다.
+
+```javascript
+// 변수 선언의 어색한 블록
+var Form = MyFormComponent;
+var FormRow = Form.Row;
+var FormLabel = Form.Label;
+var FormInput = Form.Input;
+
+var App = (
+  <Form>
+    <FormRow>
+      <FormLabel />
+      <FormInput />
+    </FormRow>
+  </Form>
+);
+```
+
+더 간단하고 쉽게 *네임스페이스를 사용한 컴포넌트*를 사용해서, 다른 컴포넌트를 어트리뷰트로 가지는 하나의 컴포넌트만 쓸 수 있습니다.
+
+```javascript
+var Form = MyFormComponent;
+
+var App = (
+  <Form>
+    <Form.Row>
+      <Form.Label />
+      <Form.Input />
+    </Form.Row>
+  </Form>
+);
+```
+
+이렇게 하려면, *"sub-components"*를 메인 컴포넌트의 어트리뷰트로 만들 필요가 있습니다.
+
+```javascript
+var MyFormComponent = React.createClass({ ... });
+
+MyFormComponent.Row = React.createClass({ ... });
+MyFormComponent.Label = React.createClass({ ... });
+MyFormComponent.Input = React.createClass({ ... });
+```
+
+코드를 컴파일할 때 JSX는 이것을 제대로 처리해 줍니다.
+
+```javascript
+var App = (
+  React.createElement(Form, null,
+    React.createElement(Form.Row, null,
+      React.createElement(Form.Label, null),
+      React.createElement(Form.Input, null)
+    )
+  )
+);
+```
+
+> 주의:
+>
+> 이 기능은 [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) 이상에만 있습니다.
+
+## JavaScript 표현식
+
+### 어트리뷰트 표현식
+
+JavaScript 표현식을 어트리뷰트 값으로 사용하려면, 표현식을 쌍따옴표(`""`)대신 중괄호(`{}`)로 감싸야 합니다.
+
+```javascript
+// 입력 (JSX):
+var person = <Person name={window.isLoggedIn ? window.name : ''} />;
+// 출력 (JS):
+var person = React.createElement(
+  Person,
+  {name: window.isLoggedIn ? window.name : ''}
+);
+```
+
+### 자식 표현식
+
+비슷하게, JavaScript 표현식을 자식을 표현하는 데 사용할 수 있습니다.
+
+```javascript
+// 입력 (JSX):
+var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
+// 출력 (JS):
+var content = React.createElement(
+  Container,
+  null,
+  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
+);
+```
+
+### 주석
+
+JSX에 주석을 넣기는 쉽습니다. 그냥 JS 표현식과 같습니다. 그냥 태그의 자식 섹션에서만 조심하시면 됩니다. 이럴 땐 주석 주변에 `{}`를 감싸야 합니다.
+
+```javascript
+var content = (
+  <Nav>
+    {/* 자식 주석, {}로 감싼다 */}
+    <Person
+      /* 여러
+         줄
+         주석 */
+      name={window.isLoggedIn ? window.name : ''} // 줄 끝부분 주석
+    />
+  </Nav>
+);
+```
+
+> 주의:
+>
+> JSX 는 HTML과 비슷하지만 완전히 같지는 않습니다. 중요한 차이점을 보시려면 [JSX gotchas](/react/docs/jsx-gotchas-ko-KR.html)를 보세요.

docs/docs/02.1-jsx-in-depth.md

@@ -6,7 +6,7 @@ prev: displaying-data.html
 next: jsx-spread.html
 ---
 
-[JSX](http://facebook.github.io/jsx/) is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
+[JSX](https://facebook.github.io/jsx/) is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
 
 ## Why JSX?
 
@@ -26,7 +26,7 @@ To render a HTML tag, just use lower-case tag names in JSX:
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.body);
+React.render(myDivElement, document.getElementById('example'));
 ```
 
 To render a React Component, just create a local variable that starts with an upper-case letter:
@@ -34,7 +34,7 @@ To render a React Component, just create a local variable that starts with an up
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.body);
+React.render(myElement, document.getElementById('example'));
 ```
 
 React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.
@@ -73,7 +73,7 @@ var app = React.createElement(
 );
 ```
 
-JSX will infer the class's [displayName](/react/docs/component-specs.html#displayName) from the variable assignment when the displayName is undefined:
+JSX will infer the class's [displayName](/react/docs/component-specs.html#displayname) from the variable assignment when the displayName is undefined:
 
 ```javascript
 // Input (JSX):
@@ -92,7 +92,7 @@ If you want to use JSX, the [Getting Started](/react/docs/getting-started.html)
 > Note:
 >
 > The JSX expression always evaluates to a ReactElement. The actual
-> implementation details may vary. An optimized mode could inline the 
+> implementation details may vary. An optimized mode could inline the
 > ReactElement as an object literal to bypass the validation code in
 > `React.createElement`.
 
@@ -146,9 +146,9 @@ JSX will handle this properly when compiling your code.
 
 ```javascript
 var App = (
-  React.createElement(Form, null, 
-    React.createElement(Form.Row, null, 
-      React.createElement(Form.Label, null), 
+  React.createElement(Form, null,
+    React.createElement(Form.Row, null,
+      React.createElement(Form.Label, null),
       React.createElement(Form.Input, null)
     )
   )
@@ -157,7 +157,7 @@ var App = (
 
 > Note:
 >
-> This feature is available in [v0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) and above.
+> This feature is available in [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) and above.
 
 ## JavaScript Expressions
 
@@ -210,5 +210,5 @@ var content = (
 ```
 
 > NOTE:
-> 
+>
 > JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.

docs/docs/02.1-jsx-in-depth.zh-CN.md

@@ -6,7 +6,7 @@ prev: displaying-data-zh-CN.html
 next: jsx-spread-zh-CN.html
 ---
 
-[JSX](http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
+[JSX](https://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
 
 
 ## 为什么要用 JSX？
@@ -28,7 +28,7 @@ React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
 
 ```javascript
 var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.body);
+React.render(myDivElement, document.getElementById('example'));
 ```
 
 要渲染 React 组件，只需创建一个大写字母开头的本地变量。
@@ -36,7 +36,7 @@ React.render(myDivElement, document.body);
 ```javascript
 var MyComponent = React.createClass({/*...*/});
 var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.body);
+React.render(myElement, document.getElementById('example'));
 ```
 
 React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

docs/docs/02.2-jsx-spread.ko-KR.md

@@ -0,0 +1,56 @@
+---
+id: jsx-spread-ko-KR
+title: JSX 스프레드 어트리뷰트
+permalink: jsx-spread-ko-KR.html
+prev: jsx-in-depth-ko-KR.html
+next: jsx-gotchas-ko-KR.html
+---
+
+미리 컴포넌트에 넣을 모든 프로퍼티를 알게 된다면, JSX를 사용하기 쉬워집니다.
+
+```javascript
+  var component = <Component foo={x} bar={y} />;
+```
+
+## Props의 변경은 나빠요.[^1]
+
+하지만 어떤 프로퍼티를 설정하고 싶은지 모른다면, 객체 레이어에 넣고 싶어질 수도 있습니다.
+
+```javascript
+  var component = <Component />;
+  component.props.foo = x; // 나쁨
+  component.props.bar = y; // 역시 나쁨
+```
+
+이것은 안티 패턴입니다. 왜냐하면 한참 뒤까지 정확한 propTypes을 체크할 수 없다는 뜻이기 때문입니다. 이것은 propTypes 에러는 알기 힘든 스택 트레이스로 끝난다는 의미입니다.
+
+이 시점에서 props는 불변성인 것을 고려해야 합니다. props 객체를 변경하는 것은 다른 곳에서 예기치 못한 결과가 생길 수 있기 때문에 이상적으로는 이 시점에서 frozen 객체가 되어야 합니다.
+
+## 스프레드 어트리뷰트
+
+이제 JSX의 새로운 기능인 스프레드 어트리뷰트를 사용하실 수 있습니다.
+
+```javascript
+  var props = {};
+  props.foo = x;
+  props.bar = y;
+  var component = <Component {...props} />;
+```
+
+전달한 객체의 프로퍼티가 컴포넌트의 props에 복사됩니다.
+
+이렇게 여러 번 사용하거나 다른 어트리뷰트와 조합해서 사용할 수 있습니다. 명세의 순서는 중요합니다. 나중의 어트리뷰트가 이전 것보다 우선되기 때문입니다.
+
+```javascript
+  var props = { foo: 'default' };
+  var component = <Component {...props} foo={'override'} />;
+  console.log(component.props.foo); // 'override'
+```
+
+## 이상한 `...` 표기법은 무엇인가요?
+
+`...` 연산자(스프레드 연산자)는 이미 [ES6의 배열](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)에서 지원합니다. [객체 rest와 스프레드 프로퍼티](https://github.com/sebmarkbage/ecmascript-rest-spread)에 대한 ES7의 제안도 있습니다. JSX의 구문을 더 깔끔하게 하기 위해 지원되고 개발중인 표준을 활용하고 있습니다.
+
+[^1]: 아무래도 좋지만, 이 제목의 원문 "Mutating Props is Bad, mkay"는 사우스 파크에
+      나온 대사 "[Drug is bad, mkay](https://www.youtube-nocookie.com/watch?v=Uh7l8dx-h8M)"의
+      패러디입니다.

docs/docs/02.3-jsx-gotchas.ko-KR.md

@@ -0,0 +1,68 @@
+---
+id: jsx-gotchas-ko-KR
+title: JSX Gotchas
+permalink: jsx-gotchas-ko-KR.html
+prev: jsx-spread-ko-KR.html
+next: interactivity-and-dynamic-uis-ko-KR.html
+---
+
+JSX는 HTML처럼 보이지만, 작업하다 보면 마주치게 될 몇 가지 중요한 차이점이 있습니다.
+
+> 주의:
+>
+> 인라인 `style` 어트리뷰트 같은 DOM과의 차이점은 [여기](/react/tips/dangerously-set-inner-html-ko-KR.html)를 보세요.
+
+## HTML 엔티티
+
+JSX의 리터럴 텍스트에 HTML 엔티티를 넣을 수 있습니다.
+
+```javascript
+<div>First &middot; Second</div>
+```
+
+동적 콘텐츠 안에 HTML 엔티티를 표시하려 할 때, React에서는 XSS 공격을 광범위하게 막기 위해서 기본적으로 모든 표시하는 문자열을 이스케이프 하기 때문에 더블 이스케이프 문제에 부딪히게 됩니다.
+
+```javascript
+// 나쁨: "First &middot; Second"를 표시
+<div>{'First &middot; Second'}</div>
+```
+
+이 이슈를 피해 갈 방법은 여럿 있지만, 가장 쉬운 방법은 유니코드 문자를 JavaScript에 직접 쓰는 것입니다. 브라우저가 올바르게 표시하도록 파일이 UTF-8으로 저장되어 있고 올바른 UTF-8 지시자를 사용하고 있는지 확인해야 합니다.
+
+```javascript
+<div>{'First · Second'}</div>
+```
+
+더 안전한 대안으로 [엔티티에 대응하는 유니코드 숫자](http://www.fileformat.info/info/unicode/char/b7/index.htm)를 찾아 JavaScript 문자열 안에서 사용하는 방법도 있습니다.
+
+```javascript
+<div>{'First \u00b7 Second'}</div>
+<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
+```
+
+문자열과 JSX 엘리먼트를 혼합한 배열을 사용할 수도 있습니다.
+
+```javascript
+<div>{['First ', <span>&middot;</span>, ' Second']}</div>
+```
+
+최후의 수단으로, 항상 [생 HTML을 삽입](/react/docs/dom-differences-ko-KR.html)할 수 있습니다.
+
+```javascript
+<div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
+```
+
+
+## 커스텀 HTML 어트리뷰트
+
+프로퍼티를 HTML 사양에는 없는 네이티브 HTML 엘리먼트에 넘기면, React는 그 프로퍼티를 렌더하지 않습니다. 커스텀 어트리뷰트를 사용하고 싶다면, 접두사로 `data-`를 붙이셔야 합니다.
+
+```javascript
+<div data-custom-attribute="foo" />
+```
+
+`aria-`로 시작하는 [Web 접근성](http://www.w3.org/WAI/intro/aria) 어트리뷰트는 제대로 렌더될 것입니다.
+
+```javascript
+<div aria-hidden={true} />
+```

docs/docs/02.3-jsx-gotchas.md

@@ -46,7 +46,7 @@ You can use mixed arrays with strings and JSX elements.
 <div>{['First ', <span>&middot;</span>, ' Second']}</div>
 ```
 
-As a last resort, you always have the ability to [insert raw HTML](/react/docs/dom-differences.html).
+As a last resort, you always have the ability to [insert raw HTML](/react/tips/dangerously-set-inner-html.html).
 
 ```javascript
 <div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />

docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md

@@ -0,0 +1,85 @@
+---
+id: interactivity-and-dynamic-uis-ko-KR
+title: 상호 작용 및 동적 UI
+permalink: interactivity-and-dynamic-uis-ko-KR.html
+prev: jsx-gotchas-ko-KR.html
+next: multiple-components-ko-KR.html
+---
+
+이미 React에서 [어떻게 데이터를 표시](/react/docs/displaying-data-ko-KR.html)하는지를 배웠습니다. 이제 UI와의 상호작용을 어떻게 만드는지 살펴보죠.
+
+
+## 간단한 예제
+
+```javascript
+var LikeButton = React.createClass({
+  getInitialState: function() {
+    return {liked: false};
+  },
+  handleClick: function(event) {
+    this.setState({liked: !this.state.liked});
+  },
+  render: function() {
+    var text = this.state.liked ? 'like' : 'haven\'t liked';
+    return (
+      <p onClick={this.handleClick}>
+        You {text} this. Click to toggle.
+      </p>
+    );
+  }
+});
+
+React.render(
+  <LikeButton />,
+  document.getElementById('example')
+);
+```
+
+
+## 이벤트 핸들링과 통합적인(Synthetic) 이벤트
+
+React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 카멜케이스 프로퍼티(camelCased prop)로 넘기면 됩니다. React의 모든 이벤트는 통합적인 이벤트 시스템의 구현으로 IE8 이상에서는 같은 행동이 보장됩니다. 즉, React는 사양에 따라 어떻게 이벤트를 일으키고(bubble) 잡는지 알고 있고, 당신이 사용하는 브라우저와 관계없이 이벤트 핸들러에 전달되는 이벤트는 [W3C 사양](http://www.w3.org/TR/DOM-Level-3-Events/)과 같도록 보장됩니다.
+
+
+## 기본 구현: 오토바인딩과 이벤트 델리게이션
+<a name="under-the-hood-autobinding-and-event-delegation"></a>
+
+코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다.
+
+**오토바인딩:** JavaScript에서 콜백을 만들 때, 보통은 `this`의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다. React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠!
+
+**이벤트 델리게이션:** React는 실제로는 노드자신에게 이벤트 핸들러를 붙이지 않습니다. React가 시작되면 React는 탑 레벨의 단일 이벤트 리스너로 모든 이벤트를 리스닝하기 시작합니다. 컴포넌트가 마운트되거나 언마운트 될 때, 이벤트 핸들러는 그냥 내부 매핑에서 넣거나 뺄 뿐입니다. 이벤트가 발생하면, React는 이 매핑을 사용해서 어떻게 디스패치할 지를 알게 됩니다. 매핑에 이벤트 핸들러가 남아있지 않으면, React의 이벤트 핸들러는 그냥 아무것도 하지 않습니다. 왜 이 방식이 빠른지 더 알고 싶으시면, [David Walsh의 멋진 블로그 글](http://davidwalsh.name/event-delegate)을 읽어 보세요.
+
+
+## 컴포넌트는 그냥 state 머신일 뿐
+
+React는 UI를 간단한 state 머신이라 생각합니다. UI를 다양한 state와 그 state의 렌더링으로 생각함으로써 UI를 일관성 있게 관리하기 쉬워집니다.
+
+React에서는, 간단히 컴포넌트의 state를 업데이트하고, 이 새로운 state의 UI를 렌더링합니다. React는 DOM의 변경을 가장 효율적인 방법으로 관리해줍니다.
+
+
+## state의 동작 원리
+
+React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(data, callback)`을 호출하는 것입니다. 이 메소드는 `this.state`에 `data`를 머지하고 컴포넌트를 다시 렌더링 합니다. 컴포넌트의 재-렌더링이 끝나면, 생략가능한 `callback`이 호출됩니다. 대부분의 경우 React가 UI를 최신상태로 유지해주기 때문에 `callback`을 사용할 필요가 없습니다.
+
+
+## 어떤 컴포넌트가 state를 가져야 할까요?
+
+대부분의 컴포넌트는 `props`로부터 데이터를 받아 렌더할 뿐입니다만, 가끔 유저 인풋, 서버 요청, 시간의 경과에 반응해야 할 필요가 있습니다. 이럴 때 state를 사용합니다.
+
+**가능한 한 컴포넌트가 상태를 가지지 않도록(stateless) 하세요.** 이렇게 함으로써 가장 논리적인 장소로 state를 격리하게 되고 쉽게 애플리케이션을 추론할 수 있도록 중복을 최소화할 수 있습니다.
+
+일반적인 패턴은 데이터만 렌더하는 여러 상태를 가지지 않은 컴포넌트를 만들고, 그 위에 상태기반(stateful) 컴포넌트를 만들어 계층 안의 자식 컴포넌트에게 `props`를 통해 state를 전달하는 것입니다. state를 가지지 않은 컴포넌트가 선언적인 방법으로 데이터를 렌더링 하는 동안, 상태기반 컴포넌트는 모든 상호작용 로직을 캡슐화합니다.
+
+
+## state를 어떻게 *써야* 할까요?
+
+**state는 컴포넌트의 이벤트 핸들러에 의해 UI 업데이트를 트리거할때 변경될 가능성이 있어, 그때 사용할 데이터를 가져야 합니다.** 실제 앱에서는 이 데이터는 매우 작고 JSON 직렬화 가능한 경향이 있습니다. 상태기반 컴포넌트를 만들때, 가능한 작게 state를 서술하고 `this.state`에만 저장하도록 해보세요. 그냥 `render()` 안에서 이 state를 기반으로 다른 모든 정보를 계산합니다. 이 방식으로 애플리케이션을 작성하고 생각하면 가장 최적의 애플리케이션으로 발전해가는 경향이 있다는 것을 발견하게 될 것입니다. 꼭 필요하지 않은 값이나 계산된 값을 state에 추가하는 것은 render가 그것을 계산하는 대신에 명시적으로 그것들을 맞춰줘야 하는 것을 의미하기 때문이죠.
+
+## state를 어떻게 *쓰지 말아야* 할까요?
+
+`this.state`는 UI의 state를 표현할 최소한의 데이터만을 가져야 합니다. 그래서 이런 것들을 가지지 않게끔 해야 합니다.
+
+* **계산된 데이터:** state에 따라 값을 미리 계산하는 것에 대해 염려하지 마세요. 계산은 모두 `render()`에서 하는 것이 UI의 일관성을 유지하기 쉽습니다. 예를 들어, state에서 list items 배열을 가지고 있고 문자열으로 카운트를 렌더링 할 경우, state에 저장하기보다는 그냥 `render()` 메소드안에서 `this.state.listItems.length + ' list items'`를 렌더하세요.
+* **React 컴포넌트:** 가지고 있는 props와 state로 `render()`안에서 만드세요.
+* **props에서 복사한 데이터:** 가능한 한 원래의 소스로 props를 사용하도록 해보세요. props를 state에 저장하는 단 하나의 올바른 사용법은 이전 값을 알고 싶을 때입니다. props는 시간이 지나면 변경될 수도 있기 때문이죠.

docs/docs/04-multiple-components.ko-KR.md

@@ -0,0 +1,190 @@
+---
+id: multiple-components-ko-KR
+title: 복합 컴포넌트
+permalink: multiple-components-ko-KR.html
+prev: interactivity-and-dynamic-uis-ko-KR.html
+next: reusable-components-ko-KR.html
+---
+
+지금까지, 단일 컴포넌트에서 데이터를 표시하고 유저 입력을 다루는 것을 살펴보았습니다. 다음엔 React의 최고의 기능 중 하나인 조합가능성(composability)을 살펴봅시다.
+
+
+## 동기: 관심의 분리
+
+명확히 정의된 인터페이스와 다른 컴포넌트를 재사용해 모듈러 컴포넌트를 구축하면, 함수와 클래스를 이용했을 때 얻을 수 있는 이점 대부분을 얻을 수 있습니다. 특히 앱에서 *다른 관심을 분리*할 수 있습니다.아무리 간단히 새 컴포넌트를 만들었다고 해도 말이죠. 당신의 애플리케이션에서 쓸 커스텀 컴포넌트 라이브러리를 만들어서, 당신의 도메인에 최적화된 방법으로 UI를 표현할 수 있게 됩니다.
+
+
+## 조합(Composition) 예제
+
+간단히 페이스북 그래프 API를 사용해 프로필 사진과 유저이름을 보여주는 아바타 컴포넌트를 만든다고 합시다.
+
+```javascript
+var Avatar = React.createClass({
+  render: function() {
+    return (
+      <div>
+        <ProfilePic username={this.props.username} />
+        <ProfileLink username={this.props.username} />
+      </div>
+    );
+  }
+});
+
+var ProfilePic = React.createClass({
+  render: function() {
+    return (
+      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
+    );
+  }
+});
+
+var ProfileLink = React.createClass({
+  render: function() {
+    return (
+      <a href={'https://www.facebook.com/' + this.props.username}>
+        {this.props.username}
+      </a>
+    );
+  }
+});
+
+React.render(
+  <Avatar username="pwh" />,
+  document.getElementById('example')
+);
+```
+
+
+## 소유권(Ownership)
+
+위의 예제에서, `Avatar` 인스턴스는  `ProfilePic`과 `ProfileLink`인스턴스를 *가지고* 있습니다. React에서 **소유자는 다른 컴포넌트의 `props`를 설정하는 컴포넌트입니다**. 더 정식으로 말하면, `X` 컴포넌트가 `Y` 컴포넌트의 `render()` 메소드 안에서 만들어졌다면, `Y`가 `X`를 *소유하고* 있다고 합니다. 앞에서 설명한 바와 같이, 컴포넌트는 자신의 `props`를 변경할 수 없습니다. `props`는 언제나 소유자가 설정한 것과 일치합니다. 이와 같은 중요한 성질은 UI가 일관성 있도록 해줍니다.
+
+소유(owner-ownee)관계와 부모·자식 관계를 구별하는 것은 중요합니다. 부모·자식 관계가 DOM에서부터 쓰던 익숙하고 이미 알고있던 단순한 것인 한편, 소유관계는 React 고유의 것입니다.  위의 예제에서, `Avatar`는 `div`, `ProfilePic`, `ProfileLink`인스턴스를 소유하고, `div`는 `ProfilePic`과 `ProfileLink`인스턴스의 (소유자가 아닌) **부모**입니다.
+
+
+## 자식
+
+React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트나 JavaScript 표현식을 시작과 끝 태그 사이에 넣을 수 있습니다. 이렇게 말이죠.
+
+```javascript
+<Parent><Child /></Parent>
+```
+
+`Parent`는 `this.props.children`라는 특수 prop으로 자식들을 읽을 수 있습니다. **`this.props.children` 는 불투명한 데이터 구조이며,** [React.Children 유틸리티](/react/docs/top-level-api-ko-KR.html#react.children)를 사용해 자식들을 관리합니다.
+
+
+### 자식 Reconciliation (비교조정)
+
+**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 렌더 패스가 있다고 해봅시다.
+
+```html
+// Render Pass 1
+<Card>
+  <p>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</Card>
+// Render Pass 2
+<Card>
+  <p>Paragraph 2</p>
+</Card>
+```
+
+직관적으로 보면, `<p>Paragraph 1</p>`가 없어졌습니다만 그러는 대신에, React는 첫 번째 자식의 텍스트를 비교조정하고 마지막 자식을 파괴하도록 DOM을 비교조정할 것입니다. React는 자식들의 *순서*에 따라 비교조정합니다.
+
+
+### 상태기반(Stateful) 자식
+
+대부분의 컴포넌트에서는, 이것은 큰 문제가 아닙니다. 하지만 렌더 패스 간에 `this.state`를 유지하는 상태기반의 컴포넌트에서는 매우 문제가 될 수 있습니다.
+
+대부분의 경우, 이 문제는 엘리먼트를 파괴하지 않고 숨김으로써 피해갈 수 있습니다.
+
+```html
+// Render Pass 1
+<Card>
+  <p>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</Card>
+// Render Pass 2
+<Card>
+  <p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</Card>
+```
+
+
+<a name="dynamic-children"></a>
+### 동적 자식
+
+자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 렌더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다.
+
+```javascript
+  render: function() {
+    var results = this.props.results;
+    return (
+      <ol>
+        {results.map(function(result) {
+          return <li key={result.id}>{result.text}</li>;
+        })}
+      </ol>
+    );
+  }
+```
+
+React가 키가 있는 자식들을 비교조정할 때, React는 `key`가 있는 자식이 (오염(clobbered)되는 대신) 재배치되고 (재사용되는 대신) 파괴되도록 보장할 것입니다.
+
+`key`는 *항상* 배열 안의 각 컴포넌트의 컨테이너 HTML 자식이 아닌 컴포넌트에게 직접 주어져야 합니다.
+
+```javascript
+// 틀림!
+var ListItemWrapper = React.createClass({
+  render: function() {
+    return <li key={this.props.data.id}>{this.props.data.text}</li>;
+  }
+});
+var MyComponent = React.createClass({
+  render: function() {
+    return (
+      <ul>
+        {this.props.results.map(function(result) {
+          return <ListItemWrapper data={result}/>;
+        })}
+      </ul>
+    );
+  }
+});
+
+// 맞음 :)
+var ListItemWrapper = React.createClass({
+  render: function() {
+    return <li>{this.props.data.text}</li>;
+  }
+});
+var MyComponent = React.createClass({
+  render: function() {
+    return (
+      <ul>
+        {this.props.results.map(function(result) {
+           return <ListItemWrapper key={result.id} data={result}/>;
+        })}
+      </ul>
+    );
+  }
+});
+```
+
+ReactFragment 객체를 넘기는 것으로 자식에 키를 할당할 수도 있습니다. 자세한 내용은 [키가 할당된 프래그먼트](create-fragment-ko-KR.html)를 참고하세요.
+
+## 데이터 흐름
+
+React에서 데이터는 위에서 말한 것처럼 `props`를 통해 소유자로부터 소유한 컴포넌트로 흐릅니다. 이것은 사실상 단방향 데이터 바인딩입니다. 소유자는 `props`나 `state`를 기준으로 계산한 어떤 값으로 소유한 컴포넌트의 props를 바인드합니다. 이 과정은 재귀적으로 발생하므로, 데이터의 변경은 자동으로 모든 곳에 반영됩니다.
+
+
+## 성능의 주의점
+
+소유자가 가지고 있는 노드의 수가 많아지면 데이터의 변화에 반응하는 비용이 증가할 것으로 생각할 수도 있습니다. 좋은 소식은 JavaScript의 속도는 빠르고 `render()` 메소드는 꽤 간단한 경향이 있어, 대부분 애플리케이션에서 매우 빠르다는 점입니다. 덧붙여, 대부분의 병목 현상은 JS 실행이 아닌 DOM 변경에서 일어나고, React는 배치와 탐지 변경을 이용해 최적화해 줍니다.
+
+하지만, 가끔 성능을 위해 정교하게 제어해야 할 때도 있습니다. 이런 경우, React가 서브트리의 처리를 건너 뛰도록 간단히 `shouldComponentUpdate()`를 오버라이드해 false를 리턴하게 할 수 있습니다. 좀 더 자세한 정보는 [React 참조 문서](/react/docs/component-specs-ko-KR.html)를 보세요.
+
+> 주의:
+>
+> 데이터가 실제로는 변경되었지만 `shouldComponentUpdate()`가 false를 리턴한다면 React는 UI를 싱크시킬수 없습니다. 이 기능을 사용할 때에는 자신이 지금 무엇을 하고 있는지 알고 있고, 눈에 띄는 성능 문제가 있을 경우에만 사용하세요. JavaScript는 DOM에 비해 빠릅니다. 과소평가하지 마세요.

docs/docs/04-multiple-components.md

@@ -33,7 +33,7 @@ var Avatar = React.createClass({
 var ProfilePic = React.createClass({
   render: function() {
     return (
-      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
+      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
     );
   }
 });
@@ -41,7 +41,7 @@ var ProfilePic = React.createClass({
 var ProfileLink = React.createClass({
   render: function() {
     return (
-      <a href={'http://www.facebook.com/' + this.props.username}>
+      <a href={'https://www.facebook.com/' + this.props.username}>
         {this.props.username}
       </a>
     );

docs/docs/04-multiple-components.zh-CN.md

@@ -32,7 +32,7 @@ var Avatar = React.createClass({
 var ProfilePic = React.createClass({
   render: function() {
     return (
-      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
+      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
     );
   }
 });
@@ -40,7 +40,7 @@ var ProfilePic = React.createClass({
 var ProfileLink = React.createClass({
   render: function() {
     return (
-      <a href={'http://www.facebook.com/' + this.props.username}>
+      <a href={'https://www.facebook.com/' + this.props.username}>
         {this.props.username}
       </a>
     );

docs/docs/05-reusable-components.ko-KR.md

@@ -0,0 +1,231 @@
+---
+id: reusable-components-ko-KR
+title: 재사용가능한 컴포넌트
+permalink: reusable-components-ko-KR.html
+prev: multiple-components-ko-KR.html
+next: transferring-props-ko-KR.html
+---
+
+인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포넌트 등)을 잘 정의된 인터페이스의 재사용 가능한 컴포넌트로 분해합니다. 이런 방법으로 다음에 UI를 구축할 때에는 훨씬 적은 코드로 만들 수 있습니다. 이 말은 더 빠른 개발 시간, 더 적은 버그, 더 적은 용량으로 할 수 있다는 뜻이죠.
+
+
+## Prop 검증
+
+앱의 규모가 커지면 컴포넌트들이 바르게 사용되었는지 확인하는게 도움이 됩니다. 확인은 `propTypes`를 명시해서 할 수 있습니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 다양한 검증자(validator)를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발 모드에서만 검사됩니다. 다음은 제공되는 검증자를 설명하는 예제입니다.
+
+```javascript
+React.createClass({
+  propTypes: {
+    // 특정 JavaScript 프리미티브 타입에 대한 prop을 명시할 수 있습니다.
+    // 기본적으로 이것들은 모두 선택적입니다.
+    optionalArray: React.PropTypes.array,
+    optionalBool: React.PropTypes.bool,
+    optionalFunc: React.PropTypes.func,
+    optionalNumber: React.PropTypes.number,
+    optionalObject: React.PropTypes.object,
+    optionalString: React.PropTypes.string,
+
+    // 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소
+    // 이것들을 포함하는 배열(이나 프래그먼트)
+    optionalNode: React.PropTypes.node,
+
+    // React 엘리먼트
+    optionalElement: React.PropTypes.element,
+
+    // 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof
+    // 연산자를 사용합니다.
+    optionalMessage: React.PropTypes.instanceOf(Message),
+
+    // 열거형처럼 특정 값들로만 prop을 제한해서 사용할 수 있습니다.
+    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
+
+    // 많은 타입들 중 하나로 사용할 수 있는 객체가 될 수도 있습니다.
+    optionalUnion: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+      React.PropTypes.instanceOf(Message)
+    ]),
+
+    // 특정 타입의 배열
+    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+
+    // 특정 타입의 속성값을 갖는 객체
+    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+
+    // 특정한 형태(shape)의 객체
+    optionalObjectWithShape: React.PropTypes.shape({
+      color: React.PropTypes.string,
+      fontSize: React.PropTypes.number
+    }),
+
+    // 위에 언급된 것들을 `isRequired`로 연결해서 prop이 제공되지 않을 때 경고를
+    // 띄우도록 할 수도 있습니다.
+    requiredFunc: React.PropTypes.func.isRequired,
+
+    // 어떤 데이터 타입도 가능
+    requiredAny: React.PropTypes.any.isRequired,
+
+    // 물론 사용자 정의 검증자도 지정할 수 있습니다. 이는 검증이 실패했을 때
+    // Error 객체를 리턴해야합니다. `console.warn`을 이나 throw를 하면 안됩니다.
+    // 그렇게하면 `oneOfType` 안에서 작동하지 않습니다.
+    customProp: function(props, propName, componentName) {
+      if (!/matchme/.test(props[propName])) {
+        return new Error('Validation failed!');
+      }
+    }
+  },
+  /* ... */
+});
+```
+
+
+## 기본 Prop 값
+
+React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다.
+
+```javascript
+var ComponentWithDefaultProps = React.createClass({
+  getDefaultProps: function() {
+    return {
+      value: 'default value'
+    };
+  }
+  /* ... */
+});
+```
+
+`getDefaultProps()`의 결과값은 캐시가 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록 해주는데 사용됩니다.`getDefaultProps()`를 사용하면 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용할 수 있습니다.
+
+## Prop 전달하기: 단축
+
+React 컴포넌트의 흔히 그냥 기본 HTML 엘리먼트를 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다.
+
+```javascript
+var CheckLink = React.createClass({
+  render: function() {
+    // 모든 prop을 받아서 CheckLink에 넘기고 <a>에 복사합니다.
+    return <a {...this.props}>{'√ '}{this.props.children}</a>;
+  }
+});
+
+React.render(
+  <CheckLink href="/checked.html">
+    Click here!
+  </CheckLink>,
+  document.getElementById('example')
+);
+```
+
+## 단일 자식
+
+`React.PropTypes.element`을 통해 컴포넌트에 한 자식만 보내도록 명시할 수 있습니다.
+
+```javascript
+var MyComponent = React.createClass({
+  propTypes: {
+    children: React.PropTypes.element.isRequired
+  },
+
+  render: function() {
+    return (
+      <div>
+        {this.props.children} // 정확히 한 엘리먼트여야만 하며, 아니면 에러가 발생합니다.
+      </div>
+    );
+  }
+
+});
+```
+
+## 믹스인
+
+컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다.
+
+예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser-ko-KR.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
+
+```javascript
+var SetIntervalMixin = {
+  componentWillMount: function() {
+    this.intervals = [];
+  },
+  setInterval: function() {
+    this.intervals.push(setInterval.apply(null, arguments));
+  },
+  componentWillUnmount: function() {
+    this.intervals.forEach(clearInterval);
+  }
+};
+
+var TickTock = React.createClass({
+  mixins: [SetIntervalMixin], // 믹스인 사용
+  getInitialState: function() {
+    return {seconds: 0};
+  },
+  componentDidMount: function() {
+    this.setInterval(this.tick, 1000); // 믹스인에 있는 메소드를 호출
+  },
+  tick: function() {
+    this.setState({seconds: this.state.seconds + 1});
+  },
+  render: function() {
+    return (
+      <p>
+        React has been running for {this.state.seconds} seconds.
+      </p>
+    );
+  }
+});
+
+React.render(
+  <TickTock />,
+  document.getElementById('example')
+);
+```
+
+믹스인의 괜찮은 점은 컴포넌트가 여러 믹스인을 사용하고 여러 믹스인에서 같은 생명주기 메소드를 사용할 때(예를 들어, 여러 믹스인에서 컴포넌트가 사라질 때 뭔가 정리하려 한다면) 모든 생명주기 메소드들의 실행은 보장됩니다. 믹스인에 정의된 메소드은 컴포넌트의 메소드가 호출됨에 따라 믹스인이 나열된 순서대로 실행됩니다.
+
+## ES6 클래스
+
+React 클래스를 일반적인 JavaScript 클래스로 선언할 수도 있습니다. 다음의 예제는 ES6 클래스 문법을 사용합니다:
+
+```javascript
+class HelloMessage extends React.Component {
+  render() {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+React.render(<HelloMessage name="Sebastian" />, mountNode);
+```
+
+API는 `getInitialState`를 제외하고 `React.createClass`와 유사합니다. 별도의 `getInitialState` 메소드 대신에, 필요한 `state` 프로퍼티를 생성자에서 설정할 수 있습니다.
+
+또다른 차이점은 `propTypes`와 `defaultProps`가 클래스의 내부가 아니라 생성자의 프로퍼티로 정의되어 있다는 것입니다.
+
+```javascript
+export class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {count: props.initialCount};
+  }
+  tick() {
+    this.setState({count: this.state.count + 1});
+  }
+  render() {
+    return (
+      <div onClick={this.tick.bind(this)}>
+        Clicks: {this.state.count}
+      </div>
+    );
+  }
+}
+Counter.propTypes = { initialCount: React.PropTypes.number };
+Counter.defaultProps = { initialCount: 0 };
+```
+
+### 자동 바인딩 안됨
+
+메소드는 일반 ES6 클래스와 동일한 시멘틱을 따릅니다. `this`를 인스턴스에 자동으로 바인딩하지 않는다는 이야기입니다. 명시적으로 `.bind(this)`나 화살표 함수(arrow function)을 사용하세요.
+
+### 믹스인 안됨
+
+불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다.

docs/docs/05-reusable-components.md

@@ -100,7 +100,7 @@ The result of `getDefaultProps()` will be cached and used to ensure that `this.p
 
 ## Transferring Props: A Shortcut
 
-A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. You can use the JSX _spread_ syntax to achieve this:
+A common type of React component is one that extends a basic HTML element in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. You can use the JSX _spread_ syntax to achieve this:
 
 ```javascript
 var CheckLink = React.createClass({
@@ -142,7 +142,7 @@ var MyComponent = React.createClass({
 
 ## Mixins
 
-Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](http://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
+Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
 
 One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/react/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
 
@@ -200,7 +200,7 @@ class HelloMessage extends React.Component {
 React.render(<HelloMessage name="Sebastian" />, mountNode);
 ```
 
-The API is similar to `React.createClass` with the exception or `getInitialState`. Instead of providing a separate `getInitialState` method, you set up your own `state` property in the constructor.
+The API is similar to `React.createClass` with the exception of `getInitialState`. Instead of providing a separate `getInitialState` method, you set up your own `state` property in the constructor.
 
 Another difference is that `propTypes` and `defaultProps` are defined as properties on the constructor instead of in the class body.
 

docs/docs/05-reusable-components.zh-CN.md

@@ -137,7 +137,7 @@ var MyComponent = React.createClass({
 
 ## Mixins
 
-组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](http://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。
+组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](https://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。
 
 一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法](/react/docs/working-with-the-browser.html#component-lifecycle) 来告知组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。
 

docs/docs/06-transferring-props.ko-KR.md

@@ -0,0 +1,164 @@
+---
+id: transferring-props-ko-KR
+title: Props 전달
+permalink: transferring-props-ko-KR.html
+prev: reusable-components-ko-KR.html
+next: forms-ko-KR.html
+---
+
+React에서는 컴포넌트를 감싸서 추상화하는 것이 일반적인 패턴입니다. 외부 컴포넌트에서는 간단한 프로퍼티만을 노출하여 복잡한 세부 구현을 감출 수 있습니다.
+
+[JSX 스프레드 어트리뷰트](/react/docs/jsx-spread-ko-KR.html)를 통해 props에 추가적인 값을 병합할 수 있습니다.
+
+```javascript
+<Component {...this.props} more="values" />
+```
+
+만약 JSX를 사용하지 않는다면 ES6의 `Object.assign`나 Underscore의 `_.extend` 같은 객체 헬퍼를 사용할 수 있습니다:
+
+```javascript
+React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
+```
+
+이 튜토리얼의 나머지 부분은 모범 답안을 소개할 것입니다. JSX와 실험적인 ES7 구문을 사용합니다.
+
+## 수동적인 전달
+
+대부분의 경우 명시적으로 프로퍼티를 아래로 전달해야 합니다. 이는 동작을 확신하는 내부 API의 일부만 공개하도록 합니다.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
+    return (
+      <div className={fancyClass} onClick={this.props.onClick}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
+    세상아 안녕!
+  </FancyCheckbox>,
+  document.getElementById('example')
+);
+```
+
+하지만 `name`이나 `title`, `onMouseOver` 같은 prop들이 더 추가된다면 어떨까요?
+
+## JSX에서 `...`를 사용해 전달하기
+
+> 주의:
+> 
+> 아래의 예제에서는 실험적인 ES7 문법이 사용되었기 때문에 `--harmony ` 플래그가 필요합니다. 브라우저에서 JSX 변환기를 사용 중이라면, `<script type="text/jsx;harmony=true">`를 사용해 스크립트를 작성하세요. 자세히 알아보려면 아래의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](/react/docs/transferring-props-ko-KR.html#rest-and-spread-properties-...)를 확인하세요.
+
+때로는 모든 프로퍼티를 일일이 전달 하는것은 지루하고 덧없는 작업입니다. 이 경우 [구조 해체 할당(destructuring assignment)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 다른 프로퍼티를 함께 사용해 미상의 프로퍼티를 추출할 수 있습니다.
+
+소비할 프로퍼티들을 나열하고, 그 뒤에 `...other`를 넣습니다.
+
+```javascript
+var { checked, ...other } = this.props;
+```
+
+이는 지금 소비한 props를 *제외한* 나머지를 아래로 전달합니다.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var { checked, ...other } = this.props;
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    // `other`에는 { onClick: console.log }가 포함되지만 checked 프로퍼티는 제외됩니다
+    return (
+      <div {...other} className={fancyClass} />
+    );
+  }
+});
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
+    세상아 안녕!
+  </FancyCheckbox>,
+  document.getElementById('example')
+);
+```
+
+> 주의:
+> 
+> 위의 예제에서는 `checked` prop 또한 마찬가지로 유효한 DOM 어트리뷰트입니다. 이런 식으로 구조의 해체(destructuring)를 하지 않으면 의도하지 않게 함께 전달될 수 있습니다.
+
+미상의 `other` props을 전달할 때는 항상 구조 해체 패턴을 사용하세요.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
+    // 반례: `checked` 또한 내부 컴포넌트로 전달될 것입니다
+    return (
+      <div {...this.props} className={fancyClass} />
+    );
+  }
+});
+```
+
+## 같은 Prop을 소비하고 전달하기
+
+컴포넌트가 프로퍼티를 사용하지만 계속 넘겨야한다면, `checked={checked}`처럼 명시적으로 다시 넘길 수 있습니다. 리팩토링과 린트(lint)하기가 더 쉬우므로 이 방식이 `this.props` 객체 전부를 넘기는 것보다 낫습니다.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var { checked, title, ...other } = this.props;
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    var fancyTitle = checked ? 'X ' + title : 'O ' + title;
+    return (
+      <label>
+        <input {...other}
+          checked={checked}
+          className={fancyClass}
+          type="checkbox"
+        />
+        {fancyTitle}
+      </label>
+    );
+  }
+});
+```
+
+> 주의:
+> 
+> 순서는 중요합니다. `{...other}`를 JSX props 이전에 넣는 것으로 컴포넌트의 사용자가 확실히 그것들을 오버라이드 할 수 없게 합니다. 위의 예제에서는 input이 `"checkbox"` 타입인 것을 보장합니다.
+
+<a name="rest-and-spread-properties-..."></a>
+## 잔여 프로퍼티와 스프레드 프로퍼티 `...`
+
+잔여(Rest, `...`) 프로퍼티는 객체에서 소비되지 않은 나머지 프로퍼티를 추출해 새로운 객체로 만들 수 있게 해 줍니다. 구조 해체 패턴에서 열거된 다른 프로퍼티들은 모두 제외됩니다.
+
+이는 [ES7 제안](https://github.com/sebmarkbage/ecmascript-rest-spread)의 실험적인 구현체입니다.
+
+```javascript
+var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
+x; // 1
+y; // 2
+z; // { a: 3, b: 4 }
+```
+
+> 주의:
+>
+> 실험적인 ES7 구문을 활성화하려면 [JSX 커맨드라인 도구](https://www.npmjs.com/package/react-tools)를 `--harmony` 플래그와 함께 사용하세요.
+
+## Underscore로 전달 다루기
+
+JSX를 사용하지 않는다면 라이브러리를 사용해 같은 패턴을 쓸 수 있습니다. Underscore에서는 `_.omit`을 사용해 특정 프로퍼티를 제외하거나 `_.extend`를 사용해 새로운 객체로 프로퍼티를 복사할 수 있습니다.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var checked = this.props.checked;
+    var other = _.omit(this.props, 'checked');
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    return (
+      React.DOM.div(_.extend({}, other, { className: fancyClass }))
+    );
+  }
+});
+```