diff --git a/_config.yml b/_config.yml index 8e13f6d4..8ccf2a0e 100644 --- a/_config.yml +++ b/_config.yml @@ -69,8 +69,8 @@ nav_docs_sections: title: Event System - id: dom-differences title: DOM Differences -nav_cookbook: -- title: Cookbook +nav_tips: +- title: Tips items: - id: introduction title: Introduction @@ -80,7 +80,7 @@ nav_cookbook: title: If-Else in JSX - id: self-closing-tag title: Self-Closing Tag - - id: jsx-root-node-count + - id: maximum-number-of-jsx-root-nodes title: Maximum Number of JSX Root Nodes - id: style-props-value-px title: Shorthand for Specifying Pixel Values in style props @@ -90,7 +90,7 @@ nav_cookbook: title: Value of null for Controlled Input - id: componentWillReceiveProps-not-triggered-after-mounting title: componentWillReceiveProps Not Triggered After Mounting - - id: props-in-getInitialSate-as-anti-pattern + - id: props-in-getInitialState-as-anti-pattern title: Props in getInitialState Is an Anti-Pattern - id: dom-event-listeners title: DOM Event Listeners in a Component diff --git a/_includes/nav_docs.html b/_includes/nav_docs.html index 33dae03c..98e1a151 100644 --- a/_includes/nav_docs.html +++ b/_includes/nav_docs.html @@ -26,14 +26,14 @@ {% endfor %} - - {% for section in site.nav_cookbook %} + + {% for section in site.nav_tips %}

{{ section.title }}

diff --git a/_layouts/cookbook.html b/_layouts/tips.html similarity index 73% rename from _layouts/cookbook.html rename to _layouts/tips.html index bc1cd4f4..74cf0be2 100644 --- a/_layouts/cookbook.html +++ b/_layouts/tips.html @@ -1,6 +1,6 @@ --- layout: default -sectionid: cookbook +sectionid: tips ---
@@ -13,10 +13,10 @@ sectionid: cookbook
{% if page.prev %} - ← Prev + ← Prev {% endif %} {% if page.next %} - Next → + Next → {% endif %}
diff --git a/cookbook/01-introduction.md b/tips/01-introduction.md similarity index 56% rename from cookbook/01-introduction.md rename to tips/01-introduction.md index 81eb21a8..73e24314 100644 --- a/cookbook/01-introduction.md +++ b/tips/01-introduction.md @@ -1,13 +1,15 @@ --- id: introduction title: Introduction -layout: cookbook +layout: tips permalink: introduction.html next: inline-styles.html --- -The React 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. +The React tips section provides bite-sized information that can answer lots of questions you might have and warn you against common pitfalls. ### Contributing -Submit a pull request to the [React repo](https://github.com/facebook/react) following the cookbook entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs IRC on freenode](irc://chat.freenode.net/reactjs) or the [reactjs Google group](http://groups.google.com/group/reactjs). +Submit a pull request to the [React repo](https://github.com/facebook/react) following the cookbook entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs IRC on freenode](irc://chat.freenode.net/reactjs) or the [reactjs Google group](http://groups.google.com/group/reactjs). Also, check the [Tips Wiki][1] for entries in-progress and general guidelines on writing React tips. + +[1]: https://github.com/facebook/react/wiki/Tips-(Previously-Cookbook) diff --git a/cookbook/02-inline-styles.md b/tips/02-inline-styles.md similarity index 97% rename from cookbook/02-inline-styles.md rename to tips/02-inline-styles.md index cd332347..80e89edd 100644 --- a/cookbook/02-inline-styles.md +++ b/tips/02-inline-styles.md @@ -1,7 +1,7 @@ --- id: inline-styles title: Inline Styles -layout: cookbook +layout: tips permalink: inline-styles.html next: if-else-in-JSX.html prev: introduction.html diff --git a/cookbook/03-if-else-in-JSX.md b/tips/03-if-else-in-JSX.md similarity index 98% rename from cookbook/03-if-else-in-JSX.md rename to tips/03-if-else-in-JSX.md index a94d9ae4..02b4a409 100644 --- a/cookbook/03-if-else-in-JSX.md +++ b/tips/03-if-else-in-JSX.md @@ -1,7 +1,7 @@ --- id: if-else-in-JSX title: If-Else in JSX -layout: cookbook +layout: tips permalink: if-else-in-JSX.html prev: inline-styles.html next: self-closing-tag.html diff --git a/cookbook/04-self-closing-tag.md b/tips/04-self-closing-tag.md similarity index 95% rename from cookbook/04-self-closing-tag.md rename to tips/04-self-closing-tag.md index 69c2aada..77688f4e 100644 --- a/cookbook/04-self-closing-tag.md +++ b/tips/04-self-closing-tag.md @@ -1,7 +1,7 @@ --- id: self-closing-tag title: Self-Closing Tag -layout: cookbook +layout: tips permalink: self-closing-tag.html prev: if-else-in-JSX.html next: maximum-number-of-jsx-root-nodes.html diff --git a/cookbook/05-maximum-number-of-jsx-root-nodes.md b/tips/05-maximum-number-of-jsx-root-nodes.md similarity index 97% rename from cookbook/05-maximum-number-of-jsx-root-nodes.md rename to tips/05-maximum-number-of-jsx-root-nodes.md index 744dfd58..0ce319e6 100644 --- a/cookbook/05-maximum-number-of-jsx-root-nodes.md +++ b/tips/05-maximum-number-of-jsx-root-nodes.md @@ -1,7 +1,7 @@ --- id: maximum-number-of-jsx-root-nodes title: Maximum Number of JSX Root Nodes -layout: cookbook +layout: tips permalink: maximum-number-of-jsx-root-nodes.html prev: self-closing-tag.html next: style-props-value-px.html diff --git a/cookbook/06-style-props-value-px.md b/tips/06-style-props-value-px.md similarity index 85% rename from cookbook/06-style-props-value-px.md rename to tips/06-style-props-value-px.md index 9570091f..14805746 100644 --- a/cookbook/06-style-props-value-px.md +++ b/tips/06-style-props-value-px.md @@ -1,7 +1,7 @@ --- -id: style-prop-value-px +id: style-props-value-px title: Shorthand for Specifying Pixel Values in style props -layout: cookbook +layout: tips permalink: style-props-value-px.html prev: maximum-number-of-jsx-root-nodes.html next: children-props-type.html @@ -16,7 +16,7 @@ var divStyle = {height: 10}; // rendered as "height:10px" React.renderComponent(
Hello World!
, mountNode); ``` -See [Inline Styles](/react/docs/cookbook/inline-styles-tip.html) for more info. +See [Inline Styles](/react/docs/tips/inline-styles-tip.html) for more info. Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: diff --git a/cookbook/07-children-props-type.md b/tips/07-children-props-type.md similarity index 98% rename from cookbook/07-children-props-type.md rename to tips/07-children-props-type.md index 65b8bbc9..675b2f74 100644 --- a/cookbook/07-children-props-type.md +++ b/tips/07-children-props-type.md @@ -1,7 +1,7 @@ --- id: children-props-type title: Type of the Children props -layout: cookbook +layout: tips permalink: children-props-type.html prev: style-props-value-px.html next: controlled-input-null-value.html diff --git a/cookbook/08-controlled-input-null-value.md b/tips/08-controlled-input-null-value.md similarity index 87% rename from cookbook/08-controlled-input-null-value.md rename to tips/08-controlled-input-null-value.md index 2caa535c..a3809654 100644 --- a/cookbook/08-controlled-input-null-value.md +++ b/tips/08-controlled-input-null-value.md @@ -1,13 +1,13 @@ --- id: controlled-input-null-value title: Value of null for Controlled Input -layout: cookbook +layout: tips permalink: controlled-input-null-value.html prev: children-props-type.html next: componentWillReceiveProps-not-triggered-after-mounting.html --- -Specifying the `value` prop on a [controlled component](/react/docs/cookbook/forms.html) prevents the user from changing the input unless you desire so. +Specifying the `value` prop on a [controlled component](/react/docs/tips/forms.html) prevents the user from changing the input unless you desire so. You might have run into a problem where `value` is specified, but the input can still be changed without consent. In this case, you might have accidentally set `value` to `undefined` or `null`. diff --git a/cookbook/09-componentWillReceiveProps-not-triggered-after-mounting.md b/tips/09-componentWillReceiveProps-not-triggered-after-mounting.md similarity index 87% rename from cookbook/09-componentWillReceiveProps-not-triggered-after-mounting.md rename to tips/09-componentWillReceiveProps-not-triggered-after-mounting.md index 07c248a8..1a5d0b36 100644 --- a/cookbook/09-componentWillReceiveProps-not-triggered-after-mounting.md +++ b/tips/09-componentWillReceiveProps-not-triggered-after-mounting.md @@ -1,12 +1,12 @@ --- id: componentWillReceiveProps-not-triggered-after-mounting title: componentWillReceiveProps Not Triggered After Mounting -layout: cookbook +layout: tips permalink: componentWillReceiveProps-not-triggered-after-mounting.html prev: controlled-input-null-value.html next: props-in-getInitialState-as-anti-pattern.html --- -`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. +`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](/react/docs/tips/component-specs.html) for the one that suits your needs. The reason for that is because `componentWillReceiveProps` often handles the logic of comparing with the old props and acting upon changes; not triggering it at mounting (where there are no old props) helps in defining what the method does. diff --git a/cookbook/10-props-in-getInitialState-as-anti-pattern.md b/tips/10-props-in-getInitialState-as-anti-pattern.md similarity index 98% rename from cookbook/10-props-in-getInitialState-as-anti-pattern.md rename to tips/10-props-in-getInitialState-as-anti-pattern.md index 9c7fd31e..19f2bcd1 100644 --- a/cookbook/10-props-in-getInitialState-as-anti-pattern.md +++ b/tips/10-props-in-getInitialState-as-anti-pattern.md @@ -1,7 +1,7 @@ --- id: props-in-getInitialState-as-anti-pattern title: Props in getInitialState Is an Anti-Pattern -layout: cookbook +layout: tips permalink: props-in-getInitialState-as-anti-pattern.html prev: componentWillReceiveProps-not-triggered-after-mounting.html next: dom-event-listeners.html diff --git a/cookbook/11-dom-event-listeners.md b/tips/11-dom-event-listeners.md similarity index 87% rename from cookbook/11-dom-event-listeners.md rename to tips/11-dom-event-listeners.md index 80e9e9ba..305a0a4b 100644 --- a/cookbook/11-dom-event-listeners.md +++ b/tips/11-dom-event-listeners.md @@ -1,7 +1,7 @@ --- id: dom-event-listeners title: DOM Event Listeners in a Component -layout: cookbook +layout: tips permalink: dom-event-listeners.html prev: props-in-getInitialState-as-anti-pattern.html next: initial-ajax.html @@ -9,7 +9,7 @@ next: initial-ajax.html > Note: > -> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/cookbook/events.html)). This is good for integrations with other libraries such as jQuery. +> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/tips/events.html)). This is good for integrations with other libraries such as jQuery. Try to resize the window: diff --git a/cookbook/12-initial-ajax.md b/tips/12-initial-ajax.md similarity index 98% rename from cookbook/12-initial-ajax.md rename to tips/12-initial-ajax.md index 9923e284..a07f526f 100644 --- a/cookbook/12-initial-ajax.md +++ b/tips/12-initial-ajax.md @@ -1,7 +1,7 @@ --- id: initial-ajax title: Load Initial Data via AJAX -layout: cookbook +layout: tips permalink: initial-ajax.html prev: dom-event-listeners.html next: false-in-jsx.html diff --git a/cookbook/13-false-in-jsx.md b/tips/13-false-in-jsx.md similarity index 94% rename from cookbook/13-false-in-jsx.md rename to tips/13-false-in-jsx.md index f0fb81e9..f7e4e950 100644 --- a/cookbook/13-false-in-jsx.md +++ b/tips/13-false-in-jsx.md @@ -1,7 +1,7 @@ --- -id: false-in-jsx-tip +id: false-in-jsx title: False in JSX -layout: cookbook +layout: tips permalink: false-in-jsx.html prev: initial-ajax.html ---