Component API
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.
Component classes 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()
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.
@@ -413,6 +413,9 @@Calling forceUpdate() will cause render() to be called on the component and its children, but React will still only update the DOM if the markup changes.
Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render(). This makes your application much simpler and more efficient.
isMounted() #
bool isMounted()
+isMounted() returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to setState() or forceUpdate().
Various methods are executed at specific points in a component's lifecycle.
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.
Invoked once, immediately before the initial 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)
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().
- 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. -
- React Page is a simple React project creator to get you up-and-running quickly with React. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
- React one-hour email goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!)
- Rendr + React app template demonstrates how to use React's server rendering capabilities.
Note:
-The comment parser is very strict right now, in order for it to pick up the
+@jsxmodifier, two conditions are required. The@jsxcomment 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@jsxcomment, it will output the file without transforming it.The comment parser is very strict right now; in order for it to pick up the
@jsxmodifier, two conditions are required. The@jsxcomment 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@jsxcomment, it will output the file without transforming it.
Update your HTML file as below:
diff --git a/docs/interactivity-and-dynamic-uis.html b/docs/interactivity-and-dynamic-uis.html index 4f69ebb247..1ffc48ead9 100644 --- a/docs/interactivity-and-dynamic-uis.html +++ b/docs/interactivity-and-dynamic-uis.html @@ -16,9 +16,9 @@ - + diff --git a/docs/jsx-gotchas.html b/docs/jsx-gotchas.html index a6ad568761..1de97fbcff 100644 --- a/docs/jsx-gotchas.html +++ b/docs/jsx-gotchas.html @@ -16,9 +16,9 @@ - + diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html index 7aa391b99f..da236bb684 100644 --- a/docs/jsx-in-depth.html +++ b/docs/jsx-in-depth.html @@ -16,9 +16,9 @@ - + diff --git a/docs/more-about-refs.html b/docs/more-about-refs.html index 42b45902db..1f1b9ba6bf 100644 --- a/docs/more-about-refs.html +++ b/docs/more-about-refs.html @@ -16,9 +16,9 @@ - + diff --git a/docs/multiple-components.html b/docs/multiple-components.html index 790c6b6b2c..6a22694499 100644 --- a/docs/multiple-components.html +++ b/docs/multiple-components.html @@ -16,9 +16,9 @@ - + diff --git a/docs/reconciliation.html b/docs/reconciliation.html index 1a1e64e3e4..51d7920b34 100644 --- a/docs/reconciliation.html +++ b/docs/reconciliation.html @@ -16,9 +16,9 @@ - + @@ -414,7 +414,7 @@ renderB: <div><span>first&l renderB: <div><span>second</span><span>first</span></div> => [replaceAttribute textContent 'second'], [insertNode <span>first</span>]There are many algorithms that attempt to find the minimum sets of operations to transform a list of elements. Levenshtein distance can find the minimum using single element insertion, deletion and substitution in O(n2). Even if we were to use Levenshtein, this doesn't find when a node has moved into another position and algorithms to do that have a much worst complexity.
+There are many algorithms that attempt to find the minimum sets of operations to transform a list of elements. Levenshtein distance can find the minimum using single element insertion, deletion and substitution in O(n2). Even if we were to use Levenshtein, this doesn't find when a node has moved into another position and algorithms to do that have much worse complexity.
Keys #
In order to solve this seemingly intractable issue, an optional attribute has been introduced. You can provide for each child a key that is going to be used to do the matching. If you specify a key, React is now able to find insertion, deletion, substitution and moves in O(n) using a hash table.
renderA: <div><span key="first">first</span></div>
diff --git a/docs/reusable-components.html b/docs/reusable-components.html
index 83ea6c829c..2a5609b580 100644
--- a/docs/reusable-components.html
+++ b/docs/reusable-components.html
@@ -16,9 +16,9 @@
-
+
@@ -355,7 +355,7 @@
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 #
-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:
+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, a warning will be shown in the JavaScript console. Note that for performance reasons propTypes is only checked in development mode. Here is an example documenting the different validators provided:
React.createClass({
propTypes: {
// You can declare that a prop is a specific JS primitive. By default, these
@@ -375,14 +375,14 @@
// JS's instanceof operator.
someClass: React.PropTypes.instanceOf(SomeClass),
- // You can chain any of the above with isRequired to make sure an error is
- // thrown if the prop isn't provided.
+ // You can chain any of the above with isRequired to make sure a warning is
+ // shown if the prop isn't provided.
requiredFunc: React.PropTypes.func.isRequired
// You can also specify a custom validator.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
- throw new Error('Validation failed!')
+ console.warn('Validation failed!');
}
}
},
@@ -421,7 +421,7 @@
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.
+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.
/** @jsx React.DOM */
var SetIntervalMixin = {
diff --git a/docs/special-non-dom-attributes.html b/docs/special-non-dom-attributes.html
index e713cfd4be..327a7a522f 100644
--- a/docs/special-non-dom-attributes.html
+++ b/docs/special-non-dom-attributes.html
@@ -16,9 +16,9 @@
-
+
diff --git a/docs/tags-and-attributes.html b/docs/tags-and-attributes.html
index ad0e5501ce..2211d8f270 100644
--- a/docs/tags-and-attributes.html
+++ b/docs/tags-and-attributes.html
@@ -16,9 +16,9 @@
-
+
diff --git a/docs/tooling-integration.html b/docs/tooling-integration.html
index 905b17bc76..04600149a9 100644
--- a/docs/tooling-integration.html
+++ b/docs/tooling-integration.html
@@ -16,9 +16,9 @@
-
+
@@ -390,8 +390,6 @@ 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 #
-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 216c3d1c45..a3fdb6cd3a 100644
--- a/docs/top-level-api.html
+++ b/docs/top-level-api.html
@@ -16,9 +16,9 @@
-
+
@@ -371,7 +371,7 @@
[function callback]
)
-Render a React component into the DOM in the supplied container.
+Render a React component into the DOM in the supplied container and return a reference to the component.
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.
diff --git a/docs/tutorial.html b/docs/tutorial.html
index 6ccc3b8cf4..3634edbe50 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -16,9 +16,9 @@
-
+
diff --git a/docs/two-way-binding-helpers.html b/docs/two-way-binding-helpers.html
index d2984009d1..e629daad4d 100644
--- a/docs/two-way-binding-helpers.html
+++ b/docs/two-way-binding-helpers.html
@@ -16,9 +16,9 @@
-
+
diff --git a/docs/videos.html b/docs/videos.html
index e5032ab33d..554773453f 100644
--- a/docs/videos.html
+++ b/docs/videos.html
@@ -16,9 +16,9 @@
-
+
diff --git a/docs/why-react.html b/docs/why-react.html
index f7f55382f1..eeb38f53af 100644
--- a/docs/why-react.html
+++ b/docs/why-react.html
@@ -16,9 +16,9 @@
-
+
diff --git a/docs/working-with-the-browser.html b/docs/working-with-the-browser.html
index 653aa22afe..95b0f8e2f8 100644
--- a/docs/working-with-the-browser.html
+++ b/docs/working-with-the-browser.html
@@ -16,9 +16,9 @@
-
+
@@ -354,7 +354,7 @@
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 Virtual 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!
diff --git a/downloads.html b/downloads.html
index ba3c5a1fe6..06ec202f04 100644
--- a/downloads.html
+++ b/downloads.html
@@ -16,9 +16,9 @@
-
+
diff --git a/html-jsx.html b/html-jsx.html
index f33b3d115f..165c6b844c 100644
--- a/html-jsx.html
+++ b/html-jsx.html
@@ -16,9 +16,9 @@
-
+
diff --git a/index.html b/index.html
index ead711aa0b..a9c31b1abe 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,9 @@
-
+
@@ -107,8 +107,12 @@
React components implement a render() method that takes input data and
returns what to display. This example uses an XML-like syntax called
JSX. Input data that is passed into the component can be accessed by
- render() via this.props.
- JSX is optional and not required to use React.
+ render() via this.props.
+
+
+ JSX is optional and not required to use React. Try
+ clicking on "Compiled JS" to see the raw JavaScript code produced by
+ the JSX compiler.
@@ -118,8 +122,7 @@
In addition to taking input data (accessed via this.props), a
component can maintain internal state data (accessed via this.state).
When a component's state data changes, the rendered markup will be
- updated by re-invoking render().
- This example demonstrates use of React without JSX.
+ updated by re-invoking render().
JSX Compiler
This tool demonstrates how JSX syntax - is desguared into native JavaScript. + is desugared into native JavaScript.
diff --git a/support.html b/support.html index 8aa1b2aa98..29b3174e97 100644 --- a/support.html +++ b/support.html @@ -16,9 +16,9 @@ - + diff --git a/tips/children-props-type.html b/tips/children-props-type.html index b3917309c7..337a585f13 100644 --- a/tips/children-props-type.html +++ b/tips/children-props-type.html @@ -16,9 +16,9 @@ - + diff --git a/tips/communicate-between-components.html b/tips/communicate-between-components.html index 9fe659bf37..26d5bc9ad2 100644 --- a/tips/communicate-between-components.html +++ b/tips/communicate-between-components.html @@ -16,9 +16,9 @@ - + diff --git a/tips/componentWillReceiveProps-not-triggered-after-mounting.html b/tips/componentWillReceiveProps-not-triggered-after-mounting.html index c95782b738..058d4c0ef9 100644 --- a/tips/componentWillReceiveProps-not-triggered-after-mounting.html +++ b/tips/componentWillReceiveProps-not-triggered-after-mounting.html @@ -16,9 +16,9 @@ - + diff --git a/tips/controlled-input-null-value.html b/tips/controlled-input-null-value.html index d81ea341a8..58fc8ca230 100644 --- a/tips/controlled-input-null-value.html +++ b/tips/controlled-input-null-value.html @@ -16,9 +16,9 @@ - + diff --git a/tips/dom-event-listeners.html b/tips/dom-event-listeners.html index 5daca057af..ab71870f7d 100644 --- a/tips/dom-event-listeners.html +++ b/tips/dom-event-listeners.html @@ -16,9 +16,9 @@ - + diff --git a/tips/expose-component-functions.html b/tips/expose-component-functions.html index 8880745b6e..43b315b358 100644 --- a/tips/expose-component-functions.html +++ b/tips/expose-component-functions.html @@ -16,9 +16,9 @@ - + diff --git a/tips/false-in-jsx.html b/tips/false-in-jsx.html index 7fddee2f30..6550a158b8 100644 --- a/tips/false-in-jsx.html +++ b/tips/false-in-jsx.html @@ -16,9 +16,9 @@ - + diff --git a/tips/if-else-in-JSX.html b/tips/if-else-in-JSX.html index b34d6e596f..d696bbd039 100644 --- a/tips/if-else-in-JSX.html +++ b/tips/if-else-in-JSX.html @@ -16,9 +16,9 @@ - + diff --git a/tips/initial-ajax.html b/tips/initial-ajax.html index 7ea0de1d34..657f50de9d 100644 --- a/tips/initial-ajax.html +++ b/tips/initial-ajax.html @@ -16,9 +16,9 @@ - + diff --git a/tips/inline-styles.html b/tips/inline-styles.html index e2b7aaeeb7..8ac834de1a 100644 --- a/tips/inline-styles.html +++ b/tips/inline-styles.html @@ -16,9 +16,9 @@ - + diff --git a/tips/introduction.html b/tips/introduction.html index a40a99fafc..697c4dfd17 100644 --- a/tips/introduction.html +++ b/tips/introduction.html @@ -16,9 +16,9 @@ - + diff --git a/tips/maximum-number-of-jsx-root-nodes.html b/tips/maximum-number-of-jsx-root-nodes.html index 039f8ebf24..b64750d493 100644 --- a/tips/maximum-number-of-jsx-root-nodes.html +++ b/tips/maximum-number-of-jsx-root-nodes.html @@ -16,9 +16,9 @@ - + diff --git a/tips/props-in-getInitialState-as-anti-pattern.html b/tips/props-in-getInitialState-as-anti-pattern.html index b418c51944..4c30850e5f 100644 --- a/tips/props-in-getInitialState-as-anti-pattern.html +++ b/tips/props-in-getInitialState-as-anti-pattern.html @@ -16,9 +16,9 @@ - + diff --git a/tips/references-to-components.html b/tips/references-to-components.html new file mode 100644 index 0000000000..42ae04b9a0 --- /dev/null +++ b/tips/references-to-components.html @@ -0,0 +1,415 @@ + + + + + + +
+ React
+
+
+ References to Components
+ +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:
/** @jsx React.DOM */
+
+var myComponent = React.renderComponent(<MyComponent />, myContainer);
+If you pass a variable to 'React.renderComponent`, it's not guaranteed that the component passed in will be the one that's mounted. In cases where you construct a component before mounting it, be sure to reassign your variable:
+/** @jsx React.DOM */
+
+var myComponent = <MyComponent />;
+
+// Some code here...
+
+myComponent = React.renderComponent(myComponent, myContainer);
+++ + +Note:
+ +This should only ever be used at the top level. Inside components, let your
+propsandstatehandle communication with child components, and only reference components viarefs.