`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:
The React add-ons are a collection of useful utility modules for building React apps. **These should be considered experimental** and tend to change more often than the core.
- [`TransitionGroup` and `CSSTransitionGroup`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
- [`LinkedStateMixin`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and the component's state.
@ -20,6 +20,4 @@ The add-ons below are in the development (unminified) version of React only:
- [`TestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
- [`Perf`](perf.html), for measuring performance and giving you hint where to optimize.
To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.
When using the react package from npm, simply `require('react/addons')` instead of `require('react')` to get React with all of the add-ons.
To get the add-ons, install them individually from npm (e.g., `npm install react-addons-pure-render-mixin`). We don't support using the addons if you're not using npm.
@ -17,7 +17,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{28-30}
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var TodoList = React.createClass({
getInitialState: function() {
@ -173,7 +173,7 @@ In order for it to apply transitions to its children, the `ReactCSSTransitionGro
In the example above, we rendered a list of items into `ReactCSSTransitionGroup`. However, the children of `ReactCSSTransitionGroup` can also 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. For example, we can implement a simple image carousel like this:
```javascript{10-12}
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var ImageCarousel = React.createClass({
propTypes: {
@ -201,7 +201,7 @@ You can disable animating `enter` or `leave` animations if you want. For example
## Low-level API: `ReactTransitionGroup`
`ReactTransitionGroup` is the basis for animations. It is accessible as `React.addons.TransitionGroup`. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
`ReactTransitionGroup` is the basis for animations. It is accessible from `require('react-addons-transition-group')`. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
### `componentWillAppear(callback)`
@ -237,11 +237,7 @@ By default `ReactTransitionGroup` renders as a `span`. You can change this behav
</ReactTransitionGroup>
```
Every DOM component that React can render is available for use. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!
> Note:
>
> Prior to v0.12, when using DOM components, the `component` prop needed to be a reference to `React.DOM.*`. Since the component is simply passed to `React.createElement`, it must now be a string. Composite components must pass the factory.
Every DOM component that React can render is available for use. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself! Just write `component={List}` and your component will receive `this.props.children`.
Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a `<ul>` with CSS class:
@ -46,8 +46,10 @@ 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{2,7}
var LinkedStateMixin = require('react-addons-linked-state-mixin');
var WithLink = React.createClass({
mixins: [React.addons.LinkedStateMixin],
mixins: [LinkedStateMixin],
getInitialState: function() {
return {message: 'Hello!'};
},
@ -96,8 +98,10 @@ As you can see, `ReactLink` objects are very simple objects that just have a `va
### ReactLink Without valueLink
```javascript
var LinkedStateMixin = require('react-addons-linked-state-mixin');
> This module now exists independently at [JedWatson/classnames](https://github.com/JedWatson/classnames) and is React-agnostic. The add-on here will thus be removed in the future.
`classSet()` is a neat utility for easily manipulating the DOM `class` string.
Here's a common scenario and its solution without `classSet()`:
```javascript
// 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 <divclassName={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:
```javascript
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 <divclassName={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.
`classSet()` also lets you pass class names in as arguments that are then concatenated for you:
```javascript
render: function() {
var cx = React.addons.classSet;
var importantModifier = 'message-important';
var readModifier = 'message-read';
var classes = cx('message', importantModifier, readModifier);
// Final string is 'message message-important message-read'
return <divclassName={classes}>Great, I'll be there.</div>;
}
```
No more hacky string concatenations!
> This module has been deprecated; use [JedWatson/classnames](https://github.com/JedWatson/classnames) instead.
`React.addons.TestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](https://facebook.github.io/jest/)).
`ReactTestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](https://facebook.github.io/jest/)).
```
var ReactTestUtils = require('react-addons-test-utils');
```
### Simulate
@ -23,7 +27,7 @@ Simulate an event dispatch on a DOM node with optional `eventData` event data. *
```javascript
var node = ReactDOM.findDOMNode(this.refs.button);
React.addons.TestUtils.Simulate.click(node);
ReactTestUtils.Simulate.click(node);
```
**Changing the value of an input field and then pressing ENTER**
*note that you will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you*
In rare situations, you may want to create a copy of a React element with different props from those of the original element. One example is cloning the elements passed into `this.props.children` and rendering them with different props:
```js
var cloneWithProps = require('react-addons-clone-with-props');
@ -10,14 +10,14 @@ React is usually quite fast out of the box. However, in situations where you nee
In addition to giving you an overview of your app's overall performance, ReactPerf is a profiling tool that tells you exactly where you need to put these hooks.
## General API
The `Perf` object documented here is exposed as `require('react-addons-perf')` and can be used with React in development mode only. You should not include this bundle when building your app for production.
> Note:
>
> The dev build of React is slower than the prod build, due to all the extra logic for providing, for example, React's friendly console warnings (stripped away in the prod build). Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
## General API
The `Perf` object documented here is exposed as `React.addons.Perf` when using the `react-with-addons.js` build in development mode.
### `Perf.start()` and `Perf.stop()`
Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.
* [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
## Starter Kit
## Using React from npm
Download the starter kit to get started.
We recommend using React with a CommonJS module system like [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/). Use the [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) npm packages.
```js
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
```
To install React DOM and build your bundle after installing browserify:
```sh
$ npm install --save react react-dom
$ browserify -t babelify main.js -o bundle.js
```
## Quick Start Without npm
If you're not ready to use npm yet, you can download the starter kit which includes prebuilt copies of React and React DOM.
@ -109,10 +133,6 @@ Update your HTML file as below:
</html>
```
## Want CommonJS?
If you want to use React with [browserify](http://browserify.org/), [webpack](https://webpack.github.io/), or another CommonJS-compatible module system, just use the [`react` npm package](https://www.npmjs.com/package/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.
## Next Steps
Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more.
@ -71,6 +71,65 @@ the type argument can be either an html tag name string (eg. 'div', 'span', etc)
`ReactClass`.
### React.isValidElement
```javascript
boolean isValidElement(* object)
```
Verifies the object is a ReactElement.
### React.DOM
`React.DOM` provides convenience wrappers around `React.createElement` for DOM components. These should only be used when not using JSX. For example, `React.DOM.div(null, 'Hello World!')`
### React.PropTypes
`React.PropTypes` includes types that can be used with a component's `propTypes` object to validate props being passed to your components. For more information about `propTypes`, see [Reusable Components](/react/docs/reusable-components.html).
### React.Children
`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.
#### React.Children.map
```javascript
object React.Children.map(object children, function fn [, object thisArg])
```
Invoke `fn` on every immediate child contained within `children` with `this` set to `thisArg`. If `children` is a nested object or array it will be traversed: `fn` will never be passed the container objects. If children is `null` or `undefined` returns `null` or `undefined` rather than an empty object.
#### React.Children.forEach
```javascript
React.Children.forEach(object children, function fn [, object thisArg])
```
Like `React.Children.map()` but does not return an object.
#### React.Children.count
```javascript
number React.Children.count(object children)
```
Return the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked.
#### React.Children.only
```javascript
object React.Children.only(object children)
```
Return the only child in `children`. Throws otherwise.
## ReactDOM
The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to.
Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
### ReactDOM.renderToString
```javascript
string renderToString(ReactElement element)
```
Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to 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.
If you call `ReactDOM.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
### ReactDOM.renderToStaticMarkup
```javascript
string renderToStaticMarkup(ReactElement element)
```
Similar to `renderToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
### ReactDOM.isValidElement
```javascript
boolean isValidElement(* object)
```
Verifies the object is a ReactElement.
### ReactDOM.findDOMNode
```javascript
@ -150,48 +180,25 @@ If this component has been mounted into the DOM, this returns the corresponding
>
> `findDOMNode()` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
### React.DOM
`React.DOM` provides convenience wrappers around `React.createElement` for DOM components. These should only be used when not using JSX. For example, `React.DOM.div(null, 'Hello World!')`
## ReactDOMServer
The `react-dom/server` package allows you to render your components on the server.
### React.PropTypes
`React.PropTypes` includes types that can be used with a component's `propTypes` object to validate props being passed to your components. For more information about `propTypes`, see [Reusable Components](/react/docs/reusable-components.html).
### React.Children
`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.
#### React.Children.map
### ReactDOMServer.renderToString
```javascript
object React.Children.map(object children, function fn [, object thisArg])
```
Invoke `fn` on every immediate child contained within `children` with `this` set to `thisArg`. If `children` is a nested object or array it will be traversed: `fn` will never be passed the container objects. If children is `null` or `undefined` returns `null` or `undefined` rather than an empty object.
#### React.Children.forEach
```javascript
React.Children.forEach(object children, function fn [, object thisArg])
string renderToString(ReactElement element)
```
Like `React.Children.map()` but does not return an object.
#### React.Children.count
Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to 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.
```javascript
number React.Children.count(object children)
```
If you call `ReactDOM.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
Return the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked.
#### React.Children.only
### ReactDOMServer.renderToStaticMarkup
```javascript
object React.Children.only(object children)
string renderToStaticMarkup(ReactElement element)
```
Return the only child in `children`. Throws otherwise.
Similar to `renderToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
@ -126,6 +127,8 @@ You do not have to return basic HTML. You can return a tree of components that y
`ReactDOM.render()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.
The `ReactDOM` module exposes DOM-specific methods, while `React` has the core tools shared by React on different platforms (e.g., [React Native](http://facebook.github.io/react-native/)).
## Composing components
Let's build skeletons for `CommentList` and `CommentForm` which will, again, be simple `<div>`s. Add these two components to your file, keeping the existing `CommentBox` declaration and `ReactDOM.render` call:
@ -220,12 +223,13 @@ Markdown is a simple way to format your text inline. For example, surrounding te
First, add the third-party library **marked** 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):
Ben Alpert
9 years ago