diff --git a/blog/index.html b/blog/index.html index a655e4dd97..3ce23fd796 100644 --- a/blog/index.html +++ b/blog/index.html @@ -502,7 +502,7 @@ Is this some sort of template language? Specifically no. This might have been th diff --git a/docs/component-specs.html b/docs/component-specs.html index 357484282a..6954311dff 100644 --- a/docs/component-specs.html +++ b/docs/component-specs.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/displaying-data.html b/docs/displaying-data.html index 2b50703753..068ea69685 100644 --- a/docs/displaying-data.html +++ b/docs/displaying-data.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/dom-differences.html b/docs/dom-differences.html index 8c4bea41bb..bf3b885519 100644 --- a/docs/dom-differences.html +++ b/docs/dom-differences.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/events.html b/docs/events.html index 26b3150036..331e2fac36 100644 --- a/docs/events.html +++ b/docs/events.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/examples.html b/docs/examples.html index 675860e380..18c3ca3316 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/forms.html b/docs/forms.html index c9b42d4264..e17206c5b2 100644 --- a/docs/forms.html +++ b/docs/forms.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + @@ -401,6 +405,15 @@ 
      <textarea name="description" value="This is a description." />

    If you do decide to use children, they will behave like defaultValue.

    +

    Why Select Value? #

    +

    The selected <option> in an HTML <select> is normally specified through that option's selected attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:

    +
      <select value="B">
+    <option value="A">Apple</option>
+    <option value="B">Banana</option>
+    <option value="C">Cranberry</option>
+  </select>
+
    +

    To make an uncontrolled component, defaultValue is used instead.

    diff --git a/docs/getting-started.html b/docs/getting-started.html index 19399baeca..097b894835 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • +
    diff --git a/docs/interactivity-and-dynamic-uis.html b/docs/interactivity-and-dynamic-uis.html index b701ea033d..720fc85e6b 100644 --- a/docs/interactivity-and-dynamic-uis.html +++ b/docs/interactivity-and-dynamic-uis.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + @@ -347,7 +351,7 @@

    With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with the W3C spec, regardless of which browser you're using.

    If you'd like to use React on a touch device (i.e. a phone or tablet), simply call React.initializeTouchEvents(true); to turn them on.

    -

    Under the Hood: autoBind and Event Delegation #

    +

    Under the Hood: Autobinding and Event Delegation #

    Under the hood React does a few things to keep your code performant and easy to understand.

    Autobinding: When creating callbacks in JavaScript you usually need to explicitly bind a method to its instance such that the value of this is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!

    diff --git a/docs/jsx-gotchas.html b/docs/jsx-gotchas.html index 93ccd2905e..323be573a8 100644 --- a/docs/jsx-gotchas.html +++ b/docs/jsx-gotchas.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html index 0436eafc0d..96434da5ec 100644 --- a/docs/jsx-in-depth.html +++ b/docs/jsx-in-depth.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/more-about-refs.html b/docs/more-about-refs.html index 3c36b37849..ea95593c40 100644 --- a/docs/more-about-refs.html +++ b/docs/more-about-refs.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/multiple-components.html b/docs/multiple-components.html index 8bed899910..d85d8f4476 100644 --- a/docs/multiple-components.html +++ b/docs/multiple-components.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/reusable-components.html b/docs/reusable-components.html index 8aff6a66c1..2a72d951da 100644 --- a/docs/reusable-components.html +++ b/docs/reusable-components.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/tags-and-attributes.html b/docs/tags-and-attributes.html index 778da72f85..4de8dd6714 100644 --- a/docs/tags-and-attributes.html +++ b/docs/tags-and-attributes.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/tooling-integration.html b/docs/tooling-integration.html index 113505b731..85495bc9dd 100644 --- a/docs/tooling-integration.html +++ b/docs/tooling-integration.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/top-level-api.html b/docs/top-level-api.html index 9389ef42b1..40f190e536 100644 --- a/docs/top-level-api.html +++ b/docs/top-level-api.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/tutorial.html b/docs/tutorial.html index 74b6877939..2a947a80a1 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/two-way-binding-helpers.html b/docs/two-way-binding-helpers.html index 058e612902..da6c8d251c 100644 --- a/docs/two-way-binding-helpers.html +++ b/docs/two-way-binding-helpers.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/why-react.html b/docs/why-react.html index b9f14aac0d..27f31b51d2 100644 --- a/docs/why-react.html +++ b/docs/why-react.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/docs/working-with-the-browser.html b/docs/working-with-the-browser.html index 0e7b9eef19..b6ce34029d 100644 --- a/docs/working-with-the-browser.html +++ b/docs/working-with-the-browser.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/downloads.html b/downloads.html index 78a0af4059..6c25db5724 100644 --- a/downloads.html +++ b/downloads.html @@ -70,6 +70,12 @@

    React Core 0.5.1 (development) #

    The uncompressed, development version of React core with inline documentation.

    <script src="http://fb.me/react-0.5.1.js"></script>
+

    React With Add-Ons 0.5.1 (production) #

    +

    The compressed, production version of React with add-ons.

    +
    <script src="http://fb.me/react-with-addons-0.5.1.min.js"></script>
+

    React With Add-Ons 0.5.1 (development) #

    +

    The uncompressed, development version of React with add-ons.

    +
    <script src="http://fb.me/react-with-addons-0.5.1.js"></script>

    JSX Transform #

    The JSX transformer used to support XML syntax in JavaScript.

    <script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
diff --git a/feed.xml b/feed.xml
index 95d7396419..fd0369bce2 100644
--- a/feed.xml
+++ b/feed.xml
@@ -78,7 +78,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p><img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
 <div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>&mdash; Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div></p>
 
-				2013-11-18T00:00:00+01:00
+				2013-11-18T00:00:00-08:00
 				http://facebook.github.io/react/blog/2013/11/18/community-roundup-11.html
 				http://facebook.github.io/react/blog/2013/11/18/community-roundup-11.html
 			
@@ -194,7 +194,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&amp;src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; Eldar Djafarov &#x30C3; (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
 
-				2013-11-06T00:00:00+01:00
+				2013-11-06T00:00:00-08:00
 				http://facebook.github.io/react/blog/2013/11/06/community-roundup-10.html
 				http://facebook.github.io/react/blog/2013/11/06/community-roundup-10.html
 			
@@ -340,7 +340,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <h2><a class="anchor" name="and-thats-it"></a>And that&#39;s it <a class="hash-link" href="#and-thats-it">#</a></h2>
 <p>Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you&#39;re used to, remember that code is read far more than it&#39;s written, and it&#39;s extremely easy to read this modular, explicit code. As you start to build large libraries of components you&#39;ll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)</p>
 
-				2013-11-05T00:00:00+01:00
+				2013-11-05T00:00:00-08:00
 				http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
 				http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
 			
@@ -360,7 +360,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <li>Fixed bug with transition and animation event detection.</li>
 </ul>
 
-				2013-10-29T00:00:00+01:00
+				2013-10-29T00:00:00-07:00
 				http://facebook.github.io/react/blog/2013/10/29/react-v0-5-1.html
 				http://facebook.github.io/react/blog/2013/10/29/react-v0-5-1.html
 			
@@ -409,7 +409,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <li>Improved support for maintaining line numbers when transforming.</li>
 </ul>
 
-				2013-10-16T00:00:00+02:00
+				2013-10-16T00:00:00-07:00
 				http://facebook.github.io/react/blog/2013/10/16/react-v0.5.0.html
 				http://facebook.github.io/react/blog/2013/10/16/react-v0.5.0.html
 			
@@ -494,7 +494,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p><a href="http://www.phpied.com/reactive-table/">Read the full article...</a></p>
 </blockquote>
 
-				2013-10-03T00:00:00+02:00
+				2013-10-03T00:00:00-07:00
 				http://facebook.github.io/react/blog/2013/10/03/community-roundup-9.html
 				http://facebook.github.io/react/blog/2013/10/03/community-roundup-9.html
 			
@@ -555,7 +555,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
-				2013-09-24T00:00:00+02:00
+				2013-09-24T00:00:00-07:00
 				http://facebook.github.io/react/blog/2013/09/24/community-roundup-8.html
 				http://facebook.github.io/react/blog/2013/09/24/community-roundup-8.html
 			
@@ -636,7 +636,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p><a href="https://github.com/facebook/react-page/">Try it out ...</a></p>
 </blockquote>
 
-				2013-08-26T00:00:00+02:00
+				2013-08-26T00:00:00-07:00
 				http://facebook.github.io/react/blog/2013/08/26/community-roundup-7.html
 				http://facebook.github.io/react/blog/2013/08/26/community-roundup-7.html
 			
@@ -677,7 +677,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p>For the initial release, we&#39;ve only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your <a href="https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md">contributions</a>!</p>
 
-				2013-08-19T00:00:00+02:00
+				2013-08-19T00:00:00-07:00
 				http://facebook.github.io/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html
 				http://facebook.github.io/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html
 			
@@ -749,7 +749,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ">Read the full post...</a></p>
 </blockquote>
 
-				2013-08-05T00:00:00+02:00
+				2013-08-05T00:00:00-07:00
 				http://facebook.github.io/react/blog/2013/08/05/community-roundup-6.html
 				http://facebook.github.io/react/blog/2013/08/05/community-roundup-6.html
 			
diff --git a/index.html b/index.html
index 8b751bc4bc..923b2f34b5 100644
--- a/index.html
+++ b/index.html
@@ -70,23 +70,25 @@
   
    
   
    
     
    
-      
    Declarative
    
+      
    Just the UI
    
       
    
-        React uses a declarative paradigm that makes it easier to reason about
-        your application.
+        Lots of people use React as the V in MVC.
+        Since React makes no assumptions about the rest of your technology stack,
+        it's easy to try it out on a small feature in an existing project.
       
    
     
    
     
    
-      
    Efficient
    
+      
    Virtual DOM
    
       
    
-        React computes the minimal set of changes necessary to keep your DOM
-        up-to-date.
+        React uses a virtual DOM diff implementation for ultra-high performance. It can also
+        render on the server using Node.js — no heavy browser DOM required.
       
    
     
    
     
    
-      
    Flexible
    
+      
    Data flow
    
       
    
-        React works with the libraries and frameworks that you already know.
+        React implements one-way reactive data flow which reduces boilerplate and is
+        easier to reason about than traditional data binding.
       
    
     
    
   
    
@@ -123,7 +125,7 @@
         This example uses state to track the current list of items as well as
         the text that the user has entered. Although event handlers appear to be
         rendered inline, they will be collected and implemented using event
-        delegation. 
+        delegation.
    diff --git a/js/examples/timer.js b/js/examples/timer.js index 6644cff5bc..1cd9690968 100644 --- a/js/examples/timer.js +++ b/js/examples/timer.js @@ -18,7 +18,7 @@ var Timer = React.createClass({\n\ },\n\ render: function() {\n\ return React.DOM.div({},\n\ - 'Seconds Elapsed: ' + this.state.secondsElapsed\n\ + 'Seconds Elapsed: ', this.state.secondsElapsed\n\ );\n\ }\n\ });\n\ diff --git a/js/live_editor.js b/js/live_editor.js index 68453e1077..5354eff8d8 100644 --- a/js/live_editor.js +++ b/js/live_editor.js @@ -22,7 +22,8 @@ var CodeMirrorEditor = React.createClass({displayName: 'CodeMirrorEditor', mode: 'javascript', lineNumbers: false, matchBrackets: true, - theme: 'solarized-light' + theme: 'solarized-light', + readOnly: this.props.readOnly }); this.editor.on('change', this.onChange); this.onChange(); @@ -82,7 +83,7 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground', } else if (this.state.mode === this.MODES.JS) { content = React.DOM.div( {className:"playgroundJS playgroundStage"}, - this.getDesugaredCode() + this.getDesugaredCode() ); } @@ -111,13 +112,14 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground', } catch (e) { } try { + var desugaredCode = this.getDesugaredCode(); if (this.props.renderCode) { React.renderComponent( - React.DOM.pre(null, this.getDesugaredCode()), + CodeMirrorEditor( {codeText:desugaredCode, readOnly:true} ), mountNode ); } else { - eval(this.getDesugaredCode()); + eval(desugaredCode); } } catch (e) { React.renderComponent( diff --git a/tips/children-props-type.html b/tips/children-props-type.html index a7b6b28b0f..0a15d78b8e 100644 --- a/tips/children-props-type.html +++ b/tips/children-props-type.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/tips/communicate-between-components.html b/tips/communicate-between-components.html new file mode 100644 index 0000000000..5f9c9071c9 --- /dev/null +++ b/tips/communicate-between-components.html @@ -0,0 +1,395 @@ + + + + + + React | Communicate Between Components + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    + + + React + + + +
    +
    + + + +
    +
    + + +
    +

    Quick Start

    + +
    + +
    +

    Guides

    + +
    + +
    +

    Reference

    + +
    + + + + +
    +

    Tips

    + +
    + +
    + + +
    +

    Communicate Between Components

    +
    +

    For parent-child communication, simply pass props.

    + +

    For child-parent communication: +Say your GroceryList component has a list of items generated through an array. When a list item is clicked, you want to display its name:

    +
    /** @jsx React.DOM */
+
+var GroceryList = React.createClass({
+  handleClick: function(i) {
+    console.log('You clicked: ' + this.props.items[i]);
+  },
+
+  render: function() {
+    return (
+      <div>
+        {this.props.items.map(function(item, i) {
+          return (
+            <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
+          );
+        }, this)}  
+      </div>
+    );
+  }
+});
+
+React.renderComponent(
+  <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
+);
+
    +

    Notice the use of bind(this, arg1, arg2, ...): we're simply passing more arguments to handleClick. This is not a new React concept; it's just JavaScript.

    + + +
    + + ← Prev + + +
    + +
    +
    +
    + + +
    +
    A Facebook & Instagram collaboration.
    +
    © 2013 Facebook Inc.
    +
    +
    +
    + + + + diff --git a/tips/componentWillReceiveProps-not-triggered-after-mounting.html b/tips/componentWillReceiveProps-not-triggered-after-mounting.html index e7ae247579..daf6e05e53 100644 --- a/tips/componentWillReceiveProps-not-triggered-after-mounting.html +++ b/tips/componentWillReceiveProps-not-triggered-after-mounting.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/tips/controlled-input-null-value.html b/tips/controlled-input-null-value.html index 6d8a86b695..cad2a7ad9d 100644 --- a/tips/controlled-input-null-value.html +++ b/tips/controlled-input-null-value.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/tips/dom-event-listeners.html b/tips/dom-event-listeners.html index 707385774a..24b5d760f2 100644 --- a/tips/dom-event-listeners.html +++ b/tips/dom-event-listeners.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + @@ -354,6 +358,8 @@

    componentDidMount is called after the component is mounted and has a DOM representation. This is often a place where you would attach generic DOM events.

    +

    Notice that the event callback is bound to the react component and not the original element. React automatically binds methods to the current component instance for you through a process of autobinding.

    +
    diff --git a/tips/false-in-jsx.html b/tips/false-in-jsx.html index 6efe02aafd..1a747a3dff 100644 --- a/tips/false-in-jsx.html +++ b/tips/false-in-jsx.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • +
    @@ -341,6 +345,8 @@ ← Prev + Next → +
    diff --git a/tips/if-else-in-JSX.html b/tips/if-else-in-JSX.html index 102b88264e..037bbf52ce 100644 --- a/tips/if-else-in-JSX.html +++ b/tips/if-else-in-JSX.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/tips/initial-ajax.html b/tips/initial-ajax.html index dab364058b..2c829a6ff7 100644 --- a/tips/initial-ajax.html +++ b/tips/initial-ajax.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + @@ -321,7 +325,7 @@

    Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI.

    -

    This example fetches the desired Github user's lastest gist:

    +

    This example fetches the desired Github user's latest gist:

    /** @jsx React.DOM */
 
 var UserGist = React.createClass({
diff --git a/tips/inline-styles.html b/tips/inline-styles.html
index 782e591334..92e32fd58e 100644
--- a/tips/inline-styles.html
+++ b/tips/inline-styles.html
@@ -310,6 +310,10 @@
             False in JSX
           
         
+          
  • 
+            Communicate Between Components
+          
    • 
+
    diff --git a/tips/introduction.html b/tips/introduction.html index 11b0235c11..31fd3c08d2 100644 --- a/tips/introduction.html +++ b/tips/introduction.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/tips/maximum-number-of-jsx-root-nodes.html b/tips/maximum-number-of-jsx-root-nodes.html index 16834d9b76..f6273c818a 100644 --- a/tips/maximum-number-of-jsx-root-nodes.html +++ b/tips/maximum-number-of-jsx-root-nodes.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/tips/props-in-getInitialState-as-anti-pattern.html b/tips/props-in-getInitialState-as-anti-pattern.html index 796d8b555b..1d05852ca3 100644 --- a/tips/props-in-getInitialState-as-anti-pattern.html +++ b/tips/props-in-getInitialState-as-anti-pattern.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/tips/self-closing-tag.html b/tips/self-closing-tag.html index 94c83c1948..1bad64a06e 100644 --- a/tips/self-closing-tag.html +++ b/tips/self-closing-tag.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • + diff --git a/tips/style-props-value-px.html b/tips/style-props-value-px.html index dc5f049241..529615aecf 100644 --- a/tips/style-props-value-px.html +++ b/tips/style-props-value-px.html @@ -310,6 +310,10 @@ False in JSX +
  • + Communicate Between Components +
    • +