9efd1f5e9b · samitouri/QOS-React-2

docs/_config.yml

+2

@@ -84,6 +84,8 @@ nav_cookbook:

84 title: JSX root node count

85 - id: style-prop-value-px

86 title: Style prop value px

87 + - id: children-prop-type

88 + title: Children prop type

89 - id: controlled-input-null-value

90 title: Controlled input null value

91 - id: componentWillReceiveProps-not-triggered-after-mounting

docs/_layouts/cookbook.html new

+25

@@ -0,0 +1,25 @@

1 +---

2 +layout: default

3 +sectionid: cookbook

4 +---

5 +

6 +<section class="content wrap documentationContent">

7 + {% include nav_docs.html %}

8 +

9 + <div class="inner-content">

10 + <h1>{{ page.title }}</h1>

11 + <div class="subHeader">{{ page.description }}</div>

12 + {{ content }}

13 +

14 + <div class="docs-prevnext">

15 + {% if page.prev %}

16 + <a class="docs-prev" href="/react/cookbook/{{ page.prev }}">← Prev</a>

17 + {% endif %}

18 + {% if page.next %}

19 + <a class="docs-next" href="/react/cookbook/{{ page.next }}">Next →</a>

20 + {% endif %}

21 + </div>

22 +

23 + <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div>

24 + </div>

25 +</section>

docs/cookbook/cb-01-introduction-tip.md

+2 -1

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

1 ---

2 id: introduction-tip

3 title: Cookbook Introduction

4 -layout: docs

4 +layout: cookbook

5 permalink: introduction-tip.html

6 +next: inline-styles.html

7 ---

8

9 The React.js cookbook provides common React tips, bite-sized information that can surprisingly answer lots of questions you might have had and warn you against common pitfalls.

docs/cookbook/cb-01-introduction.md

+3 -2

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

1 ---

2 id: introduction

3 title: Cookbook Introduction

4 -layout: docs

4 +layout: cookbook

5 permalink: introduction.html

6 +next: inline-styles.html

7 ---

8

8 -The React.js cookbook provides solutions for common questions asked when working with the React framework. It's written in the [cookbook format](http://shop.oreilly.com/category/series/cookbooks.do) commonly used by O'Reilly Media. See [Inline Styles](/react/docs/cookbook/inline-styles.html) recipe as an example.

9 +The React.js cookbook provides solutions for common questions asked when working with the React framework. It's written in the [cookbook format](http://shop.oreilly.com/category/series/cookbooks.do) commonly used by O'Reilly Media. See [Inline Styles](/react/cookbook/inline-styles.html) recipe as an example.

10

11 ### Contributing

12

docs/cookbook/cb-02-inline-styles tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: inline-styles-tip

3 title: Inline Styles

4 -layout: docs

4 +layout: cookbook

5 permalink: inline-styles-tip.html

6 +next: if-else-in-JSX.html

7 +prev: introduction.html

8 ---

9

10 In React, inline styles are not specified as a string, but as an object whose key is the camelCased version of the style name, and whose value is the style's value in string:

docs/cookbook/cb-02-inline-styles.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: inline-styles

3 title: Inline Styles

4 -layout: docs

4 +layout: cookbook

5 permalink: inline-styles.html

6 +next: if-else-in-JSX.html

7 +prev: introduction.html

8 ---

9

10 ### Problem

docs/cookbook/cb-03-if-else-in-JSX tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: if-else-in-JSX-tip

3 title: If-Else in JSX

4 -layout: docs

4 +layout: cookbook

5 permalink: if-else-in-JSX-tip.html

6 +prev: inline-styles.html

7 +next: self-closing-tag.html

8 ---

9

10 `if-else` statements don't work inside JSX, since JSX is really just sugar for functions:

docs/cookbook/cb-03-if-else-in-JSX.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: if-else-in-JSX

3 title: If-Else in JSX

4 -layout: docs

4 +layout: cookbook

5 permalink: if-else-in-JSX.html

6 +prev: inline-styles.html

7 +next: self-closing-tag.html

8 ---

9

10 ### Problem

docs/cookbook/cb-04-self-closing-tag tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: self-closing-tag-tip

3 title: Self-Closing Tag

4 -layout: docs

4 +layout: cookbook

5 permalink: self-closing-tag-tip.html

6 +prev: if-else-in-JSX.html

7 +next: jsx-root-node-count.html

8 ---

9

10 In JSX, `<MyComponent />` alone is valid while `<MyComponent>` isn't.

docs/cookbook/cb-04-self-closing-tag.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: self-closing-tag

3 title: Self-Closing Tag

4 -layout: docs

4 +layout: cookbook

5 permalink: self-closing-tag.html

6 +prev: if-else-in-JSX.html

7 +next: jsx-root-node-count.html

8 ---

9

10 ### Problem

docs/cookbook/cb-05-jsx-root-node-count tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: jsx-root-node-count-tip

3 title: Maximum number of JSX root nodes

4 -layout: docs

4 +layout: cookbook

5 permalink: jsx-root-node-count-tip.html

6 +prev: self-closing-tag.html

7 +next: style-prop-value-px.html

8 ---

9

10 Currently, in a component's `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component.

docs/cookbook/cb-05-jsx-root-node-count.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: jsx-root-node-count

3 title: Maximum number of JSX root nodes

4 -layout: docs

4 +layout: cookbook

5 permalink: jsx-root-node-count.html

6 +prev: self-closing-tag.html

7 +next: style-prop-value-px.html

8 ---

9

10 ### Problem

docs/cookbook/cb-06-style-prop-value-px tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: style-prop-value-px-tip

3 title: Shorthand for specifying pixel values in style prop

4 -layout: docs

4 +layout: cookbook

5 permalink: style-prop-value-px-tip.html

6 +prev: jsx-root-node-count.html

7 +next: children-prop-type.html

8 ---

9

10 When specifying a pixel value for your inline `style` prop, React automatically appends the string "px" for you after your number value, so this works:

docs/cookbook/cb-06-style-prop-value-px.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: style-prop-value-px

3 title: Shorthand for specifying pixel values in style prop

4 -layout: docs

4 +layout: cookbook

5 permalink: style-prop-value-px.html

6 +prev: jsx-root-node-count.html

7 +next: children-prop-type.html

8 ---

9

10 ### Problem

docs/cookbook/cb-07-children-prop-type tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: children-prop-type-tip

3 title: Type of the children prop

4 -layout: docs

4 +layout: cookbook

5 permalink: children-prop-type-tip.html

6 +prev: style-prop-value-px.html

7 +next: controlled-input-null-value.html

8 ---

9

10 Usually, a component's `this.props.children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one.

docs/cookbook/cb-07-children-prop-type.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: children-prop-type

3 title: Type of the children prop

4 -layout: docs

4 +layout: cookbook

5 permalink: children-prop-type.html

6 +prev: style-prop-value-px.html

7 +next: controlled-input-null-value.html

8 ---

9

10 ### Problem

docs/cookbook/cb-08-controlled-input-null-value tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: controlled-input-null-value-tip

3 title: Value of null for controlled input

4 -layout: docs

4 +layout: cookbook

5 permalink: controlled-input-null-value-tip.html

6 +prev: children-prop-type.html

7 +next: componentWillReceiveProps-not-triggered-after-mounting.html

8 ---

9

10 Specifying the `value` prop on a [controlled component](/react/docs/cookbook/forms.html) prevents the user from changing the input unless you desire so.

docs/cookbook/cb-08-controlled-input-null-value.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: controlled-input-null-value

3 title: Value of null for controlled input

4 -layout: docs

4 +layout: cookbook

5 permalink: controlled-input-null-value.html

6 +prev: children-prop-type.html

7 +next: componentWillReceiveProps-not-triggered-after-mounting.html

8 ---

9

10 ### Problem

docs/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: componentWillReceiveProps-not-triggered-after-mounting-tip

3 title: componentWillReceiveProps not triggered after mounting

4 -layout: docs

4 +layout: cookbook

5 permalink: componentWillReceiveProps-not-triggered-after-mounting-tip.html

6 +prev: controlled-input-null-value.html

7 +next: props-in-getInitialSate-as-anti-pattern.html

8 ---

9

10 `componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](/react/docs/cookbook/component-specs.html) for the one that suits your needs.

docs/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: componentWillReceiveProps-not-triggered-after-mounting

3 title: componentWillReceiveProps not triggered after mounting

4 -layout: docs

4 +layout: cookbook

5 permalink: componentWillReceiveProps-not-triggered-after-mounting.html

6 +prev: controlled-input-null-value.html

7 +next: props-in-getInitialSate-as-anti-pattern.html

8 ---

9

10 ### Problem

docs/cookbook/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: props-in-getInitialSate-as-anti-pattern-tip

3 title: props in getInitialState is an anti-pattern

4 -layout: docs

4 +layout: cookbook

5 permalink: props-in-getInitialSate-as-anti-pattern-tip.html

6 +prev: componentWillReceiveProps-not-triggered-after-mounting.html

7 +next: dom-event-listeners.html

8 ---

9

10 > Note:

docs/cookbook/cb-10-props-in-getInitialSate-as-anti-pattern.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: props-in-getInitialSate-as-anti-pattern

3 title: props in getInitialState is an anti-pattern

4 -layout: docs

4 +layout: cookbook

5 permalink: props-in-getInitialSate-as-anti-pattern.html

6 +prev: componentWillReceiveProps-not-triggered-after-mounting.html

7 +next: dom-event-listeners.html

8 ---

9

10 ### Problem

docs/cookbook/cb-11-dom-event-listeners tip.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: dom-event-listeners-tip

3 title: DOM event listeners in a component

4 -layout: docs

4 +layout: cookbook

5 permalink: dom-event-listeners-tip.html

6 +prev: props-in-getInitialSate-as-anti-pattern.html

7 +next: initial-ajax.html

8 ---

9

10 > Note:

docs/cookbook/cb-11-dom-event-listeners.md

+3 -1

@@ -1,8 +1,10 @@

1 ---

2 id: dom-event-listeners

3 title: DOM event listeners in a component

4 -layout: docs

4 +layout: cookbook

5 permalink: dom-event-listeners.html

6 +prev: props-in-getInitialSate-as-anti-pattern.html

7 +next: initial-ajax.html

8 ---

9

10 ### Problem

docs/cookbook/cb-12-initial-ajax tip.md

+2 -1

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

1 ---

2 id: initial-ajax-tip

3 title: Load initial data via AJAX

4 -layout: docs

4 +layout: cookbook

5 permalink: initial-ajax-tip.html

6 +prev: dom-event-listeners.html

7 ---

8

9 Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.

docs/cookbook/cb-12-initial-ajax.md

+2 -1

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

1 ---

2 id: initial-ajax

3 title: Load initial data via AJAX

4 -layout: docs

4 +layout: cookbook

5 permalink: initial-ajax.html

6 +prev: dom-event-listeners.html

7 ---

8

9 ### Problem

added seperate cookbook layout (since URL base of next/prev is hardcoded in layout), added next/prev yaml meta to each cookbook entry until I can find a way of generating them dynamically