@ -35,8 +35,6 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:
JSX is a JavaScript XML syntax transform recommended for use
with React.
> Note:
>
> Don't forget the `/** @jsx React.DOM */` pragma at the beginning of your file! This tells JSX to process the file for React.
>
> If you don't include the pragma, your source will remain untouched, so it's safe to run the JSX transformer on all JS files in your codebase if you want to.
## Why JSX?
React works out of the box without JSX. Simply construct your markup using the
@ -57,7 +51,7 @@ var app = Nav({color:"blue"}, Profile(null, "click"));
```
Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
desugars into native JavaScript, and the
desugars into native JavaScript, and the
[HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
JSX.
@ -113,13 +107,9 @@ See [Multiple Components](/react/docs/multiple-components.html) to learn more ab
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
will use that field to find DOM components.
problem:
```javascript
/**
* @jsx React.DOM
*/
var Nav;
// Input (JSX):
var tree = <Nav><span/></Nav>;
@ -130,8 +120,7 @@ var tree = Nav(null, React.DOM.span(null));
> Remember:
>
> JSX simply transforms elements into function calls and has no notion of the
> DOM. The docblock parameter is only a convenience to resolve the most commonly
> used elements. In general, JSX has no notion of the DOM.
@ -103,8 +103,6 @@ The result of `getDefaultProps()` will be cached and used to ensure that `this.p
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.
```javascript
/** @jsx React.DOM */
var CheckLink = React.createClass({
render: function() {
// transferPropsTo() will take any props passed to CheckLink
@ -150,8 +148,6 @@ Components are the best way to reuse code in React, but sometimes very different
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](/react/docs/working-with-the-browser.html#component-lifecycle) 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.
@ -29,8 +29,6 @@ To interact with the browser, you'll need a reference to a DOM node. Every mount
In order to get a reference to a React component, you can either use `this` to get the current React component, or you can use refs to refer to a component you own. They work like this:
```javascript
/** @jsx React.DOM */
var MyComponent = React.createClass({
handleClick: function() {
// Explicitly focus the text input using the raw DOM API.
@ -23,7 +23,7 @@ We have instructions for building from `master` [in our GitHub repository](https
### In-browser JSX Transform
If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). 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.
If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer.
@ -16,9 +16,7 @@ React provides a `ReactTransitionGroup` addon component as a low-level API for a
`ReactCSSTransitionGroup` 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.
```javascript{30-32}
/** @jsx React.DOM */
```javascript{28-30}
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({
@ -87,7 +85,7 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM. The example below would not work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Getting Started](#getting-started) section above to see the difference.
```javascript{12-14}
```javascript{12-15}
render: function() {
var items = this.state.items.map(function(item, i) {
return (
@ -111,9 +109,7 @@ In order for it to apply transitions to its children, the `ReactCSSTransitionGro
Although in the example above we rendered a list of items into `ReactCSSTransitionGroup`, the children of `ReactCSSTransitionGroup` can be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element, with the new element animating in while the current animates out. For example, we can implement a simple image carousel like this:
```javascript{12-14}
/** @jsx React.DOM */
```javascript{10-12}
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
`ReactLink` is an easy way to express two-way binding with React.
`ReactLink` is an easy way to express two-way binding with React.
> Note:
>
@ -29,8 +29,6 @@ Two-way binding -- implicitly enforcing that some value in the DOM is always con
Here's a simple form example without using `ReactLink`:
```javascript
/** @jsx React.DOM */
var NoLink = React.createClass({
getInitialState: function() {
return {message: 'Hello!'};
@ -47,9 +45,7 @@ var NoLink = React.createClass({
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:
```javascript{4,9}
/** @jsx React.DOM */
```javascript{2,7}
var WithLink = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
@ -77,9 +73,7 @@ There are two sides to `ReactLink`: the place where you create the `ReactLink` i
### ReactLink Without LinkedStateMixin
```javascript{7-9,11-14}
/** @jsx React.DOM */
```javascript{5-7,9-12}
var WithoutMixin = React.createClass({
getInitialState: function() {
return {message: 'Hello!'};
@ -102,8 +96,6 @@ As you can see, `ReactLink` objects are very simple objects that just have a `va
@ -34,7 +34,6 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo
<body>
<divid="example"></div>
<scripttype="text/jsx">
/** @jsx React.DOM */
React.renderComponent(
<h1>Hello, world!</h1>,
document.getElementById('example')
@ -51,18 +50,12 @@ The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/r
Your React JSX code can live in a separate file. Create the following `src/helloworld.js`.
```javascript
/** @jsx React.DOM */
React.renderComponent(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
```
> Note:
>
> ```/** @jsx React.DOM */``` is *required*. 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.
Then reference it from `helloworld.html`:
```html{10}
@ -86,8 +79,7 @@ jsx --watch src/ build/
The file `build/helloworld.js` is autogenerated whenever you make a change.
In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string ([more on that later](/react/tips/style-props-value-px.html)):
`if-else` statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:
When specifying a pixel value for your inline `style` prop, React automatically appends the string "px" for you after your number value, so this works:
```js
/** @jsx React.DOM */
var divStyle = {height: 10}; // rendered as "height:10px"
However, when there is only a single child, `this.props.children` will be the single child component itself _without the array wrapper_. This saves an array allocation.
If you're using React components in a larger non-React application or transitioning your code to React, you may need to keep references to components. `React.renderComponent` returns a reference to the mounted component:
```js
/** @jsx React.DOM */
var myComponent = React.renderComponent(<MyComponent/>, myContainer);
```
Keep in mind, however, that the "constructor" of a component doesn't return a component instance! It's just a **descriptor**: a lightweight representation that tells React what the mounted component should look like.
```js
/** @jsx React.DOM */
var myComponent = <MyComponent/>; // This is just a descriptor.
You can't access the children of your component through `this.props.children`. `this.props.children` designates the children being **passed onto you** by the owner:
```js
/** @jsx React.DOM */
var App = React.createClass({
componentDidMount: function() {
// This doesn't refer to the `span`s! It refers to the children between
Paul O’Shannessy
10 years ago