The library for web and native user interfaces.
MIT License
Bot releases are visible (Hide)
Published by zpao over 9 years ago
props
after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutatedstatics
) are no longer autobound to the component classref
resolution order has changed slightly such that a ref to a component is available immediately after its componentDidMount
method is called; this change should be observable only if your component calls a parent component's callback within your componentDidMount
, which is an anti-pattern and should be avoided regardlesssetState
in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.setState
and forceUpdate
on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.this._pendingState
and this._rootNodeID
.React.findDOMNode(component)
, which should be used in place of component.getDOMNode()
. The base class for ES6-based components will not have getDOMNode
. This change will enable some more patterns moving forward.React.cloneElement(el, props)
for making copies of React elements – see the v0.13 RC2 notes for more details.ref
style, allowing a callback to be used in place of a name: <Photo ref={(c) => this._photo = c} />
allows you to reference the component with this._photo
(as opposed to ref="photo"
which gives this.refs.photo
).this.setState()
can now take a function as the first argument for transactional state updates, such as this.setState((state, props) => ({count: state.count + 1}));
– this means that you no longer need to use this._pendingState
, which is now gone.ComponentClass.type
is deprecated. Just use ComponentClass
(usually as element.type === ComponentClass
).createClass
-based components are removed or deprecated from ES6 classes (getDOMNode
, replaceState
, isMounted
, setProps
, replaceProps
).React.addons.createFragment
was added for adding keys to entire sets of children.React.addons.classSet
is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.React.addons.cloneWithProps
can be migrated to use React.cloneElement
instead – make sure to merge style
and className
manually if desired.class
methods are no longer enumerable by default, which requires Object.defineProperty
; if you support browsers such as IE8, you can pass --target es3
to mirror the old behavior--target
option is available on the jsx command, allowing users to specify and ECMAScript version to target.
es5
is the default.es3
restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg this.static
will become this['static']
for IE8 compatibility).>
or }
when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The jsx_orphaned_brackets_transformer
package on npm can be used to find and fix potential issues in your JSX code.Published by zpao over 9 years ago
<select>
elementsstyle
works when transitioning from null
getDOMNode
for ES6 classes<html>
, <head>
, <body>
) are treated as DOM components--non-strict-es6module
Published by zpao over 9 years ago
strokeDashoffset
, flexPositive
, flexNegative
to the list of unitless CSS propertiesscoped
- for <style>
elementshigh
, low
, optimum
- for <meter>
elementsunselectable
- IE-specific property to prevent user selectionstyle={null}
didn't properly update style
uglify
dependency to prevent a bug in IE8hasOwnProperty
as an object keyPublished by zpao almost 10 years ago
formAction
, formEncType
, formMethod
, formTarget
, marginHeight
, marginWidth
strokeOpacity
to the list of unitless CSS propertiesundefined
to React.createElement
- now there is a useful warningdisplayName
key
and ref
moved off props object, now accessible on the element directlyReact.__internals
is removed - it was exposed for DevTools which no longer needs accessReact.createFactory
first. This is handled for you when using JSX.{...}
) introduced to deprecate this.transferPropsTo
acceptCharset
, classID
, manifest
React.renderComponent
--> React.render
React.renderComponentToString
--> React.renderToString
React.renderComponentToStaticMarkup
--> React.renderToStaticMarkup
React.isValidComponent
--> React.isValidElement
React.PropTypes.component
--> React.PropTypes.element
React.PropTypes.renderable
--> React.PropTypes.node
React.isValidClass
instance.transferPropsTo
false
from event handlers to preventDefaultReact.createFactory
key={null}
to assign implicit keysevent.getModifierState
as case sensitiveevent.charCode
list
updates correctly nowscrollLeft
, scrollTop
removed, these should not be specified as propsReact.addons.batchedUpdates
added to API for hooking into update cycleReact.addons.update
uses assign
instead of copyProperties
which does hasOwnProperty
checks. Properties on prototypes will no longer be updated correctly.@jsx React.DOM
no longer required{...}
) operator introduced to allow easier use of props<dialog>
element and associated open
attribute<picture>
element and associated media
and sizes
attributesReact.createElement
API in preparation for React v0.12
React.createDescriptor
has been deprecated as a result<picture>
is now parsed into React.DOM.picture
esprima
and jstransform
for correctness fixesjsx
executable now exposes a --strip-types
flag which can be used to remove TypeScript-like type annotations
require('react-tools').transform
as stripTypes
setState
can be called inside componentWillMount
in non-DOM environmentsSyntheticMouseEvent.getEventModifierState
correctly renamed to getModifierState
getModifierState
correctly returns a boolean
getModifierState
is now correctly case sensitiveinnerHTML
workaround is now removed, fixing rerendering in certain casesgetDefaultProps()
is now called once per class and shared across all instancesMyComponent()
now returns a descriptor, not an instanceReact.isValidComponent
and React.PropTypes.component
validate descriptors, not component instancespropType
validators should return an Error
instead of logging directlynull
e.key
and e.getModifierState()
propertiesonBeforeInput
eventReact.Children.count
has been added as a helper for counting the number of childrene.view
properly normalizedcoords
, crossOrigin
, download
, hrefLang
, mediaGroup
, muted
, scrolling
, shape
, srcSet
, start
, useMap
)className
on a mounted SVG component now works correctlymask
and tspan
dx
, dy
, fillOpacity
, fontFamily
, fontSize
, markerEnd
, markerMid
, markerStart
, opacity
, patternContentUnits
, patternUnits
, preserveAspectRatio
, strokeDasharray
, strokeOpacity
Webkit
, ms
, Moz
, O
) are now handled properlyimg
event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same data-reactid
"$apply
command to transform valuesdist/
.envify
is properly listed as a dependency instead of a peer dependency<Components.Checkbox />
harmony
features available in the command line with <script type="text/jsx;harmony=true">
--harmony
option--source-map-inline
option to the jsx
executabletransformWithDetails
API which gives access to the raw sourcemap datadata-reactid
, data-react-checksum
). This DOM will not be mountable by React. Read the docs for React.renderComponentToStaticMarkup
srcSet
for <img>
to specify images at different pixel ratiostextAnchor
for SVGclassName={false}
behaves consistentlythis.refs
is defined, even if no refs are specified.update
function to deal with immutable data. Read the docs
transform
function. The only option supported is harmony
, which behaves the same as jsx --harmony
on the command line. This uses the ES6 transforms from jstransform.Published by sophiebits over 10 years ago
This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.
We've also added to the add-ons build React.addons.TestUtils, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.
We've also made several other improvements and a few breaking changes; the full changelog is provided below.
In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
<div>
Monkeys:
{listOfMonkeys} {submitButton}
</div>
In v0.8 and below, it was transformed to the following:
React.DOM.div(null,
" Monkeys: ",
listOfMonkeys, submitButton
)
In v0.9, it will be transformed to this JS instead:
React.DOM.div(null,
"Monkeys:",
listOfMonkeys, " ", submitButton
)
We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
In cases where you want to preserve the space adjacent to a newline, you can write {'Monkeys: '}
or Monkeys:{' '}
in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can install jsx_whitespace_transformer from npm and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
componentDidMount
and componentDidUpdate
no longer receive the root node as a parameter; use this.getDOMNode()
insteadundefined
, the default value returned by getDefaultProps
will now be used insteadReact.unmountAndReleaseReactRootNode
was previously deprecated and has now been removedReact.renderComponentToString
is now synchronous and returns the generated HTML string<html>
tag using React) is now supported only when starting with server-rendered markupdeltaY
is no longer negatedinput
, select
, and textarea
elements, .getValue()
is no longer supported; use .getDOMNode().value
insteaddefs
, linearGradient
, polygon
, radialGradient
, stop
crossOrigin
for CORS requestsdownload
and hrefLang
for <a>
tagsmediaGroup
and muted
for <audio>
and <video>
tagsnoValidate
and formNoValidate
for formsproperty
for Open Graph <meta>
tagssandbox
, seamless
, and srcDoc
for <iframe>
tagsscope
for screen readersspan
for <colgroup>
tagspropTypes
in mixinsany
, arrayOf
, component
, oneOfType
, renderable
, shape
to React.PropTypes
statics
on component spec for static component methods.currentTarget
is now properly set.key
is now polyfilled in all browsers for special (non-printable) keys.clipboardData
is now polyfilled in IE.dragTransfer
is now presentonMouseOver
and onMouseOut
in addition to the existing onMouseEnter
and onMouseLeave
eventsonLoad
and onError
on <img>
elementsonReset
on <form>
elementsautoFocus
attribute is now polyfilled consistently on input
, select
, and textarea
__owner__
property to each component's props
object; passed-in props are now never mutatedReact.renderComponent
within componentDidMount
), events now properly bubble to the parent component.target
, .relatedTarget
, and .type
are now set properly.data
is now properly normalized in IE9 and IE10px
appended for the unitless properties columnCount
, flex
, flexGrow
, flexShrink
, lineClamp
, order
, widows
componentWillUnmount
handlerrenderComponentToString
would store event handlersdisabled
are rendered without a value (previously disabled="true"
, now simply disabled
)key
values containing .
are now supporteddata-reactid
values for performancekey
property changesdocument
only when necessary, improving performance in some cases.returnValue
in modern browsers, eliminating a warning in ChromescrollLeft
and scrollTop
are no longer accessed on document.body, eliminating a warning in ChromeReact.addons.TestUtils
was added to help write unit testsReact.addons.TransitionGroup
was renamed to React.addons.CSSTransitionGroup
React.addons.TransitionGroup
was added as a more general animation wrapperReact.addons.cloneWithProps
was added for cloning components and modifying their propstransitionLeave
in CSSTransitionGroup<input>
elements, checkedLink
is now supported for two-way bindingreact-tools
npm package no longer includes the React core libraries; use the react
package instead.displayName
is now added in more cases, improving error messages and names in the React Dev ToolsJSXTransformer
now uses source maps automatically in modern browsersJSXTransformer
error messages now include the filename and problematic line contents when a file fails to parsePublished by zpao almost 11 years ago
Now installable via npm!
$ npm install react
rows
& cols
for <textarea>
defer
& async
for <script>
loop
for <audio>
& <video>
autoCorrect
for form fields (a non-standard attribute only supported by mobile WebKit)onContextMenu
eventsonTransition
jstransform
and esprima-fb
Published by zpao almost 11 years ago
Security release to address CVE-2013-7035.
Published by zpao almost 11 years ago
Security release to address CVE-2013-7035.
Published by zpao almost 11 years ago
<input type="range">
and selection events.disabled
attribute handling on non-<input>
elements.Published by zpao almost 11 years ago
charSet
, content
, form
, httpEquiv
, rowSpan
, autoCapitalize
).rx
, ry
).getInitialState
and getDefaultProps
in mixins.React.version
.React.isValidClass
- Used to determine if a value is a valid component constructor.React.autoBind
- This was deprecated in v0.4 and now properly removed.React.unmountAndReleaseReactRootNode
to React.unmountComponentAtNode
.class
to className
as part of the transform! This is a breaking change - if you were using class
, you must change this to className
or your components will be visually broken.Published by zpao about 11 years ago
setState
callbacks are now executed in the scope of your component.click
events now work on Mobile Safari.Object.prototype
is extended."undefined"
on update when previously defined.<iframe>
attributes.Published by zpao over 11 years ago
id
attribute to data-reactid
to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.<canvas>
)React.renderComponentToString(<component>, callback)
allows you to use React on the server and generate markup which can be sent down to the browser.prop
improvements: validation and default values. Read our blog post for details...
key
prop, which allows for finer control over reconciliation. Read the docs for details...
React.autoBind
. Read our blog post for details...
<input>
, <textarea>
, <option>
, and <select>
in order to standardize many inconsistencies in browser implementations. This includes support for defaultValue
, and improved implementation of the onChange
event, and circuit completion. Read the docs for details...
this.setState
now takes an optional callback as it's second parameter. If you were using onClick={this.setState.bind(this, state)}
previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.<div>{/* this is a comment and won't be rendered */}</div>
<div><Component1/><Component2/></div>
is transformed into React.DOM.div(null, Component1(null), Component2(null))
.React.DOM.div(null, [Component1(null), Component2(null)])
.require()
s to be relative unless specified