From c3dcd2e9dd701e1f8c3f737afdfe08b5adb7ab56 Mon Sep 17 00:00:00 2001 From: Ben Alpert Date: Tue, 6 Oct 2015 17:25:38 -0700 Subject: [PATCH] Update some more docs for package split --- docs/10-addons.md | 6 +- docs/10.1-animation.md | 12 +-- docs/10.2-form-input-binding-sugar.md | 8 +- docs/10.3-class-name-manipulation.md | 53 +---------- docs/10.4-test-utils.md | 12 ++- docs/10.5-clone-with-props.md | 4 +- docs/10.6-create-fragment.md | 10 +- docs/10.7-update.md | 4 +- docs/10.9-perf.md | 8 +- docs/getting-started.md | 34 +++++-- docs/ref-01-top-level-api.md | 129 ++++++++++++++------------ docs/tutorial.md | 6 +- 12 files changed, 137 insertions(+), 149 deletions(-) diff --git a/docs/10-addons.md b/docs/10-addons.md index d076bd12..a0a5cc50 100644 --- a/docs/10-addons.md +++ b/docs/10-addons.md @@ -6,7 +6,7 @@ prev: tooling-integration.html next: animation.html --- -`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. diff --git a/docs/10.1-animation.md b/docs/10.1-animation.md index bccdcc98..5cc1defe 100644 --- a/docs/10.1-animation.md +++ b/docs/10.1-animation.md @@ -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 ``` -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 `