From 0767e7b9ddbf6e2c9ee9c9050987badc634d9736 Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Thu, 19 Dec 2013 17:15:01 -0500 Subject: [PATCH] docs make all link start with /react/docs --- docs/02-displaying-data.md | 4 ++-- docs/02.1-jsx-in-depth.md | 6 +++--- docs/02.2-jsx-gotchas.md | 2 +- docs/03-interactivity-and-dynamic-uis.md | 2 +- docs/04-multiple-components.md | 2 +- docs/05-reusable-components.md | 2 +- docs/07-working-with-the-browser.md | 2 +- docs/09.2-form-input-binding-sugar.md | 2 +- docs/10-examples.md | 2 +- docs/getting-started.md | 4 ++-- docs/ref-01-top-level-api.md | 2 +- docs/ref-03-component-specs.md | 4 ++-- docs/ref-04-tags-and-attributes.md | 2 +- docs/ref-05-events.md | 2 +- docs/ref-06-dom-differences.md | 4 ++-- docs/tutorial.md | 4 ++-- tips/11-dom-event-listeners.md | 2 +- 17 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/02-displaying-data.md b/docs/02-displaying-data.md index 9e7b9fbfa..aa0cf75f9 100644 --- a/docs/02-displaying-data.md +++ b/docs/02-displaying-data.md @@ -84,8 +84,8 @@ We've found that the best solution for this problem is to generate markup direct **JSX lets you write JavaScript function calls with HTML syntax.** To generate a link in React using pure JavaScript you'd write: `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`. With JSX this becomes `Hello React!`. 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.** -JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see [JSX in depth](./jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html). +JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html). -JSX is similar to HTML, but not exactly the same. See [JSX gotchas](./jsx-gotchas.html) for some key differences. +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. diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index 88737c9ed..b811c2a09 100644 --- a/docs/02.1-jsx-in-depth.md +++ b/docs/02.1-jsx-in-depth.md @@ -55,7 +55,7 @@ var app = Nav({color:"blue"}, Profile(null, "click")); Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it desugars into native JavaScript. -If you want to use JSX, the [Getting Started](getting-started.html) guide shows +If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows how to setup compilation. > Note: @@ -92,7 +92,7 @@ var MyComponent = React.createClass({/*...*/}); var app = ; ``` -See [Multiple Components](multiple-components.html) to learn more about using composite components. +See [Multiple Components](/react/docs/multiple-components.html) to learn more about using composite components. > Note: > @@ -168,4 +168,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](./jsx-gotchas.html) for some key differences. +JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences. diff --git a/docs/02.2-jsx-gotchas.md b/docs/02.2-jsx-gotchas.md index 19d69d4c8..f5cf531a1 100644 --- a/docs/02.2-jsx-gotchas.md +++ b/docs/02.2-jsx-gotchas.md @@ -11,7 +11,7 @@ JSX looks like HTML but there are some important differences you may run into. > Note: > -> For DOM differences, such as the inline `style` attribute, check [here](dom-differences.html). +> For DOM differences, such as the inline `style` attribute, check [here](/react/docs/dom-differences.html). ## Whitespace Removal diff --git a/docs/03-interactivity-and-dynamic-uis.md b/docs/03-interactivity-and-dynamic-uis.md index 7c715b82c..6113a443a 100644 --- a/docs/03-interactivity-and-dynamic-uis.md +++ b/docs/03-interactivity-and-dynamic-uis.md @@ -7,7 +7,7 @@ prev: jsx-gotchas.html next: multiple-components.html --- -You've already [learned how to display data](./displaying-data.html) with React. Now let's look at how to make our UIs interactive. +You've already [learned how to display data](/react/docs/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 756c65447..d44a039f4 100644 --- a/docs/04-multiple-components.md +++ b/docs/04-multiple-components.md @@ -144,7 +144,7 @@ In React, data flows from owner to owned component through `props` as discussed You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution and React will optimize this for you using batching and change detection. -However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React reference docs](component-specs.html) for more information. +However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React reference docs](/react/docs/component-specs.html) for more information. > Note: > diff --git a/docs/05-reusable-components.md b/docs/05-reusable-components.md index cab8767a7..18695ca43 100644 --- a/docs/05-reusable-components.md +++ b/docs/05-reusable-components.md @@ -96,7 +96,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](./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](/react/docs/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/07-working-with-the-browser.md b/docs/07-working-with-the-browser.md index fc1b1930f..50c1c5ab2 100644 --- a/docs/07-working-with-the-browser.md +++ b/docs/07-working-with-the-browser.md @@ -62,7 +62,7 @@ React.renderComponent( ## More About Refs -To learn more about refs, including ways to use them effectively, see our [more about refs](./more-about-refs.html) documentation. +To learn more about refs, including ways to use them effectively, see our [more about refs](/react/docs/more-about-refs.html) documentation. ## Component Lifecycle diff --git a/docs/09.2-form-input-binding-sugar.md b/docs/09.2-form-input-binding-sugar.md index 8f706eea9..d2b0e3a4a 100644 --- a/docs/09.2-form-input-binding-sugar.md +++ b/docs/09.2-form-input-binding-sugar.md @@ -17,7 +17,7 @@ In React, data flows one way: from owner to child. This is because data only flo However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size. -In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](./forms.html) for more information. +In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](/react/docs/forms.html) for more information. Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React `state` -- is concise and supports a wide variety of applications. We've provided `ReactLink`: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React `state`. diff --git a/docs/10-examples.md b/docs/10-examples.md index 0a1226aaf..ae7b650ce 100644 --- a/docs/10-examples.md +++ b/docs/10-examples.md @@ -15,7 +15,7 @@ prev: addons.html ### Sample Code -* We've included [a step-by-step comment box tutorial](./tutorial.html). +* We've included [a step-by-step comment box tutorial](/react/docs/tutorial.html). * [The React starter kit](/react/downloads.html) includes several examples which you can [view online in our GitHub repository](https://github.com/facebook/react/tree/master/examples/). * [React Page](https://github.com/facebook/react-page) is a simple React project creator to get you up-and-running quickly with React. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload. * [React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master) goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!) diff --git a/docs/getting-started.md b/docs/getting-started.md index d1bfa95dd..1d998cd34 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -44,7 +44,7 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo ``` -The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](jsx-in-depth.html) to learn more about it. In order to translate it to vanilla JavaScript we use `