facebook · gaearon · Oct 4, 2016 · Oct 4, 2016
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -26,6 +26,12 @@ defaults:
   values:
     layout: docs
     sectionid: docs
+- scope:
+    path: docs-old
+    type: pages
+  values:
+    layout: docs-old
+    sectionid: docs-old
 - scope:
     path: tips
     type: pages

diff --git a/docs/_data/nav_docs.yml b/docs/_data/nav_docs.yml
@@ -1,95 +1,9 @@
 - title: Tutorial
 - title: Basic Guides
+  items:
+    - id: installation
+      title: Installation
+    - id: hello-world
+      title: Hello World
 - title: Advanced Guides
 - title: Reference
-  items:
-  - id: top-level-api
-    title: Top-Level API
-  - id: component-api
-    title: Component API
-  - id: component-specs
-    title: Component Specs and Lifecycle
-  - id: tags-and-attributes
-    title: Supported Tags and Attributes
-  - id: events
-    title: Event System
-  - id: dom-differences
-    title: DOM Differences
-  - id: special-non-dom-attributes
-    title: Special Non-DOM Attributes
-  - id: reconciliation
-    title: Reconciliation
-  - id: webcomponents
-    title: Web Components
-  - id: glossary
-    title: React (Virtual) DOM Terminology
-- title: Old Quick Start
-  items:
-  - id: getting-started
-    title: Getting Started
-  - id: tutorial
-    title: Tutorial
-  - id: thinking-in-react
-    title: Thinking in React
-- title: Old Guides
-  items:
-  - id: why-react
-    title: Why React?
-  - id: displaying-data
-    title: Displaying Data
-    subitems:
-    - id: jsx-in-depth
-      title: JSX in Depth
-    - id: jsx-spread
-      title: JSX Spread Attributes
-    - id: jsx-gotchas
-      title: JSX Gotchas
-  - id: interactivity-and-dynamic-uis
-    title: Interactivity and Dynamic UIs
-  - id: multiple-components
-    title: Multiple Components
-  - id: reusable-components
-    title: Reusable Components
-  - id: transferring-props
-    title: Transferring Props
-  - id: forms
-    title: Forms
-  - id: working-with-the-browser
-    title: Working With the Browser
-    subitems:
-    - id: more-about-refs
-      title: Refs to Components
-  - id: tooling-integration
-    title: Tooling Integration
-    subitems:
-    - id: language-tooling
-      title: Language Tooling
-    - id: package-management
-      title: Package Management
-    - id: environments
-      title: Server-side Environments
-  - id: addons
-    title: Add-Ons
-    subitems:
-    - id: animation
-      title: Animation
-    - id: two-way-binding-helpers
-      title: Two-Way Binding Helpers
-    - id: test-utils
-      title: Test Utilities
-    - id: clone-with-props
-      title: Cloning Elements
-    - id: create-fragment
-      title: Keyed Fragments
-    - id: update
-      title: Immutability Helpers
-    - id: pure-render-mixin
-      title: PureRenderMixin
-    - id: perf
-      title: Performance Tools
-    - id: shallow-compare
-      title: Shallow Compare
-  - id: advanced-performance
-    title: Advanced Performance
-  - id: context
-    title: Context
diff --git a/docs/_data/nav_docs_old.yml b/docs/_data/nav_docs_old.yml
@@ -0,0 +1,92 @@
+- title: Old Reference
+  items:
+  - id: top-level-api
+    title: Top-Level API
+  - id: component-api
+    title: Component API
+  - id: component-specs
+    title: Component Specs and Lifecycle
+  - id: tags-and-attributes
+    title: Supported Tags and Attributes
+  - id: events
+    title: Event System
+  - id: dom-differences
+    title: DOM Differences
+  - id: special-non-dom-attributes
+    title: Special Non-DOM Attributes
+  - id: reconciliation
+    title: Reconciliation
+  - id: webcomponents
+    title: Web Components
+  - id: glossary
+    title: React (Virtual) DOM Terminology
+- title: Old Quick Start
+  items:
+  - id: getting-started
+    title: Getting Started
+  - id: tutorial
+    title: Tutorial
+  - id: thinking-in-react
+    title: Thinking in React
+- title: Old Guides
+  items:
+  - id: why-react
+    title: Why React?
+  - id: displaying-data
+    title: Displaying Data
+    subitems:
+    - id: jsx-in-depth
+      title: JSX in Depth
+    - id: jsx-spread
+      title: JSX Spread Attributes
+    - id: jsx-gotchas
+      title: JSX Gotchas
+  - id: interactivity-and-dynamic-uis
+    title: Interactivity and Dynamic UIs
+  - id: multiple-components
+    title: Multiple Components
+  - id: reusable-components
+    title: Reusable Components
+  - id: transferring-props
+    title: Transferring Props
+  - id: forms
+    title: Forms
+  - id: working-with-the-browser
+    title: Working With the Browser
+    subitems:
+    - id: more-about-refs
+      title: Refs to Components
+  - id: tooling-integration
+    title: Tooling Integration
+    subitems:
+    - id: language-tooling
+      title: Language Tooling
+    - id: package-management
+      title: Package Management
+    - id: environments
+      title: Server-side Environments
+  - id: addons
+    title: Add-Ons
+    subitems:
+    - id: animation
+      title: Animation
+    - id: two-way-binding-helpers
+      title: Two-Way Binding Helpers
+    - id: test-utils
+      title: Test Utilities
+    - id: clone-with-props
+      title: Cloning Elements
+    - id: create-fragment
+      title: Keyed Fragments
+    - id: update
+      title: Immutability Helpers
+    - id: pure-render-mixin
+      title: PureRenderMixin
+    - id: perf
+      title: Performance Tools
+    - id: shallow-compare
+      title: Shallow Compare
+  - id: advanced-performance
+    title: Advanced Performance
+  - id: context
+    title: Context
diff --git a/docs/_includes/nav_docs.html b/docs/_includes/nav_docs.html
@@ -22,28 +22,53 @@ <h3>{{ section.title }}</h3>
     </div>
   {% endfor %}
 
-  <!-- Tips Nav -->
-  {% for section in site.data.nav_tips %}
+  <!-- Contributing Nav -->
+  {% for section in site.data.nav_contributing %}
     <div class="nav-docs-section">
       <h3>{{ section.title }}</h3>
       <ul>
         {% for item in section.items %}
           <li>
-            <a href="/react/tips/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
+            <a href="/react/contributing/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
           </li>
         {% endfor %}
       </ul>
     </div>
   {% endfor %}
 
-  <!-- Contributing Nav -->
-  {% for section in site.data.nav_contributing %}
+  <!-- Old Docs Nav -->
+  <!-- TODO: remove it when new docs are ready -->
+  {% for section in site.data.nav_docs_old %}
     <div class="nav-docs-section">
       <h3>{{ section.title }}</h3>
       <ul>
         {% for item in section.items %}
           <li>
-            <a href="/react/contributing/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
+            {{ item | docs_old_sidebar_link }}
+            {% if item.subitems %}
+              <ul>
+                {% for subitem in item.subitems %}
+                  <li>
+                    {{ subitem | docs_old_sidebar_link }}
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+
+  <!-- Old Tips Nav -->
+  <!-- TODO: remove it when new docs are ready -->
+  {% for section in site.data.nav_tips %}
+    <div class="nav-docs-section">
+      <h3>{{ section.title }}</h3>
+      <ul>
+        {% for item in section.items %}
+          <li>
+            <a href="/react/tips/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
           </li>
         {% endfor %}
       </ul>

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -50,7 +50,7 @@
           React
         </a>
         <ul class="nav-site nav-site-internal">
-          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' or page.sectionid == 'contributing' %} class="active"{% endif %}>Docs</a></li>
+          <li><a href="/react/docs/installation.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' or page.sectionid == 'contributing' %} class="active"{% endif %}>Docs</a></li>
           <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>Download</a></li>
           <li><a href="/react/community/support.html"{% if page.sectionid == 'community' %} class="active"{% endif %}>Community</a></li>
           <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
@@ -75,7 +75,7 @@
         </div>
 
         <div class="buttons-unit">
-          <a href="/react/docs/getting-started.html" class="button">Get Started</a>
+          <a href="/react/docs/installation.html" class="button">Get Started</a>
           <a href="/react/downloads.html" class="button">Download React v{{site.react_version}}</a>
         </div>
       </div>

diff --git a/docs/_layouts/docs-old.html b/docs/_layouts/docs-old.html
@@ -0,0 +1,27 @@
+---
+layout: default
+sectionid: docs-old
+---
+
+<section class="content wrap documentationContent">
+  {% include nav_docs.html %}
+
+  <div class="inner-content">
+    <a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs-old/{{ page.path }}" target="_blank">Edit on GitHub</a>
+    <h1>
+      {{ page.title }}
+    </h1>
+    <div class="subHeader">{{ page.description }}</div>
+
+    {{ content }}
+
+    <div class="docs-prevnext">
+      {% if page.prev %}
+        <a class="docs-prev" href="/react/docs-old/{{ page.prev }}">&larr; Prev</a>
+      {% endif %}
+      {% if page.next %}
+        <a class="docs-next" href="/react/docs-old/{{ page.next }}">Next &rarr;</a>
+      {% endif %}
+    </div>
+  </div>
+</section>
diff --git a/docs/_plugins/sidebar_item.rb b/docs/_plugins/sidebar_item.rb
@@ -4,6 +4,10 @@ def docs_sidebar_link(item)
       return sidebar_helper(item, 'docs')
     end
 
+    def docs_old_sidebar_link(item)
+      return sidebar_helper(item, 'docs-old')
+    end
+
     def community_sidebar_link(item)
       return sidebar_helper(item, 'community')
     end

diff --git a/docs/docs/01-why-react.de-DE.md → docs/docs-old/01-why-react.de-DE.md b/docs/docs/01-why-react.de-DE.md → docs/docs-old/01-why-react.de-DE.md
@@ -1,7 +1,7 @@
 ---
 id: why-react-de-DE
 title: Warum React?
-permalink: docs/why-react-de-DE.html
+permalink: docs-old/why-react-de-DE.html
 ---
 React ist eine JavaScript-Bibliothek von Facebook und Instagram für Benutzeroberflächen. Man kann sich React als das **V** in **[MVC](https://de.wikipedia.org/wiki/Model_View_Controller)** vorstellen.
 

diff --git a/docs/docs/01-why-react.it-IT.md → docs/docs-old/01-why-react.it-IT.md b/docs/docs/01-why-react.it-IT.md → docs/docs-old/01-why-react.it-IT.md
@@ -1,7 +1,7 @@
 ---
 id: why-react-it-IT
 title: Perché React?
-permalink: docs/why-react-it-IT.html
+permalink: docs-old/why-react-it-IT.html
 next: displaying-data-it-IT.html
 ---
 React è una libreria JavaScript per creare interfacce utente scritta da Facebook e Instagram. A molti piace pensare a React come alla **V** di **[MVC](https://it.wikipedia.org/wiki/Model-View-Controller)**.

diff --git a/docs/docs/01-why-react.ja-JP.md → docs/docs-old/01-why-react.ja-JP.md b/docs/docs/01-why-react.ja-JP.md → docs/docs-old/01-why-react.ja-JP.md
@@ -1,7 +1,7 @@
 ---
 id: why-react-ja-JP
 title: なぜReactを使うのでしょうか？
-permalink: docs/why-react-ja-JP.html
+permalink: docs-old/why-react-ja-JP.html
 next: displaying-data-ja-JP.html
 
 ---

diff --git a/docs/docs/01-why-react.ko-KR.md → docs/docs-old/01-why-react.ko-KR.md b/docs/docs/01-why-react.ko-KR.md → docs/docs-old/01-why-react.ko-KR.md
@@ -1,7 +1,7 @@
 ---
 id: why-react-ko-KR
 title: 왜 React인가?
-permalink: docs/why-react-ko-KR.html
+permalink: docs-old/why-react-ko-KR.html
 next: displaying-data-ko-KR.html
 ---
 

diff --git a/docs/docs/01-why-react.md → docs/docs-old/01-why-react.md b/docs/docs/01-why-react.md → docs/docs-old/01-why-react.md
@@ -1,7 +1,7 @@
 ---
 id: why-react
 title: Why React?
-permalink: docs/why-react.html
+permalink: docs-old/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](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.

diff --git a/docs/docs/01-why-react.ru-RU.md → docs/docs-old/01-why-react.ru-RU.md b/docs/docs/01-why-react.ru-RU.md → docs/docs-old/01-why-react.ru-RU.md
@@ -1,7 +1,7 @@
 ---
 id: why-react-ru-RU
 title: Почему именно React?
-permalink: docs/why-react-ru-RU.html
+permalink: docs-old/why-react-ru-RU.html
 next: displaying-data-ru-RU.html
 ---
 React — библиотека JavaScript для создания интерфейсов от команд Facebook и Instagram. Многие ассоциируют React с понятием **View** в паттерне **[MVC](https://ru.wikipedia.org/wiki/Model-View-Controller)**.

diff --git a/docs/docs/01-why-react.zh-CN.md → docs/docs-old/01-why-react.zh-CN.md b/docs/docs/01-why-react.zh-CN.md → docs/docs-old/01-why-react.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 id: why-react-zh-CN
 title: 为什么使用 React?
-permalink: docs/why-react-zh-CN.html
+permalink: docs-old/why-react-zh-CN.html
 next: displaying-data-zh-CN.html
 ---
 React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人选择将 React 认为是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。

diff --git a/docs/docs/01-why-react.zh-TW.md → docs/docs-old/01-why-react.zh-TW.md b/docs/docs/01-why-react.zh-TW.md → docs/docs-old/01-why-react.zh-TW.md
@@ -1,7 +1,7 @@
 ---
 id: why-react-zh-TW
 title: Why React?
-permalink: docs/why-react-zh-TW.html
+permalink: docs-old/why-react-zh-TW.html
 next: displaying-data.html
 ---
 React是Facebook和Instagram用來建立使用者介面的JavaScript函式庫. 很多人認為React就是處理 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**架構中 **V** 的部份.