diff --git a/docs/docs/installation.md b/docs/docs/installation.md
index 53122b1f18..9758e8c491 100644
--- a/docs/docs/installation.md
+++ b/docs/docs/installation.md
@@ -11,114 +11,24 @@ redirect_from:
- "docs/environments.html"
next: hello-world.html
---
-
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
-
-
-
- Which of these options best describes what you want to do?
-
-
-
-
- Try React
-
-
- Create a New App
-
-
- Add React to an Existing App
-
-
-
+Here are a couple of ways to get started:
-
-
+* [Try React](#trying-out-react)
+* [Create a New App](#creating-a-new-application)
+* [Add React to an Existing App](#adding-react-to-an-existing-application)
-### Trying Out React
+## Trying Out React
If you're just interested in playing around with React, you can use CodePen. Try starting from [this Hello World example code](http://codepen.io/gaearon/pen/rrpgNB?editors=0010). You don't need to install anything; you can just modify the code and see if it works.
If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.
-
-
-
-### Creating a New Application
+## Creating a New Application
[Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
@@ -133,11 +43,8 @@ npm start
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like Babel and webpack under the hood, but works with zero configuration.
When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
-
-
-
-### Adding React to an Existing Application
+## Adding React to an Existing Application
You don't need to rewrite your app to start using React.
@@ -249,5 +156,3 @@ We also recommend to verify that the CDN you are using sets the `Access-Control-
This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
-
-
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
index 8a422f5919..06f3a1890e 100644
--- a/www/gatsby-node.js
+++ b/www/gatsby-node.js
@@ -33,7 +33,6 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
const docsTemplate = resolve('./src/templates/docs.js');
const tutorialTemplate = resolve('./src/templates/tutorial.js');
const homeTemplate = resolve('./src/templates/home.js');
- const installationTemplate = resolve('./src/templates/installation.js');
const allMarkdown = await graphql(
`
@@ -69,14 +68,6 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
slug,
},
});
- } else if (slug === 'docs/installation.html') {
- createPage({
- path: slug,
- component: installationTemplate,
- context: {
- slug,
- },
- });
} else if (slug === 'docs/error-decoder.html') {
// No-op so far as markdown templates go.
// Error codes are managed by a page (which gets created automatically).
diff --git a/www/src/templates/installation.js b/www/src/templates/installation.js
deleted file mode 100644
index 55425f141e..0000000000
--- a/www/src/templates/installation.js
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
-*/
-
-'use strict';
-
-import Container from 'components/Container';
-import Flex from 'components/Flex';
-import MarkdownHeader from 'components/MarkdownHeader';
-import NavigationFooter from 'templates/components/NavigationFooter';
-import PropTypes from 'prop-types';
-import React, {Component} from 'react';
-import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
-import TitleAndMetaTags from 'components/TitleAndMetaTags';
-import {createLinkDocs} from 'utils/createLink';
-import findSectionForPath from 'utils/findSectionForPath';
-import {sectionListDocs} from 'utils/sectionList';
-import {sharedStyles} from 'theme';
-import createOgUrl from 'utils/createOgUrl';
-
-// HACK: copied from 'installation.md'
-// TODO: clean this up.
-function setSelected(value) {
- var tabs = document.querySelectorAll('li[role="tab"]');
- for (var i = 0; i < tabs.length; ++i) {
- var tab = tabs[i];
- if (tab.className === 'button-' + value) {
- tabs[i].setAttribute('aria-selected', 'true');
- tabs[i].setAttribute('tabindex', '0');
- } else {
- tabs[i].setAttribute('aria-selected', 'false');
- tabs[i].setAttribute('tabindex', '-1');
- }
- }
-}
-
-function keyToggle(e, value, prevTab, nextTab) {
- // left arrow <-
- if (e.keyCode === 37) {
- document.getElementById(prevTab).focus();
- display('target', prevTab);
- }
- // right arrow ->
- if (e.keyCode === 39) {
- document.getElementById(nextTab).focus();
- display('target', nextTab);
- }
-}
-
-function display(type, value) {
- setSelected(value);
- var container = document.getElementsByTagName('section')[0].parentNode
- .parentNode;
- container.className =
- 'display-' +
- type +
- '-' +
- value +
- ' ' +
- container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
-}
-
-var foundHash = false;
-function selectTabForHashLink(location) {
- var hashLinks = document.querySelectorAll('a.anchor');
- for (var i = 0; i < hashLinks.length && !foundHash; ++i) {
- if (location && hashLinks[i].hash === location.hash) {
- var parent = hashLinks[i].parentElement;
- while (parent) {
- if (parent.tagName === 'SECTION') {
- var target = null;
- if (parent.className.indexOf('fiddle') > -1) {
- target = 'fiddle';
- } else if (parent.className.indexOf('newapp') > -1) {
- target = 'newapp';
- } else if (parent.className.indexOf('existingapp') > -1) {
- target = 'existingapp';
- } else {
- break; // assume we don't have anything.
- }
- display('target', target);
- foundHash = true;
- break;
- }
- parent = parent.parentElement;
- }
- }
- }
-}
-
-// HACK Expose toggle functions global for markup-defined event handlers.
-// Don't acceess the 'window' object without checking first though,
-// Because it would break the (Node only) Gatsby build step.
-if (typeof window !== 'undefined') {
- window.keyToggle = keyToggle;
- window.display = display;
-}
-
-class InstallationPage extends Component {
- componentDidMount() {
- const location = this.props.location;
- // If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
- // us as close as possible to the correct platform and dev os using the hashtag and section walk up.
- if (location && location.hash !== '' && location.hash !== 'content') {
- // content is default
- // Hash links are added a bit later so we wait for them.
- // HACK we don't have a window object if/when Gatsby executes this in node
- if (
- typeof window !== 'undefined' &&
- typeof window.addEventListener === 'function'
- ) {
- window.addEventListener(
- 'DOMContentLoaded',
- selectTabForHashLink.bind(null, location),
- );
- }
- }
- display('target', 'fiddle');
- }
-
- render() {
- const {data, location} = this.props;
- const {markdownRemark} = data;
-
- return (
-
-
-