f367d0e707 · samitouri/QOS-React-2

docs/_config.yml

+1

@@ -15,3 +15,4 @@ name: React

15 markdown: redcarpet

16 react_version: 0.4.0a

17 description: A JavaScript library for building user interfaces

18 +relative_permalinks: true

docs/docs/01-why-react.md

+3 -2

@@ -1,8 +1,9 @@

1 ---

2 -id: 01-why-react

2 +id: why-react

3 title: Why React?

4 layout: docs

5 -next: 02-displaying-data.html

5 +permalink: why-react.html

6 +next: displaying-data.html

7 ---

8 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)**.

9

docs/docs/02-displaying-data.md

+4 -3

@@ -1,9 +1,10 @@

1 ---

2 -id: 02-displaying-data

2 +id: displaying-data

3 title: Displaying Data

4 layout: docs

5 -prev: 01-why-react.html

6 -next: 02.1-jsx-in-depth.html

5 +permalink: displaying-data.html

6 +prev: why-react.html

7 +next: jsx-in-depth.html

8 ---

9 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.

10

docs/docs/02.1-jsx-in-depth.md

+5 -4

@@ -1,9 +1,10 @@

1 ---

2 -id: 02.1-jsx-in-depth

2 +id: jsx-in-depth

3 title: JSX in Depth

4 layout: docs

5 -prev: 02-displaying-data.html

6 -next: 02.2-jsx-gotchas.html

5 +permalink: jsx-in-depth.html

6 +prev: displaying-data.html

7 +next: jsx-gotchas.html

8 ---

9 JSX is a JavaScript XML syntax transform recommended (but not required) for use

10 with React.

@@ -172,4 +173,4 @@ efforts include:

173 - JSX neither provides nor requires a runtime library.

174 - JSX does not alter or add to the semantics of JavaScript.

175

175 -JSX is similar to HTML, but not exactly the same. See [JSX gotchas](./02.2-jsx-gotchas.html) for some key differences.

176 +JSX is similar to HTML, but not exactly the same. See [JSX gotchas](./jsx-gotchas.html) for some key differences.

docs/docs/02.2-jsx-gotchas.md

+4 -3

@@ -1,9 +1,10 @@

1 ---

2 -id: 02.2-jsx-gotchas

2 +id: jsx-gotchas

3 title: JSX gotchas

4 layout: docs

5 -prev: 02.1-jsx-in-depth.html

6 -next: 03-interactivity-and-dynamic-uis.html

5 +permalink: jsx-gotchas.html

6 +prev: jsx-in-depth.html

7 +next: interactivity-and-dynamic-uis.html

8 ---

9 JSX looks like HTML but there are some important differences you may run into.

10

docs/docs/03-interactivity-and-dynamic-uis.md

+5 -4

@@ -1,11 +1,12 @@

1 ---

2 -id: 03-interactivity-and-dynamic-uis

2 +id: interactivity-and-dynamic-uis

3 title: Interactivity and dynamic UIs

4 layout: docs

5 -prev: 02.2-jsx-gotchas.html

6 -next: 04-multiple-components.html

5 +permalink: interactivity-and-dynamic-uis.html

6 +prev: jsx-gotchas.html

7 +next: multiple-components.html

8 ---

8 -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.

9 +You've already [learned how to display data](./displaying-data.html) with React. Now let's look at how to make our UIs interactive.

10

11 ## A Simple Example

12

docs/docs/04-multiple-components.md

+4 -3

@@ -1,9 +1,10 @@

1 ---

2 -id: 04-multiple-components

2 +id: multiple-components

3 title: Multiple Components

4 layout: docs

5 -prev: 03-interactivity-and-dynamic-uis.html

6 -next: 05-reusable-components.html

5 +permalink: multiple-components.html

6 +prev: interactivity-and-dynamic-uis.html

7 +next: reusable-components.html

8 ---

9 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.

10

docs/docs/05-reusable-components.md

+5 -4

@@ -1,9 +1,10 @@

1 ---

2 -id: 05-reusable-components

2 +id: reusable-components

3 title: Reusable Components

4 layout: docs

5 -prev: 04-multiple-components.html

6 -next: 06-forms.html

5 +permalink: reusable-components.html

6 +prev: multiple-components.html

7 +next: forms.html

8 ---

9 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.

10

@@ -40,7 +41,7 @@ React.renderComponent(

41

42 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.

43

43 -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.

44 +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.

45

46 ```javascript

47 /** @jsx React.DOM */

docs/docs/06-forms.md

+4 -3

@@ -1,9 +1,10 @@

1 ---

2 -id: 06-forms

2 +id: forms

3 title: Forms

4 layout: docs

5 -prev: 05-reusable-components.html

6 -next: 07-working-with-the-browser.html

5 +permalink: forms.html

6 +prev: reusable-components.html

7 +next: working-with-the-browser.html

8 ---

9 Form components such as `<input>`, `<textarea>`, and `<option>` differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions.

10

docs/docs/07-working-with-the-browser.md

+5 -4

@@ -1,9 +1,10 @@

1 ---

2 -id: 07-working-with-the-browser

2 +id: working-with-the-browser

3 title: Working With the Browser

4 layout: docs

5 -prev: 06-forms.html

6 -next: 07.1-more-about-refs.html

5 +permalink: working-with-the-browser.html

6 +prev: forms.html

7 +next: more-about-refs.html

8 ---

9 React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.

10

@@ -55,7 +56,7 @@ React.renderComponent(

56

57 ## More About Refs

58

58 -To learn more about refs, including ways to use them effectively, see our [more about refs](./07.1-more-about-refs.html) documentation.

59 +To learn more about refs, including ways to use them effectively, see our [more about refs](./more-about-refs.html) documentation.

60

61 ## Component Lifecycle

62

docs/docs/07.1-more-about-refs.md

+4 -3

@@ -1,9 +1,10 @@

1 ---

2 -id: 07.1-more-about-refs

2 +id: more-about-refs

3 title: More About Refs

4 layout: docs

5 -prev: 07-working-with-the-browser.html

6 -next: 08-tooling-integration.html

5 +permalink: more-about-refs.html

6 +prev: working-with-the-browser.html

7 +next: tooling-integration.html

8 ---

9 After returning the structure of your UI from the render method, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render. Often, doing something like this isn't necessary for making data flow through your application, because the Reactive data flow always ensures that the most recent `props` are sent to each child that is output from `render()`. However there are a few cases, where it still might be necessary or beneficial.

10

docs/docs/08-tooling-integration.md

+4 -3

@@ -1,9 +1,10 @@

1 ---

2 -id: 08-tooling-integration

2 +id: tooling-integration

3 title: Tooling integration

4 layout: docs

5 -prev: 07.1-more-about-refs.html

6 -next: 09-reference.html

5 +permalink: tooling-integration.html

6 +prev: more-about-refs.html

7 +next: reference.html

8 ---

9 Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.

10

docs/docs/09-reference.md

+4 -3

@@ -1,8 +1,9 @@

1 ---

2 -id: 09-reference

2 +id: reference

3 title: Reference

4 layout: docs

5 -prev: 08-tooling-integration.html

5 +permalink: reference.html

6 +prev: tooling-integration.html

7 ---

8 ## Examples

9

@@ -165,7 +166,7 @@ componentDidUpdate(object prevProps, object prevState, DOMElement domNode)

166 componentWillUnmount()

167 ```

168

168 -See the [working with the browser](./07-working-with-the-browser.html) documentation for more details on these lifecycle methods.

169 +See the [working with the browser](./working-with-the-browser.html) documentation for more details on these lifecycle methods.

170

171 ## DOM Differences

172

Remove numbers from URLs.