From dd5fbc58599ed7b1d6c9e96064ac28421eafb1ce Mon Sep 17 00:00:00 2001 From: Connor McSheffrey Date: Fri, 20 Sep 2013 15:15:59 -0700 Subject: [PATCH 01/61] Added docs for React cookbook section Introduction and Inline Styles React recipe --- docs/_config.yml | 6 ++++++ docs/docs/cb-01-introduction.md | 13 +++++++++++++ docs/docs/cb-02-inline-styles.md | 27 +++++++++++++++++++++++++++ 3 files changed, 46 insertions(+) create mode 100644 docs/docs/cb-01-introduction.md create mode 100644 docs/docs/cb-02-inline-styles.md diff --git a/docs/_config.yml b/docs/_config.yml index 7e26caf05b..1220ae0a3c 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -55,6 +55,12 @@ nav_docs_sections: title: Add-ons - id: examples title: Examples +- title: Cookbook + items: + - id: introduction + title: Introduction + - id: inline-styles + title: Inline Styles - title: Reference items: - id: top-level-api diff --git a/docs/docs/cb-01-introduction.md b/docs/docs/cb-01-introduction.md new file mode 100644 index 0000000000..f3f39c7319 --- /dev/null +++ b/docs/docs/cb-01-introduction.md @@ -0,0 +1,13 @@ +--- +id: introduction +title: Cookbook Introduction +layout: docs +permalink: introduction.html +next: inline-styles.html +--- + +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](inline-styles.html) recipe as an example. + +### Contributing + +Submit a pull request to the [React repo](https://github.com/facebook/react) with a recipe in the cookbook format (Problem, Solution, Discussion). 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). \ No newline at end of file diff --git a/docs/docs/cb-02-inline-styles.md b/docs/docs/cb-02-inline-styles.md new file mode 100644 index 0000000000..4d3e9973da --- /dev/null +++ b/docs/docs/cb-02-inline-styles.md @@ -0,0 +1,27 @@ +--- +id: inline-styles +title: Inline Styles +layout: docs +permalink: inline-styles.html +--- + +### Problem +You want to put inline style to an element. + +### Solution +Instead of writing a string, create an object whose key is the camelCased version of the style name, and whose value is the style's value, in string: + +```html +/** @jsx React.DOM */ + +var divStyle = { + color: 'white', + backgroundColor: 'lightblue', + WebkitTransition: 'all' // note the capital 'W' here +}; + +React.renderComponent(
Hello World!
, mountNode); +``` + +### Discussion +Style keys are camelCased in order to be consistent with accessing the properties using `node.style.___` in DOM. This also explains why `WebkitTransition` has an uppercase 'W'. \ No newline at end of file From 5f296768a52cc7ea9e1304f1e913e2f0a98bde1b Mon Sep 17 00:00:00 2001 From: Connor McSheffrey Date: Tue, 24 Sep 2013 22:13:26 -0700 Subject: [PATCH 02/61] Moved cookbook recipes into separate directory. Updated nav_docs to loop through cookbook yaml. Added cookbook directory to js/ to add live editing of code samples --- docs/README.md | 1 + docs/_config.yml | 13 +++++++------ docs/_includes/nav_docs.html | 17 ++++++++++++++++- docs/_js/cookbook/inline-styles.js | 10 ++++++++++ docs/_layouts/default.html | 3 +++ docs/{docs => cookbook}/cb-01-introduction.md | 0 .../{docs => cookbook}/cb-02-inline-styles.md | 19 +++++++------------ 7 files changed, 44 insertions(+), 19 deletions(-) create mode 100644 docs/_js/cookbook/inline-styles.js rename docs/{docs => cookbook}/cb-01-introduction.md (100%) rename docs/{docs => cookbook}/cb-02-inline-styles.md (62%) diff --git a/docs/README.md b/docs/README.md index 4db50f03e1..3d14a9bfd8 100644 --- a/docs/README.md +++ b/docs/README.md @@ -21,6 +21,7 @@ Once you have RubyGems and installed Bundler (via `gem install bundler`), use it ```sh $ cd react/docs $ bundle install # Might need sudo. +$ npm install # Might need sudo. ``` ### Instructions diff --git a/docs/_config.yml b/docs/_config.yml index 1220ae0a3c..3f3cc43442 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -55,12 +55,6 @@ nav_docs_sections: title: Add-ons - id: examples title: Examples -- title: Cookbook - items: - - id: introduction - title: Introduction - - id: inline-styles - title: Inline Styles - title: Reference items: - id: top-level-api @@ -75,3 +69,10 @@ nav_docs_sections: title: Event System - id: dom-differences title: DOM Differences +nav_cookbook: +- title: Cookbook + items: + - id: introduction + title: Introduction + - id: inline-styles + title: Inline Styles diff --git a/docs/_includes/nav_docs.html b/docs/_includes/nav_docs.html index e71ece3cb2..c835951844 100644 --- a/docs/_includes/nav_docs.html +++ b/docs/_includes/nav_docs.html @@ -1,4 +1,5 @@
+ {% for section in site.nav_docs_sections %}

{{ section.title }}

@@ -24,4 +25,18 @@
{% endfor %} -
+ + + {% for section in site.nav_cookbook %} +
+

{{ section.title }}

+ +
+ {% endfor %} + \ No newline at end of file diff --git a/docs/_js/cookbook/inline-styles.js b/docs/_js/cookbook/inline-styles.js new file mode 100644 index 0000000000..1167637b26 --- /dev/null +++ b/docs/_js/cookbook/inline-styles.js @@ -0,0 +1,10 @@ +/** + * @jsx React.DOM + */ + +var INLINE_STYLES_COMPONENT = "\/** @jsx React.DOM *\/\r\n\r\nvar divStyle = {\r\n color: \'white\',\r\n backgroundColor: \'lightblue\',\r\n WebkitTransition: \'all\' \/\/ note the capital \'W\' here\r\n};\r\n\r\nReact.renderComponent(
Hello World!<\/div>, mountNode);"; + +React.renderComponent( + ReactPlayground( {codeText:INLINE_STYLES_COMPONENT} ), + document.getElementById('inlineStylesExample') +); diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 61b06b8adb..b565498b33 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -74,6 +74,9 @@
+ {% if page.script %} + + {% endif %} - {% endif %} +