From 6d37c780edb751d9b181e5526c67dcdfecd9b6d6 Mon Sep 17 00:00:00 2001 From: Vjeux Date: Tue, 19 Nov 2013 23:30:01 +0100 Subject: [PATCH] merging a lot of stuff - splitting addons into 3 pages - add docs for classSet - classSet semicolon missing - className htmlFor - anchors for links --- blog/2013/06/05/why-react.html | 8 +- blog/2013/06/12/community-roundup.html | 8 +- blog/2013/06/19/community-roundup-2.html | 12 +- blog/2013/06/21/react-v0-3-3.html | 6 +- blog/2013/06/27/community-roundup-3.html | 12 +- .../07/02/react-v0-4-autobind-by-default.html | 4 +- blog/2013/07/03/community-roundup-4.html | 8 +- ...-4-prop-validation-and-default-values.html | 4 +- blog/2013/07/17/react-v0-4-0.html | 6 +- blog/2013/07/23/community-roundup-5.html | 12 +- blog/2013/07/26/react-v0-4-1.html | 4 +- .../use-react-and-jsx-in-ruby-on-rails.html | 8 +- blog/2013/08/05/community-roundup-6.html | 10 +- ...-react-and-jsx-in-python-applications.html | 6 +- blog/2013/08/26/community-roundup-7.html | 6 +- blog/2013/09/24/community-roundup-8.html | 12 +- blog/2013/10/03/community-roundup-9.html | 12 +- blog/2013/10/16/react-v0.5.0.html | 8 +- blog/2013/10/29/react-v0-5-1.html | 4 +- blog/2013/11/05/thinking-in-react.html | 16 +- blog/2013/11/06/community-roundup-10.html | 16 +- blog/2013/11/18/community-roundup-11.html | 18 +- blog/index.html | 62 +-- blog/page2/index.html | 46 +- blog/page3/index.html | 34 +- blog/page4/index.html | 42 +- blog/page5/index.html | 16 +- css/react.css | 2 +- docs/addons.html | 192 ++------ docs/animation.html | 436 +++++++++++++++++ docs/class-name-manipulation.html | 395 +++++++++++++++ docs/component-api.html | 40 +- docs/component-specs.html | 52 +- docs/displaying-data.html | 32 +- docs/dom-differences.html | 24 +- docs/events.html | 44 +- docs/examples.html | 28 +- docs/forms.html | 34 +- docs/getting-started.html | 36 +- docs/interactivity-and-dynamic-uis.html | 40 +- docs/jsx-gotchas.html | 30 +- docs/jsx-in-depth.html | 44 +- docs/more-about-refs.html | 34 +- docs/multiple-components.html | 42 +- docs/reusable-components.html | 32 +- docs/tags-and-attributes.html | 45 +- docs/tooling-integration.html | 38 +- docs/top-level-api.html | 38 +- docs/tutorial.html | 62 ++- docs/two-way-binding-helpers.html | 456 ++++++++++++++++++ docs/why-react.html | 34 +- docs/working-with-the-browser.html | 44 +- downloads.html | 10 +- feed.xml | 108 ++--- support.html | 8 +- tips/children-props-type.html | 24 +- ...iveProps-not-triggered-after-mounting.html | 24 +- tips/controlled-input-null-value.html | 24 +- tips/dom-event-listeners.html | 24 +- tips/false-in-jsx.html | 24 +- tips/if-else-in-JSX.html | 24 +- tips/initial-ajax.html | 24 +- tips/inline-styles.html | 24 +- tips/introduction.html | 26 +- tips/maximum-number-of-jsx-root-nodes.html | 24 +- ...ps-in-getInitialState-as-anti-pattern.html | 24 +- tips/self-closing-tag.html | 24 +- tips/style-props-value-px.html | 24 +- 68 files changed, 2491 insertions(+), 603 deletions(-) create mode 100644 docs/animation.html create mode 100644 docs/class-name-manipulation.html create mode 100644 docs/two-way-binding-helpers.html diff --git a/blog/2013/06/05/why-react.html b/blog/2013/06/05/why-react.html index 8dc16ddcc1..b8a483cda4 100644 --- a/blog/2013/06/05/why-react.html +++ b/blog/2013/06/05/why-react.html @@ -92,11 +92,11 @@

There are a lot of JavaScript MVC frameworks out there. Why did we build React and why would you want to use it?

-

React isn't an MVC framework.

+

React isn't an MVC framework. #

React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.

-

React doesn't use templates.

+

React doesn't use templates. #

Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI.

@@ -117,7 +117,7 @@ vulnerabilities.

We've also created JSX, an optional syntax extension, in case you prefer the readability of HTML to raw JavaScript.

-

Reactive updates are dead simple.

+

Reactive updates are dead simple. #

React really shines when your data changes over time.

In a traditional JavaScript application, you need to look at what data changed @@ -147,7 +147,7 @@ reconciliation in action.

Because this re-render is so fast (around 1ms for TodoMVC), the developer doesn't need to explicitly specify data bindings. We've found this approach makes it easier to build apps.

-

HTML is just the beginning.

+

HTML is just the beginning. #

Because React has its own lightweight representation of the document, we can do some pretty cool things with it:

diff --git a/blog/2013/06/12/community-roundup.html b/blog/2013/06/12/community-roundup.html index 367f972f9e..b3380c2792 100644 --- a/blog/2013/06/12/community-roundup.html +++ b/blog/2013/06/12/community-roundup.html @@ -91,7 +91,7 @@

React was open sourced two weeks ago and it's time for a little round-up of what has been going on.

-

Khan Academy Question Editor

+

Khan Academy Question Editor #

It looks like Ben Alpert is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (#reactjs on Freenode). Ben wrote about his experience using React:

@@ -102,7 +102,7 @@

Read the full post...

-

Pimp my Backbone.View (by replacing it with React)

+

Pimp my Backbone.View (by replacing it with React) #

Paul Seiffert wrote a blog post that explains how to integrate React into Backbone applications.

@@ -114,7 +114,7 @@

Read the full post...

-

Using facebook's React with require.js

+

Using facebook's React with require.js #

Mario Mueller wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.

@@ -122,7 +122,7 @@

Read the full post...

-

Origins of React

+

Origins of React #

Pete Hunt explained what differentiates React from other JavaScript libraries in a previous blog post. Lee Byron gives another perspective on Quora:

diff --git a/blog/2013/06/19/community-roundup-2.html b/blog/2013/06/19/community-roundup-2.html index 0bb2549e9a..b66bd5ac5f 100644 --- a/blog/2013/06/19/community-roundup-2.html +++ b/blog/2013/06/19/community-roundup-2.html @@ -91,7 +91,7 @@

Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.

-

Some quick thoughts on React

+

Some quick thoughts on React #

Andrew Greig made a blog post that gives a high level description of what React is.

@@ -105,7 +105,7 @@

Read the full post...

-

React and Socket.IO Chat Application

+

React and Socket.IO Chat Application #

Danial Khosravi made a real-time chat application that interacts with the back-end using Socket.IO.

@@ -114,7 +114,7 @@

Read the full post...

-

React and Other Frameworks

+

React and Other Frameworks #

Pete Hunt wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.

@@ -126,7 +126,7 @@

In the same vein, Markov Twain re-implemented the examples on the front-page with Ember and Vlad Yazhbin re-implemented the tutorial with Angular.

-

Web Components: React & x-tags

+

Web Components: React & x-tags #

Mozilla and Google are actively working on Web Components. Vjeux wrote a proof of concept that shows how to implement them using React.

@@ -135,7 +135,7 @@

Read the full post...

-

React TodoMVC Example

+

React TodoMVC Example #

TodoMVC.com is a website that collects various implementations of the same basic Todo app. Pete Hunt wrote an idiomatic React version.

@@ -146,7 +146,7 @@

Read the source code...

-

JSX is not HTML

+

JSX is not HTML #

Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:

    diff --git a/blog/2013/06/21/react-v0-3-3.html b/blog/2013/06/21/react-v0-3-3.html index 38f11d5ddb..c1197d0022 100644 --- a/blog/2013/06/21/react-v0-3-3.html +++ b/blog/2013/06/21/react-v0-3-3.html @@ -91,17 +91,17 @@

    We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.

    -

    react-tools

    +

    react-tools #

    • Upgrade Commoner so require statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of bin/jsx.
    • Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
    • Freeze our esprima dependency.
    -

    React

    +

    React #

    • Allow reusing the same DOM node to render different components. e.g. React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode); will work now.
    -

    JSXTransformer

    +

    JSXTransformer #

    • Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
    diff --git a/blog/2013/06/27/community-roundup-3.html b/blog/2013/06/27/community-roundup-3.html index b592321757..f0ca42f587 100644 --- a/blog/2013/06/27/community-roundup-3.html +++ b/blog/2013/06/27/community-roundup-3.html @@ -91,7 +91,7 @@

    The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.

    -

    Moving From Backbone To React

    +

    Moving From Backbone To React #

    Clay Allsopp successfully ported Propeller, a fairly big, interaction-heavy JavaScript app, to React.

    @@ -103,7 +103,7 @@

    Read the full post...

    -

    Grunt Task for JSX

    +

    Grunt Task for JSX #

    Eric Clemmons wrote a task for Grunt that applies the JSX transformation to your Javascript files. It also works with Browserify if you want all your files to be concatenated and minified together.

    @@ -125,7 +125,7 @@

    Check out the project ...

-

Backbone/Handlebars Nested Views

+

Backbone/Handlebars Nested Views #

Joel Burget wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.

@@ -137,11 +137,11 @@

Read the full post...

-

JSRomandie Meetup

+

JSRomandie Meetup #

Renault John Lecoultre from BugBuster did a React introduction talk at a JS meetup called JS Romandie last week.

-

CoffeeScript integration

+

CoffeeScript integration #

Vjeux used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.

@@ -156,7 +156,7 @@

Read the full post...

-

Tutorial in Plain Javascript

+

Tutorial in Plain Javascript #

We've seen a lot of people comparing React with various frameworks. Ricardo Tomasi decided to re-implement the tutorial without any framework, just plain Javascript.

diff --git a/blog/2013/07/02/react-v0-4-autobind-by-default.html b/blog/2013/07/02/react-v0-4-autobind-by-default.html index 374e199894..49040a9d9e 100644 --- a/blog/2013/07/02/react-v0-4-autobind-by-default.html +++ b/blog/2013/07/02/react-v0-4-autobind-by-default.html @@ -91,7 +91,7 @@

React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.

-

What is React.autoBind?

+

What is React.autoBind? #

If you take a look at most of our current examples, you'll see us using React.autoBind for event handlers. This is used in place of Function.prototype.bind. Remember that in JS, function calls are late-bound. That means that if you simply pass a function around, the this used inside won't necessarily be the this you expect. Function.prototype.bind creates a new, properly bound, function so that when called, this is exactly what you expect it to be.

Before we launched React, we would write this:

@@ -109,7 +109,7 @@ return <button onClick={this.onClick} />; } }); -

What's Changing in v0.4?

+

What's Changing in v0.4? #

After using React.autoBind for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within React.createClass will already be bound to the correct instance.

Starting with v0.4 you can just write this:

diff --git a/blog/2013/07/03/community-roundup-4.html b/blog/2013/07/03/community-roundup-4.html index 4c62e0cd63..bf8bd56dd5 100644 --- a/blog/2013/07/03/community-roundup-4.html +++ b/blog/2013/07/03/community-roundup-4.html @@ -91,7 +91,7 @@

React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.

-

Khan Academy

+

Khan Academy #

Ben Kamens explains how Ben Alpert and Joel Burget are promoting React inside of Khan Academy. They now have three projects in the works using React.

@@ -108,7 +108,7 @@

Our renderer, post-React, is on the left. A typical math editor's preview is on the right.

-

React Snippets

+

React Snippets #

Over the past several weeks, members of our team, Pete Hunt and Paul O'Shannessy, answered many questions that were asked in the React group. They give a good overview of how to integrate React with other libraries and APIs through the use of Mixins and Lifecycle Methods.

@@ -139,11 +139,11 @@
  • JSFiddle: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
    • -

    Introduction to React Screencast

    +

    Introduction to React Screencast #

    Pete Hunt recorded himself implementing a simple <Blink> tag in React.

    -

    Snake in React

    +

    Snake in React #

    Tom Occhino implemented Snake in 150 lines with React.

    diff --git a/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html b/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html index 543848dbd6..8083ae5173 100644 --- a/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html +++ b/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html @@ -91,7 +91,7 @@

    Many of the questions we got following the public launch of React revolved around props, specifically that people wanted to do validation and to make sure their components had sensible defaults.

    -

    Validation

    +

    Validation #

    Oftentimes you want to validate your props before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your render or componentWillReceiveProps functions, but that gets clunky fast.

    React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.

    @@ -108,7 +108,7 @@ }, ... }); -

    Default Values

    +

    Default Values #

    One common pattern we've seen with our React code is to do something like this:

    React.createClass({
   render: function() {
diff --git a/blog/2013/07/17/react-v0-4-0.html b/blog/2013/07/17/react-v0-4-0.html
index d898226be0..f07d7aea72 100644
--- a/blog/2013/07/17/react-v0-4-0.html
+++ b/blog/2013/07/17/react-v0-4-0.html
@@ -97,7 +97,7 @@
 
    React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.
    
 
 
    When you're ready, go download it!
    
-
    React
    
+
    React #
    
 
      
 
    • Switch from using id attribute to data-reactid to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
      • 
 
    • Support for more DOM elements and attributes (e.g., <canvas>)
      • 
@@ -109,7 +109,7 @@
 
    • We've implemented an improved synthetic event system that conforms to the W3C spec.
      • 
 
    • Updates to your component are batched now, which may result in a significantly faster re-render of components. this.setState now takes an optional callback as its second parameter. If you were using onClick={this.setState.bind(this, state)} previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
      • 
 
    
-
    JSX
    
+
    JSX #
    
 
      
 
    • Support for comment nodes <div>{/* this is a comment and won't be rendered */}</div>
      • 
 
    • Children are now transformed directly into arguments instead of being wrapped in an array
@@ -117,7 +117,7 @@ E.g. <div><Component1/><Component2/></div>
 Previously this would be transformed into React.DOM.div(null, [Component1(null), Component2(null)]).
 If you were using React without JSX previously, your code should still work.
      • 
 
    
-
    react-tools
    
+
    react-tools #
    
 
      
 
    • Fixed a number of bugs when transforming directories
      • 
 
    • No longer re-write require()s to be relative unless specified
      • 
diff --git a/blog/2013/07/23/community-roundup-5.html b/blog/2013/07/23/community-roundup-5.html
index d7b615e04e..5acc2a8b5a 100644
--- a/blog/2013/07/23/community-roundup-5.html
+++ b/blog/2013/07/23/community-roundup-5.html
@@ -91,7 +91,7 @@
 
     
      
       
      We launched the React Facebook Page along with the React v0.4 launch. 700 people already liked it to get updated on the project :)
      
-
      Cross-browser onChange
      
+
      Cross-browser onChange #
      
 
      Ben Alpert from Khan Academy worked on a cross-browser implementation of onChange event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.
      
 
 
      
@@ -101,7 +101,7 @@
 
 
      Read the full post...
      
 
      
-
      React Samples
      
+
      React Samples #
      
 
      Learning a new library is always easier when you have working examples you can play with. jwh put many of them on his react-samples Github repo.
      
 
 
      
@@ -136,7 +136,7 @@
 
    • Toggle #1
      • 
 
    
 
-
    React Chosen Wrapper
    
+
    React Chosen Wrapper #
    
 
    Cheng Lou wrote a wrapper for the Chosen input library called react-chosen. It took just 25 lines to be able to use jQuery component as a React one.
    
 
    React.renderComponent(
   <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
@@ -144,15 +144,15 @@
     <option value="Harvest">Harvest</option>
   </Chosen>
 , document.body);
-
    JSX and ES6 Template Strings
    
+

    JSX and ES6 Template Strings #

    Domenic Denicola wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.

    -

    React Presentation

    +

    React Presentation #

    Tom Occhino and Jordan Walke, React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.

    -

    Docs

    +

    Docs #

    Pete Hunt rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.

    diff --git a/blog/2013/07/26/react-v0-4-1.html b/blog/2013/07/26/react-v0-4-1.html index ff3215a712..ba9512614e 100644 --- a/blog/2013/07/26/react-v0-4-1.html +++ b/blog/2013/07/26/react-v0-4-1.html @@ -91,7 +91,7 @@

    React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.

    -

    React

    +

    React #

    • setState callbacks are now executed in the scope of your component.
    • click events now work on Mobile Safari.
      • @@ -100,7 +100,7 @@
    • Improved support for <iframe> attributes.
    • Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
    -

    JSXTransformer

    +

    JSXTransformer #

    • Improved environment detection so it can be run in a non-browser environment.
    diff --git a/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html b/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html index 9d32d73b98..5ab9b9088a 100644 --- a/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html +++ b/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html @@ -98,7 +98,7 @@
  • To package react.js in a way that's easy to use and easy to update.
  • To allow you to write JSX without an external build step to transform that into JS.
    • -

    Packaging react.js

    +

    Packaging react.js #

    To make react.js available for use client-side, simply add react to your manifest, and declare the variant you'd like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:

    # config/environments/development.rb
 
@@ -109,13 +109,13 @@
 
    // app/assets/javascript/application.js
 
 //= require react
-

    Writing JSX

    +

    Writing JSX #

    When you name your file with myfile.js.jsx, react-rails will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.

    /** @jsx React.DOM */
 React.renderComponent(<MyComponent/>, document.body)
-

    Asset Pipeline

    +

    Asset Pipeline #

    react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.

    -

    Installation

    +

    Installation #

    Installation follows the same process you're familiar with. You can install it globally with gem install react-rails, though we suggest you add the dependency to your Gemfile directly.

    diff --git a/blog/2013/08/05/community-roundup-6.html b/blog/2013/08/05/community-roundup-6.html index 59aba1ea33..4df975ef71 100644 --- a/blog/2013/08/05/community-roundup-6.html +++ b/blog/2013/08/05/community-roundup-6.html @@ -91,10 +91,10 @@

    This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.

    -

    React Game Tutorial

    +

    React Game Tutorial #

    Caleb Cassel wrote a step-by-step tutorial about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.

    -

    Reactify

    +

    Reactify #

    Andrey Popp created a Browserify helper to compile JSX files.

    @@ -105,7 +105,7 @@

    Check it out on Github...

    -

    React Integration with Este

    +

    React Integration with Este #

    Daniel Steigerwald is now using React within Este, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.

    este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
   render: ->
@@ -124,7 +124,7 @@
     ]

    Check it out on Github...

    -

    React Stylus Boilerplate

    +

    React Stylus Boilerplate #

    Zaim Bakar shared his boilerplate to get started with Stylus CSS processor.

    @@ -143,7 +143,7 @@

    Check it out on Github...

    -

    WebFUI

    +

    WebFUI #

    Conrad Barski, author of the popular book Land of Lisp, wants to use React for his ClojureScript library called WebFUI.

    diff --git a/blog/2013/08/19/use-react-and-jsx-in-python-applications.html b/blog/2013/08/19/use-react-and-jsx-in-python-applications.html index fbefa5123f..49127565f6 100644 --- a/blog/2013/08/19/use-react-and-jsx-in-python-applications.html +++ b/blog/2013/08/19/use-react-and-jsx-in-python-applications.html @@ -91,7 +91,7 @@

    Today we're happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

    -

    Usage

    +

    Usage #

    Transform your JSX files via the provided jsx module:

    from react import jsx
 
@@ -108,12 +108,12 @@
 
 # path_for raises IOError if the file doesn't exist.
 react_js = source.path_for('react.min.js')
-

    Django

    +

    Django #

    PyReact includes a JSX compiler for django-pipeline. Add it to your project's pipeline settings like this:

    PIPELINE_COMPILERS = (
   'react.utils.pipeline.JSXCompiler',
 )
-

    Installation

    +

    Installation #

    PyReact is hosted on PyPI, and can be installed with pip:

    $ pip install PyReact
    diff --git a/blog/2013/08/26/community-roundup-7.html b/blog/2013/08/26/community-roundup-7.html index 305d81a31c..27324a776a 100644 --- a/blog/2013/08/26/community-roundup-7.html +++ b/blog/2013/08/26/community-roundup-7.html @@ -101,10 +101,10 @@
  • 15 blog posts
  • 2 early adopters: Khan Academy and Propeller
    • -

    Wolfenstein Rendering Engine Ported to React

    +

    Wolfenstein Rendering Engine Ported to React #

    Pete Hunt ported the render code of the web version of Wolfenstein 3D to React. Check out the demo and render.js file for the implementation.

    -

    React & Meteor

    +

    React & Meteor #

    Ben Newman made a 13-lines wrapper to use React and Meteor together. Meteor handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.

    @@ -127,7 +127,7 @@

    Read more ...

    -

    React Page

    +

    React Page #

    Jordan Walke implemented a complete React project creator called react-page. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.

    diff --git a/blog/2013/09/24/community-roundup-8.html b/blog/2013/09/24/community-roundup-8.html index 658250c09b..9592ec6244 100644 --- a/blog/2013/09/24/community-roundup-8.html +++ b/blog/2013/09/24/community-roundup-8.html @@ -95,7 +95,7 @@

    First, we are organizing a React Hackathon in Facebook's Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!

    We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on StackOverflow using the tag [reactjs]. Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.

    -

    Javascript Jabber

    +

    Javascript Jabber #

    Pete Hunt and Jordan Walke were interviewed on Javascript Jabber for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.

    @@ -109,13 +109,13 @@

    Read the full conversation ...

    -

    JSXTransformer Trick

    +

    JSXTransformer Trick #

    While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.

    -

    Remarkable React

    +

    Remarkable React #

    Stoyan Stefanov gave a talk at BrazilJS about React and wrote an article with the content of the presentation. He goes through the difficulties of writting active apps using the DOM API and shows how React handles it.

    @@ -133,13 +133,13 @@

    Read More ...

    -

    Markdown in React

    +

    Markdown in React #

    Ben Alpert converted marked, a Markdown Javascript implementation, in React: marked-react. Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to escape will not introduce an XSS vulnerability.

    -

    Unite from BugBusters

    +

    Unite from BugBusters #

    Renault John Lecoultre wrote Unite, an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.

    -

    #reactjs IRC Logs

    +

    #reactjs IRC Logs #

    Vjeux re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.

    diff --git a/blog/2013/10/03/community-roundup-9.html b/blog/2013/10/03/community-roundup-9.html index 2bc1e9b2f1..8bfb05b68d 100644 --- a/blog/2013/10/03/community-roundup-9.html +++ b/blog/2013/10/03/community-roundup-9.html @@ -93,7 +93,7 @@

    We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.

    -

    React Hackathon Winner

    +

    React Hackathon Winner #

    Alex Swan implemented Qu.izti.me, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.

    @@ -104,7 +104,7 @@

    Read More...

    -

    JSConf EU Talk: Rethinking Best Practices

    +

    JSConf EU Talk: Rethinking Best Practices #

    Pete Hunt presented React at JSConf EU. He covers three controversial design decisions of React:

      @@ -116,7 +116,7 @@

      The video will be available soon on the JSConf EU website, but in the meantime, here are Pete's slides:

      -

      Pump - Clojure bindings for React

      +

      Pump - Clojure bindings for React #

      Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.

      (ns your.app
   (:require-macros [pump.def-macros :refer [defr]])
@@ -130,7 +130,7 @@
   [:div {:class-name "test"} "hello"])

      Check it out on GitHub...

      -

      JSXHint

      +

      JSXHint #

      Todd Kennedy working at Condé Nast implemented a wrapper on-top of JSHint that first converts JSX files to JS.

      @@ -139,7 +139,7 @@

      Check it out on GitHub...

      -

      Turbo React

      +

      Turbo React #

      Ross Allen working at Mesosphere combined Turbolinks, a library used by Ruby on Rails to speed up page transition, and React.

      @@ -152,7 +152,7 @@

      Check out the demo...

      -

      Reactive Table

      +

      Reactive Table #

      Stoyan Stefanov continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.

      diff --git a/blog/2013/10/16/react-v0.5.0.html b/blog/2013/10/16/react-v0.5.0.html index 4126ac1a3a..ef837a1d16 100644 --- a/blog/2013/10/16/react-v0.5.0.html +++ b/blog/2013/10/16/react-v0.5.0.html @@ -95,11 +95,11 @@

      The biggest change you'll notice as a developer is that we no longer support class in JSX as a way to provide CSS classes. Since this prop was being converted to className at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are a few exceptions where we deviate slightly in an attempt to be consistent internally.

      The other major change in v0.5 is that we've added an additional build - react-with-addons - which adds support for some extras that we've been working on including animations and two-way binding. Read more about these addons in the docs.

      -

      Thanks to Our Community

      +

      Thanks to Our Community #

      We added 22 new people to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our AUTHORS file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.

      It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!

      -

      Changelog

      React

      +

      Changelog #

      React #

      • Memory usage improvements - reduced allocations in core which will help with GC pauses
      • Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
        • @@ -120,11 +120,11 @@
      • Better support for server-side rendering - react-page has helped improve the stability for server-side rendering.
      • Made it possible to use React in environments enforcing a strict Content Security Policy. This also makes it possible to use React to build Chrome extensions.
      -

      React with Addons (New!)

      +

      React with Addons (New!) #

      • Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. Read more in the docs.
      -

      JSX

      +

      JSX #

      • No longer transform class to className as part of the transform! This is a breaking change - if you were using class, you must change this to className or your components will be visually broken.
      • Added warnings to the in-browser transformer to make it clear it is not intended for production use.
        • diff --git a/blog/2013/10/29/react-v0-5-1.html b/blog/2013/10/29/react-v0-5-1.html index 8a8417baff..04062986aa 100644 --- a/blog/2013/10/29/react-v0-5-1.html +++ b/blog/2013/10/29/react-v0-5-1.html @@ -91,14 +91,14 @@

        This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to Ben Alpert, Andrey Popp, and Laurence Rowe for their contributions!

        -

        Changelog

        React

        +

        Changelog #

        React #

        • Fixed bug with <input type="range"> and selection events.
        • Fixed bug with selection and focus.
        • Made it possible to unmount components from the document root.
        • Fixed bug for disabled attribute handling on non-<input> elements.
        -

        React with Addons

        +

        React with Addons #

        • Fixed bug with transition and animation event detection.
        diff --git a/blog/2013/11/05/thinking-in-react.html b/blog/2013/11/05/thinking-in-react.html index 42c8890194..b4205e2459 100644 --- a/blog/2013/11/05/thinking-in-react.html +++ b/blog/2013/11/05/thinking-in-react.html @@ -93,7 +93,7 @@

        React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It's scaled very well for us at Facebook and Instagram.

        One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.

        -

        Start with a mock

        +

        Start with a mock #

        Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:

        Mockup

        @@ -107,7 +107,7 @@ {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"}, {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"} ]; -

        Step 1: break the UI into a component hierarchy

        +

        Step 1: break the UI into a component hierarchy #

        The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!

        But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.

        @@ -143,7 +143,7 @@
      -

      Step 2: Build a static version in React

      +

      Step 2: Build a static version in React #

      Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.

      @@ -155,9 +155,9 @@

      At the end of this step you'll have a library of reusable components that render your data model. The components will only have render() methods since this is a static version of your app. The component at the top of the hierarchy (FilterableProductTable) will take your data model as a prop. If you make a change to your underlying data model and call renderComponent() again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's one-way data flow (also called one-way binding) keeps everything modular, easy to reason about, and fast.

      Simply refer to the React docs if you need help executing this step.

      -

      A brief interlude: props vs state

      +

      A brief interlude: props vs state #

      There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim the official React docs if you aren't sure what the difference is.

      -

      Step 3: Identify the minimal (but complete) representation of UI state

      +

      Step 3: Identify the minimal (but complete) representation of UI state #

      To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with state.

      To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: Don't Repeat Yourself. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.

      @@ -187,7 +187,7 @@
    1. The search text the user has entered
    2. The value of the checkbox
      3. -

      Step 4: Identify where your state should live

      +

      Step 4: Identify where your state should live #

      OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or owns, this state.

      @@ -214,7 +214,7 @@

      Cool, so we've decided that our state lives in FilterableProductTable. First, add a getInitialState() method to FilterableProductTable that returns {filterText: '', inStockOnly: false} to reflect the initial state of your application. Then pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

      You can start seeing how your application will behave: set filterText to "ball" and refresh your app. You'll see the data table is updated correctly.

      -

      Step 5: Add inverse data flow

      +

      Step 5: Add inverse data flow #

      So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in FilterableProductTable.

      @@ -226,7 +226,7 @@

      Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, FilterableProductTable will pass a callback to SearchBar that will fire whenever the state should be updated. We can use the onChange event on the inputs to be notified of it. And the callback passed by FilterableProductTable will call setState() and the app will be updated.

      Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.

      -

      And that's it

      +

      And that's it #

      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're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)

      diff --git a/blog/2013/11/06/community-roundup-10.html b/blog/2013/11/06/community-roundup-10.html index 01e4643c47..02660b8bcb 100644 --- a/blog/2013/11/06/community-roundup-10.html +++ b/blog/2013/11/06/community-roundup-10.html @@ -93,7 +93,7 @@

      This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.

      The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.

      -

      Khan Academy - Officially moving to React

      +

      Khan Academy - Officially moving to React #

      Joel Burget announced at Hack Reactor that new front-end code at Khan Academy should be written in React!

      @@ -107,11 +107,11 @@

      Read the full article

      -

      React: Rethinking best practices

      +

      React: Rethinking best practices #

      Pete Hunt's talk at JSConf EU 2013 is now available in video.

      -

      Server-side React with PHP

      +

      Server-side React with PHP #

      Stoyan Stefanov's series of articles on React has two new entries on how to execute React on the server to generate the initial page load.

      @@ -133,7 +133,7 @@

      Rendered markup on the server:

      -

      TodoMVC Benchmarks

      +

      TodoMVC Benchmarks #

      Webkit has a TodoMVC Benchmark that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):

        @@ -169,10 +169,10 @@

        By default, React "re-renders" all the components when anything changes. This is usually fast enough that you don't need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.

        The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.

        -

        Guess the filter

        +

        Guess the filter #

        Connor McSheffrey implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.

        -

        React vs FruitMachine

        +

        React vs FruitMachine #

        Andrew Betts, director of the Financial Times Labs, posted an article comparing FruitMachine and React.

        @@ -182,7 +182,7 @@

        Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.

        -

        React Brunch

        +

        React Brunch #

        Matthew McCray implemented react-brunch, a JSX compilation step for Brunch.

        @@ -194,7 +194,7 @@

        Read more...

        -

        Random Tweet

        +

        Random Tweet #

        I'm going to start adding a tweet at the end of each round-up. We'll start with this one:

        diff --git a/blog/2013/11/18/community-roundup-11.html b/blog/2013/11/18/community-roundup-11.html index e0664e5955..7c3d2ca44e 100644 --- a/blog/2013/11/18/community-roundup-11.html +++ b/blog/2013/11/18/community-roundup-11.html @@ -91,11 +91,11 @@

        This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!

        -

        Super VanJS 2013 Talk

        +

        Super VanJS 2013 Talk #

        Steve Luscher working at LeanPub made a 30 min talk at Super VanJS. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.

        -

        React Tips

        +

        React Tips #

        Connor McSheffrey and Cheng Lou added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we encourage you to contribute!

        -

        Intro to the React Framework

        +

        Intro to the React Framework #

        Pavan Podila wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.

        @@ -121,16 +121,16 @@

        Read the full article ...

        -

        140-characters textarea

        +

        140-characters textarea #

        Brian Kim wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.

        See the Pen FECGb by Brian Kim (@brainkim) on CodePen

        -

        Genesis Skeleton

        +

        Genesis Skeleton #

        Eric Clemmons is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.

        -

        AgFlow Talk

        +

        AgFlow Talk #

        Robert Zaremba working on AgFlow recently talked in Poland about React.

        @@ -142,7 +142,7 @@
        -

        JSX

        +

        JSX #

        Todd Kennedy working at Condé Nast wrote JSXHint and explains in a blog post his perspective on JSX.

        @@ -153,10 +153,10 @@ Is this some sort of template language? Specifically no. This might have been th

        Read the full article...

        - +

        Photo Gallery #

        Maykel Loomans, designer at Instagram, wrote a gallery for photos he shot using React.

        -

        Random Tweet

        +

        Random Tweet #

        diff --git a/blog/index.html b/blog/index.html index bb8796e02a..a655e4dd97 100644 --- a/blog/index.html +++ b/blog/index.html @@ -91,11 +91,11 @@

        This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!

        -

        Super VanJS 2013 Talk

        +

        Super VanJS 2013 Talk #

        Steve Luscher working at LeanPub made a 30 min talk at Super VanJS. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.

        -

        React Tips

        +

        React Tips #

        Connor McSheffrey and Cheng Lou added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we encourage you to contribute!

        -

        Intro to the React Framework

        +

        Intro to the React Framework #

        Pavan Podila wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.

        @@ -121,16 +121,16 @@

        Read the full article ...

        -

        140-characters textarea

        +

        140-characters textarea #

        Brian Kim wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.

        See the Pen FECGb by Brian Kim (@brainkim) on CodePen

        -

        Genesis Skeleton

        +

        Genesis Skeleton #

        Eric Clemmons is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.

        -

        AgFlow Talk

        +

        AgFlow Talk #

        Robert Zaremba working on AgFlow recently talked in Poland about React.

        @@ -142,7 +142,7 @@
        -

        JSX

        +

        JSX #

        Todd Kennedy working at Condé Nast wrote JSXHint and explains in a blog post his perspective on JSX.

        @@ -153,10 +153,10 @@ Is this some sort of template language? Specifically no. This might have been th

        Read the full article...

        - +

        Photo Gallery #

        Maykel Loomans, designer at Instagram, wrote a gallery for photos he shot using React.

        -

        Random Tweet

        +

        Random Tweet #

        @@ -171,7 +171,7 @@ Is this some sort of template language? Specifically no. This might have been th

        This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.

        The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.

        -

        Khan Academy - Officially moving to React

        +

        Khan Academy - Officially moving to React #

        Joel Burget announced at Hack Reactor that new front-end code at Khan Academy should be written in React!

        @@ -185,11 +185,11 @@ Is this some sort of template language? Specifically no. This might have been th

        Read the full article

        -

        React: Rethinking best practices

        +

        React: Rethinking best practices #

        Pete Hunt's talk at JSConf EU 2013 is now available in video.

        -

        Server-side React with PHP

        +

        Server-side React with PHP #

        Stoyan Stefanov's series of articles on React has two new entries on how to execute React on the server to generate the initial page load.

        @@ -211,7 +211,7 @@ Is this some sort of template language? Specifically no. This might have been th

        Rendered markup on the server:

        -

        TodoMVC Benchmarks

        +

        TodoMVC Benchmarks #

        Webkit has a TodoMVC Benchmark that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):

          @@ -247,10 +247,10 @@ Is this some sort of template language? Specifically no. This might have been th

          By default, React "re-renders" all the components when anything changes. This is usually fast enough that you don't need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.

          The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.

          -

          Guess the filter

          +

          Guess the filter #

          Connor McSheffrey implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.

          -

          React vs FruitMachine

          +

          React vs FruitMachine #

          Andrew Betts, director of the Financial Times Labs, posted an article comparing FruitMachine and React.

          @@ -260,7 +260,7 @@ Is this some sort of template language? Specifically no. This might have been th

          Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.

          -

          React Brunch

          +

          React Brunch #

          Matthew McCray implemented react-brunch, a JSX compilation step for Brunch.

          @@ -272,7 +272,7 @@ Is this some sort of template language? Specifically no. This might have been th

          Read more...

          -

          Random Tweet

          +

          Random Tweet #

          I'm going to start adding a tweet at the end of each round-up. We'll start with this one:

          @@ -288,7 +288,7 @@ Is this some sort of template language? Specifically no. This might have been th

          React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It's scaled very well for us at Facebook and Instagram.

          One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.

          -

          Start with a mock

          +

          Start with a mock #

          Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:

          Mockup

          @@ -302,7 +302,7 @@ Is this some sort of template language? Specifically no. This might have been th {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"}, {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"} ]; -

        Step 1: break the UI into a component hierarchy

        +

        Step 1: break the UI into a component hierarchy #

        The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!

        But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.

        @@ -338,7 +338,7 @@ Is this some sort of template language? Specifically no. This might have been th
      -

      Step 2: Build a static version in React

      +

      Step 2: Build a static version in React #

      Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.

      @@ -350,9 +350,9 @@ Is this some sort of template language? Specifically no. This might have been th

      At the end of this step you'll have a library of reusable components that render your data model. The components will only have render() methods since this is a static version of your app. The component at the top of the hierarchy (FilterableProductTable) will take your data model as a prop. If you make a change to your underlying data model and call renderComponent() again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's one-way data flow (also called one-way binding) keeps everything modular, easy to reason about, and fast.

      Simply refer to the React docs if you need help executing this step.

      -

      A brief interlude: props vs state

      +

      A brief interlude: props vs state #

      There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim the official React docs if you aren't sure what the difference is.

      -

      Step 3: Identify the minimal (but complete) representation of UI state

      +

      Step 3: Identify the minimal (but complete) representation of UI state #

      To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with state.

      To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: Don't Repeat Yourself. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.

      @@ -382,7 +382,7 @@ Is this some sort of template language? Specifically no. This might have been th
    3. The search text the user has entered
    4. The value of the checkbox
      5. -

      Step 4: Identify where your state should live

      +

      Step 4: Identify where your state should live #

      OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or owns, this state.

      @@ -409,7 +409,7 @@ Is this some sort of template language? Specifically no. This might have been th

      Cool, so we've decided that our state lives in FilterableProductTable. First, add a getInitialState() method to FilterableProductTable that returns {filterText: '', inStockOnly: false} to reflect the initial state of your application. Then pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

      You can start seeing how your application will behave: set filterText to "ball" and refresh your app. You'll see the data table is updated correctly.

      -

      Step 5: Add inverse data flow

      +

      Step 5: Add inverse data flow #

      So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in FilterableProductTable.

      @@ -421,7 +421,7 @@ Is this some sort of template language? Specifically no. This might have been th

      Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, FilterableProductTable will pass a callback to SearchBar that will fire whenever the state should be updated. We can use the onChange event on the inputs to be notified of it. And the callback passed by FilterableProductTable will call setState() and the app will be updated.

      Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.

      -

      And that's it

      +

      And that's it #

      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're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)

      @@ -433,14 +433,14 @@ Is this some sort of template language? Specifically no. This might have been th

      This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to Ben Alpert, Andrey Popp, and Laurence Rowe for their contributions!

      -

      Changelog

      React

      +

      Changelog #

      React #

      • Fixed bug with <input type="range"> and selection events.
      • Fixed bug with selection and focus.
      • Made it possible to unmount components from the document root.
      • Fixed bug for disabled attribute handling on non-<input> elements.
      -

      React with Addons

      +

      React with Addons #

      • Fixed bug with transition and animation event detection.
      @@ -458,11 +458,11 @@ Is this some sort of template language? Specifically no. This might have been th

      The biggest change you'll notice as a developer is that we no longer support class in JSX as a way to provide CSS classes. Since this prop was being converted to className at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are a few exceptions where we deviate slightly in an attempt to be consistent internally.

      The other major change in v0.5 is that we've added an additional build - react-with-addons - which adds support for some extras that we've been working on including animations and two-way binding. Read more about these addons in the docs.

      -

      Thanks to Our Community

      +

      Thanks to Our Community #

      We added 22 new people to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our AUTHORS file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.

      It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!

      -

      Changelog

      React

      +

      Changelog #

      React #

      • Memory usage improvements - reduced allocations in core which will help with GC pauses
      • Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
        • @@ -483,11 +483,11 @@ Is this some sort of template language? Specifically no. This might have been th
      • Better support for server-side rendering - react-page has helped improve the stability for server-side rendering.
      • Made it possible to use React in environments enforcing a strict Content Security Policy. This also makes it possible to use React to build Chrome extensions.
      -

      React with Addons (New!)

      +

      React with Addons (New!) #

      • Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. Read more in the docs.
      -

      JSX

      +

      JSX #

      • No longer transform class to className as part of the transform! This is a breaking change - if you were using class, you must change this to className or your components will be visually broken.
      • Added warnings to the in-browser transformer to make it clear it is not intended for production use.
        • diff --git a/blog/page2/index.html b/blog/page2/index.html index a1d124adb6..d436027b95 100644 --- a/blog/page2/index.html +++ b/blog/page2/index.html @@ -93,7 +93,7 @@

        We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.

        -

        React Hackathon Winner

        +

        React Hackathon Winner #

        Alex Swan implemented Qu.izti.me, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.

        @@ -104,7 +104,7 @@

        Read More...

        -

        JSConf EU Talk: Rethinking Best Practices

        +

        JSConf EU Talk: Rethinking Best Practices #

        Pete Hunt presented React at JSConf EU. He covers three controversial design decisions of React:

          @@ -116,7 +116,7 @@

          The video will be available soon on the JSConf EU website, but in the meantime, here are Pete's slides:

          -

          Pump - Clojure bindings for React

          +

          Pump - Clojure bindings for React #

          Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.

          (ns your.app
   (:require-macros [pump.def-macros :refer [defr]])
@@ -130,7 +130,7 @@
   [:div {:class-name "test"} "hello"])

          Check it out on GitHub...

          -

          JSXHint

          +

          JSXHint #

          Todd Kennedy working at Condé Nast implemented a wrapper on-top of JSHint that first converts JSX files to JS.

          @@ -139,7 +139,7 @@

      Check it out on GitHub...

      -

      Turbo React

      +

      Turbo React #

      Ross Allen working at Mesosphere combined Turbolinks, a library used by Ruby on Rails to speed up page transition, and React.

      @@ -152,7 +152,7 @@

      Check out the demo...

      -

      Reactive Table

      +

      Reactive Table #

      Stoyan Stefanov continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.

      @@ -181,7 +181,7 @@

      First, we are organizing a React Hackathon in Facebook's Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!

      We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on StackOverflow using the tag [reactjs]. Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.

      -

      Javascript Jabber

      +

      Javascript Jabber #

      Pete Hunt and Jordan Walke were interviewed on Javascript Jabber for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.

      @@ -195,13 +195,13 @@

      Read the full conversation ...

      -

      JSXTransformer Trick

      +

      JSXTransformer Trick #

      While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.

      -

      Remarkable React

      +

      Remarkable React #

      Stoyan Stefanov gave a talk at BrazilJS about React and wrote an article with the content of the presentation. He goes through the difficulties of writting active apps using the DOM API and shows how React handles it.

      @@ -219,13 +219,13 @@

      Read More ...

      -

      Markdown in React

      +

      Markdown in React #

      Ben Alpert converted marked, a Markdown Javascript implementation, in React: marked-react. Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to escape will not introduce an XSS vulnerability.

      -

      Unite from BugBusters

      +

      Unite from BugBusters #

      Renault John Lecoultre wrote Unite, an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.

      -

      #reactjs IRC Logs

      +

      #reactjs IRC Logs #

      Vjeux re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.

      @@ -249,10 +249,10 @@
    5. 15 blog posts
    6. 2 early adopters: Khan Academy and Propeller
      7. -

      Wolfenstein Rendering Engine Ported to React

      +

      Wolfenstein Rendering Engine Ported to React #

      Pete Hunt ported the render code of the web version of Wolfenstein 3D to React. Check out the demo and render.js file for the implementation.

      -

      React & Meteor

      +

      React & Meteor #

      Ben Newman made a 13-lines wrapper to use React and Meteor together. Meteor handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.

      @@ -275,7 +275,7 @@

      Read more ...

      -

      React Page

      +

      React Page #

      Jordan Walke implemented a complete React project creator called react-page. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.

      @@ -321,7 +321,7 @@

      Today we're happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

      -

      Usage

      +

      Usage #

      Transform your JSX files via the provided jsx module:

      from react import jsx
 
@@ -338,12 +338,12 @@
 
 # path_for raises IOError if the file doesn't exist.
 react_js = source.path_for('react.min.js')
-

      Django

      +

      Django #

      PyReact includes a JSX compiler for django-pipeline. Add it to your project's pipeline settings like this:

      PIPELINE_COMPILERS = (
   'react.utils.pipeline.JSXCompiler',
 )
-

      Installation

      +

      Installation #

      PyReact is hosted on PyPI, and can be installed with pip:

      $ pip install PyReact
      @@ -363,10 +363,10 @@

      This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.

      -

      React Game Tutorial

      +

      React Game Tutorial #

      Caleb Cassel wrote a step-by-step tutorial about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.

      -

      Reactify

      +

      Reactify #

      Andrey Popp created a Browserify helper to compile JSX files.

      @@ -377,7 +377,7 @@

      Check it out on Github...

      -

      React Integration with Este

      +

      React Integration with Este #

      Daniel Steigerwald is now using React within Este, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.

      este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
   render: ->
@@ -396,7 +396,7 @@
     ]

      Check it out on Github...

      -

      React Stylus Boilerplate

      +

      React Stylus Boilerplate #

      Zaim Bakar shared his boilerplate to get started with Stylus CSS processor.

      @@ -415,7 +415,7 @@

      Check it out on Github...

      -

      WebFUI

      +

      WebFUI #

      Conrad Barski, author of the popular book Land of Lisp, wants to use React for his ClojureScript library called WebFUI.

      diff --git a/blog/page3/index.html b/blog/page3/index.html index 9089d8bf19..a44d4be17e 100644 --- a/blog/page3/index.html +++ b/blog/page3/index.html @@ -98,7 +98,7 @@
    7. To package react.js in a way that's easy to use and easy to update.
    8. To allow you to write JSX without an external build step to transform that into JS.
    -

    Packaging react.js

    +

    Packaging react.js #

    To make react.js available for use client-side, simply add react to your manifest, and declare the variant you'd like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:

    # config/environments/development.rb
 
@@ -109,13 +109,13 @@
 
    // app/assets/javascript/application.js
 
 //= require react
-

    Writing JSX

    +

    Writing JSX #

    When you name your file with myfile.js.jsx, react-rails will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.

    /** @jsx React.DOM */
 React.renderComponent(<MyComponent/>, document.body)
-

    Asset Pipeline

    +

    Asset Pipeline #

    react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.

    -

    Installation

    +

    Installation #

    Installation follows the same process you're familiar with. You can install it globally with gem install react-rails, though we suggest you add the dependency to your Gemfile directly.

    @@ -127,7 +127,7 @@

    React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.

    -

    React

    +

    React #

    • setState callbacks are now executed in the scope of your component.
    • click events now work on Mobile Safari.
      • @@ -136,7 +136,7 @@
    • Improved support for <iframe> attributes.
    • Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
    -

    JSXTransformer

    +

    JSXTransformer #

    • Improved environment detection so it can be run in a non-browser environment.
    @@ -152,7 +152,7 @@

    We launched the React Facebook Page along with the React v0.4 launch. 700 people already liked it to get updated on the project :)

    -

    Cross-browser onChange

    +

    Cross-browser onChange #

    Ben Alpert from Khan Academy worked on a cross-browser implementation of onChange event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.

    @@ -162,7 +162,7 @@

    Read the full post...

    -

    React Samples

    +

    React Samples #

    Learning a new library is always easier when you have working examples you can play with. jwh put many of them on his react-samples Github repo.

    @@ -197,7 +197,7 @@
  • Toggle #1
    • -

    React Chosen Wrapper

    +

    React Chosen Wrapper #

    Cheng Lou wrote a wrapper for the Chosen input library called react-chosen. It took just 25 lines to be able to use jQuery component as a React one.

    React.renderComponent(
   <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
@@ -205,15 +205,15 @@
     <option value="Harvest">Harvest</option>
   </Chosen>
 , document.body);
-

    JSX and ES6 Template Strings

    +

    JSX and ES6 Template Strings #

    Domenic Denicola wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.

    -

    React Presentation

    +

    React Presentation #

    Tom Occhino and Jordan Walke, React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.

    -

    Docs

    +

    Docs #

    Pete Hunt rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.

    @@ -256,7 +256,7 @@

    React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.

    When you're ready, go download it!

    -

    React

    +

    React #

    • Switch from using id attribute to data-reactid to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
    • Support for more DOM elements and attributes (e.g., <canvas>)
      • @@ -268,7 +268,7 @@
    • We've implemented an improved synthetic event system that conforms to the W3C spec.
    • Updates to your component are batched now, which may result in a significantly faster re-render of components. this.setState now takes an optional callback as its second parameter. If you were using onClick={this.setState.bind(this, state)} previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
    -

    JSX

    +

    JSX #

    • Support for comment nodes <div>{/* this is a comment and won't be rendered */}</div>
    • Children are now transformed directly into arguments instead of being wrapped in an array @@ -276,7 +276,7 @@ E.g. <div><Component1/><Component2/></div> Previously this would be transformed into React.DOM.div(null, [Component1(null), Component2(null)]). If you were using React without JSX previously, your code should still work.
    -

    react-tools

    +

    react-tools #

    • Fixed a number of bugs when transforming directories
    • No longer re-write require()s to be relative unless specified
      • @@ -291,7 +291,7 @@ If you were using React without JSX previously, your code should still work.

      Many of the questions we got following the public launch of React revolved around props, specifically that people wanted to do validation and to make sure their components had sensible defaults.

      -

      Validation

      +

      Validation #

      Oftentimes you want to validate your props before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your render or componentWillReceiveProps functions, but that gets clunky fast.

      React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.

      @@ -308,7 +308,7 @@ If you were using React without JSX previously, your code should still work.}, ... }); -

      Default Values

      +

    Default Values #

    One common pattern we've seen with our React code is to do something like this:

    React.createClass({
   render: function() {
diff --git a/blog/page4/index.html b/blog/page4/index.html
index 30212b769d..504b0c9ff4 100644
--- a/blog/page4/index.html
+++ b/blog/page4/index.html
@@ -91,7 +91,7 @@
         
    
         
    
          
    React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
    
-
    Khan Academy
    
+
    Khan Academy #
    
 
    Ben Kamens explains how Ben Alpert and Joel Burget are promoting React inside of Khan Academy. They now have three projects in the works using React.
    
 
 
    
@@ -108,7 +108,7 @@
 
    Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
 
    
 
    
-
    React Snippets
    
+
    React Snippets #
    
 
    Over the past several weeks, members of our team, Pete Hunt and Paul O'Shannessy, answered many questions that were asked in the React group. They give a good overview of how to integrate React with other libraries and APIs through the use of Mixins and Lifecycle Methods.
    
 
 
    
@@ -139,11 +139,11 @@
 
  • JSFiddle: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
    • 
 
 
    
-
    Introduction to React Screencast
    
+
    Introduction to React Screencast #
    
 
    Pete Hunt recorded himself implementing a simple <Blink> tag in React.
    
 
 
    
-
    Snake in React
    
+
    Snake in React #
    
 
    Tom Occhino implemented Snake in 150 lines with React.
    
 
 
    
@@ -160,7 +160,7 @@
         
    
         
    
          
    React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
    
-
    What is React.autoBind?
    
+
    What is React.autoBind? #
    
 
    If you take a look at most of our current examples, you'll see us using React.autoBind for event handlers. This is used in place of Function.prototype.bind. Remember that in JS, function calls are late-bound. That means that if you simply pass a function around, the this used inside won't necessarily be the this you expect. Function.prototype.bind creates a new, properly bound, function so that when called, this is exactly what you expect it to be.
    
 
 
    Before we launched React, we would write this:
    
@@ -178,7 +178,7 @@
     return <button onClick={this.onClick} />;
   }
 });
-

    What's Changing in v0.4?

    +

    What's Changing in v0.4? #

    After using React.autoBind for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within React.createClass will already be bound to the correct instance.

    Starting with v0.4 you can just write this:

    @@ -200,7 +200,7 @@

    The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.

    -

    Moving From Backbone To React

    +

    Moving From Backbone To React #

    Clay Allsopp successfully ported Propeller, a fairly big, interaction-heavy JavaScript app, to React.

    @@ -212,7 +212,7 @@

    Read the full post...

    -

    Grunt Task for JSX

    +

    Grunt Task for JSX #

    Eric Clemmons wrote a task for Grunt that applies the JSX transformation to your Javascript files. It also works with Browserify if you want all your files to be concatenated and minified together.

    @@ -234,7 +234,7 @@

    Check out the project ...

    -

    Backbone/Handlebars Nested Views

    +

    Backbone/Handlebars Nested Views #

    Joel Burget wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.

    @@ -246,11 +246,11 @@

    Read the full post...

    -

    JSRomandie Meetup

    +

    JSRomandie Meetup #

    Renault John Lecoultre from BugBuster did a React introduction talk at a JS meetup called JS Romandie last week.

    -

    CoffeeScript integration

    +

    CoffeeScript integration #

    Vjeux used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.

    @@ -265,7 +265,7 @@

    Read the full post...

    -

    Tutorial in Plain Javascript

    +

    Tutorial in Plain Javascript #

    We've seen a lot of people comparing React with various frameworks. Ricardo Tomasi decided to re-implement the tutorial without any framework, just plain Javascript.

    @@ -283,17 +283,17 @@

    We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.

    -

    react-tools

    +

    react-tools #

    • Upgrade Commoner so require statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of bin/jsx.
    • Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
    • Freeze our esprima dependency.
    -

    React

    +

    React #

    • Allow reusing the same DOM node to render different components. e.g. React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode); will work now.
    -

    JSXTransformer

    +

    JSXTransformer #

    • Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
    @@ -307,7 +307,7 @@

    Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.

    -

    Some quick thoughts on React

    +

    Some quick thoughts on React #

    Andrew Greig made a blog post that gives a high level description of what React is.

    @@ -321,7 +321,7 @@

    Read the full post...

    -

    React and Socket.IO Chat Application

    +

    React and Socket.IO Chat Application #

    Danial Khosravi made a real-time chat application that interacts with the back-end using Socket.IO.

    @@ -330,7 +330,7 @@

    Read the full post...

    -

    React and Other Frameworks

    +

    React and Other Frameworks #

    Pete Hunt wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.

    @@ -342,7 +342,7 @@

    In the same vein, Markov Twain re-implemented the examples on the front-page with Ember and Vlad Yazhbin re-implemented the tutorial with Angular.

    -

    Web Components: React & x-tags

    +

    Web Components: React & x-tags #

    Mozilla and Google are actively working on Web Components. Vjeux wrote a proof of concept that shows how to implement them using React.

    @@ -351,7 +351,7 @@

    Read the full post...

    -

    React TodoMVC Example

    +

    React TodoMVC Example #

    TodoMVC.com is a website that collects various implementations of the same basic Todo app. Pete Hunt wrote an idiomatic React version.

    @@ -362,7 +362,7 @@

    Read the source code...

    -

    JSX is not HTML

    +

    JSX is not HTML #

    Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:

      diff --git a/blog/page5/index.html b/blog/page5/index.html index 7d41d3a0c9..0dc18e4520 100644 --- a/blog/page5/index.html +++ b/blog/page5/index.html @@ -91,7 +91,7 @@

      React was open sourced two weeks ago and it's time for a little round-up of what has been going on.

      -

      Khan Academy Question Editor

      +

      Khan Academy Question Editor #

      It looks like Ben Alpert is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (#reactjs on Freenode). Ben wrote about his experience using React:

      @@ -102,7 +102,7 @@

      Read the full post...

      -

      Pimp my Backbone.View (by replacing it with React)

      +

      Pimp my Backbone.View (by replacing it with React) #

      Paul Seiffert wrote a blog post that explains how to integrate React into Backbone applications.

      @@ -114,7 +114,7 @@

      Read the full post...

      -

      Using facebook's React with require.js

      +

      Using facebook's React with require.js #

      Mario Mueller wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.

      @@ -122,7 +122,7 @@

      Read the full post...

      -

      Origins of React

      +

      Origins of React #

      Pete Hunt explained what differentiates React from other JavaScript libraries in a previous blog post. Lee Byron gives another perspective on Quora:

      @@ -143,11 +143,11 @@

      There are a lot of JavaScript MVC frameworks out there. Why did we build React and why would you want to use it?

      -

      React isn't an MVC framework.

      +

      React isn't an MVC framework. #

      React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.

      -

      React doesn't use templates.

      +

      React doesn't use templates. #

      Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI.

      @@ -168,7 +168,7 @@ vulnerabilities.

      We've also created JSX, an optional syntax extension, in case you prefer the readability of HTML to raw JavaScript.

      -

      Reactive updates are dead simple.

      +

      Reactive updates are dead simple. #

      React really shines when your data changes over time.

      In a traditional JavaScript application, you need to look at what data changed @@ -198,7 +198,7 @@ reconciliation in action.

      Because this re-render is so fast (around 1ms for TodoMVC), the developer doesn't need to explicitly specify data bindings. We've found this approach makes it easier to build apps.

      -

      HTML is just the beginning.

      +

      HTML is just the beginning. #

      Because React has its own lightweight representation of the document, we can do some pretty cool things with it:

      diff --git a/css/react.css b/css/react.css index 90ffe7aa44..08080f834b 100644 --- a/css/react.css +++ b/css/react.css @@ -1 +1 @@ -html{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:17px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#268bd2}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#637c84}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#cb4b16}.cm-s-solarized-light span.cm-tag{color:#657b83}.cm-s-solarized-light span.cm-attribute{color:#586e75;font-weight:bold}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1;font-weight:bold}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;min-width:960px}.wrap{width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}h1.anchor,h2.anchor,h3.anchor,h4.anchor,h5.anchor,h6.anchor{position:relative;top:-50px;z-index:-1}h1.anchor>a,h2.anchor>a,h3.anchor>a,h4.anchor>a,h5.anchor>a,h6.anchor>a{color:#484848;position:relative;top:50px}h1.anchor>a:hover,h2.anchor>a:hover,h3.anchor>a:hover,h4.anchor>a:hover,h5.anchor>a:hover,h6.anchor>a:hover{text-decoration:underline}.nav-main{*zoom:1;background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:before,.nav-main:after{content:" ";display:table}.nav-main:after{clear:both}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{float:right;margin:0}.nav-main .nav-site li{margin:0}.nav-main .nav-site a{padding:0 8px;text-transform:uppercase;letter-spacing:1px;line-height:50px;display:inline-block;height:50px;color:#aaa}.nav-main .nav-site a:hover{color:#fafafa}.nav-main .nav-site a.active{color:#fafafa;border-bottom:3px solid #cc7a6f;background:#333}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px}.nav-main .nav-logo{background-image:url("../img/logo_small.png");vertical-align:middle}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-main .nav-logo{background-image:url("../img/logo_small@2x.png");background-size:38px 38px}}.nav-main ul{display:inline}.nav-main li{display:inline}.hero{height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{margin-top:60px;text-align:center}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin-left:20px}.nav-docs li{margin:0}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:400px}.marketing-row{*zoom:1;margin:50px 0}.marketing-row:before,.marketing-row:after{content:" ";display:table}.marketing-row:after{clear:both}.marketing-col{float:left;margin-right:40px;width:280px}.marketing-col h3{color:#2d2d2d;font-size:24px;font-weight:normal;text-transform:uppercase}.marketing-col p{font-size:16px}.marketing-col:last-child{margin-right:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev{*zoom:1}.docs-nextprev:before,.docs-nextprev:after{content:" ";display:table}.docs-nextprev:after{clear:both}.docs-prev{float:left}.docs-next{float:right}footer{font-size:13px;font-weight:600;margin-top:36px;margin-bottom:18px;overflow:auto}section.black content{padding-bottom:18px}.blogContent{*zoom:1;padding-top:20px}.blogContent:before,.blogContent:after{content:" ";display:table}.blogContent:after{clear:both}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.documentationContent{*zoom:1;padding-top:20px}.documentationContent:before,.documentationContent:after{content:" ";display:table}.documentationContent:after{clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(204,122,111,0.1);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p:last-child{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:14px;width:600px}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}.button{background:-webkit-linear-gradient( #9a9a9a,#646464);background:linear-gradient( #9a9a9a,#646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient( #77a3d2,#4783c2);background:linear-gradient( #77a3d2,#4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:650px}.nosidebar .inner-content{float:none;margin:0 auto}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}div.CodeMirror-linenumber:after{content:'.'}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}.cm-s-default span.cm-string-2{color:inherit}.playground{*zoom:1}.playground:before,.playground:after{content:" ";display:table}.playground:after{clear:both}.playground::before{border-bottom:none !important;border-radius:3px 3px 0 0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:'Live editor'}.playground::before,.playgroundCode,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px}.MarkdownEditor textarea{width:100%;height:100px}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media screen and (max-width: 960px){.nav-main{position:static}.container{padding-top:0}}.post{margin-bottom:30px}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right} +html{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:17px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#268bd2}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#637c84}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#cb4b16}.cm-s-solarized-light span.cm-tag{color:#657b83}.cm-s-solarized-light span.cm-attribute{color:#586e75;font-weight:bold}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1;font-weight:bold}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;min-width:960px}.wrap{width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none}.nav-main{*zoom:1;background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:before,.nav-main:after{content:" ";display:table}.nav-main:after{clear:both}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{float:right;margin:0}.nav-main .nav-site li{margin:0}.nav-main .nav-site a{padding:0 8px;text-transform:uppercase;letter-spacing:1px;line-height:50px;display:inline-block;height:50px;color:#aaa}.nav-main .nav-site a:hover{color:#fafafa}.nav-main .nav-site a.active{color:#fafafa;border-bottom:3px solid #cc7a6f;background:#333}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px}.nav-main .nav-logo{background-image:url("../img/logo_small.png");vertical-align:middle}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-main .nav-logo{background-image:url("../img/logo_small@2x.png");background-size:38px 38px}}.nav-main ul{display:inline}.nav-main li{display:inline}.hero{height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{margin-top:60px;text-align:center}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin-left:20px}.nav-docs li{margin:0}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:400px}.marketing-row{*zoom:1;margin:50px 0}.marketing-row:before,.marketing-row:after{content:" ";display:table}.marketing-row:after{clear:both}.marketing-col{float:left;margin-right:40px;width:280px}.marketing-col h3{color:#2d2d2d;font-size:24px;font-weight:normal;text-transform:uppercase}.marketing-col p{font-size:16px}.marketing-col:last-child{margin-right:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev{*zoom:1}.docs-nextprev:before,.docs-nextprev:after{content:" ";display:table}.docs-nextprev:after{clear:both}.docs-prev{float:left}.docs-next{float:right}footer{font-size:13px;font-weight:600;margin-top:36px;margin-bottom:18px;overflow:auto}section.black content{padding-bottom:18px}.blogContent{*zoom:1;padding-top:20px}.blogContent:before,.blogContent:after{content:" ";display:table}.blogContent:after{clear:both}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.documentationContent{*zoom:1;padding-top:20px}.documentationContent:before,.documentationContent:after{content:" ";display:table}.documentationContent:after{clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(204,122,111,0.1);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p:last-child{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:14px;width:600px}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}.button{background:-webkit-linear-gradient( #9a9a9a,#646464);background:linear-gradient( #9a9a9a,#646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient( #77a3d2,#4783c2);background:linear-gradient( #77a3d2,#4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:650px}.nosidebar .inner-content{float:none;margin:0 auto}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}div.CodeMirror-linenumber:after{content:'.'}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}.cm-s-default span.cm-string-2{color:inherit}.playground{*zoom:1}.playground:before,.playground:after{content:" ";display:table}.playground:after{clear:both}.playground::before{border-bottom:none !important;border-radius:3px 3px 0 0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:'Live editor'}.playground::before,.playgroundCode,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px}.MarkdownEditor textarea{width:100%;height:100px}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media screen and (max-width: 960px){.nav-main{position:static}.container{padding-top:0}}.post{margin-bottom:30px}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right} diff --git a/docs/addons.html b/docs/addons.html index d19939b099..b87aa67a82 100644 --- a/docs/addons.html +++ b/docs/addons.html @@ -165,9 +165,31 @@
    • - Add-ons + Add-Ons + +
    • @@ -297,167 +319,15 @@

      Add-ons

      -

      React.addons is where we park some useful utilities for building React apps. These should be considered experimental but will eventually be rolled into core or a blessed utilities library.

      -

      CSS Animation and Transitions

      -

      ReactTransitions is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. ReactTransitions is inspired by the excellent ng-animate library.

      -

      Getting Started

      -

      ReactTransitionGroup is the interface to ReactTransitions. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.

      -
      /** @jsx React.DOM */
+    
      React.addons is where we park some useful utilities for building React apps. These should be considered experimental but will eventually be rolled into core or a blessed utilities library:
      
 
-var ReactTransitionGroup = React.addons.TransitionGroup;
+
        
+
      • ReactTransitions, for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
        • 
+
      • ReactLink, to simplify the coordination between user's form input data and and the component's state.
        • 
+
      • classSet, for manipulating the DOM class string a bit more cleanly.
        • 
+
      
 
-var TodoList = React.createClass({
-  getInitialState: function() {
-    return {items: ['hello', 'world', 'click', 'me']};
-  },
-  handleAdd: function() {
-    var newItems =
-      this.state.items.concat([prompt('Enter some text')]);
-    this.setState({items: newItems});
-  },
-  handleRemove: function(i) {
-    var newItems = this.state.items;
-    newItems.splice(i, 1)
-    this.setState({items: newItems});
-  },
-  render: function() {
-    var items = this.state.items.map(function(item, i) {
-      return (
-        <div key={i} onClick={this.handleRemove.bind(this, i)}>
-          {item}
-        </div>
-      );
-    }.bind(this));
-    return (
-      <div>
-        <div><button onClick={this.handleAdd} /></div>
-        <ReactTransitionGroup transitionName="example">
-          {items}
-        </ReactTransitionGroup>
-      </div>
-    );
-  }
-});
-
      -

      In this component, when a new item is added ReactTransitionGroup it will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the transitionName prop.

      - -

      You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:

      -
      .example-enter {
-  opacity: 0.01;
-  transition: opacity .5s ease-in;
-}
-
-.example-enter.example-enter-active {
-  opacity: 1;
-}
-
      -

      You'll notice that when you try to remove an item ReactTransitionGroup keeps it in the DOM. If you're using an unminified build of React you'll see a warning that React was expecting an animation or transition to occur. That's because ReactTransitionGroup keeps your DOM elements on the page until the animation completes. Try adding this CSS:

      -
      .example-leave {
-  opacity: 1;
-  transition: opacity .5s ease-in;
-}
-
-.example-leave.example-leave-active {
-  opacity: 0.01;
-}
-

      Disabling Animations

      -

      You can disable animating enter or leave animations if you want. For example, sometimes you may want an enter animation and no leave animation, but ReactTransitionGroup waits for an animation to complete before removing your DOM node. You can add transitionEnter={false} or transitionLeave={false} props to ReactTransitionGroup to disable these animations.

      -

      Rendering a Different Component

      -

      By default ReactTransitionGroup renders as a span. You can change this behavior by providing a component prop. For example, here's how you would render a <ul>:

      -
      <ReactTransitionGroup
-  transitionName="example"
-  component={React.DOM.ul}>
-  ...
-</ReactTransitionGroup>
-
      -

      component does not need to be a DOM component. It can be any component you want; even one you've written yourself!

      - -

      ReactLink is an easy way to express two-way binding with React.

      - -

      In React, data flows one way: from owner to child. This is because data only flows one direction in the Von Neumann model of computing. You can think of it as "one-way data binding."

      - -

      However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React state when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.

      - -

      In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call setState() on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See our forms documentation for more information.

      - -

      Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React state -- is concise and supports a wide variety of applications. We've provided ReactLink: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React state.

      - -
      -

      Note:

      - -

      ReactLink is just a thin wrapper and convention around the onChange/setState() pattern. It doesn't fundamentally change how data flows in your React application.

      -
      - -

      Here's a simple form example without using ReactLink:

      -
      /** @jsx React.DOM */
-
-var NoLink = React.createClass({
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  handleChange: function(event) {
-    this.setState({value: event.target.value});
-  },
-  render: function() {
-    var value = this.state.value;
-    return <input type="text" value={value} onChange={this.handleChange} />;
-  }
-});
-
      -

      This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use ReactLink to save us some typing:

      -
      /** @jsx React.DOM */
-
-var WithLink = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  render: function() {
-    return <input type="text" valueLink={this.linkState('value')} />;
-  }
-});
-
      -

      LinkedStateMixin adds a method ot your React component called linkState(). linkState() returns a ReactLink object which contains the current value of the React state and a callback to change it.

      - -

      ReactLink objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.

      -

      Under the Hood

      -

      There are two sides to ReactLink: the place where you create the ReactLink instance and the place where you use it. To prove how simple ReactLink is, let's rewrite each side separately to be more explicit.

      -
      /** @jsx React.DOM */
-
-var WithoutMixin = React.createClass({
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  handleChange: function(newValue) {
-    this.setState({value: newValue});
-  },
-  render: function() {
-    var valueLink = {
-      value: this.state.value,
-      requestChange: this.handleChange
-    };
-    return <input type="text" valueLink={valueLink} />;
-  }
-});
-
      -

      As you can see, ReactLink objects are very simple objects that just have a value and requestChange prop. And LinkedStateMixin is similarly simple: it just populates those fields with a value from this.state and a callback that calls this.setState().

      -
      /** @jsx React.DOM */
-
-var WithoutLink = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  render: function() {
-    var valueLink = this.linkState('value');
-    var handleChange = function(e) {
-      valueLink.requestChange(e.target.value);
-    };
-    return <input type="text" value={valueLink.value} onChange={handleChange} />;
-  }
-});
-
      -

      The valueLink prop is also quite simple. It simply handles the onChange event and calls this.props.valueLink.requestChange() and also uses this.props.valueLink.value instead of this.props.value. That's it!

      +

      To get the add-ons, use react-with-addons.js (and its minified counterpart) rather than the common react.js.

      @@ -465,7 +335,7 @@ ← Prev - Next → + Next →
      diff --git a/docs/animation.html b/docs/animation.html new file mode 100644 index 0000000000..9b8c3283dd --- /dev/null +++ b/docs/animation.html @@ -0,0 +1,436 @@ + + + + + + React | Animation + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      + +
      +
      + + + React + + + +
      +
      + + + +
      +
      + + +
      +

      Quick Start

      + +
      + +
      +

      Guides

      + +
      + +
      +

      Reference

      + +
      + + + + +
      +

      Tips

      + +
      + +
      + + +
      +

      Animation

      +
      +

      ReactTransitions is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent ng-animate library.

      +

      Getting Started #

      +

      ReactTransitionGroup is the interface to ReactTransitions. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.

      +
      /** @jsx React.DOM */
+
+var ReactTransitionGroup = React.addons.TransitionGroup;
+
+var TodoList = React.createClass({
+  getInitialState: function() {
+    return {items: ['hello', 'world', 'click', 'me']};
+  },
+  handleAdd: function() {
+    var newItems =
+      this.state.items.concat([prompt('Enter some text')]);
+    this.setState({items: newItems});
+  },
+  handleRemove: function(i) {
+    var newItems = this.state.items;
+    newItems.splice(i, 1)
+    this.setState({items: newItems});
+  },
+  render: function() {
+    var items = this.state.items.map(function(item, i) {
+      return (
+        <div key={i} onClick={this.handleRemove.bind(this, i)}>
+          {item}
+        </div>
+      );
+    }.bind(this));
+    return (
+      <div>
+        <div><button onClick={this.handleAdd} /></div>
+        <ReactTransitionGroup transitionName="example">
+          {items}
+        </ReactTransitionGroup>
+      </div>
+    );
+  }
+});
+
      +

      In this component, when a new item is added to ReactTransitionGroup it will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the transitionName prop.

      + +

      You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:

      +
      .example-enter {
+  opacity: 0.01;
+  transition: opacity .5s ease-in;
+}
+
+.example-enter.example-enter-active {
+  opacity: 1;
+}
+
      +

      You'll notice that when you try to remove an item ReactTransitionGroup keeps it in the DOM. If you're using an unminified build of React with add-ons you'll see a warning that React was expecting an animation or transition to occur. That's because ReactTransitionGroup keeps your DOM elements on the page until the animation completes. Try adding this CSS:

      +
      .example-leave {
+  opacity: 1;
+  transition: opacity .5s ease-in;
+}
+
+.example-leave.example-leave-active {
+  opacity: 0.01;
+}
+

      Disabling Animations #

      +

      You can disable animating enter or leave animations if you want. For example, sometimes you may want an enter animation and no leave animation, but ReactTransitionGroup waits for an animation to complete before removing your DOM node. You can add transitionEnter={false} or transitionLeave={false} props to ReactTransitionGroup to disable these animations.

      +

      Rendering a Different Component #

      +

      By default ReactTransitionGroup renders as a span. You can change this behavior by providing a component prop. For example, here's how you would render a <ul>:

      +
      <ReactTransitionGroup
+  transitionName="example"
+  component={React.DOM.ul}>
+  ...
+</ReactTransitionGroup>
+
      +

      Every DOM component is under React.DOM. However, component does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!

      + + +
      + + ← Prev + + + Next → + +
      + +
      +
      +
      + + +
      +
      A Facebook & Instagram collaboration.
      +
      © 2013 Facebook Inc.
      +
      +
      +
      + + + + diff --git a/docs/class-name-manipulation.html b/docs/class-name-manipulation.html new file mode 100644 index 0000000000..fe5947c695 --- /dev/null +++ b/docs/class-name-manipulation.html @@ -0,0 +1,395 @@ + + + + + + React | Class Name Manipulation + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      + +
      +
      + + + React + + + +
      +
      + + + +
      +
      + + +
      +

      Quick Start

      + +
      + +
      +

      Guides

      + +
      + +
      +

      Reference

      + +
      + + + + +
      +

      Tips

      + +
      + +
      + + +
      +

      Class Name Manipulation

      +
      +

      classSet() is a neat utility for easily manipulating the DOM class string.

      + +

      Here's a common scenario and its solution without classSet():

      +
      // inside some `<Message />` React component
+render: function() {
+  var classString = 'message';
+  if (this.props.isImportant) {
+    classString += ' message-important';
+  }
+  if (this.props.isRead) {
+    classString += ' message-read';
+  }
+  // 'message message-important message-read'
+  return <div className={classString}>Great, I'll be there.</div>;
+}
+
      +

      This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. classSet() solves this problem:

      +
      render: function() {
+  var cx = React.addons.classSet;
+  var classes = cx({
+    'message': true,
+    'message-important': this.props.isImportant,
+    'message-read': this.props.isRead
+  });
+  // same final string, but much cleaner
+  return <div className={classes}>Great, I'll be there.</div>;
+}
+
      +

      When using classSet(), pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string.

      + +

      No more hacky string concatenations!

      + + +
      + + ← Prev + + + Next → + +
      + +
      +
      +
      + + +
      +
      A Facebook & Instagram collaboration.
      +
      © 2013 Facebook Inc.
      +
      +
      +
      + + + + diff --git a/docs/component-api.html b/docs/component-api.html index 1b969b55ed..af88a35795 100644 --- a/docs/component-api.html +++ b/docs/component-api.html @@ -165,9 +165,31 @@
    • - Add-ons + Add-Ons + +
    • @@ -297,12 +319,12 @@

      Component API

      -

      ReactComponent

      +

      ReactComponent #

      Component classses created by createClass() return instances of ReactComponent when called. Most of the time when you're using React you're either creating or consuming these component objects.

      -

      getDOMNode

      DOMElement getDOMNode()
+
      getDOMNode #
      DOMElement getDOMNode()
 
      
 
      If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements.
      
-
      setProps
      setProps(object nextProps)
+
      setProps #
      setProps(object nextProps)
 
      
 
      When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with renderComponent(). Simply call setProps() to change its properties and trigger a re-render.
      
 
@@ -311,10 +333,10 @@
 
 
      This method can only be called on a root-level component. That is, it's only available on the component passed directly to renderComponent() and none of its children. If you're inclined to use setProps() on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in render().
      • -

      replaceProps

      replaceProps(object nextProps)
+
      replaceProps #
      replaceProps(object nextProps)
 
      
 
      Like setProps() but deletes any pre-existing props instead of merging the two objects.
      
-
      transferPropsTo
      ReactComponent transferPropsTo(ReactComponent targetComponent)
+
      transferPropsTo #
      ReactComponent transferPropsTo(ReactComponent targetComponent)
 
      
 
      Transfer properties from this component to a target component that have not already been set on the target component. After the props are updated, targetComponent is returned as a convenience. This function is useful when creating simple HTML-like components:
      
 
      var Avatar = React.createClass({
@@ -334,7 +356,7 @@
 
 
      Use transferPropsTo with caution; it encourages tight coupling and makes it easy to accidentally introduce implicit dependencies between components. When in doubt, it's safer to explicitly copy the properties that you need onto the child component.
    -

    setState

    setState(object nextState[, function callback])
+
    setState #
    setState(object nextState[, function callback])
 
    
 
    Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.  In addition, you can supply an optional callback function that is executed once setState is completed.
    
 
@@ -347,10 +369,10 @@
 
 
    There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
    -

    replaceState

    replaceState(object nextState[, function callback])
+
    replaceState #
    replaceState(object nextState[, function callback])
 
    
 
    Like setState() but deletes any pre-existing state keys that are not in nextState.
    
-
    forceUpdate()
    forceUpdate([function callback])
+
    forceUpdate() #
    forceUpdate([function callback])
 
    
 
    If your render() method reads from something other than this.props or this.state, you'll need to tell React when it needs to re-run render() by calling forceUpdate(). You'll also need to call forceUpdate() if you mutate this.state directly.
    
 
diff --git a/docs/component-specs.html b/docs/component-specs.html
index 5debf90dc7..357484282a 100644
--- a/docs/component-specs.html
+++ b/docs/component-specs.html
@@ -165,9 +165,31 @@
         
           
  • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
    • 
         
           
  • 
@@ -297,44 +319,44 @@
   
    
     
    Component Specs and Lifecycle
    
     
    
-    
    Component Specifications
    
+    
    Component Specifications #
    
 
    When creating a component class by invoking React.createClass(), you should provide a specification object that contains a render method and can optionally contain other lifecycle methods described here.
    
-
    render
    ReactComponent render()
+
    render #
    ReactComponent render()
 
    
 
    The render() method is required.
    
 
 
    When called, it should examine this.props and this.state and return a single child component. This child component can be either a native DOM component (such as <div>) or another composite component that you've defined yourself.
    
 
 
    The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not read from or write to the DOM or otherwise interact with the browser (e.g., by using setTimeout). If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes server rendering more practical and makes components easier to think about.
    
-
    getInitialState
    object getInitialState()
+
    getInitialState #
    object getInitialState()
 
    
 
    Invoked once before the component is mounted. The return value will be used as the initial value of this.state.
    
-
    getDefaultProps
    object getDefaultProps()
+
    getDefaultProps #
    object getDefaultProps()
 
    
 
    Invoked once when the component is mounted. Values in the mapping will be set on this.props if that prop is not specified by the parent component (i.e. using an in check).
    
 
 
    This method is invoked before getInitialState and therefore cannot rely on this.state or use this.setState.
    
-
    propTypes
    object propTypes
+
    propTypes #
    object propTypes
 
    
 
    The propTypes object allows you to validate props being passed to your components. For more information about propTypes, see Reusable Components.
    
 
 
-
    mixins
    array mixins
+
    mixins #
    array mixins
 
    
 
    The mixins array allows you to use mixins to share behavior among multiple components. For more information about mixins, see Reusable Components.
    
 
 
-
    Lifecycle Methods
    
+
    Lifecycle Methods #
    
 
    Various methods are executed at specific points in a component's lifecycle.
    
-
    Mounting: componentWillMount
    componentWillMount()
+
    Mounting: componentWillMount #
    componentWillMount()
 
    
 
    Invoked immediately before rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.
    
-
    Mounting: componentDidMount
    componentDidMount(DOMElement rootNode)
+
    Mounting: componentDidMount #
    componentDidMount(DOMElement rootNode)
 
    
 
    Invoked immediately after rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via the rootNode argument or by calling this.getDOMNode().
    
 
 
    If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.
    
-
    Updating: componentWillReceiveProps
    componentWillReceiveProps(object nextProps)
+
    Updating: componentWillReceiveProps #
    componentWillReceiveProps(object nextProps)
 
    
 
    Invoked when a component is receiving new props. This method is not called for the initial render.
    
 
@@ -350,7 +372,7 @@
 
 
    There is no analogous method componentWillReceiveState. An incoming prop transition may cause a state change, but the opposite is not true. If you need to perform operations in response to a state change, use componentWillUpdate.
    
 
-
    Updating: shouldComponentUpdate
    boolean shouldComponentUpdate(object nextProps, object nextState)
+
    Updating: shouldComponentUpdate #
    boolean shouldComponentUpdate(object nextProps, object nextState)
 
    
 
    Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.
    
 
@@ -365,7 +387,7 @@ transition to the new props and state will not require a component update.
    
 
    By default, shouldComponentUpdate always returns true to prevent subtle bugs when state is mutated in place, but if you are careful to always treat state as immutable and to read only from props and state in render() then you can override shouldComponentUpdate with an implementation that compares the old props and state to their replacements.
    
 
 
    If performance is a bottleneck, especially with dozens or hundreds of components, use shouldComponentUpdate to speed up your app.
    
-
    Updating: componentWillUpdate
    componentWillUpdate(object nextProps, object nextState)
+
    Updating: componentWillUpdate #
    componentWillUpdate(object nextProps, object nextState)
 
    
 
    Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.
    
 
@@ -376,12 +398,12 @@ transition to the new props and state will not require a component update.
    
 
 
    You cannot use this.setState() in this method. If you need to update state in response to a prop change, use componentWillReceiveProps instead.
    
 
-
    Updating: componentDidUpdate
    componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)
+
    Updating: componentDidUpdate #
    componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)
 
    
 
    Invoked immediately after updating occurs. This method is not called for the initial render.
    
 
 
    Use this as an opportunity to operate on the DOM when the component has been updated.
    
-
    Unmounting: componentWillUnmount
    componentWillUnmount()
+
    Unmounting: componentWillUnmount #
    componentWillUnmount()
 
    
 
    Invoked immediately before a component is unmounted from the DOM.
    
 
diff --git a/docs/displaying-data.html b/docs/displaying-data.html
index 40224a6cef..2b50703753 100644
--- a/docs/displaying-data.html
+++ b/docs/displaying-data.html
@@ -165,9 +165,31 @@
         
           
  • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
    • 
         
           
  • 
@@ -298,7 +320,7 @@
     
    Displaying Data
    
     
    
     
    The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.
    
-
    Getting Started
    
+
    Getting Started #
    
 
    Let's look at a really simple example. Create a hello-react.html file with the following code:
    
 
    <!DOCTYPE html>
 <html>
@@ -337,13 +359,13 @@
     document.getElementById('example')
   );
 }, 500);
-
    Reactive Updates
    
+
    • Reactive Updates #
    
 
    Open hello-react.html in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.
    
 
 
    The way we are able to figure this out is that React does not manipulate the DOM unless it needs to. It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.
    
 
 
    The inputs to this component are called props — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, never write to this.props.
    
-
    Components are Just Like Functions
    
+
    Components are Just Like Functions #
    
 
    React components are very simple. You can think of them as simple function that take in props and state (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.
    
 
 
    
@@ -351,7 +373,7 @@
 
 
    One limitation: React components can only render a single root node. If you want to return multiple nodes they must be wrapped in a single root.
    
 
    
-
    JSX Syntax
    
+
    JSX Syntax #
    
 
    We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
    
 
 
    We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a very simple, optional HTML-like syntax for the function calls that generate markup called JSX.
    
diff --git a/docs/dom-differences.html b/docs/dom-differences.html
index 454c36be3c..8c4bea41bb 100644
--- a/docs/dom-differences.html
+++ b/docs/dom-differences.html
@@ -165,9 +165,31 @@
         
           
  • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
    • 
         
           
  • 
diff --git a/docs/events.html b/docs/events.html
index 2463819e04..26b3150036 100644
--- a/docs/events.html
+++ b/docs/events.html
@@ -165,9 +165,31 @@
         
           
  • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
    • 
         
           
  • 
@@ -297,7 +319,7 @@
   
    
     
    Event System
    
     
    
-    
    SyntheticEvent
    
+    
    SyntheticEvent #
    
 
    Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
    
 
 
    If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes:
    
@@ -313,16 +335,16 @@
 DOMEventTarget target
 Date timeStamp
 String type
-
    • Supported Events
    
+
    Supported Events #
    
 
    React normalizes events so that they have consistent properties across
 different browsers.
    
-
    Clipboard Events
    
+
    Clipboard Events #
    
 
    Event names:
    
 
    onCopy onCut onPaste
 
    
 
    Properties:
    
 
    DOMDataTransfer clipboardData
-
    Keyboard Events
    
+
    Keyboard Events #
    
 
    Event names:
    
 
    onKeyDown onKeyPress onKeyUp
 
    
@@ -336,18 +358,18 @@ different browsers.
    
 boolean metaKey
 boolean repeat
 boolean shiftKey
-
    Focus Events
    
+
    Focus Events #
    
 
    Event names:
    
 
    onFocus onBlur
 
    
 
    Properties:
    
 
    DOMEventTarget relatedTarget
-
    Form Events
    
+
    Form Events #
    
 
    Event names:
    
 
    onChange onInput onSubmit
 
    
 
    For more information about the onChange event, see Forms.
    
-
    Mouse Events
    
+
    Mouse Events #
    
 
    Event names:
    
 
    onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
 onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
@@ -367,7 +389,7 @@ onMouseMove onMouseUp
 Number screenX
 Number screenY
 boolean shiftKey
-
    Touch events
    
+
    Touch events #
    
 
    To enable touch events, call React.initializeTouchEvents(true) before
 rendering any component.
    
 
@@ -382,14 +404,14 @@ rendering any component.
    
 boolean shiftKey
 DOMTouchList targetTouches
 DOMTouchList touches
-
    UI Events
    
+
    UI Events #
    
 
    Event names:
    
 
    onScroll
 
    
 
    Properties:
    
 
    Number detail
 DOMAbstractView view
-
    Wheel Events
    
+
    Wheel Events #
    
 
    Event names:
    
 
    onWheel
 
    
diff --git a/docs/examples.html b/docs/examples.html
index 89ba5067f0..675860e380 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -165,9 +165,31 @@
         
           
  • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
    • 
         
           
  • 
@@ -297,13 +319,13 @@
   
    
     
    Examples
    
     
    
-    
    Production Apps
    
+    
    Production Apps #
    
 
      
 
    • All of Instagram.com is built on React.
      • 
 
    • Many components on Facebook.com, including the commenting interface, ads creation flows, and page insights.
      • 
 
    • Khan Academy is using React for most new JS development.
      • 
 
    
-
    Sample Code
    
+
    Sample Code #
    
 
      
 
    • We've included a step-by-step comment box tutorial.
      • 
 
    • The React starter kit includes several examples which you can view online in our GitHub repository.
      • 
diff --git a/docs/forms.html b/docs/forms.html
index 0ee8efa7f5..c9b42d4264 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
@@ -298,7 +320,7 @@
     
      Forms
      
     
      
     
      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.
      
-
      Interactive Props
      
+
      Interactive Props #
      
 
      Form components support a few props that are affected via user interactions:
      
 
 
        
@@ -318,7 +340,7 @@
 
      
 
 
      Like all DOM events, the onChange prop is supported on all native components and can be used to listen to bubbled change events.
      
-
      Controlled Components
      
+
      Controlled Components #
      
 
      An <input> with value set is a controlled component. In a controlled <input>, the value of the rendered element will always reflect the value prop. For example:
      
 
        render: function() {
     return <input type="text" value="Hello!" />;
@@ -342,7 +364,7 @@
   }
 
      
 
      This would accept user input but truncate the value to the first 140 characters.
      
-
      Uncontrolled Components
      
+
      Uncontrolled Components #
      
 
      An <input> that does not supply a value (or sets it to null) is an uncontrolled component. In an uncontrolled <input>, the value of the rendered element will reflect the user's input. For example:
      
 
        render: function() {
     return <input type="text" />;
@@ -358,7 +380,7 @@
 
      This example will function much like the Controlled Components example above.
      
 
 
      Likewise, <input> supports defaultChecked and <option> supports defaultSelected.
      
-
      Advanced Topics
      Why Controlled Components?
      
+
      Advanced Topics #
      Why Controlled Components? #
      
 
      Using form components such as <input> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:
      
 
        <input type="text" name="title" value="Untitled" />
 
      
@@ -370,7 +392,7 @@
   }
 
      
 
      Since this method describes the view at any point in time, the value of the text input should always be Untitled.
      
-
      Why Textarea Value?
      
+
      Why Textarea Value? #
      
 
      In HTML, the value of <textarea> is usually set using its children:
      
 
        <!-- counterexample: DO NOT DO THIS! -->
   <textarea name="description">This is the description.</textarea>
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 1d6db2af24..19399baeca 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
@@ -297,14 +319,14 @@
   
      
     
      Getting Started
      
     
      
-    
      JSFiddle
      
+    
      JSFiddle #
      
 
      The easiest way to start hacking on React is using the following JSFiddle Hello Worlds
      
 
 
-
      Starter Kit
      
+
      Starter Kit #
      
 
      Download the starter kit to get started.
      
 
 
      
@@ -333,7 +355,7 @@
 </html>
 
      • 
 
      The XML syntax inside of JavaScript is called JSX; check out the JSX syntax to learn more about it. In order to translate it to vanilla JavaScript we use <script type="text/jsx"> and include JSXTransformer.js to actually perform the transformation in the browser.
      
-
      Separate File
      
+
      Separate File #
      
 
      Your React JSX file can live in a separate file. Create the following src/helloworld.js.
      
 
      /** @jsx React.DOM */
 React.renderComponent(
@@ -343,7 +365,7 @@
 
      
 
      Then reference it from helloworld.html:
      
 
      <script type="text/jsx" src="src/helloworld.js"></script>
-
      Offline Transform
      
+
    • Offline Transform #
    
 
    First install the command-line tools (requires npm):
    
 
    npm install -g react-tools
 
    
@@ -376,9 +398,9 @@
     <script src="build/helloworld.js"></script>
   </body>
 </html>
-
    • Want CommonJS?
    
+

    Want CommonJS? #

    If you want to use React within a module system, fork our repo, npm install and run grunt. A nice set of CommonJS modules will be generated. Our jsx build tool can be integrated into most packaging systems (not just CommonJS) quite easily.

    -

    Next Steps

    +

    Next Steps #

    Check out the tutorial and the other examples in the /examples directory to learn more. Good luck, and welcome!

    diff --git a/docs/interactivity-and-dynamic-uis.html b/docs/interactivity-and-dynamic-uis.html index f2f41160f8..b701ea033d 100644 --- a/docs/interactivity-and-dynamic-uis.html +++ b/docs/interactivity-and-dynamic-uis.html @@ -165,9 +165,31 @@
  • - Add-ons + Add-Ons + +
  • @@ -298,7 +320,7 @@

    Interactivity and Dynamic UIs

    You've already learned how to display data with React. Now let's look at how to make our UIs interactive.

    -

    A Simple Example

    /** @jsx React.DOM */
+
    A Simple Example #
    /** @jsx React.DOM */
 
 var LikeButton = React.createClass({
   getInitialState: function() {
@@ -321,31 +343,31 @@
   <LikeButton />,
   document.getElementById('example')
 );
-
    Event Handling and Synthetic Events
    
+

    Event Handling and Synthetic Events #

    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: autoBind 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!

    Event delegation: React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see David Walsh's excellent blog post.

    -

    Components are Just State Machines

    +

    Components are Just State Machines #

    React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.

    In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.

    -

    How State Works

    +

    How State Works #

    A common way to inform React of a data change is by calling setState(data, callback). This method merges data into this.state and re-renders the component. When the component finishes re-rendering, the optional callback is called. Most of the time you'll never need to provide a callback since React will take care of keeping your UI up-to-date for you.

    -

    What Components Should Have State?

    +

    What Components Should Have State? #

    Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.

    Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

    A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.

    -

    What Should Go in State?

    +

    What Should Go in State? #

    State should contain data that a component's event handlers may change to trigger a UI update. In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in this.state. Inside of render() simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.

    -

    What Shouldn't Go in State?

    +

    What Shouldn't Go in State? #

    this.state should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:

      diff --git a/docs/jsx-gotchas.html b/docs/jsx-gotchas.html index df715944c8..93ccd2905e 100644 --- a/docs/jsx-gotchas.html +++ b/docs/jsx-gotchas.html @@ -165,9 +165,31 @@
    • - Add-ons + Add-Ons + +
    • @@ -304,12 +326,12 @@

      For DOM differences, such as the inline style attribute, check here.

      -

      Whitespace Removal

      +

      Whitespace Removal #

      JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all whitespace between two curly braces expressions. If you want to have whitespace, simply add {' '}.

      <div>{this.props.name} {' '} {this.props.surname}</div>

      Follow Issue #65 for discussion on this behavior.

      -

      HTML Entities

      +

      HTML Entities #

      You can insert HTML entities within literal text in JSX:

      <div>First &middot; Second</div>
      @@ -329,7 +351,7 @@

      As a last resort, you always have the ability to insert raw HTML.

      <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />
-

      Custom HTML Attributes

      +

      Custom HTML Attributes #

      If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with data-.

      <div data-custom-attribute="foo" />
      diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html index 0b693cfe2b..0436eafc0d 100644 --- a/docs/jsx-in-depth.html +++ b/docs/jsx-in-depth.html @@ -165,9 +165,31 @@
    • - Add-ons + Add-Ons + +
    • @@ -299,7 +321,7 @@

      JSX is a JavaScript XML syntax transform recommended for use with React.

      -

      Why JSX?

      +

      Why JSX? #

      React works out of the box without JSX. Simply construct your markup using the functions on React.DOM. For example, here's how to construct a simple link:

      var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
@@ -311,7 +333,7 @@ functions on React.DOM. For example, here's how to construct a
 
    • Designers are more comfortable making changes.
      • 
 
    • It's familiar for those who have used MXML or XAML.
      •
    -

    The Transform

    +

    The Transform #

    JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively.

    var Nav;
@@ -341,7 +363,7 @@ how to setup compilation.
    
 
    Details about the code transform are given here to increase understanding, but
 your code should not rely on these implementation details.
    
 
-
    React and JSX
    
+
    React and JSX #
    
 
    React and JSX are independent technologies, but JSX was primarily built with
 React in mind. The two valid uses of JSX are:
    
 
@@ -350,11 +372,11 @@ React in mind. The two valid uses of JSX are:
    
 
  • To construct instances of composite components created with
 React.createClass().
    • 
 
-
    React DOM Components
    
+
    React DOM Components #
    
 
    To construct a <div> is to create a variable that refers to React.DOM.div.
    
 
    var div = React.DOM.div;
 var app = <div className="appClass">Hello, React!</div>;
-
    React Composite Components
    
+

    React Composite Components #

    To construct an instance of a composite component, create a variable that references the class.

    var MyComponent = React.createClass({/*...*/});
@@ -369,7 +391,7 @@ references the class.
    
 as XML attribute names. Instead, React DOM components expect attributes like
 className and htmlFor, respectively.
    
 
-
    DOM Convenience
    
+
    DOM Convenience #
    
 
    Having to define variables for every type of DOM element can get tedious
 (e.g. var div, span, h1, h2, ...). JSX provides a convenience to address this
 problem by allowing you to specify a variable in an @jsx docblock field. JSX
@@ -390,23 +412,23 @@ will use that field to find DOM components.
    
 DOM. The docblock parameter is only a convenience to resolve the most commonly
 used elements. In general, JSX has no notion of the DOM.
    
 
-
    JavaScript Expressions
    Attribute Expressions
    
+
    JavaScript Expressions #
    Attribute Expressions #
    
 
    To use a JavaScript expression as an attribute value, wrap the expression in a
 pair of curly braces ({}) instead of quotes ("").
    
 
    // Input (JSX):
 var person = <Person name={window.isLoggedIn ? window.name : ''} />;
 // Output (JS):
 var person = Person({name: window.isLoggedIn ? window.name : ''});
-
    Child Expressions
    
+

    Child Expressions #

    Likewise, JavaScript expressions may be used to express children:

    // Input (JSX):
 var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
 // Output (JS):
 var content = Container(null, window.isLoggedIn ? Nav(null) : Login(null));
-

    Comments

    +

    Comments #

    It's easy to add comments within your JSX; they're just JS expressions:

    var content = <Container>{/* this is a comment */}<Nav /></Container>;
-

    Prior Work

    +

    Prior Work #

    JSX is similar to several other JavaScript embedded XML language proposals/projects. Some of the features of JSX that distinguish it from similar efforts include:

    diff --git a/docs/more-about-refs.html b/docs/more-about-refs.html index 1caf0d703e..3c36b37849 100644 --- a/docs/more-about-refs.html +++ b/docs/more-about-refs.html @@ -165,9 +165,31 @@
  • - Add-ons + Add-Ons + +
  • @@ -350,7 +372,7 @@

    In this counterexample, the <input /> is merely a description of an <input />. This description is used to create a real backing instance for the <input />.

    So how do we talk to the real backing instance of the input?

    -

    The ref Attribute

    +

    The ref Attribute #

    React supports a very special property that you can attach to any component that is output from render(). This special property allows you to refer to the corresponding backing instance of anything returned from render(). It is always guaranteed to be the proper instance, at any point in time.

    It's as simple as:

    @@ -360,7 +382,7 @@

    2. In some other code (typically event handler code), access the backing instance via this.refs as in:

      this.refs.myInput
-

    Completing the Example

      var App = React.createClass({
+

    Completing the Example #

      var App = React.createClass({
     getInitialState: function() {
       return {userInput: ''};
     },
@@ -388,15 +410,15 @@
   });

    In this example, our render function returns a description of an <input /> instance. But the true instance is accessed via this.refs.theInput. As long as a child component with ref="theInput" is returned from render, this.refs.theInput will access the proper instance. This even works on higher level (non-DOM) components such as <Typeahead ref="myTypeahead" />.

    -

    Summary

    +

    Summary #

    Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive props and state. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save refs for use cases that are inherently non-reactive.

    -

    Benefits:

    +

    Benefits: #

    • You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as this.refs.myTypeahead.reset()).
    • Performing DOM measurements almost always requires reaching out to a "native" component such as <input /> and accessing its underlying DOM node via this.refs.myInput.getDOMNode(). Refs are one of the only practical ways of doing this reliably.
    • Refs are automatically book-kept for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself).
    -

    Cautions:

    +

    Cautions: #

    • Never access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack.
    • If you want to preserve Google Closure Compiler Crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using this.refs['myRefString'] if your ref was defined as ref="myRefString".
      • diff --git a/docs/multiple-components.html b/docs/multiple-components.html index 180ddbc914..8bed899910 100644 --- a/docs/multiple-components.html +++ b/docs/multiple-components.html @@ -165,9 +165,31 @@
    • - Add-ons + Add-Ons + +
    • @@ -298,9 +320,9 @@

      Multiple Components

      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.

      -

      Motivation: Separation of Concerns

      +

      Motivation: Separation of Concerns #

      By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can separate the different concerns of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.

      -

      Composition Example

      +

      Composition Example #

      Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.

      /** @jsx React.DOM */
 
@@ -337,16 +359,16 @@
   <Avatar username="pwh" />,
   document.getElementById('example')
 );
-

      Ownership

      +

      Ownership #

      In the above example, instances of Avatar own instances of ProfilePic and ProfileLink. In React, an owner is the component that sets the props of other components. More formally, if a component X is created in component Y's render() method, it is said that X is owned by Y. As discussed earlier, a component cannot mutate its props — they are always consistent with what its owner sets them to. This key property leads to UIs that are guaranteed to be consistent.

      It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, Avatar owns the div, ProfilePic and ProfileLink instances, and div is the parent (but not owner) of the ProfilePic and ProfileLink instances.

      -

      Children

      +

      Children #

      When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:

      <Parent><Child /></Parent>

      Parent can read its children by accessing the special this.props.children prop.

      -

      Child Reconciliation

      +

      Child Reconciliation #

      Reconciliation is the process by which React updates the DOM with each new render pass. In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:

      // Render Pass 1
 <Card>
@@ -359,7 +381,7 @@
 </Card>

      Intuitively, <p>Paragraph 1</p> was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the order of the children.

      -

      Stateful Children

      +

      Stateful Children #

      For most components, this is not a big deal. However, for stateful components that maintain data in this.state across render passes, this can be very problematic.

      In most cases, this can be sidestepped by hiding elements instead of destroying them:

      @@ -373,7 +395,7 @@ <p style={{display: 'none'}}>Paragraph 1</p> <p>Paragraph 2</p> </Card> -

      Dynamic Children

      +

      Dynamic Children #

      The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a key:

        render: function() {
     var results = this.props.results;
@@ -387,9 +409,9 @@
   }

      When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused).

      -

      Data Flow

      +

      Data Flow #

      In React, data flows from owner to owned component through props as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its props or state. Since this process happens recursively, data changes are automatically reflected everywhere they are used.

      -

      A Note on Performance

      +

      A Note on Performance #

      You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and render() methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution and React will optimize this for you using batching and change detection.

      However, sometimes you really want to have fine-grained control over your performance. In that case, simply override shouldComponentUpdate() to return false when you want React to skip processing of a subtree. See the React reference docs for more information.

      diff --git a/docs/reusable-components.html b/docs/reusable-components.html index dd2b8db910..8aff6a66c1 100644 --- a/docs/reusable-components.html +++ b/docs/reusable-components.html @@ -165,9 +165,31 @@
    • - Add-ons + Add-Ons + +
    • @@ -298,7 +320,7 @@

      Reusable Components

      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.

      -

      Prop Validation

      +

      Prop Validation #

      As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify propTypes. React.PropTypes exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, an error will be thrown. Here is an example documenting the different validators provided:

      React.createClass({
   propTypes: {
@@ -332,7 +354,7 @@
   },
   /* ... */
 });
-

      Default Prop Values

      +

      Default Prop Values #

      React lets you define default values for your props in a very declarative way:

      var ComponentWithDefaultProps = React.createClass({
   getDefaultProps: function() {
@@ -344,7 +366,7 @@
 });

      The result of getDefaultProps() will be cached and used to ensure that this.props.value will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.

      -

      Transferring Props: A Shortcut

      +

      Transferring Props: A Shortcut #

      A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides transferPropsTo() to do just this.

      /** @jsx React.DOM */
 
@@ -362,7 +384,7 @@
   </CheckLink>,
   document.getElementById('example')
 );
-

      Mixins

      +

      Mixins #

      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. React provides mixins to solve this problem.

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

      diff --git a/docs/tags-and-attributes.html b/docs/tags-and-attributes.html index 5706b47b47..778da72f85 100644 --- a/docs/tags-and-attributes.html +++ b/docs/tags-and-attributes.html @@ -165,9 +165,31 @@
    • - Add-ons + Add-Ons + +
    • @@ -297,11 +319,11 @@

      Tags and Attributes

      -

      Supported Tags

      +

      Supported Tags #

      React attempts to support all common elements. If you need an element that isn't listed here, please file an issue.

      The following elements are supported:

      -

      HTML Elements

      a abbr address area article aside audio b base bdi bdo big blockquote body br
+
      HTML Elements #
      a abbr address area article aside audio b base bdi bdo big blockquote body br
 button canvas caption cite code col colgroup data datalist dd del details dfn
 div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6
 head header hr html i iframe img input ins kbd keygen label legend li link main
@@ -309,13 +331,18 @@ map mark menu menuitem meta meter nav noscript object ol optgroup option output
 p param pre progress q rp rt ruby s samp script section select small source
 span strong style sub summary sup table tbody td textarea tfoot th thead time
 title tr track u ul var video wbr
-
      SVG elements
      circle g line path polyline rect svg text
-
      Supported Attributes
      
-
      React supports all data-* and aria-* attributes as well as every attribute
-in the following lists. Note that all attributes are camel-cased and the attributes class and for are className and htmlFor, respectively, to match the DOM API specification.
      
+

      SVG elements #

      circle g line path polyline rect svg text
+

      Supported Attributes #

      +

      React supports all data-* and aria-* attributes as well as every attribute in the following lists.

      + +
      +

      Note:

      + +

      All attributes are camel-cased and the attributes class and for are className and htmlFor, respectively, to match the DOM API specification.

      +

      For a list of events, see Supported Events.

      -

      HTML Attributes

      accept accessKey action allowFullScreen allowTransparency alt autoCapitalize
+
      HTML Attributes #
      accept accessKey action allowFullScreen allowTransparency alt autoCapitalize
 autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked
 className colSpan content contentEditable contextMenu controls data dateTime
 dir disabled draggable encType form frameBorder height hidden href htmlFor
@@ -325,7 +352,7 @@ rowSpan scrollLeft scrollTop selected size spellCheck src step style tabIndex
 target title type value width wmode
 
      
 
      In addition, the non-standard autoCapitalize attribute is supported for Mobile Safari.
      
-
      SVG Attributes
      cx cy d fill fx fy gradientTransform gradientUnits offset points r rx ry
+
      SVG Attributes #
      cx cy d fill fx fy gradientTransform gradientUnits offset points r rx ry
 spreadMethod stopColor stopOpacity stroke strokeLinecap strokeWidth transform
 version viewBox x1 x2 x y1 y2 y
 
      
diff --git a/docs/tooling-integration.html b/docs/tooling-integration.html
index b38911c08c..113505b731 100644
--- a/docs/tooling-integration.html
+++ b/docs/tooling-integration.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
@@ -298,11 +320,11 @@
     
      Tooling Integration
      
     
      
     
      Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.
      
-
      React
      CDN-hosted React
      
+
      React #
      CDN-hosted React #
      
 
      We provide CDN-hosted versions of React on our download page. These prebuilt files use the UMD module format. Dropping them in with a simple <script> tag will inject a React global into your environment. It should also work out-of-the-box in CommonJS and AMD environments.
      
-
      Using master
      
+
      Using master #
      
 
      We have instructions for building from master in our GitHub repository. We build a tree of CommonJS modules under build/modules which you can drop into any environment or packaging tool that supports CommonJS.
      
-
      JSX
      In-browser JSX Transform
      
+
      JSX #
      In-browser JSX Transform #
      
 
      If you like using JSX, we provide an in-browser JSX transformer for development on our download page. Simply include a <script type="text/jsx"> tag to engage the JSX transformer. Be sure to include the /** @jsx React.DOM */ comment as well, otherwise the transformer will not run the transforms.
      
 
 
      
@@ -310,9 +332,9 @@
 
 
      The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.
      
 
      
-
      Productionizing: Precompiled JSX
      
+
      Productionizing: Precompiled JSX #
      
 
      If you have npm, you can simply run npm install -g react-tools to install our command-line jsx tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: jsx --watch src/ build/. Run jsx --help for more information on how to use this tool.
      
-
      Helpful Open-Source Projects
      
+
      Helpful Open-Source Projects #
      
 
      The open-source community has built tools that integrate JSX with several build systems.
      
 
 
-
      Syntax Highlighting & Linting
      
+
      Syntax Highlighting & Linting #
      
 
        
 
      • Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).
 
@@ -333,7 +355,7 @@ that support *.tmLanguage.
        • 
 
      • Linting provides accurate line numbers after compiling without sourcemaps.
        • 
 
      • Elements use standard scoping so linters can find usage of out-of-scope components.
        • 
 
      
-
      React Page
      
+
      React Page #
      
 
      To get started on a new project, you can use react-page, a complete React project creator. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
      
 
 
diff --git a/docs/top-level-api.html b/docs/top-level-api.html
index 61cd71246e..9389ef42b1 100644
--- a/docs/top-level-api.html
+++ b/docs/top-level-api.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
@@ -297,19 +319,19 @@
   
      
     
      Top-Level API
      
     
      
-    
      React
      
+    
      React #
      
 
      React is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can require() it.
      
-
      React.DOM
      
+
      React.DOM #
      
 
      React.DOM provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the /** @jsx React.DOM */ docblock.
      
-
      React.initializeTouchEvents
      initializeTouchEvents(boolean shouldUseTouch)
+
      React.initializeTouchEvents #
      initializeTouchEvents(boolean shouldUseTouch)
 
      
 
      Configure React's event system to handle touch events on mobile devices.
      
-
      React.createClass
      function createClass(object specification)
+
      React.createClass #
      function createClass(object specification)
 
      
 
      Creates a component given a specification. A component implements a render method which returns one single child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.
      
 
 
      For more information about the specification object, see Component Specs and Lifecycle.
      
-
      React.renderComponent
      ReactComponent renderComponent(
+
      React.renderComponent #
      ReactComponent renderComponent(
   ReactComponent component,
   DOMElement container,
   [function callback]
@@ -320,7 +342,7 @@
 
      If the React component was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
      
 
 
      If the optional callback is provided, it will be executed after the component is rendered or updated.
      
-
      React.unmountComponentAtNode
      unmountComponentAtNode(DOMElement container)
+
      React.unmountComponentAtNode #
      unmountComponentAtNode(DOMElement container)
 
      
 
      Remove a mounted React component from the DOM and clean up its event handlers and state.
      
 
@@ -329,7 +351,7 @@
 
 
      This method was called React.unmountAndReleaseReactRootNode until v0.5. It still works in v0.5 but will be removed in future versions.
      
 
-
      React.renderComponentToString
      renderComponentToString(ReactComponent component, function callback)
+
      React.renderComponentToString #
      renderComponentToString(ReactComponent component, function callback)
 
      
 
      Render a component to its initial HTML. This should only be used on the server. React will call callback with an HTML string when the markup is ready. You can use this method to can generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
      
 
diff --git a/docs/tutorial.html b/docs/tutorial.html
index d95eb01785..74b6877939 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
@@ -314,9 +336,9 @@
 
    • Live updates: as other users comment we'll pop them into the comment view in real time
      • 
 
    • Markdown formatting: users can use Markdown to format their text
      •
    -

    Want to skip all this and just see the source?

    +

    Want to skip all this and just see the source? #

    It's all on GitHub.

    -

    Getting started

    +

    Getting started #

    For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:

    <!-- template.html -->
 <html>
@@ -337,7 +359,7 @@
 </html>

    For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag.

    -

    Your first component

    +

    Your first component #

    React is all about modular, composable components. For our comment box example, we'll have the following component structure:

    - CommentBox
   - CommentList
@@ -359,7 +381,7 @@
   <CommentBox />,
   document.getElementById('content')
 );
-

    JSX Syntax

    +

    JSX Syntax #

    The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:

    // tutorial1-raw.js
 var CommentBox = React.createClass({
@@ -378,7 +400,7 @@
 );

    Its use is optional but we've found JSX syntax easier to use than plain JavaScript. Read more on the JSX Syntax article.

    -

    What's going on

    +

    What's going on #

    We pass some methods in a JavaScript object to React.createClass() to create a new React component. The most important of these methods is called render which returns a tree of React components that will eventually render to HTML.

    The <div> tags are not actual DOM nodes; they are instantiations of React div components. You can think of these as markers or pieces of data that React knows how to handle. React is safe. We are not generating HTML strings so XSS protection is the default.

    @@ -386,7 +408,7 @@

    You do not have to return basic HTML. You can return a tree of components that you (or someone else) built. This is what makes React composable: a key tenet of maintainable frontends.

    React.renderComponent() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.

    -

    Composing components

    +

    Composing components #

    Let's build skeletons for CommentList and CommentForm which will, again, be simple <div>s:

    // tutorial2.js
 var CommentList = React.createClass({
@@ -424,7 +446,7 @@
 });

    Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "React.DOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.

    -

    Component Properties

    +

    Component Properties #

    Let's create our third component, Comment. We will want to pass it the author name and comment text so we can reuse the same code for each unique comment. First let's add some comments to the CommentList:

    // tutorial4.js
 var CommentList = React.createClass({
@@ -439,7 +461,7 @@
 });

    Note that we have passed some data from the parent CommentList component to the child Comment component as both XML-like children and attributes. Data passed from parent to child is called props, short for properties.

    -

    Using props

    +

    Using props #

    Let's create the Comment component. It will read the data passed to it from the CommentList and render some markup:

    // tutorial5.js
 var Comment = React.createClass({
@@ -456,7 +478,7 @@
 });

    By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on this.props and any nested elements as this.props.children.

    -

    Adding Markdown

    +

    Adding Markdown #

    Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.

    First, add the third-party Showdown library to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. This requires a script tag in your head (which we have already included in the React playground):

    @@ -508,7 +530,7 @@

    This is a special API that intentionally makes it difficult to insert raw HTML, but for Showdown we'll take advantage of this backdoor.

    Remember: by using this feature you're relying on Showdown to be secure.

    -

    Hook up the data model

    +

    Hook up the data model #

    So far we've been inserting the comments directly in the source code. Instead, let's render a blob of JSON data into the comment list. Eventually this will come from the server, but for now, write it in your source:

    // tutorial8.js
 var data = [
@@ -551,7 +573,7 @@
 });

    That's it!

    -

    Fetching from the server

    +

    Fetching from the server #

    Let's replace the hard-coded data with some dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:

    // tutorial11.js
 React.renderComponent(
@@ -560,7 +582,7 @@
 );

    This component is different from the prior components because it will have to re-render itself. The component won't have any data until the request from the server comes back, at which point the component may need to render some new comments.

    -

    Reactive state

    +

    Reactive state #

    So far, each component has rendered itself once based on its props. props are immutable: they are passed from the parent and are "owned" by the parent. To implement interactions, we introduce mutable state to the component. this.state is private to the component and can be changed by calling this.setState(). When the state is updated, the component re-renders itself.

    render() methods are written declaratively as functions of this.props and this.state. The framework guarantees the UI is always consistent with the inputs.

    @@ -583,7 +605,7 @@ });

    getInitialState() executes exactly once during the lifecycle of the component and sets up the initial state of the component.

    -

    Updating state

    +

    Updating state #

    When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example, we will use a static JSON file to keep things simple:

    // tutorial13.json
 [
@@ -651,7 +673,7 @@
 );

    All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 2 seconds after that. Try running this in your browser and changing the comments.json file; within 2 seconds, the changes will show!

    -

    Adding new comments

    +

    Adding new comments #

    Now it's time to build the form. Our CommentForm component should ask the user for their name and comment text and send a request to the server to save the comment.

    // tutorial15.js
 var CommentForm = React.createClass({
@@ -694,13 +716,13 @@
     );
   }
 });
-
    Events
    +
    Events #

    React attaches event handlers to components using a camelCase naming convention. We attach an onSubmit handler to the form that clears the form fields when the form is submitted with valid input.

    We always return false from the event handler to prevent the browser's default action of submitting the form. (If you prefer, you can instead take the event as an argument and call preventDefault() on it.)

    -
    Refs
    +
    Refs #

    We use the ref attribute to assign a name to a child component and this.refs to reference the component. We can call getDOMNode() on a component to get the native browser DOM element.

    -
    Callbacks as props
    +
    Callbacks as props #

    When a user submits a comment, we will need to refresh the list of comments to include the new one. It makes sense to do all of this logic in CommentBox since CommentBox owns the state that represents the list of comments.

    We need to pass data from the child component to its parent. We do this by passing a callback in props from parent to child:

    @@ -803,7 +825,7 @@ ); } }); -

    Optimization: optimistic updates

    +

    Optimization: optimistic updates #

    Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.

    // tutorial20.js
 var CommentBox = React.createClass({
@@ -847,7 +869,7 @@
     );
   }
 });
-

    Congrats!

    +

    Congrats! #

    You have just built a comment box in a few simple steps. Learn more about why to use React, or dive into the API reference and start hacking! Good luck!

    diff --git a/docs/two-way-binding-helpers.html b/docs/two-way-binding-helpers.html new file mode 100644 index 0000000000..058e612902 --- /dev/null +++ b/docs/two-way-binding-helpers.html @@ -0,0 +1,456 @@ + + + + + + React | Two-Way Binding Helpers + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    + + + React + + + +
    +
    + + + +
    +
    + + +
    +

    Quick Start

    + +
    + +
    +

    Guides

    + +
    + +
    +

    Reference

    + +
    + + + + +
    +

    Tips

    + +
    + +
    + + +
    +

    Two-Way Binding Helpers

    +
    +

    ReactLink is an easy way to express two-way binding with React.

    + +
    +

    Note:

    + +

    If you're new to the framework, note that ReactLink is not needed for most applications and should be used cautiously.

    +
    + +

    In React, data flows one way: from owner to child. This is because data only flows one direction in the Von Neumann model of computing. You can think of it as "one-way data binding."

    + +

    However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React state when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.

    + +

    In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call setState() on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See our forms documentation for more information.

    + +

    Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React state -- is concise and supports a wide variety of applications. We've provided ReactLink: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React state.

    + +
    +

    Note:

    + +

    ReactLink is just a thin wrapper and convention around the onChange/setState() pattern. It doesn't fundamentally change how data flows in your React application.

    +
    +

    ReactLink: Before and After #

    +

    Here's a simple form example without using ReactLink:

    +
    /** @jsx React.DOM */
+
+var NoLink = React.createClass({
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  handleChange: function(event) {
+    this.setState({value: event.target.value});
+  },
+  render: function() {
+    var value = this.state.value;
+    return <input type="text" value={value} onChange={this.handleChange} />;
+  }
+});
+
    +

    This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use ReactLink to save us some typing:

    +
    /** @jsx React.DOM */
+
+var WithLink = React.createClass({
+  mixins: [React.addons.LinkedStateMixin],
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  render: function() {
+    return <input type="text" valueLink={this.linkState('value')} />;
+  }
+});
+
    +

    LinkedStateMixin adds a method ot your React component called linkState(). linkState() returns a ReactLink object which contains the current value of the React state and a callback to change it.

    + +

    ReactLink objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.

    +

    Under the Hood #

    +

    There are two sides to ReactLink: the place where you create the ReactLink instance and the place where you use it. To prove how simple ReactLink is, let's rewrite each side separately to be more explicit.

    +

    ReactLink Without LinkedStateMixin #

    /** @jsx React.DOM */
+
+var WithoutMixin = React.createClass({
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  handleChange: function(newValue) {
+    this.setState({value: newValue});
+  },
+  render: function() {
+    var valueLink = {
+      value: this.state.value,
+      requestChange: this.handleChange
+    };
+    return <input type="text" valueLink={valueLink} />;
+  }
+});
+
    +

    As you can see, ReactLink objects are very simple objects that just have a value and requestChange prop. And LinkedStateMixin is similarly simple: it just populates those fields with a value from this.state and a callback that calls this.setState().

    +

    ReactLink Without valueLink #

    /** @jsx React.DOM */
+
+var WithoutLink = React.createClass({
+  mixins: [React.addons.LinkedStateMixin],
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  render: function() {
+    var valueLink = this.linkState('value');
+    var handleChange = function(e) {
+      valueLink.requestChange(e.target.value);
+    };
+    return <input type="text" value={valueLink.value} onChange={handleChange} />;
+  }
+});
+
    +

    The valueLink prop is also quite simple. It simply handles the onChange event and calls this.props.valueLink.requestChange() and also uses this.props.valueLink.value instead of this.props.value. That's it!

    + + +
    + + ← Prev + + + Next → + +
    + +
    +
    +
    + + +
    +
    A Facebook & Instagram collaboration.
    +
    © 2013 Facebook Inc.
    +
    +
    +
    + + + + diff --git a/docs/why-react.html b/docs/why-react.html index 01b4565d73..b9f14aac0d 100644 --- a/docs/why-react.html +++ b/docs/why-react.html @@ -165,9 +165,31 @@
  • - Add-ons + Add-Ons + +
  • @@ -300,15 +322,15 @@

    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.

    We built React to solve one problem: building large applications with data that changes over time. To do this, React uses two main ideas.

    -

    Simple

    +

    Simple #

    Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.

    -

    Declarative

    +

    Declarative #

    When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.

    -

    Build Composable Components

    +

    Build Composable Components #

    React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.

    -

    Give It Five Minutes

    +

    Give It Five Minutes #

    React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. Give it five minutes while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.

    -

    Learn More

    +

    Learn More #

    You can learn more about our motivations behind building React in this blog post.

    diff --git a/docs/working-with-the-browser.html b/docs/working-with-the-browser.html index 0660499181..0e7b9eef19 100644 --- a/docs/working-with-the-browser.html +++ b/docs/working-with-the-browser.html @@ -165,9 +165,31 @@
  • - Add-ons + Add-Ons + +
  • @@ -298,13 +320,13 @@

    Working With the Browser

    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.

    -

    The Mock DOM

    +

    The Mock DOM #

    React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. render() methods return a description of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.

    Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and in a performant way cross-browser. You can even use some HTML5 events in IE8!

    Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.

    -

    Refs and getDOMNode()

    +

    Refs and getDOMNode() #

    To interact with the browser, you'll need a reference to a DOM node. Every mounted React component has a getDOMNode() function which you can call to get a reference to it.

    @@ -341,9 +363,9 @@ <MyComponent />, document.getElementById('example') ); -

    More About Refs

    +

    More About Refs #

    To learn more about refs, including ways to use them effectively, see our more about refs documentation.

    -

    Component Lifecycle

    +

    Component Lifecycle #

    Components have three main parts of their lifecycle:

      @@ -353,24 +375,24 @@

    React provides lifecycle methods that you can specify to hook into this process. We provide will methods, which are called right before something happens, and did methods which are called right after something happens.

    -

    Mounting

    +

    Mounting #

    • getInitialState(): object is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
    • componentWillMount() is invoked immediately before mounting occurs.
    • componentDidMount(DOMElement rootNode) is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
    -

    Updating

    +

    Updating #

    • componentWillReceiveProps(object nextProps) is invoked when a mounted component receives new props. This method should be used to compare this.props and nextProps to perform state transitions using this.setState().
    • shouldComponentUpdate(object nextProps, object nextState): boolean is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare this.props with nextProps and this.state with nextState and return false if React should skip updating.
    • componentWillUpdate(object nextProps, object nextState) is invoked immediately before updating occurs. You cannot call this.setState() here.
    • componentDidUpdate(object prevProps, object prevState, DOMElement rootNode) is invoked immediately after updating occurs.
    -

    Unmounting

    +

    Unmounting #

    • componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
    -

    Mounted Methods

    +

    Mounted Methods #

    Mounted composite components also support the following methods:

      @@ -385,11 +407,11 @@ componentDidUpdate() is a convenience. The same node can be obtained by calling this.getDOMNode().

    -

    Browser Support and Polyfills

    +

    Browser Support and Polyfills #

    At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing +new Date(), we can just write Date.now(). Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.

    In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like es5-shim.

    -

    Polyfills Needed to Support Older Browsers

    +

    Polyfills Needed to Support Older Browsers #

    These six functions can be polyfilled using es5-shim.js from kriskowal's es5-shim:

      diff --git a/downloads.html b/downloads.html index 09f6941f9e..78a0af4059 100644 --- a/downloads.html +++ b/downloads.html @@ -64,19 +64,19 @@ Download Starter Kit 0.5.1 -

      Individual Downloads

      React Core 0.5.1 (production)

      +

      Individual Downloads #

      React Core 0.5.1 (production) #

      The compressed, production version of React core

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

      React Core 0.5.1 (development)

      +

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

      JSX Transform

      +

      JSX Transform #

      The JSX transformer used to support XML syntax in JavaScript.

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

      All scripts are also available via CDNJS.

      -

      Bower

      $ bower install --save react
-

      NPM

      $ npm install -g react-tools
+
      Bower #
      $ bower install --save react
+
      NPM #
      $ npm install -g react-tools
 
      
 
     
      
diff --git a/feed.xml b/feed.xml
index b0b0963bd0..95d7396419 100644
--- a/feed.xml
+++ b/feed.xml
@@ -9,11 +9,11 @@
 			
 				Community Round-up #11
 				<p>This round-up is the proof that React has taken off from its Facebook&#39;s root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!</p>
-<h2 id="super-vanjs-2013-talk" class="anchor"><a href="#super-vanjs-2013-talk">Super VanJS 2013 Talk</a></h2>
+<h2><a class="anchor" name="super-vanjs-2013-talk"></a>Super VanJS 2013 Talk <a class="hash-link" href="#super-vanjs-2013-talk">#</a></h2>
 <p><a href="https://github.com/steveluscher">Steve Luscher</a> working at <a href="https://leanpub.com/">LeanPub</a> made a 30 min talk at <a href="https://twitter.com/vanjs">Super VanJS</a>. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.</p>
 
 <figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
-<h2 id="react-tips" class="anchor"><a href="#react-tips">React Tips</a></h2>
+<h2><a class="anchor" name="react-tips"></a>React Tips <a class="hash-link" href="#react-tips">#</a></h2>
 <p><a href="http://connormcsheffrey.com/">Connor McSheffrey</a> and <a href="https://github.com/chenglou">Cheng Lou</a> added a new section to the documentation. It&#39;s a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we <a href="http://facebook.github.io/react/tips/introduction.html">encourage you to contribute</a>!</p>
 
 <ul>
@@ -30,7 +30,7 @@
 <li><a href="http://facebook.github.io/react/tips/initial-ajax.html">Load Initial Data via AJAX</a></li>
 <li><a href="http://facebook.github.io/react/tips/false-in-jsx.html">False in JSX</a></li>
 </ul>
-<h2 id="intro-to-the-react-framework" class="anchor"><a href="#intro-to-the-react-framework">Intro to the React Framework</a></h2>
+<h2><a class="anchor" name="intro-to-the-react-framework"></a>Intro to the React Framework <a class="hash-link" href="#intro-to-the-react-framework">#</a></h2>
 <p><a href="http://blog.pixelingene.com/">Pavan Podila</a> wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.</p>
 
 <blockquote>
@@ -39,16 +39,16 @@
 
 <p><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660">Read the full article ...</a></p>
 </blockquote>
-<h2 id="140-characters-textarea" class="anchor"><a href="#140-characters-textarea">140-characters textarea</a></h2>
+<h2><a class="anchor" name="140-characters-textarea"></a>140-characters textarea <a class="hash-link" href="#140-characters-textarea">#</a></h2>
 <p><a href="https://github.com/brainkim">Brian Kim</a> wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.</p>
 
 <p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
 
 <script async src="//codepen.io/assets/embed/ei.js"></script>
-<h2 id="genesis-skeleton" class="anchor"><a href="#genesis-skeleton">Genesis Skeleton</a></h2>
+<h2><a class="anchor" name="genesis-skeleton"></a>Genesis Skeleton <a class="hash-link" href="#genesis-skeleton">#</a></h2>
 <p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> is working on a &quot;Modern, opinionated, full-stack starter kit for rapid, streamlined application development&quot;. The version 0.4.0 has just been released and has first-class support for React.
 <figure><a href="http://genesis-skeleton.com/"><img src="/react/img/blog/genesis_skeleton.png" alt=""></a></figure></p>
-<h2 id="agflow-talk" class="anchor"><a href="#agflow-talk">AgFlow Talk</a></h2>
+<h2><a class="anchor" name="agflow-talk"></a>AgFlow Talk <a class="hash-link" href="#agflow-talk">#</a></h2>
 <p><a href="http://rz.scale-it.pl/">Robert Zaremba</a> working on <a href="http://www.agflow.com/">AgFlow</a> recently talked in Poland about React.</p>
 
 <blockquote>
@@ -60,7 +60,7 @@
 </blockquote>
 
 <figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="600" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
-<h2 id="jsx" class="anchor"><a href="#jsx">JSX</a></h2>
+<h2><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h2>
 <p><a href="http://tck.io/">Todd Kennedy</a> working at Cond&eacute; Nast wrote <a href="https://github.com/CondeNast/JSXHint">JSXHint</a> and explains in a blog post his perspective on JSX.</p>
 
 <blockquote>
@@ -71,10 +71,10 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="http://tck.io/posts/jsxhint_and_react.html">Read the full article...</a></p>
 </blockquote>
-<h2 id="photo-gallery" class="anchor"><a href="#photo-gallery">Photo Gallery</a></h2>
+<h2><a class="anchor" name="photo-gallery"></a>Photo Gallery <a class="hash-link" href="#photo-gallery">#</a></h2>
 <p><a href="http://miekd.com/">Maykel Loomans</a>, designer at Instagram, wrote a gallery for photos he shot using React.
 <figure><a href="http://photos.miekd.com/xoxo2013/"><img src="/react/img/blog/xoxo2013.png" alt=""></a></figure></p>
-<h2 id="random-tweet" class="anchor"><a href="#random-tweet">Random Tweet</a></h2>
+<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
 <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>
 
@@ -88,7 +88,7 @@ Is this some sort of template language? Specifically no. This might have been th
 				<p>This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.</p>
 
 <p>The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.</p>
-<h2 id="khan-academy---officially-moving-to-react" class="anchor"><a href="#khan-academy---officially-moving-to-react">Khan Academy - Officially moving to React</a></h2>
+<h2><a class="anchor" name="khan-academy---officially-moving-to-react"></a>Khan Academy - Officially moving to React <a class="hash-link" href="#khan-academy---officially-moving-to-react">#</a></h2>
 <p><a href="http://joelburget.com/">Joel Burget</a> announced at Hack Reactor that new front-end code at Khan Academy should be written in React!</p>
 
 <blockquote>
@@ -102,11 +102,11 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="http://joelburget.com/backbone-to-react/">Read the full article</a></p>
 </blockquote>
-<h2 id="react-rethinking-best-practices" class="anchor"><a href="#react-rethinking-best-practices">React: Rethinking best practices</a></h2>
+<h2><a class="anchor" name="react-rethinking-best-practices"></a>React: Rethinking best practices <a class="hash-link" href="#react-rethinking-best-practices">#</a></h2>
 <p><a href="http://www.petehunt.net/">Pete Hunt</a>&#39;s talk at JSConf EU 2013 is now available in video.</p>
 
 <figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
-<h2 id="server-side-react-with-php" class="anchor"><a href="#server-side-react-with-php">Server-side React with PHP</a></h2>
+<h2><a class="anchor" name="server-side-react-with-php"></a>Server-side React with PHP <a class="hash-link" href="#server-side-react-with-php">#</a></h2>
 <p><a href="http://www.phpied.com/">Stoyan Stefanov</a>&#39;s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.</p>
 
 <blockquote>
@@ -128,7 +128,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p>Rendered markup on the server:
 <figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="/react/img/blog/react-php.png" alt=""></a></figure></p>
 </blockquote>
-<h2 id="todomvc-benchmarks" class="anchor"><a href="#todomvc-benchmarks">TodoMVC Benchmarks</a></h2>
+<h2><a class="anchor" name="todomvc-benchmarks"></a>TodoMVC Benchmarks <a class="hash-link" href="#todomvc-benchmarks">#</a></h2>
 <p>Webkit has a <a href="https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench">TodoMVC Benchmark</a> that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):</p>
 
 <ul>
@@ -164,10 +164,10 @@ Is this some sort of template language? Specifically no. This might have been th
 <p>By default, React &quot;re-renders&quot; all the components when anything changes. This is usually fast enough that you don&#39;t need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.</p>
 
 <p>The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.</p>
-<h2 id="guess-the-filter" class="anchor"><a href="#guess-the-filter">Guess the filter</a></h2>
+<h2><a class="anchor" name="guess-the-filter"></a>Guess the filter <a class="hash-link" href="#guess-the-filter">#</a></h2>
 <p><a href="http://conr.me">Connor McSheffrey</a> implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
 <figure><a href="http://guessthefilter.com/"><img src="/react/img/blog/guess_filter.jpg" alt=""></a></figure></p>
-<h2 id="react-vs-fruitmachine" class="anchor"><a href="#react-vs-fruitmachine">React vs FruitMachine</a></h2>
+<h2><a class="anchor" name="react-vs-fruitmachine"></a>React vs FruitMachine <a class="hash-link" href="#react-vs-fruitmachine">#</a></h2>
 <p><a href="http://trib.tv/">Andrew Betts</a>, director of the <a href="http://labs.ft.com/">Financial Times Labs</a>, posted an article comparing <a href="https://github.com/ftlabs/fruitmachine">FruitMachine</a> and React.</p>
 
 <blockquote>
@@ -177,7 +177,7 @@ Is this some sort of template language? Specifically no. This might have been th
 </blockquote>
 
 <p>Even though we weren&#39;t inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it&#39;s great to see similar technologies emerging and becoming popular.</p>
-<h2 id="react-brunch" class="anchor"><a href="#react-brunch">React Brunch</a></h2>
+<h2><a class="anchor" name="react-brunch"></a>React Brunch <a class="hash-link" href="#react-brunch">#</a></h2>
 <p><a href="http://elucidata.net/">Matthew McCray</a> implemented <a href="https://npmjs.org/package/react-brunch">react-brunch</a>, a JSX compilation step for <a href="http://brunch.io/">Brunch</a>.</p>
 
 <blockquote>
@@ -189,7 +189,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="https://npmjs.org/package/react-brunch">Read more...</a></p>
 </blockquote>
-<h2 id="random-tweet" class="anchor"><a href="#random-tweet">Random Tweet</a></h2>
+<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
 <p>I&#39;m going to start adding a tweet at the end of each round-up. We&#39;ll start with this one:</p>
 
 <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>
@@ -204,7 +204,7 @@ Is this some sort of template language? Specifically no. This might have been th
 				<p>React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It&#39;s scaled very well for us at Facebook and Instagram.</p>
 
 <p>One of the many great parts of React is how it makes you think about apps as you build them. In this post I&#39;ll walk you through the thought process of building a searchable product data table using React.</p>
-<h2 id="start-with-a-mock" class="anchor"><a href="#start-with-a-mock">Start with a mock</a></h2>
+<h2><a class="anchor" name="start-with-a-mock"></a>Start with a mock <a class="hash-link" href="#start-with-a-mock">#</a></h2>
 <p>Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn&#39;t very good because the mock looks like this:</p>
 
 <p><img src="/react/img/blog/thinking-in-react-mock.png" alt="Mockup"></p>
@@ -218,7 +218,7 @@ Is this some sort of template language? Specifically no. This might have been th
   {category: &quot;Electronics&quot;, price: &quot;$399.99&quot;, stocked: false, name: &quot;iPhone 5&quot;},
   {category: &quot;Electronics&quot;, price: &quot;$199.99&quot;, stocked: true, name: &quot;Nexus 7&quot;}
 ];
-</code></pre></div><h2 id="step-1-break-the-ui-into-a-component-hierarchy" class="anchor"><a href="#step-1-break-the-ui-into-a-component-hierarchy">Step 1: break the UI into a component hierarchy</a></h2>
+</code></pre></div><h2><a class="anchor" name="step-1-break-the-ui-into-a-component-hierarchy"></a>Step 1: break the UI into a component hierarchy <a class="hash-link" href="#step-1-break-the-ui-into-a-component-hierarchy">#</a></h2>
 <p>The first thing you&#39;ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you&#39;re working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!</p>
 
 <p>But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the <a href="http://en.wikipedia.org/wiki/Single_responsibility_principle">single responsibility principle</a>, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.</p>
@@ -254,7 +254,7 @@ Is this some sort of template language? Specifically no. This might have been th
 </ul></li>
 </ul></li>
 </ul>
-<h2 id="step-2-build-a-static-version-in-react" class="anchor"><a href="#step-2-build-a-static-version-in-react">Step 2: Build a static version in React</a></h2>
+<h2><a class="anchor" name="step-2-build-a-static-version-in-react"></a>Step 2: Build a static version in React <a class="hash-link" href="#step-2-build-a-static-version-in-react">#</a></h2>
 <iframe width="100%" height="300" src="http://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 <p>Now that you have your component hierarchy it&#39;s time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It&#39;s easiest to decouple these processes because building building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We&#39;ll see why.</p>
@@ -266,9 +266,9 @@ Is this some sort of template language? Specifically no. This might have been th
 <p>At the end of this step you&#39;ll have a library of reusable components that render your data model. The components will only have <code>render()</code> methods since this is a static version of your app. The component at the top of the hierarchy (<code>FilterableProductTable</code>) will take your data model as a prop. If you make a change to your underlying data model and call <code>renderComponent()</code> again the UI will be updated. It&#39;s easy to see how your UI is updated and where to make changes since there&#39;s nothing complicated going on since React&#39;s <strong>one-way data flow</strong> (also called <em>one-way binding</em>) keeps everything modular, easy to reason about, and fast.</p>
 
 <p>Simply refer to the <a href="http://facebook.github.io/react/docs/">React docs</a> if you need help executing this step.</p>
-<h3 id="a-brief-interlude-props-vs-state" class="anchor"><a href="#a-brief-interlude-props-vs-state">A brief interlude: props vs state</a></h3>
+<h3><a class="anchor" name="a-brief-interlude-props-vs-state"></a>A brief interlude: props vs state <a class="hash-link" href="#a-brief-interlude-props-vs-state">#</a></h3>
 <p>There are two types of &quot;model&quot; data in React: props and state. It&#39;s important to understand the distinction between the two; skim <a href="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html">the official React docs</a> if you aren&#39;t sure what the difference is.</p>
-<h2 id="step-3-identify-the-minimal-but-complete-representation-of-ui-state" class="anchor"><a href="#step-3-identify-the-minimal-but-complete-representation-of-ui-state">Step 3: Identify the minimal (but complete) representation of UI state</a></h2>
+<h2><a class="anchor" name="step-3-identify-the-minimal-but-complete-representation-of-ui-state"></a>Step 3: Identify the minimal (but complete) representation of UI state <a class="hash-link" href="#step-3-identify-the-minimal-but-complete-representation-of-ui-state">#</a></h2>
 <p>To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with <strong>state</strong>.</p>
 
 <p>To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: <em>Don&#39;t Repeat Yourself</em>. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you&#39;re building a TODO list, just keep an array of the TODO items around; don&#39;t keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.</p>
@@ -298,7 +298,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <li>The search text the user has entered</li>
 <li>The value of the checkbox</li>
 </ul>
-<h2 id="step-4-identify-where-your-state-should-live" class="anchor"><a href="#step-4-identify-where-your-state-should-live">Step 4: Identify where your state should live</a></h2>
+<h2><a class="anchor" name="step-4-identify-where-your-state-should-live"></a>Step 4: Identify where your state should live <a class="hash-link" href="#step-4-identify-where-your-state-should-live">#</a></h2>
 <iframe width="100%" height="300" src="http://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 <p>OK, so we&#39;ve identified what the minimal set of app state is. Next we need to identify which component mutates, or <em>owns</em>, this state.</p>
@@ -325,7 +325,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p>Cool, so we&#39;ve decided that our state lives in <code>FilterableProductTable</code>. First, add a <code>getInitialState()</code> method to <code>FilterableProductTable</code> that returns <code>{filterText: &#39;&#39;, inStockOnly: false}</code> to reflect the initial state of your application. Then pass <code>filterText</code> and <code>inStockOnly</code> to <code>ProductTable</code> and <code>SearchBar</code> as a prop. Finally, use these props to filter the rows in <code>ProductTable</code> and set the values of the form fields in <code>SearchBar</code>.</p>
 
 <p>You can start seeing how your application will behave: set <code>filterText</code> to <code>&quot;ball&quot;</code> and refresh your app. You&#39;ll see the data table is updated correctly.</p>
-<h2 id="step-5-add-inverse-data-flow" class="anchor"><a href="#step-5-add-inverse-data-flow">Step 5: Add inverse data flow</a></h2>
+<h2><a class="anchor" name="step-5-add-inverse-data-flow"></a>Step 5: Add inverse data flow <a class="hash-link" href="#step-5-add-inverse-data-flow">#</a></h2>
 <iframe width="100%" height="300" src="http://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 <p>So far we&#39;ve built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it&#39;s time to support data flowing the other way: the form components deep in the hierarchy need to update the state in <code>FilterableProductTable</code>.</p>
@@ -337,7 +337,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p>Let&#39;s think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, <code>FilterableProductTable</code> will pass a callback to <code>SearchBar</code> that will fire whenever the state should be updated. We can use the <code>onChange</code> event on the inputs to be notified of it. And the callback passed by <code>FilterableProductTable</code> will call <code>setState()</code> and the app will be updated.</p>
 
 <p>Though this sounds like a lot it&#39;s really just a few lines of code. And it&#39;s really explicit how your data is flowing throughout the app.</p>
-<h2 id="and-thats-it" class="anchor"><a href="#and-thats-it">And that&#39;s it</a></h2>
+<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
@@ -348,14 +348,14 @@ Is this some sort of template language? Specifically no. This might have been th
 			
 				React v0.5.1
 				<p>This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to <a href="https://github.com/spicyj">Ben Alpert</a>, <a href="https://github.com/andreypopp">Andrey Popp</a>, and <a href="https://github.com/lrowe">Laurence Rowe</a> for their contributions!</p>
-<h2 id="changelog" class="anchor"><a href="#changelog">Changelog</a></h2><h3 id="react" class="anchor"><a href="#react">React</a></h3>
+<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
 <ul>
 <li>Fixed bug with <code>&lt;input type=&quot;range&quot;&gt;</code> and selection events.</li>
 <li>Fixed bug with selection and focus.</li>
 <li>Made it possible to unmount components from the document root.</li>
 <li>Fixed bug for <code>disabled</code> attribute handling on non-<code>&lt;input&gt;</code> elements.</li>
 </ul>
-<h3 id="react-with-addons" class="anchor"><a href="#react-with-addons">React with Addons</a></h3>
+<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
 <ul>
 <li>Fixed bug with transition and animation event detection.</li>
 </ul>
@@ -372,11 +372,11 @@ Is this some sort of template language? Specifically no. This might have been th
 <p>The biggest change you&#39;ll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
 
 <p>The other major change in v0.5 is that we&#39;ve added an additional build - <code>react-with-addons</code> - which adds support for some extras that we&#39;ve been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
-<h2 id="thanks-to-our-community" class="anchor"><a href="#thanks-to-our-community">Thanks to Our Community</a></h2>
+<h2><a class="anchor" name="thanks-to-our-community"></a>Thanks to Our Community <a class="hash-link" href="#thanks-to-our-community">#</a></h2>
 <p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we&#39;ve nearly doubled the number of contributors in that time period. We&#39;ve seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We&#39;ve also had people tell us about talks they&#39;ve given in their local community about React.</p>
 
 <p>It&#39;s been awesome to see the things that people are building with React, and we can&#39;t wait to see what you come up with next!</p>
-<h2 id="changelog" class="anchor"><a href="#changelog">Changelog</a></h2><h3 id="react" class="anchor"><a href="#react">React</a></h3>
+<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
 <ul>
 <li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
 <li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
@@ -397,11 +397,11 @@ Is this some sort of template language? Specifically no. This might have been th
 <li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
 <li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
 </ul>
-<h3 id="react-with-addons-new" class="anchor"><a href="#react-with-addons-new">React with Addons (New!)</a></h3>
+<h3><a class="anchor" name="react-with-addons-new"></a>React with Addons (New!) <a class="hash-link" href="#react-with-addons-new">#</a></h3>
 <ul>
 <li>Introduced a separate build with several &quot;addons&quot; which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
 </ul>
-<h3 id="jsx" class="anchor"><a href="#jsx">JSX</a></h3>
+<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
 <ul>
 <li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
 <li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
@@ -419,7 +419,7 @@ Is this some sort of template language? Specifically no. This might have been th
 				<p>We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we&#39;ll probably organize more in the future.</p>
 
 <p><img src="/react/img/blog/react-hackathon.jpg" alt=""></p>
-<h2 id="react-hackathon-winner" class="anchor"><a href="#react-hackathon-winner">React Hackathon Winner</a></h2>
+<h2><a class="anchor" name="react-hackathon-winner"></a>React Hackathon Winner <a class="hash-link" href="#react-hackathon-winner">#</a></h2>
 <p><a href="http://bold-it.com/">Alex Swan</a> implemented <a href="http://qu.izti.me/">Qu.izti.me</a>, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.</p>
 
 <blockquote>
@@ -430,7 +430,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="http://bold-it.com/javascript/facebook-react-example/">Read More...</a></p>
 </blockquote>
-<h2 id="jsconf-eu-talk-rethinking-best-practices" class="anchor"><a href="#jsconf-eu-talk-rethinking-best-practices">JSConf EU Talk: Rethinking Best Practices</a></h2>
+<h2><a class="anchor" name="jsconf-eu-talk-rethinking-best-practices"></a>JSConf EU Talk: Rethinking Best Practices <a class="hash-link" href="#jsconf-eu-talk-rethinking-best-practices">#</a></h2>
 <p><a href="http://www.petehunt.net/">Pete Hunt</a> presented React at JSConf EU. He covers three controversial design decisions of React:</p>
 
 <ol>
@@ -442,7 +442,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p>The video will be available soon on the <a href="http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html">JSConf EU website</a>, but in the meantime, here are Pete&#39;s slides:</p>
 
 <figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
-<h2 id="pump---clojure-bindings-for-react" class="anchor"><a href="#pump---clojure-bindings-for-react">Pump - Clojure bindings for React</a></h2>
+<h2><a class="anchor" name="pump---clojure-bindings-for-react"></a>Pump - Clojure bindings for React <a class="hash-link" href="#pump---clojure-bindings-for-react">#</a></h2>
 <p><a href="http://solovyov.net/">Alexander Solovyov</a> has been working on React bindings for ClojureScript. This is really exciting as it is using &quot;native&quot; ClojureScript data structures.</p>
 <div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
   <span class="p">(</span><span class="ss">:require</span><span class="o">-</span><span class="n">macros</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">def</span><span class="o">-</span><span class="n">macros</span> <span class="ss">:refer</span> <span class="o">[</span><span class="n">defr</span><span class="o">]]</span><span class="p">)</span>
@@ -456,7 +456,7 @@ Is this some sort of template language? Specifically no. This might have been th
   <span class="o">[</span><span class="ss">:div</span> <span class="p">{</span><span class="ss">:class</span><span class="o">-</span><span class="nb">name</span> <span class="s2">&quot;test&quot;</span><span class="p">}</span> <span class="s2">&quot;hello&quot;</span><span class="o">]</span><span class="p">)</span>
 </code></pre></div>
 <p><a href="https://github.com/piranha/pump">Check it out on GitHub...</a></p>
-<h2 id="jsxhint" class="anchor"><a href="#jsxhint">JSXHint</a></h2>
+<h2><a class="anchor" name="jsxhint"></a>JSXHint <a class="hash-link" href="#jsxhint">#</a></h2>
 <p><a href="http://blog.selfassembled.org/">Todd Kennedy</a> working at <a href="http://www.condenast.com/">Cond&eacute; Nast</a> implemented a wrapper on-top of <a href="http://www.jshint.com/">JSHint</a> that first converts JSX files to JS.</p>
 
 <blockquote>
@@ -465,7 +465,7 @@ Is this some sort of template language? Specifically no. This might have been th
 </code></pre></div>
 <p><a href="https://github.com/CondeNast/JSXHint">Check it out on GitHub...</a></p>
 </blockquote>
-<h2 id="turbo-react" class="anchor"><a href="#turbo-react">Turbo React</a></h2>
+<h2><a class="anchor" name="turbo-react"></a>Turbo React <a class="hash-link" href="#turbo-react">#</a></h2>
 <p><a href="https://twitter.com/ssorallen">Ross Allen</a> working at <a href="http://mesosphere.io/">Mesosphere</a> combined <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, a library used by Ruby on Rails to speed up page transition, and React.</p>
 
 <blockquote>
@@ -478,7 +478,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="https://turbo-react.herokuapp.com/">Check out the demo...</a></p>
 </blockquote>
-<h2 id="reactive-table" class="anchor"><a href="#reactive-table">Reactive Table</a></h2>
+<h2><a class="anchor" name="reactive-table"></a>Reactive Table <a class="hash-link" href="#reactive-table">#</a></h2>
 <p><a href="http://www.phpied.com/">Stoyan Stefanov</a> continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.</p>
 
 <blockquote>
@@ -506,7 +506,7 @@ Is this some sort of template language? Specifically no. This might have been th
 <p>First, we are organizing a <a href="http://reactjshack-a-thon.splashthat.com/">React Hackathon</a> in Facebook&#39;s Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!</p>
 
 <p>We&#39;ve also reached a point where there are too many questions for us to handle directly. We&#39;re encouraging people to ask questions on <a href="http://stackoverflow.com/questions/tagged/reactjs">StackOverflow</a> using the tag <a href="http://stackoverflow.com/questions/tagged/reactjs">[reactjs]</a>. Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.</p>
-<h2 id="javascript-jabber" class="anchor"><a href="#javascript-jabber">Javascript Jabber</a></h2>
+<h2><a class="anchor" name="javascript-jabber"></a>Javascript Jabber <a class="hash-link" href="#javascript-jabber">#</a></h2>
 <p><a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="https://github.com/jordwalke">Jordan Walke</a> were interviewed on <a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Javascript Jabber</a> for an hour.  They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.</p>
 
 <blockquote>
@@ -520,13 +520,13 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Read the full conversation ...</a></p>
 </blockquote>
-<h2 id="jsxtransformer-trick" class="anchor"><a href="#jsxtransformer-trick">JSXTransformer Trick</a></h2>
+<h2><a class="anchor" name="jsxtransformer-trick"></a>JSXTransformer Trick <a class="hash-link" href="#jsxtransformer-trick">#</a></h2>
 <p>While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.</p>
 
 <div style="margin-left: 74px;"><blockquote class="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform(&quot;/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */&quot; + element.innerHTML).code</p>&mdash; Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
 
 <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
-<h2 id="remarkable-react" class="anchor"><a href="#remarkable-react">Remarkable React</a></h2>
+<h2><a class="anchor" name="remarkable-react"></a>Remarkable React <a class="hash-link" href="#remarkable-react">#</a></h2>
 <p><a href="http://www.phpied.com/">Stoyan Stefanov</a> gave a talk at <a href="http://braziljs.com.br/">BrazilJS</a> about React and wrote an article with the content of the presentation. He goes through the difficulties of writting <em>active apps</em> using the DOM API and shows how React handles it.</p>
 
 <blockquote>
@@ -544,13 +544,13 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="http://www.phpied.com/remarkable-react/">Read More ...</a></p>
 </blockquote>
-<h2 id="markdown-in-react" class="anchor"><a href="#markdown-in-react">Markdown in React</a></h2>
+<h2><a class="anchor" name="markdown-in-react"></a>Markdown in React <a class="hash-link" href="#markdown-in-react">#</a></h2>
 <p><a href="http://benalpert.com/">Ben Alpert</a> converted <a href="https://github.com/chjj/marked">marked</a>, a Markdown Javascript implementation, in React: <a href="https://github.com/spicyj/marked-react">marked-react</a>. Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to <code>escape</code> will not introduce an XSS vulnerability.
 <figure><a href="https://github.com/spicyj/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="/react/img/blog/markdown_refactor.png" alt=""></a></figure></p>
-<h2 id="unite-from-bugbusters" class="anchor"><a href="#unite-from-bugbusters">Unite from BugBusters</a></h2>
+<h2><a class="anchor" name="unite-from-bugbusters"></a>Unite from BugBusters <a class="hash-link" href="#unite-from-bugbusters">#</a></h2>
 <p><a href="https://twitter.com/renajohn">Renault John Lecoultre</a> wrote <a href="https://www.bugbuster.com/">Unite</a>, an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
 <figure><a href="https://unite.bugbuster.com/"><img src="/react/img/blog/unite.png" alt=""></a></figure></p>
-<h2 id="reactjs-irc-logs" class="anchor"><a href="#reactjs-irc-logs">#reactjs IRC Logs</a></h2>
+<h2><a class="anchor" name="reactjs-irc-logs"></a>#reactjs IRC Logs <a class="hash-link" href="#reactjs-irc-logs">#</a></h2>
 <p><a href="http://blog.vjeux.com/">Vjeux</a> re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.</p>
 
 <iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
@@ -573,10 +573,10 @@ Is this some sort of template language? Specifically no. This might have been th
 <li><a href="http://facebook.github.io/react/blog/">15 blog posts</a></li>
 <li>2 early adopters: <a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Khan Academy</a> and <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a></li>
 </ul>
-<h2 id="wolfenstein-rendering-engine-ported-to-react" class="anchor"><a href="#wolfenstein-rendering-engine-ported-to-react">Wolfenstein Rendering Engine Ported to React</a></h2>
+<h2><a class="anchor" name="wolfenstein-rendering-engine-ported-to-react"></a>Wolfenstein Rendering Engine Ported to React <a class="hash-link" href="#wolfenstein-rendering-engine-ported-to-react">#</a></h2>
 <p><a href="http://www.petehunt.net/">Pete Hunt</a> ported the render code of the web version of Wolfenstein 3D to React. Check out <a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html">the demo</a> and <a href="https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183">render.js</a> file for the implementation.
 <figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/react/img/blog/wolfenstein_react.png" alt=""></a></figure></p>
-<h2 id="react-amp-meteor" class="anchor"><a href="#react-amp-meteor">React &amp; Meteor</a></h2>
+<h2><a class="anchor" name="react-amp-meteor"></a>React &amp; Meteor <a class="hash-link" href="#react-amp-meteor">#</a></h2>
 <p><a href="https://twitter.com/benjamn">Ben Newman</a> made a <a href="https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js">13-lines wrapper</a> to use React and Meteor together. <a href="http://www.meteor.com/">Meteor</a> handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.</p>
 
 <blockquote>
@@ -599,7 +599,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="https://github.com/benjamn/meteor-react">Read more ...</a></p>
 </blockquote>
-<h2 id="react-page" class="anchor"><a href="#react-page">React Page</a></h2>
+<h2><a class="anchor" name="react-page"></a>React Page <a class="hash-link" href="#react-page">#</a></h2>
 <p><a href="https://github.com/jordwalke">Jordan Walke</a> implemented a complete React project creator called <a href="https://github.com/facebook/react-page/">react-page</a>. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.</p>
 
 <blockquote>
@@ -644,7 +644,7 @@ Is this some sort of template language? Specifically no. This might have been th
 			
 				Use React and JSX in Python Applications
 				<p>Today we&#39;re happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It&#39;s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
-<h2 id="usage" class="anchor"><a href="#usage">Usage</a></h2>
+<h2><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="#usage">#</a></h2>
 <p>Transform your JSX files via the provided <code>jsx</code> module:</p>
 <div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
 
@@ -661,12 +661,12 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <span class="c"># path_for raises IOError if the file doesn&#39;t exist.</span>
 <span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">&#39;react.min.js&#39;</span><span class="p">)</span>
-</code></pre></div><h2 id="django" class="anchor"><a href="#django">Django</a></h2>
+</code></pre></div><h2><a class="anchor" name="django"></a>Django <a class="hash-link" href="#django">#</a></h2>
 <p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project&#39;s pipeline settings like this:</p>
 <div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
   <span class="s">&#39;react.utils.pipeline.JSXCompiler&#39;</span><span class="p">,</span>
 <span class="p">)</span>
-</code></pre></div><h2 id="installation" class="anchor"><a href="#installation">Installation</a></h2>
+</code></pre></div><h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
 <p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
 <div class="highlight"><pre><code class="text language-text" data-lang="text">$ pip install PyReact
 </code></pre></div>
@@ -685,10 +685,10 @@ Is this some sort of template language? Specifically no. This might have been th
 			
 				Community Round-up #6
 				<p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It&#39;s great to see the adoption of React growing.</p>
-<h2 id="react-game-tutorial" class="anchor"><a href="#react-game-tutorial">React Game Tutorial</a></h2>
+<h2><a class="anchor" name="react-game-tutorial"></a>React Game Tutorial <a class="hash-link" href="#react-game-tutorial">#</a></h2>
 <p><a href="https://twitter.com/CalebCassel">Caleb Cassel</a> wrote a <a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html">step-by-step tutorial</a> about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
 <figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/react/img/blog/dog-tutorial.png" alt=""></a></figure></p>
-<h2 id="reactify" class="anchor"><a href="#reactify">Reactify</a></h2>
+<h2><a class="anchor" name="reactify"></a>Reactify <a class="hash-link" href="#reactify">#</a></h2>
 <p><a href="http://andreypopp.com/">Andrey Popp</a> created a <a href="http://browserify.org/">Browserify</a> helper to compile JSX files.</p>
 
 <blockquote>
@@ -699,7 +699,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="https://github.com/andreypopp/reactify">Check it out on Github...</a></p>
 </blockquote>
-<h2 id="react-integration-with-este" class="anchor"><a href="#react-integration-with-este">React Integration with Este</a></h2>
+<h2><a class="anchor" name="react-integration-with-este"></a>React Integration with Este <a class="hash-link" href="#react-integration-with-este">#</a></h2>
 <p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
 <div class="highlight"><pre><code class="coffeescript language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
   <span class="nv">render: </span><span class="nf">-&gt;</span>
@@ -718,7 +718,7 @@ Is this some sort of template language? Specifically no. This might have been th
     <span class="p">]</span>
 </code></pre></div>
 <p><a href="https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee">Check it out on Github...</a></p>
-<h2 id="react-stylus-boilerplate" class="anchor"><a href="#react-stylus-boilerplate">React Stylus Boilerplate</a></h2>
+<h2><a class="anchor" name="react-stylus-boilerplate"></a>React Stylus Boilerplate <a class="hash-link" href="#react-stylus-boilerplate">#</a></h2>
 <p><a href="http://zaim.github.io/">Zaim Bakar</a> shared his boilerplate to get started with Stylus CSS processor.</p>
 
 <blockquote>
@@ -737,7 +737,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
 <p><a href="https://github.com/zaim/react-stylus-boilerplate">Check it out on Github...</a></p>
 </blockquote>
-<h2 id="webfui" class="anchor"><a href="#webfui">WebFUI</a></h2>
+<h2><a class="anchor" name="webfui"></a>WebFUI <a class="hash-link" href="#webfui">#</a></h2>
 <p><a href="http://lisperati.com/">Conrad Barski</a>, author of the popular book <a href="http://landoflisp.com/">Land of Lisp</a>, wants to use React for his ClojureScript library called <a href="https://github.com/drcode/webfui">WebFUI</a>.</p>
 
 <blockquote>
diff --git a/support.html b/support.html
index d14e0e3bc9..5d46705c70 100644
--- a/support.html
+++ b/support.html
@@ -57,13 +57,13 @@
     
      Need help?
      
     
      
     
      React is worked on full-time by Facebook's product infrastructure and Instagram's user interface engineering teams. They're often around and available for questions.
      
-
      Stack Overflow
      
+
      Stack Overflow #
      
 
      Many members of the community use Stack Overflow to ask questions. Read through the existing questions tagged with reactjs or ask your own!
      
-
      Google Groups mailing list
      
+
      Google Groups mailing list #
      
 
      The reactjs Google Group is also a good place to ask questions and find answers.
      
-
      IRC
      
+
      IRC #
      
 
      Many developers and users idle on Freenode.net's IRC network in #reactjs on freenode.
      
-
      Twitter
      
+
      Twitter #
      
 
      #reactjs hash tag on Twitter is used to keep up with the latest React news.
      
 
 
      
diff --git a/tips/children-props-type.html b/tips/children-props-type.html
index ea36395290..a7b6b28b0f 100644
--- a/tips/children-props-type.html
+++ b/tips/children-props-type.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/componentWillReceiveProps-not-triggered-after-mounting.html b/tips/componentWillReceiveProps-not-triggered-after-mounting.html
index dc3a0543ab..e7ae247579 100644
--- a/tips/componentWillReceiveProps-not-triggered-after-mounting.html
+++ b/tips/componentWillReceiveProps-not-triggered-after-mounting.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/controlled-input-null-value.html b/tips/controlled-input-null-value.html
index df2e6a0419..6d8a86b695 100644
--- a/tips/controlled-input-null-value.html
+++ b/tips/controlled-input-null-value.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/dom-event-listeners.html b/tips/dom-event-listeners.html
index 01227b1b82..707385774a 100644
--- a/tips/dom-event-listeners.html
+++ b/tips/dom-event-listeners.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/false-in-jsx.html b/tips/false-in-jsx.html
index 2f5cf7d922..6efe02aafd 100644
--- a/tips/false-in-jsx.html
+++ b/tips/false-in-jsx.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/if-else-in-JSX.html b/tips/if-else-in-JSX.html
index aa0b79aadf..102b88264e 100644
--- a/tips/if-else-in-JSX.html
+++ b/tips/if-else-in-JSX.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/initial-ajax.html b/tips/initial-ajax.html
index 7e6e28f041..dab364058b 100644
--- a/tips/initial-ajax.html
+++ b/tips/initial-ajax.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/inline-styles.html b/tips/inline-styles.html
index cc681cbb9b..782e591334 100644
--- a/tips/inline-styles.html
+++ b/tips/inline-styles.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/introduction.html b/tips/introduction.html
index ab54575e8d..11b0235c11 100644
--- a/tips/introduction.html
+++ b/tips/introduction.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
@@ -298,7 +320,7 @@
     
      Introduction
      
     
      
     
      The React tips section provides bite-sized information that can answer lots of questions you might have and warn you against common pitfalls.
      
-
      Contributing
      
+
      Contributing #
      
 
      Submit a pull request to the React repository following the current tips entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the #reactjs channel on freenode or the reactjs Google group. Also, check the Tips Wiki) for entries in-progress and general guidelines on writing React tips.
      
 
 
diff --git a/tips/maximum-number-of-jsx-root-nodes.html b/tips/maximum-number-of-jsx-root-nodes.html
index 75c314d8a6..16834d9b76 100644
--- a/tips/maximum-number-of-jsx-root-nodes.html
+++ b/tips/maximum-number-of-jsx-root-nodes.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/props-in-getInitialState-as-anti-pattern.html b/tips/props-in-getInitialState-as-anti-pattern.html
index f991675261..796d8b555b 100644
--- a/tips/props-in-getInitialState-as-anti-pattern.html
+++ b/tips/props-in-getInitialState-as-anti-pattern.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/self-closing-tag.html b/tips/self-closing-tag.html
index 6e7f0da674..94c83c1948 100644
--- a/tips/self-closing-tag.html
+++ b/tips/self-closing-tag.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    • 
diff --git a/tips/style-props-value-px.html b/tips/style-props-value-px.html
index 9a9aec1ce2..dc5f049241 100644
--- a/tips/style-props-value-px.html
+++ b/tips/style-props-value-px.html
@@ -165,9 +165,31 @@
         
           
    • 
             
-              Add-ons
+              Add-Ons
             
             
+              
+            
           
      • 
         
           
    •