` with "Hello,
world!".
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 5b732c03..1e62818e 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -88,6 +88,10 @@ React.renderComponent(
);
```
+> Note:
+>
+> The comment parser is very strict right now, in order for it to pick up the `@jsx` modifier, two conditions are required. The `@jsx` comment block must be the first comment on the file. The comment must start with `/**` (`/*` and `//` will not work). If the parser can't find the `@jsx` comment, it will output the file without transforming it.
+
Update your HTML file as below:
```html{6,10}
diff --git a/docs/jsx-is-not-html.md b/docs/jsx-is-not-html.md
new file mode 100644
index 00000000..42013e91
--- /dev/null
+++ b/docs/jsx-is-not-html.md
@@ -0,0 +1,95 @@
+---
+id: docs-jsx-is-not-html
+title: JSX is not HTML
+description: Differences between JSX and HTML.
+layout: docs
+prev: api.html
+---
+
+JSX looks like HTML but there are some important differences you may run into.
+
+## 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 `{' '}`.
+
+```javascript
+
{this.props.name} {' '} {this.props.surname}
+```
+
+Follow [Issue #65](https://github.com/facebook/react/issues/65) for discussion on this behavior.
+
+## HTML Entities
+
+You can insert HTML entities within literal text in JSX:
+
+```javascript
+
First · Second
+```
+
+If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
+
+```javascript
+// Bad: It displays "First · Second"
+
{'First · Second'}
+```
+
+There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
+
+```javascript
+
{'First ยท Second'}
+```
+
+A safer alternative is to find the [unicode number corresponding to the entity](http://www.fileformat.info/info/unicode/char/b7/index.htm) and use it inside of a JavaScript string.
+
+```javascript
+
{'First \u00b7 Second'}
+
{'First ' + String.fromCharCode(183) + ' Second'}
+```
+
+You can use mixed arrays with strings and JSX elements.
+
+```javascript
+
{['First ', ·, ' Second']}
+```
+
+As a last resort, you always have the ability to insert raw HTML.
+
+```javascript
+
+```
+
+## Comments
+
+JSX supports both single-line and multi-line JavaScript comments within a tag declaration:
+
+```javascript
+
+```
+
+As of React 0.3, there is no good way to insert comments within the children section. [Issue #82](https://github.com/facebook/react/issues/82) is tracking progress to enable the following:
+
+```javascript
+// Note: This is not implemented yet!
+
+ {/* This is a comment */}
+
+```
+
+## 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-`.
+
+```javascript
+
+```
+
+[Web Accessibility](http://www.w3.org/WAI/intro/aria) attributes starting with `aria-` will be rendered properly.
+
+```javascript
+
+```
diff --git a/docs/syntax.md b/docs/syntax.md
index e4b099bd..bb477e9a 100644
--- a/docs/syntax.md
+++ b/docs/syntax.md
@@ -53,7 +53,7 @@ var app = Nav({color:'blue'}, Profile({}, 'click'));
```
Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
-desguars into native JavaScript.
+desugars into native JavaScript.
If you want to use JSX, the [Getting Started](getting-started.html) guide shows
how to setup compilation.
diff --git a/docs/tutorial.md b/docs/tutorial.md
index 8117b2ba..021ff505 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -262,8 +262,8 @@ So far we've been inserting the comments directly in the source code. Instead, l
```javascript
// tutorial8.js
var data = [
- {author: 'Pete Hunt', text: 'This is one comment'},
- {author: 'Jordan Walke', text: 'This is *another* comment'}
+ {author: "Pete Hunt", text: "This is one comment"},
+ {author: "Jordan Walke", text: "This is *another* comment"}
];
```
@@ -357,8 +357,8 @@ When the component is first created, we want to GET some JSON from the server an
```javascript
// tutorial13.json
[
- {'author': 'Pete Hunt', 'text': 'This is one comment'},
- {'author': 'Jordan Walke', 'text': 'This is *another* comment'}
+ {"author": "Pete Hunt", "text": "This is one comment"},
+ {"author": "Jordan Walke", "text": "This is *another* comment"}
]
```
@@ -435,7 +435,7 @@ React.renderComponent(
```
-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 60 seconds after that. Try running this in your browser and changing the `comments.json` file; within 5 seconds, the changes will show!
+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 5 seconds after that. Try running this in your browser and changing the `comments.json` file; within 5 seconds, the changes will show!
## Adding new comments
diff --git a/downloads.md b/downloads.md
index d35ff4db..2b2a9ad5 100644
--- a/downloads.md
+++ b/downloads.md
@@ -49,6 +49,8 @@ $ npm install -g react-tools
## Release Notes
+**0.3.3** Upgrade `react-tools` dependencies, improve in-browser JSX transformer, make `React.renderComponent` more versatile. [Details...](blog/2013/06/20/react-v0-3-3.html)
+
**0.3.2** Improve compatibility of JSX Transformer; make `react-tools` compatible with [browserify](https://github.com/substack/node-browserify)
**0.3.1** Fix `react-tools` module
diff --git a/img/blog/chatapp.png b/img/blog/chatapp.png
new file mode 100644
index 00000000..55edf29d
Binary files /dev/null and b/img/blog/chatapp.png differ
diff --git a/img/blog/propeller-logo.png b/img/blog/propeller-logo.png
new file mode 100644
index 00000000..1573d715
Binary files /dev/null and b/img/blog/propeller-logo.png differ
diff --git a/img/blog/todomvc.png b/img/blog/todomvc.png
new file mode 100644
index 00000000..9c03bc0f
Binary files /dev/null and b/img/blog/todomvc.png differ
diff --git a/img/blog/xreact.png b/img/blog/xreact.png
new file mode 100644
index 00000000..59fbb6f2
Binary files /dev/null and b/img/blog/xreact.png differ
](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
+>
+> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
+>
+> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.
+>
+> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
+
+## Grunt Task for JSX
+
+[Eric Clemmons](http://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
+
+> Grunt task for compiling Facebook React's .jsx templates into .js
+>
+> ```javascript
+grunt.initConfig({
+ react: {
+ app: {
+ options: { extension: 'js' },
+ files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
+```
+>
+> It also works great with `grunt-browserify`!
+>
+> ```javascript
+browserify: {
+ options: {
+ transform: [ require('grunt-react').browserify ]
+ },
+ app: {
+ src: 'path/to/source/main.js',
+ dest: 'path/to/target/output.js'
+```
+>
+> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
+
+## Backbone/Handlebars Nested Views
+
+[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
+
+> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
+>
+> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
+>
+> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.
+>
+> [Read the full post...](http://joelburget.com/react/)
+
+## JSRomandie Meetup
+
+[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
+
+
+
+## CoffeeScript integration
+
+[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
+
+> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
+>
+> ```javascript
+{div, h3, textarea} = React.DOM
+(div {className: 'MarkdownEditor'}, [
+ (h3 {}, 'Input'),
+ (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
+ @state.value
+ )
+])
+```
+>
+> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
+
+## Tutorial in Plain Javascript
+
+We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain Javascript.
+
+> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.
+>
+> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html)
diff --git a/docs/api.md b/docs/api.md
index 1ae5e97b..337ae869 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -3,6 +3,7 @@ id: docs-api
title: React API
layout: docs
prev: mixins.html
+next: jsx-is-not-html.html
---
## React
diff --git a/docs/component-lifecycle.md b/docs/component-lifecycle.md
index 1998f180..8861c187 100644
--- a/docs/component-lifecycle.md
+++ b/docs/component-lifecycle.md
@@ -22,7 +22,7 @@ In this one simple line, we have accomplished the following:
- The component is **mounted** into `document.body`.
**Mounting** is the process of initializing a React component by creating its
-DOM nodes and inserting the them into a supplied container node.
+DOM nodes and inserting them into a supplied container node.
At this point, the entire page consists of a single `