From 8ae3ee382f2ba4920d27d770699a840b3d6490e3 Mon Sep 17 00:00:00 2001 From: hardfist Date: Fri, 6 Oct 2017 19:54:08 -0500 Subject: [PATCH 001/156] Update implementation-notes.md prevChild could be CompositeComponent which cause prevChild.node to be undefined. --- content/docs/implementation-notes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/implementation-notes.md b/content/docs/implementation-notes.md index 0c795a1b..b1d7cd4d 100644 --- a/content/docs/implementation-notes.md +++ b/content/docs/implementation-notes.md @@ -750,7 +750,7 @@ We collect DOM operations on children in a list so we can execute them in batch: // If we can't update an existing instance, we have to unmount it // and mount a new one instead of it. if (!canUpdate) { - var prevNode = prevChild.node; + var prevNode = prevChild.getHostNode(); prevChild.unmount(); var nextChild = instantiateComponent(nextChildren[i]); @@ -771,7 +771,7 @@ We collect DOM operations on children in a list so we can execute them in batch: // Finally, unmount any children that don't exist: for (var j = nextChildren.length; j < prevChildren.length; j++) { var prevChild = prevRenderedChildren[j]; - var node = prevChild.node; +     var node = prevChild.getHostNode(); prevChild.unmount(); // Record that we need to remove the node From ca77459159a692a2845d534c60c8ffa10e5eedfe Mon Sep 17 00:00:00 2001 From: hardfist Date: Fri, 6 Oct 2017 22:19:15 -0500 Subject: [PATCH 002/156] Update implementation-notes.md fix indentation problem --- content/docs/implementation-notes.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/implementation-notes.md b/content/docs/implementation-notes.md index b1d7cd4d..86b1297a 100644 --- a/content/docs/implementation-notes.md +++ b/content/docs/implementation-notes.md @@ -770,12 +770,12 @@ We collect DOM operations on children in a list so we can execute them in batch: // Finally, unmount any children that don't exist: for (var j = nextChildren.length; j < prevChildren.length; j++) { - var prevChild = prevRenderedChildren[j]; -     var node = prevChild.getHostNode(); - prevChild.unmount(); + var prevChild = prevRenderedChildren[j]; +     var node = prevChild.getHostNode(); + prevChild.unmount(); - // Record that we need to remove the node - operationQueue.push({type: 'REMOVE', node}); + // Record that we need to remove the node + operationQueue.push({type: 'REMOVE', node}); } // Point the list of rendered children to the updated version. From d255c1afc6603202fcee12daa586d7376fc8d7e0 Mon Sep 17 00:00:00 2001 From: Eric Simons Date: Sun, 15 Oct 2017 11:36:37 -0700 Subject: [PATCH 003/156] sync js files to codepen --- .eslintignore | 5 ++- content/docs/hello-world.md | 2 +- content/docs/introducing-jsx.md | 2 +- examples/hello-world.js | 4 ++ examples/index.html | 3 ++ examples/introducing-jsx.js | 19 ++++++++++ gatsby-node.js | 42 ++++++++++++++++----- package.json | 2 +- src/templates/codepen-example.js | 64 ++++++++++++++++++++++++++++++++ 9 files changed, 130 insertions(+), 13 deletions(-) create mode 100644 examples/hello-world.js create mode 100644 examples/index.html create mode 100644 examples/introducing-jsx.js create mode 100644 src/templates/codepen-example.js diff --git a/.eslintignore b/.eslintignore index ff8a5577..94254171 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,4 +4,7 @@ node_modules/* content/* # Ignore built files -public/* \ No newline at end of file +public/* + +# Ignore examples +examples/* \ No newline at end of file diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index f9be3bde..06087d7b 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -11,7 +11,7 @@ redirect_from: - "docs/getting-started-zh-CN.html" --- -The easiest way to get started with React is to use [this Hello World example code on CodePen](http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page. +The easiest way to get started with React is to use this Hello World example code on CodePen. You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page. The smallest React example looks like this: diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 9830ddc9..e1e4d64d 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -46,7 +46,7 @@ ReactDOM.render( ); ``` -[Try it on CodePen.](http://codepen.io/gaearon/pen/PGEjdG?editors=0010) +Try it on CodePen. We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283). diff --git a/examples/hello-world.js b/examples/hello-world.js new file mode 100644 index 00000000..d0f87a59 --- /dev/null +++ b/examples/hello-world.js @@ -0,0 +1,4 @@ +ReactDOM.render( +

Hello, world!

, + document.getElementById('root') +); diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 00000000..461f1105 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js new file mode 100644 index 00000000..adb32664 --- /dev/null +++ b/examples/introducing-jsx.js @@ -0,0 +1,19 @@ +function formatName(user) { + return user.firstName + ' ' + user.lastName; +} + +const user = { + firstName: 'Harper', + lastName: 'Perez', +}; + +const element = ( +

+ Hello, {formatName(user)}! +

+); + +ReactDOM.render( + element, + document.getElementById('root') +); diff --git a/gatsby-node.js b/gatsby-node.js index 0fc10c4f..5a078ffc 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -8,6 +8,7 @@ const {resolve} = require('path'); const webpack = require('webpack'); +const fs = require('fs'); exports.modifyWebpackConfig = ({config, stage}) => { // See https://github.com/FormidableLabs/react-live/issues/5 @@ -74,11 +75,11 @@ exports.createPages = async ({graphql, boundActionCreators}) => { // (which gets created by Gatsby during a separate phase). } else if ( slug.includes('blog/') || - slug.includes('community/') || - slug.includes('contributing/') || - slug.includes('docs/') || - slug.includes('tutorial/') || - slug.includes('warnings/') + slug.includes('community/') || + slug.includes('contributing/') || + slug.includes('docs/') || + slug.includes('tutorial/') || + slug.includes('warnings/') ) { let template; if (slug.includes('blog/')) { @@ -87,8 +88,8 @@ exports.createPages = async ({graphql, boundActionCreators}) => { template = communityTemplate; } else if ( slug.includes('contributing/') || - slug.includes('docs/') || - slug.includes('warnings/') + slug.includes('docs/') || + slug.includes('warnings/') ) { template = docsTemplate; } else if (slug.includes('tutorial/')) { @@ -117,8 +118,8 @@ exports.createPages = async ({graphql, boundActionCreators}) => { redirect.forEach(fromPath => { if (redirectToSlugMap[fromPath] != null) { console.error(`Duplicate redirect detected from "${fromPath}" to:\n` + - `* ${redirectToSlugMap[fromPath]}\n` + - `* ${slug}\n` + `* ${redirectToSlugMap[fromPath]}\n` + + `* ${slug}\n` ); process.exit(1); } @@ -161,6 +162,29 @@ exports.createPages = async ({graphql, boundActionCreators}) => { redirectInBrowser: true, toPath: newestBlogNode.fields.slug, }); + + // Create Codepen example pages + const htmlTemplate = fs.readFileSync('./examples/index.html', 'utf8'); + fs.readdirSync('./examples').forEach(file => { + // Only create pages for the JS files + if (file.toLowerCase().split('.').pop() === 'js') { + const slug = file.substring(0, file.length - 3); + const jsTemplate = fs.readFileSync(`./examples/${file}`, 'utf8'); + + createPage({ + path: `/examples/${slug}`, + component: resolve('./src/templates/codepen-example.js'), + context: { + slug, + payload: { + html: htmlTemplate, + js: jsTemplate, + }, + }, + }); + } + }); + }; // Parse date information out of blog post filename. diff --git a/package.json b/package.json index 1d214c9f..b6106a10 100644 --- a/package.json +++ b/package.json @@ -84,4 +84,4 @@ "devDependencies": { "eslint-config-prettier": "^2.6.0" } -} +} \ No newline at end of file diff --git a/src/templates/codepen-example.js b/src/templates/codepen-example.js new file mode 100644 index 00000000..7079cc53 --- /dev/null +++ b/src/templates/codepen-example.js @@ -0,0 +1,64 @@ +'use strict'; + +import React, {Component} from 'react'; +import Container from 'components/Container'; +import {colors} from 'theme'; +// import {version} from '../site-constants'; + +// Copied over styles from ButtonLink for the submit btn +const primaryStyle = { + backgroundColor: colors.brand, + color: colors.black, + padding: '10px 25px', + whiteSpace: 'nowrap', + transition: 'background-color 0.2s ease-out', + outline: 0, + border: 'none', + cursor: 'pointer', + + ':hover': { + backgroundColor: colors.white, + }, + + display: 'inline-block', + fontSize: 16, +}; + +class CodepenExample extends Component { + componentDidMount() { + this.codepenForm.submit(); + } + + render() { + const {payload} = this.props.pathContext; + // Set codepen options + payload.js_pre_processor = 'babel'; + // Only have the JS editor open (default for all examples) + payload.editors = '0010'; + // We can pass @version in the URL for version locking, if desired. + payload.js_external = `https://unpkg.com/react/umd/react.development.js;https://unpkg.com/react-dom/umd/react-dom.development.js`; + + return ( + +

Redirecting to Codepen...

+
{ + this.codepenForm = form; + }} + action="https://codepen.io/pen/define" + method="POST"> + + + +
+ + ); + } +} + +export default CodepenExample; From d93263393afae88c81b7cdbca85e14decec35339 Mon Sep 17 00:00:00 2001 From: ishank Date: Fri, 20 Oct 2017 17:50:33 +0530 Subject: [PATCH 004/156] added static typechecking guide --- content/docs/nav.yml | 2 + content/docs/static-type-checking.md | 65 ++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 content/docs/static-type-checking.md diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 7b385b3d..71ef81aa 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -32,6 +32,8 @@ title: JSX In Depth - id: typechecking-with-proptypes title: Typechecking With PropTypes + - id: static-type-checking + title: Static Type Checking - id: refs-and-the-dom title: Refs and the DOM - id: uncontrolled-components diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md new file mode 100644 index 00000000..310ab380 --- /dev/null +++ b/content/docs/static-type-checking.md @@ -0,0 +1,65 @@ +--- +id: static-type-checking +title: Static Type Checking +permalink: docs/static-type-checking.html +prev: typechecking-with-prototypes.html +next: refs-and-the-dom.html +--- + +As your app grows, you can catch and eliminate an entire category of bugs with static typechecking. You can use JavaScript extensions like [Flow](https://flowtype.org/) or [TypeScript](https://www.typescriptlang.org/) to statically typecheck your whole application. In complex applications, we recommend to use Flow or TypeScript for typechecking instead of typechecking with PropTypes. + +## Using Flow with React + +For trying out Flow, use this [playground](https://flow.org/try/). + +Flow and [Babel](http://babeljs.io/) work well together, so it doesn’t take much to adopt Flow as a React user who already uses Babel. + +### With babel + +Flow and Babel are designed to work great together. It takes just a few steps to set them up together. + +If you don’t have Babel setup already, you can do that by following [this guide](http://babeljs.io/docs/setup/). + +Once you have Babel setup, install `babel-preset-flow` with either [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). + +```bash +yarn add --dev babel-preset-flow +# or +npm install --save-dev bebel-preset-flow +``` + +Then add `flow` to your Babel presets config. + +``` +{ + "presets": ["flow"] +} +``` + +### With Create React App + +[Create React App](https://github.com/facebookincubator/create-react-app) already supports Flow by default. Just [install Flow](https://flow.org/en/docs/install/) and create a `.flowconfig` file by running `flow init`. + +```bash +create-react-app my-app && cd my-app +yarn add --dev flow-bin +yarn run flow init +``` + +Flow will be run as part of create-react-app’s scripts. + +## Using TypeScript with React + +For a fast dive into TypeScript, go [here](https://www.typescriptlang.org/play/). + +### With Create React App + +All you need to do is: + +``` +create-react-app my-app --scripts-version=react-scripts-ts +``` + +[react-scripts-ts](https://www.npmjs.com/package/react-scripts-ts) is a set of adjustments to take the standard create-react-app project pipeline and bring TypeScript into the mix. + +You can also try [typescript-react-starter](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). \ No newline at end of file From 1de3b188e7e552ce9077f966565716aa4239e39d Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Thu, 12 Oct 2017 23:42:03 +0800 Subject: [PATCH 005/156] Embed content into home template --- content/index.md | 76 ------------------------------------------- src/templates/home.js | 76 ++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 72 insertions(+), 80 deletions(-) delete mode 100644 content/index.md diff --git a/content/index.md b/content/index.md deleted file mode 100644 index 2eddf27c..00000000 --- a/content/index.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -layout: hero -title: A JavaScript library for building user interfaces -id: home ---- - -
-
-
-

Declarative

-

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

-

Declarative views make your code more predictable and easier to debug.

-
-
-

Component-Based

-

Build encapsulated components that manage their own state, then compose them to make complex UIs.

-

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

-
-
-

Learn Once, Write Anywhere

-

We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

-

React can also render on the server using Node and power mobile apps using React Native.

-
-
-
-
-
-
-
-

A Simple Component

-

- React components implement a `render()` method that takes input data and - returns what to display. This example uses an XML-like syntax called - JSX. Input data that is passed into the component can be accessed by - `render()` via `this.props`. -

-

- JSX is optional and not required to use React. - Try the - Babel REPL - to see the raw JavaScript code produced by the JSX compilation step. -

-
-
-
-

A Stateful Component

-

- In addition to taking input data (accessed via `this.props`), a - component can maintain internal state data (accessed via `this.state`). - When a component's state data changes, the rendered markup will be - updated by re-invoking `render()`. -

-
-
-
-

An Application

-

- Using `props` and `state`, we can put together a small Todo application. - This example uses `state` to track the current list of items as well as - the text that the user has entered. Although event handlers appear to be - rendered inline, they will be collected and implemented using event - delegation. -

-
-
-
-

A Component Using External Plugins

-

- React is flexible and provides hooks that allow you to interface with - other libraries and frameworks. This example uses remarkable, an - external Markdown library, to convert the textarea's value in real time. -

-
-
-
-
diff --git a/src/templates/home.js b/src/templates/home.js index e75d9fd8..b11d4ddd 100644 --- a/src/templates/home.js +++ b/src/templates/home.js @@ -141,10 +141,78 @@ class Home extends Component { -
+
+
+
+
+

Declarative

+

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

+

Declarative views make your code more predictable and easier to debug.

+
+
+

Component-Based

+

Build encapsulated components that manage their own state, then compose them to make complex UIs.

+

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

+
+
+

Learn Once, Write Anywhere

+

We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

+

React can also render on the server using Node and power mobile apps using React Native.

+
+
+
+
+
+
+
+

A Simple Component

+

+ React components implement a `render()` method that takes input data and + returns what to display. This example uses an XML-like syntax called + JSX. Input data that is passed into the component can be accessed by + `render()` via `this.props`. +

+

+ JSX is optional and not required to use React. + Try the + Babel REPL + to see the raw JavaScript code produced by the JSX compilation step. +

+
+
+
+

A Stateful Component

+

+ In addition to taking input data (accessed via `this.props`), a + component can maintain internal state data (accessed via `this.state`). + When a component's state data changes, the rendered markup will be + updated by re-invoking `render()`. +

+
+
+
+

An Application

+

+ Using `props` and `state`, we can put together a small Todo application. + This example uses `state` to track the current list of items as well as + the text that the user has entered. Although event handlers appear to be + rendered inline, they will be collected and implemented using event + delegation. +

+
+
+
+

A Component Using External Plugins

+

+ React is flexible and provides hooks that allow you to interface with + other libraries and frameworks. This example uses remarkable, an + external Markdown library, to convert the textarea's value in real time. +

+
+
+
+
+
Date: Thu, 12 Oct 2017 23:59:25 +0800 Subject: [PATCH 006/156] Shift home into pages --- gatsby-node.js | 10 +----- src/{templates/home.js => pages/index.js} | 43 +++++++---------------- 2 files changed, 14 insertions(+), 39 deletions(-) rename src/{templates/home.js => pages/index.js} (94%) diff --git a/gatsby-node.js b/gatsby-node.js index 89fc1db8..c1f47f14 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -60,15 +60,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => { allMarkdown.data.allMarkdownRemark.edges.forEach(edge => { const slug = edge.node.fields.slug; - if (slug === '/index.html') { - createPage({ - path: '/', - component: homeTemplate, - context: { - slug, - }, - }); - } else if (slug === 'docs/error-decoder.html') { + if (slug === 'docs/error-decoder.html') { // No-op so far as markdown templates go. // Error codes are managed by a page in src/pages // (which gets created by Gatsby during a separate phase). diff --git a/src/templates/home.js b/src/pages/index.js similarity index 94% rename from src/templates/home.js rename to src/pages/index.js index b11d4ddd..637c0ec0 100644 --- a/src/templates/home.js +++ b/src/pages/index.js @@ -6,7 +6,7 @@ 'use strict'; -import ButtonLink from './components/ButtonLink'; +import ButtonLink from '../templates/components/ButtonLink'; import Container from 'components/Container'; import Flex from 'components/Flex'; import mountCodeExample from 'utils/mountCodeExample'; @@ -41,14 +41,13 @@ class Home extends Component { } render() { - const {data} = this.props; const title = 'React - A JavaScript library for building user interfaces'; return (
-
-
-
+
+
+

Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

-
+

Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

-
+

Learn Once, Write Anywhere

We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using React Native.

-
-
+
+
-
+

A Simple Component

React components implement a `render()` method that takes input data and @@ -180,7 +179,7 @@ class Home extends Component {

-
+

A Stateful Component

In addition to taking input data (accessed via `this.props`), a @@ -190,7 +189,7 @@ class Home extends Component {

-
+

An Application

Using `props` and `state`, we can put together a small Todo application. @@ -201,7 +200,7 @@ class Home extends Component {

-
+

A Component Using External Plugins

React is flexible and provides hooks that allow you to interface with @@ -243,7 +242,6 @@ class Home extends Component { } Home.propTypes = { - data: PropTypes.object.isRequired, location: PropTypes.object.isRequired, }; @@ -285,21 +283,6 @@ const CtaItem = ({children, primary = false}) => (

); -// eslint-disable-next-line no-undef -export const pageQuery = graphql` - query HomeMarkdown($slug: String!) { - markdownRemark(fields: {slug: {eq: $slug}}) { - html - frontmatter { - title - } - fields { - slug - } - } - } -`; - export default Home; // TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names. From 1e6151e3909c3a5196fb3d3949ea42c6bfa790e3 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Fri, 13 Oct 2017 01:04:18 +0800 Subject: [PATCH 007/156] Split up marketing content into Markdown files --- content/marketing/component-based.md | 8 ++++ content/marketing/declarative.md | 8 ++++ .../marketing/learn-once-write-anywhere.md | 8 ++++ src/pages/index.js | 38 ++++++++++++++++++- src/types.js | 1 + 5 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 content/marketing/component-based.md create mode 100644 content/marketing/declarative.md create mode 100644 content/marketing/learn-once-write-anywhere.md diff --git a/content/marketing/component-based.md b/content/marketing/component-based.md new file mode 100644 index 00000000..aeb3c4de --- /dev/null +++ b/content/marketing/component-based.md @@ -0,0 +1,8 @@ +--- +title: Component-Based +order: 1 +--- + +Build encapsulated components that manage their own state, then compose them to make complex UIs. + +Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM. diff --git a/content/marketing/declarative.md b/content/marketing/declarative.md new file mode 100644 index 00000000..c3b65190 --- /dev/null +++ b/content/marketing/declarative.md @@ -0,0 +1,8 @@ +--- +title: Declarative +order: 0 +--- + +React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. + +Declarative views make your code more predictable and easier to debug. diff --git a/content/marketing/learn-once-write-anywhere.md b/content/marketing/learn-once-write-anywhere.md new file mode 100644 index 00000000..009edf5b --- /dev/null +++ b/content/marketing/learn-once-write-anywhere.md @@ -0,0 +1,8 @@ +--- +title: Learn Once, Write Anywhere +order: 2 +--- + +We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. + +React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/). diff --git a/src/pages/index.js b/src/pages/index.js index 637c0ec0..7475a24f 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -41,7 +41,12 @@ class Home extends Component { } render() { + const {data} = this.props; const title = 'React - A JavaScript library for building user interfaces'; + const marketingColumns = data.allMarkdownRemark.edges.map(edge => ({ + title: edge.node.frontmatter.title, + content: edge.node.html, + })); return (
@@ -141,7 +146,7 @@ class Home extends Component {
-
+

Declarative

@@ -160,6 +165,16 @@ class Home extends Component {
+
+
+ {marketingColumns.map((column, index) => +
+

{column.title}

+
+
+ )} +
+
@@ -242,6 +257,7 @@ class Home extends Component { } Home.propTypes = { + data: PropTypes.object.isRequired, location: PropTypes.object.isRequired, }; @@ -283,6 +299,26 @@ const CtaItem = ({children, primary = false}) => (
); +// eslint-disable-next-line no-undef +export const pageQuery = graphql` +query MarketingMarkdown { + allMarkdownRemark( + filter: {id: {regex: "/marketing/"}}, + sort: {fields: [frontmatter___order], + order: ASC} + ) { + edges { + node { + frontmatter { + title + } + html + } + } + } +} +`; + export default Home; // TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names. diff --git a/src/types.js b/src/types.js index 782a5b6f..91603786 100644 --- a/src/types.js +++ b/src/types.js @@ -23,6 +23,7 @@ export type Node = { next?: string, prev?: string, title: string, + order?: number, }, html: string, id: string, From a1cb7af47f06ec742056ef3fc1825c9abb89e2a3 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Fri, 13 Oct 2017 02:14:32 +0800 Subject: [PATCH 008/156] Use glamor styles for home page --- src/pages/index.js | 176 +++++++++++++++++++-------------------------- 1 file changed, 73 insertions(+), 103 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index 7475a24f..bd15fadf 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -146,36 +146,85 @@ class Home extends Component {
-
-
-
-

Declarative

-

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

-

Declarative views make your code more predictable and easier to debug.

-
-
-

Component-Based

-

Build encapsulated components that manage their own state, then compose them to make complex UIs.

-

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

-
-
-

Learn Once, Write Anywhere

-

We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

-

React can also render on the server using Node and power mobile apps using React Native.

-
-
-
-
-
+
+
{marketingColumns.map((column, index) => -
-

{column.title}

+
+

{column.title}

)}
-
+
@@ -333,85 +382,6 @@ const markdownStyles = { }, }, - '& .home-section:first-child': { - [media.lessThan('medium')]: { - marginTop: 0, - marginBottom: 0, - overflowX: 'auto', - paddingTop: 30, - WebkitOverflowScrolling: 'touch', - position: 'relative', - maskImage: - 'linear-gradient(to right, transparent, white 10px, white 90%, transparent)', - }, - }, - - '& .homeDivider': { - height: 1, - marginBottom: -1, - border: 'none', - borderBottom: `1 solid ${colors.divider}`, - }, - - '& .marketing-row': { - display: 'flex', - flexDirection: 'row', - - [media.lessThan('medium')]: { - display: 'block', - whiteSpace: 'nowrap', - }, - }, - - '& .marketing-col': { - display: 'flex', - flexDirection: 'column', - flex: '0 1 33%', - marginLeft: 40, - - '&:first-of-type': { - marginLeft: 0, - - [media.lessThan('medium')]: { - marginLeft: 10, - }, - }, - - [media.lessThan('medium')]: { - display: 'inline-block', - verticalAlign: 'top', - marginLeft: 0, - whiteSpace: 'normal', - width: '75%', - marginRight: 20, - paddingBottom: 40, - - '&:first-of-type': { - marginTop: 0, - }, - }, - - '& h3': { - color: colors.subtle, - paddingTop: 0, - fontWeight: 300, - fontSize: 20, - - [media.greaterThan('xlarge')]: { - fontSize: 24, - fontWeight: 200, - }, - }, - - '& p': { - lineHeight: 1.7, - }, - - '& h3 + p': { - marginTop: 20, - }, - }, - '& .example': { marginTop: 40, From 137f0ffa0c03df45fecacca347373978d1c9ac4a Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Fri, 13 Oct 2017 02:40:21 +0800 Subject: [PATCH 009/156] Minor formatting fixes --- gatsby-node.js | 1 - src/pages/index.js | 225 ++++++++++++++++++++++++--------------------- 2 files changed, 120 insertions(+), 106 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index c1f47f14..dc87946c 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -32,7 +32,6 @@ exports.createPages = async ({graphql, boundActionCreators}) => { const communityTemplate = resolve('./src/templates/community.js'); const docsTemplate = resolve('./src/templates/docs.js'); const tutorialTemplate = resolve('./src/templates/tutorial.js'); - const homeTemplate = resolve('./src/templates/home.js'); const allMarkdown = await graphql( ` diff --git a/src/pages/index.js b/src/pages/index.js index bd15fadf..5d4d673e 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -50,10 +50,7 @@ class Home extends Component { return (
- +
-
-
- {marketingColumns.map((column, index) => -
+ {marketingColumns.map((column, index) => ( +
-

+

{column.title}

+ }}> + {column.title} +
- )} + ))}
-
+

A Simple Component

- React components implement a `render()` method that takes input data and - returns what to display. This example uses an XML-like syntax called - JSX. Input data that is passed into the component can be accessed by - `render()` via `this.props`. + React components implement a `render()` method that takes + input data and returns what to display. This example uses an + XML-like syntax called JSX. Input data that is passed into + the component can be accessed by `render()` via + `this.props`.

- JSX is optional and not required to use React. - Try the - Babel REPL - to see the raw JavaScript code produced by the JSX compilation step. + + JSX is optional and not required to use React. + {' '} + Try the{' '} + + Babel REPL + {' '} + to see the raw JavaScript code produced by the JSX + compilation step.

-
+

A Stateful Component

- In addition to taking input data (accessed via `this.props`), a - component can maintain internal state data (accessed via `this.state`). - When a component's state data changes, the rendered markup will be - updated by re-invoking `render()`. + In addition to taking input data (accessed via + `this.props`), a component can maintain internal state data + (accessed via `this.state`). When a component's state data + changes, the rendered markup will be updated by re-invoking + `render()`.

-
+

An Application

- Using `props` and `state`, we can put together a small Todo application. - This example uses `state` to track the current list of items as well as - the text that the user has entered. Although event handlers appear to be - rendered inline, they will be collected and implemented using event - delegation. + Using `props` and `state`, we can put together a small Todo + application. This example uses `state` to track the current + list of items as well as the text that the user has entered. + Although event handlers appear to be rendered inline, they + will be collected and implemented using event delegation.

-
+

A Component Using External Plugins

- React is flexible and provides hooks that allow you to interface with - other libraries and frameworks. This example uses remarkable, an - external Markdown library, to convert the textarea's value in real time. + React is flexible and provides hooks that allow you to + interface with other libraries and frameworks. This example + uses remarkable, an external Markdown + library, to convert the textarea's value in real time.

-
+
@@ -350,22 +366,21 @@ const CtaItem = ({children, primary = false}) => ( // eslint-disable-next-line no-undef export const pageQuery = graphql` -query MarketingMarkdown { - allMarkdownRemark( - filter: {id: {regex: "/marketing/"}}, - sort: {fields: [frontmatter___order], - order: ASC} - ) { - edges { - node { - frontmatter { - title + query MarketingMarkdown { + allMarkdownRemark( + filter: {id: {regex: "/marketing/"}} + sort: {fields: [frontmatter___order], order: ASC} + ) { + edges { + node { + frontmatter { + title + } + html } - html } } } -} `; export default Home; From 505efa09eec32a262f9940b7cb378a5301828291 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Fri, 13 Oct 2017 02:54:34 +0800 Subject: [PATCH 010/156] Fix styling --- src/pages/index.js | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index 5d4d673e..d2d91883 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -144,19 +144,21 @@ class Home extends Component {
+ ]}>
-
+

A Simple Component

@@ -385,18 +387,18 @@ export const pageQuery = graphql` export default Home; -// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names. -const markdownStyles = { - '& .home-section': { - marginTop: 20, - marginBottom: 15, +const sectionStyles = { + marginTop: 20, + marginBottom: 15, - [media.greaterThan('medium')]: { - marginTop: 60, - marginBottom: 65, - }, + [media.greaterThan('medium')]: { + marginTop: 60, + marginBottom: 65, }, +}; +// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names. +const markdownStyles = { '& .example': { marginTop: 40, From 405e7c51662e994101549e54a0be788203d12d6c Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Mon, 16 Oct 2017 23:14:43 +0800 Subject: [PATCH 011/156] Fix for comments --- src/{templates => }/components/ButtonLink/ButtonLink.js | 0 src/{templates => }/components/ButtonLink/index.js | 0 src/pages/index.js | 2 +- src/types.js | 1 - 4 files changed, 1 insertion(+), 2 deletions(-) rename src/{templates => }/components/ButtonLink/ButtonLink.js (100%) rename src/{templates => }/components/ButtonLink/index.js (100%) diff --git a/src/templates/components/ButtonLink/ButtonLink.js b/src/components/ButtonLink/ButtonLink.js similarity index 100% rename from src/templates/components/ButtonLink/ButtonLink.js rename to src/components/ButtonLink/ButtonLink.js diff --git a/src/templates/components/ButtonLink/index.js b/src/components/ButtonLink/index.js similarity index 100% rename from src/templates/components/ButtonLink/index.js rename to src/components/ButtonLink/index.js diff --git a/src/pages/index.js b/src/pages/index.js index d2d91883..40adfaf0 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,7 +6,7 @@ 'use strict'; -import ButtonLink from '../templates/components/ButtonLink'; +import ButtonLink from 'components/ButtonLink'; import Container from 'components/Container'; import Flex from 'components/Flex'; import mountCodeExample from 'utils/mountCodeExample'; diff --git a/src/types.js b/src/types.js index 91603786..782a5b6f 100644 --- a/src/types.js +++ b/src/types.js @@ -23,7 +23,6 @@ export type Node = { next?: string, prev?: string, title: string, - order?: number, }, html: string, id: string, From 7a44e5ba7a085f9f6ecf20d48857e31d23cce7ca Mon Sep 17 00:00:00 2001 From: Tay Yang Shun Date: Tue, 24 Oct 2017 01:13:15 +0800 Subject: [PATCH 012/156] Add redirect to root --- gatsby-node.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/gatsby-node.js b/gatsby-node.js index dc87946c..09238a0e 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -33,6 +33,13 @@ exports.createPages = async ({graphql, boundActionCreators}) => { const docsTemplate = resolve('./src/templates/docs.js'); const tutorialTemplate = resolve('./src/templates/tutorial.js'); + // Redirect /index.html to root. + createRedirect({ + fromPath: '/index.html', + redirectInBrowser: true, + toPath: '/', + }); + const allMarkdown = await graphql( ` { From 57baeb12987f788f39005586cd6416530058c0d9 Mon Sep 17 00:00:00 2001 From: Tay Yang Shun Date: Tue, 24 Oct 2017 04:05:40 +0800 Subject: [PATCH 013/156] Shift out examples content --- .../a-component-using-external-plugins.md | 7 + content/examples/a-simple-component.md | 9 + content/examples/a-stateful-component.md | 7 + content/examples/an-application.md | 7 + src/pages/index.js | 156 ++++++++---------- 5 files changed, 96 insertions(+), 90 deletions(-) create mode 100644 content/examples/a-component-using-external-plugins.md create mode 100644 content/examples/a-simple-component.md create mode 100644 content/examples/a-stateful-component.md create mode 100644 content/examples/an-application.md diff --git a/content/examples/a-component-using-external-plugins.md b/content/examples/a-component-using-external-plugins.md new file mode 100644 index 00000000..80908946 --- /dev/null +++ b/content/examples/a-component-using-external-plugins.md @@ -0,0 +1,7 @@ +--- +title: A Component Using External Plugins +order: 3 +example_name: markdownExample +--- + +React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `