From f2345ba2e2d81aca958c5e8764e00d168a6a4687 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Tue, 16 Jul 2013 17:09:43 -0700 Subject: [PATCH] Remove numbers from URLs. This will let us keep docs in order on the filesystem but have reasonable permalinks. If we add something at 02- it doesn't result in lots of broken links. --- _config.yml | 1 + docs/01-why-react.md | 5 +++-- docs/02-displaying-data.md | 7 ++++--- docs/02.1-jsx-in-depth.md | 9 +++++---- docs/02.2-jsx-gotchas.md | 7 ++++--- docs/03-interactivity-and-dynamic-uis.md | 9 +++++---- docs/04-multiple-components.md | 7 ++++--- docs/05-reusable-components.md | 9 +++++---- docs/06-forms.md | 7 ++++--- docs/07-working-with-the-browser.md | 9 +++++---- docs/07.1-more-about-refs.md | 7 ++++--- docs/08-tooling-integration.md | 7 ++++--- docs/09-reference.md | 7 ++++--- 13 files changed, 52 insertions(+), 39 deletions(-) diff --git a/_config.yml b/_config.yml index d9f1e4c5..1a5d7986 100644 --- a/_config.yml +++ b/_config.yml @@ -15,3 +15,4 @@ name: React markdown: redcarpet react_version: 0.4.0a description: A JavaScript library for building user interfaces +relative_permalinks: true diff --git a/docs/01-why-react.md b/docs/01-why-react.md index 202f08f9..0dbf7e80 100644 --- a/docs/01-why-react.md +++ b/docs/01-why-react.md @@ -1,8 +1,9 @@ --- -id: 01-why-react +id: why-react title: Why React? layout: docs -next: 02-displaying-data.html +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)**. diff --git a/docs/02-displaying-data.md b/docs/02-displaying-data.md index 20635d8d..2d2c7ed6 100644 --- a/docs/02-displaying-data.md +++ b/docs/02-displaying-data.md @@ -1,9 +1,10 @@ --- -id: 02-displaying-data +id: displaying-data title: Displaying Data layout: docs -prev: 01-why-react.html -next: 02.1-jsx-in-depth.html +permalink: displaying-data.html +prev: why-react.html +next: jsx-in-depth.html --- The most basic thing you can do with a UI is display some data. React makes it easy to display data, and automatically keeps it up-to-date when the data changes. diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index 0d7c6627..871c0b30 100644 --- a/docs/02.1-jsx-in-depth.md +++ b/docs/02.1-jsx-in-depth.md @@ -1,9 +1,10 @@ --- -id: 02.1-jsx-in-depth +id: jsx-in-depth title: JSX in Depth layout: docs -prev: 02-displaying-data.html -next: 02.2-jsx-gotchas.html +permalink: jsx-in-depth.html +prev: displaying-data.html +next: jsx-gotchas.html --- JSX is a JavaScript XML syntax transform recommended (but not required) for use with React. @@ -172,4 +173,4 @@ efforts include: - JSX neither provides nor requires a runtime library. - JSX does not alter or add to the semantics of JavaScript. -JSX is similar to HTML, but not exactly the same. See [JSX gotchas](./02.2-jsx-gotchas.html) for some key differences. +JSX is similar to HTML, but not exactly the same. See [JSX gotchas](./jsx-gotchas.html) for some key differences. diff --git a/docs/02.2-jsx-gotchas.md b/docs/02.2-jsx-gotchas.md index 965ee0a2..cc867406 100644 --- a/docs/02.2-jsx-gotchas.md +++ b/docs/02.2-jsx-gotchas.md @@ -1,9 +1,10 @@ --- -id: 02.2-jsx-gotchas +id: jsx-gotchas title: JSX gotchas layout: docs -prev: 02.1-jsx-in-depth.html -next: 03-interactivity-and-dynamic-uis.html +permalink: jsx-gotchas.html +prev: jsx-in-depth.html +next: interactivity-and-dynamic-uis.html --- JSX looks like HTML but there are some important differences you may run into. diff --git a/docs/03-interactivity-and-dynamic-uis.md b/docs/03-interactivity-and-dynamic-uis.md index 3f7b13c0..b9aec7ff 100644 --- a/docs/03-interactivity-and-dynamic-uis.md +++ b/docs/03-interactivity-and-dynamic-uis.md @@ -1,11 +1,12 @@ --- -id: 03-interactivity-and-dynamic-uis +id: interactivity-and-dynamic-uis title: Interactivity and dynamic UIs layout: docs -prev: 02.2-jsx-gotchas.html -next: 04-multiple-components.html +permalink: interactivity-and-dynamic-uis.html +prev: jsx-gotchas.html +next: multiple-components.html --- -You've already [learned how to display data](./02-displaying-data.html) with React. Now let's look at how to make our UIs interactive. +You've already [learned how to display data](./displaying-data.html) with React. Now let's look at how to make our UIs interactive. ## A Simple Example diff --git a/docs/04-multiple-components.md b/docs/04-multiple-components.md index f9c0ea8c..fb49b47f 100644 --- a/docs/04-multiple-components.md +++ b/docs/04-multiple-components.md @@ -1,9 +1,10 @@ --- -id: 04-multiple-components +id: multiple-components title: Multiple Components layout: docs -prev: 03-interactivity-and-dynamic-uis.html -next: 05-reusable-components.html +permalink: multiple-components.html +prev: interactivity-and-dynamic-uis.html +next: reusable-components.html --- So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability. diff --git a/docs/05-reusable-components.md b/docs/05-reusable-components.md index 26c2bcda..5b8d22e8 100644 --- a/docs/05-reusable-components.md +++ b/docs/05-reusable-components.md @@ -1,9 +1,10 @@ --- -id: 05-reusable-components +id: reusable-components title: Reusable Components layout: docs -prev: 04-multiple-components.html -next: 06-forms.html +permalink: reusable-components.html +prev: multiple-components.html +next: forms.html --- When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire. @@ -40,7 +41,7 @@ React.renderComponent( 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. -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](./06-working-with-the-browser.html) 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. +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](./working-with-the-browser.html) 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. ```javascript /** @jsx React.DOM */ diff --git a/docs/06-forms.md b/docs/06-forms.md index 6c58457b..150ccb6a 100644 --- a/docs/06-forms.md +++ b/docs/06-forms.md @@ -1,9 +1,10 @@ --- -id: 06-forms +id: forms title: Forms layout: docs -prev: 05-reusable-components.html -next: 07-working-with-the-browser.html +permalink: forms.html +prev: reusable-components.html +next: working-with-the-browser.html --- Form components such as ``, `