Question:
I have a fresh installation of Ubuntu 14.04 and installed compiled version of 10.38. failed on step with error 'make: g++: Command not found'. solves the problem. It make sense put g++ dependency into Prerequisites section.
That's kind of annoying but yea, we might need to do something like that. Compilers are a dependency for any binary npm module (which one of our dependencies depends on). Even contextify itself doesn't call out the need for g**. When you install node / npm via does it not install as well? It seems like it should since that's a requirement for many modules.
I used the recommended approach for . is not a part of installation. But I see your point, contextify setup on Windows even more .
The installation of build-essential is not 'optional'. It is a prerequisite for otherwise node-gyp will fail. The instructions for the Debian-based installation should reflect that build-essential is a prerequisite.
for installing g++ in fedora and other linux os use sudo yum install /usr/bin/g++ or sudo dnf install gcc-c++
fixed it for me (Ubuntu)
works for CentOS7, too. :)
What about Mac?

`React` is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can `require()` it. <del> ### DOM </del> <ins> #### React.DOM </ins> `React.DOM` provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the `/** @jsx React.DOM */` docblock. <del> ### initializeTouchEvents(boolean shouldUseTouch) </del> <ins> #### React.initializeTouchEvents ```javascript initializeTouchEvents(boolean shouldUseTouch) ``` </ins> Configure React's event system to handle touch events on mobile devices. <del> ### function autoBind(function method) </del> <ins> #### React.autoBind ```javascript function autoBind(function method) ``` </ins> Marks the provided function to be automatically bound to each React component instance created. This allows React components to define automatically bound methods and ensure that when called they will always reference their current instance.

}); ``` <del> ### function createClass(object specification) </del> <ins> #### React.createClass ```javascript function createClass(object specification) ``` </ins> Creates a component given a specification. A component implements a `render` method which returns a single child. That child may have an arbitrarily deep child structure. One thing that makes components different than a standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you. <del> ### ReactComponent renderComponent(ReactComponent container, DOMElement mountPoint) </del> <ins> #### React.renderComponent ```javascript ReactComponent renderComponent(ReactComponent container, DOMElement mountPoint) ``` </ins> Renders a React component into the DOM in the supplied `container`.

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 `ReactComponent`s. <del> ### DOMElement getDOMNode() </del> <ins> #### getDOMNode ```javascript DOMElement getDOMNode() ``` </ins> 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. <del> ### setProps(object nextProps) </del> <ins> #### setProps ```javascript setProps(object nextProps) ``` </ins> When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with `renderComponent()`. Simply call `setProps()` to change its properties and trigger a re-render. **Note:** This method can only be called on a root-level component. That is, it's only available on the component passed directly to `renderComponent()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`. <del> ### replaceProps(object nextProps) </del> <ins> #### replaceProps ```javascript replaceProps(object nextProps) ``` </ins> Like `setProps()` but deletes any pre-existing props that are not in nextProps. <del> ### ReactComponent transferPropsTo(ReactComponent targetComponent) </del> <ins> #### transferPropsTo ```javascript ReactComponent transferPropsTo(ReactComponent targetComponent) ``` </ins> Transfer properties from this component to a target component that have not already been set on the target component. This is usually used to pass down properties to the returned root component. `targetComponent`, now updated with some new props is returned as a convenience. <del> ### setState(object nextState) </del> <ins> #### setState ```javascript setState(object nextState) ``` </ins> Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.

**Note:** `setState()` does not immediately mutate `this.state` but creates a pending state transition. Accessing `this.state` after calling this method can potentially return the existing value. <del> ### replaceState(object nextState) </del> <ins> #### replaceState ```javascript replaceState(object nextState) ``` </ins> Like `setState()` but deletes any pre-existing state keys that are not in nextState. <del> ### forceUpdate() </del> <ins> #### forceUpdate() ```javascript forceUpdate() ``` </ins> If your `render()` method reads from something other than `this.props` or `this.state` you'll need to tell React when it needs to re-run `render()`. Use `forceUpdate()` to cause React to automatically re-render. This will cause `render()` to be called on the component and all of its children but React will 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. <del> ### object getInitialState() ### componentWillMount() ### componentDidMount(DOMElement domNode) ### componentWillReceiveProps(object nextProps) ### boolean shouldComponentUpdate(object nextProps, object nextState) ### componentWillUpdate(object nextProps, object nextState) ### ReactComponent render() ### componentDidUpdate(object prevProps, object prevState, DOMElement domNode) ### componentWillUnmount() These are overridable lifecycle methods; see the [lifecycle methods](lifecycle.html) documentation for more information. </del> <ins> ```javascript object getInitialState() componentWillMount() componentDidMount(DOMElement domNode) componentWillReceiveProps(object nextProps) boolean shouldComponentUpdate(object nextProps, object nextState) componentWillUpdate(object nextProps, object nextState) ReactComponent render() componentDidUpdate(object prevProps, object prevState, DOMElement domNode) componentWillUnmount() ``` See the [advanced components](advanced-components.html) documentation for more details on these lifecycle methods. </ins>


Question:
"Getting started" defined to . "Adding Markdown" defined to . Should be unify to or ?
Nice find. We should use the same version. Are you interested in creating a PR to update it?
Yes I am. I looking at I think will attempt to unify the . I would like to create a PR so I'll do that soon.

<title>Hello React</title> <script src="https://fb.me/react-{{site.react_version}}.js"></script> <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script> <del> <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script> </del> <ins> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> </ins> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> </head> ```


Question:
In this repro, I created 2 buttons and only one is rendered at a time. One button's click handler is hooked up to React's synthetic "click" event while the other is hooked up to the native "click" event. Even though only one button is rendered at a time, a single click is triggering both click events. This bug can be hit by apps that mix React components with non-React controls (e.g. jQuery UI). I reproed this in Chrome with React 0.13.2. to the button labeled "One" Expected: There's a button rendered labeled "Two" Actual: The rendered button still has the label "One" If you open the console, you'll see "goToTwo" and "goToOne" which indicates that the "One" button's click handler ran and then the "Two" button's click handler ran (even though we never saw button "Two"").
I experimented more and came up with another repro: In this one, you click on a button with a native "click" handler which causes the button to go away and an input field to be rendered. It results in this exception: From these 2 repros, it seems something strange is going on when calling from within a native "click" handler.
It works if you add to the event handler.
Thanks for the workaround. Is the behavior without the by design? It looks like the bad behavior is being caused by the rerender happening synchronously within the native "click" handler.
This looks bad. We don't do a great job interacting with native events. Sebastian wrote a post about this once-upon-a-time, how native and synthetic event systems are, by and large, not interoperable. Even so, I can't see a reason we should fatal like this. Do you understand what's going wrong here? What a fix might look like?
This happens when we handle a click event from a node that's been removed in between when the event is triggered and when React receives it. How should we deal with the case that events fire on detached elements? Should we ignore events for nodes that aren't in the document? I don't think the bug is easily fixable otherwise because we don't have the old event handler after the reconcile that removes that node.
Here are some additional details about the impact of the bug. It sounds like this bug is likely to trigger when you use a non-React component (e.g. jQuery UI) in a React single page application and the non-React component triggers a navigation within the app.
Thanks for an excellent bug report and good repro case! I think this happens because we use the "root id" to determine which element was clicked. In the repro case there is no "key" as part of the root ID for two reasons: 1) It is not a child of a container (multichild) so it doesn't get a key to the root ID. 2) It doesn't have a unique key and doesn't need one because it the button is of a different type. If I make sure that a key is used as part of the root ID the problem is solved: So the problem in the repro isn't that we're firing on a removed node, it is that we're firing the event on the new node. This would be solved if we used a unique ID per instance to identify event handlers instead of a generate root that is non-unique. Which I think we wanted to do anyway. Is there another repro that shows a different issue?

echo "Only docs were updated, stopping build process." exit fi <del> npm install -g npm </del> <ins> npm install -g npm@latest-2 </ins> script: - | if [ "$TEST_TYPE" = build_website ]; then

do { lastID = internalGetID(current); current = current.parentNode; <del> invariant( current != null, 'findFirstReactDOMImpl(...): Unexpected detached subtree found when ' + 'traversing DOM from node `%s`.', nodeID ); </del> <ins> if (current == null) { // The passed-in node has been detached from the container it was // originally rendered into. return null; } </ins> } while (lastID !== reactRootID); if (current === containersByReactRootID[reactRootID]) {

 /** * Copyright 2013-2015, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @emails react-core */ 'use strict'; var React; var ReactDOM; var ReactTestUtils; describe('ReactEventIndependence', function() { beforeEach(function() { require('mock-modules').dumpCache(); React = require('React'); ReactDOM = require('ReactDOM'); ReactTestUtils = require('ReactTestUtils'); }); it('does not crash with other react inside', function() { var clicks = 0; var div = ReactTestUtils.renderIntoDocument(
 clicks++} dangerouslySetInnerHTML={{ __html: '<button data-reactid=".z">click me
', }} /> ); ReactTestUtils.SimulateNative.click(div.firstChild); expect(clicks).toBe(1); }); it('does not crash with other react outside', function() { var clicks = 0; var outer = document.createElement('div'); outer.setAttribute('data-reactid', '.z'); var inner = ReactDOM.render( <button onClick={() => clicks++}>click me</button>, outer ); ReactTestUtils.SimulateNative.click(inner); expect(clicks).toBe(1); }); it('does not when event fired on unmounted tree', function() { var clicks = 0; var container = document.createElement('div'); var button = ReactDOM.render( <button onClick={() => clicks++}>click me</button>, container ); // Now we unmount the component, as if caused by a non-React event handler // for the same click we're about to simulate, like closing a layer: ReactDOM.unmountComponentAtNode(container); ReactTestUtils.SimulateNative.click(button); // Since the tree is unmounted, we don't dispatch the click event. expect(clicks).toBe(0); }); });


Question:
The  CSS property should not be getting a suffix automatically because a unit-less value can represent the number of spaces that make up the width in a tab. The JS name for this property is . See in the React docs.
A solution for now is to use the which is pretty much equivalent.
Sounds like a good idea. Are you interested in creating a PR to add it?
Yes, the only thing I don't know is whether there needs to be anything special done to also include and handle object already in place
We autogenerate the vender-prefixed styles there (which you might have seen below where you changed code) so that's all you need to do! Thanks again.

개발 하다보면 CSS 속성들이 단위 없이 그대로 유지되어야 할 때가 있을 겁니다. 아래의 프로퍼티들은 자동으로 "px"가 붙지 않는 속성 리스트 입니다: <ins> - `boxFlex` - `boxFlexGroup` </ins> - `columnCount` - `fillOpacity` - `flex` - `flexGrow` <ins> - `flexPositive` </ins> - `flexShrink` <ins> - `flexNegative` </ins> - `fontWeight` - `lineClamp` - `lineHeight`

- `order` - `orphans` - `strokeOpacity` <ins> - `tabSize` </ins> - `widows` - `zIndex` - `zoom`

opacity: true, order: true, orphans: true, <ins> tabSize: true, </ins> widows: true, zIndex: true, zoom: true,


Question: Our tests currently only pass in the browser when running in Chrome. This is because it supports WebComponents already. However they fail in every other browser. I think this is because of when is actually loaded. It's currently getting packaged into react-test because we're requiring it. It creates a new which is resulting in nodes we create with to have a different prototype than what is expected in WebComponents. WebComponents's new Node prototype has a different implementation of which does an check which our nodes are failing. I think if we loaded into the browser before we loaded JS, the node we create for markup wrapping would have the right prototype.

var React = require('React'); var ReactMount = require('ReactMount'); var ReactTestUtils = require('ReactTestUtils'); <del> var WebComponents = undefined; </del> <ins> var WebComponents = WebComponents; </ins> try { <del> WebComponents = require('WebComponents'); </del> <ins> if (WebComponents === undefined && jest !== undefined) { WebComponents = require('WebComponents'); } </ins> } catch(e) { <del> /* leave WebComponents undefined */ </del> <ins> // Parse error expected on engines that don't support setters // or otherwise aren't supportable by the polyfill. // Leave WebComponents undefined. </ins> } describe('constructAndRenderComponentByID', function() {

;(function(){ var urls = [ <ins> '../src/shared/vendor/third_party/webcomponents.js', </ins> '../vendor/jasmine/jasmine.js', '../vendor/jasmine/jasmine-support.js', '../vendor/jasmine/jasmine-html.js',


Question:
Consider following snippet: Expected DOM Current behaviour Demo: W3C Specs:
I made a pull request, but was a bit faster. The pull requests are different, so maybe it is good that there are two. :smile:
That's wonderful, Thx!

// autoFocus is polyfilled/normalized by AutoFocusMixin // autoFocus: HAS_BOOLEAN_VALUE, autoPlay: HAS_BOOLEAN_VALUE, <ins> capture: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE, </ins> cellPadding: null, cellSpacing: null, charSet: MUST_USE_ATTRIBUTE,


Question:
I'm using tag to generate client certificates and I'm missing challenge and keytype attributes.
It would be cool if React gives us the opportunity to use different syntax for attrs and props: And may be: There would be no need to know what tags React supporting.
There's more planned to alleviate the issues around unknown elements and properties, but we're not there yet. We have no plans on to use different syntax. Adding the additional attributes here seems totally reasonable.
Will try to take a stab at this. I assume this is as simple as adding those props to , and then adding tests. Is that correct or am I missing anything significant?
It's even easier than that since we don't really have tests for the attributes. But do actually test in a couple browsers that changing values across renders is reflected appropriately (usually the issues is property vs attribute).
You're quick, guys. Thanks in advance!
By 'across renders' you mean simply triggering a re-render (by changing the value)?
Yea. I usually just make a simple component with a button that toggles state so I can test with multiple values easily.
Great. Thx.
I missed a detail in docs. Although, I don't need it, there's an additional attribute, keyparams, which is required with "dsa" and "ec" keytypes. See
Have this working, though I'm not entirely clear if these should be , or . I wasn't able to deduce the meaning of these from the code. Is there someplace I can read up on these?
Those are used to determine if we do or if we do when updating. means it doesn't matter and browsers should work with either. Currently we use properties in that case but we may switch that in the future. indicate that they must be set & removed as a property or an attribute.
Thanks. That makes sense. Had to use to get it to work properly across Chrome/FF/Safari. Your testing method great as well. Thx for your help

``` accept acceptCharset accessKey action allowFullScreen allowTransparency alt <del> async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked classID className colSpan cols content contentEditable contextMenu controls </del> <ins> async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet challenge checked classID className colSpan cols content contentEditable contextMenu controls </ins> coords crossOrigin data dateTime defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder <del> headers height hidden high href hrefLang htmlFor httpEquiv icon id label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min multiple muted name noValidate open optimum pattern placeholder </del> <ins> headers height hidden high href hrefLang htmlFor httpEquiv icon id keyParams keyType label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min multiple muted name noValidate open optimum pattern placeholder </ins> poster preload radioGroup readOnly rel required role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcSet start step style tabIndex target title type useMap value width wmode

cellPadding: null, cellSpacing: null, charSet: MUST_USE_ATTRIBUTE, <ins> challenge: MUST_USE_ATTRIBUTE, </ins> checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, classID: MUST_USE_ATTRIBUTE, // To set className on SVG elements, it's necessary to use .setAttribute;

httpEquiv: null, icon: null, id: MUST_USE_PROPERTY, <ins> keyParams: MUST_USE_ATTRIBUTE, keyType: MUST_USE_ATTRIBUTE, </ins> label: null, lang: null, list: MUST_USE_ATTRIBUTE,


Question:
It would be nice for the to be more explicit about the fact that React's supersedes, and should generally be used in place of, the DOM's built-in event. People might be used to using instead for text inputs and textareas, since, with the raw DOM, the change event for these controls doesn't fire until the control loses focus.
Opened a PR to address this:
Merged, hurray, we can close this now! :tada:
wait but why?
I don't understand why React chose to make behave like does. As fas as I can tell, we have no way of getting the old behaviour back. Docs claim it's a "misnomer" but it isn't really, it does fire when there's a change, just not until the input also loses focus. For validation, sometimes we don't want to show validation errors until they're done typing. Or maybe we just don't want a re-render on every keystroke. Now the only way to do that is with onBlur but now we also need to check that the value has changed manually. It's not that big of a deal, but it seems to me like React threw away a useful event and deviated from standard behaviour when there was already an event that does this.
Agree with mnpenner. With fireing on every keystroke, my redux store changes simultaneously. To avoid that, I have to use . Finally, we have two events - and - which work same manner.
Besides there is no easy workaround to replicate such behaviour for the element. Native events behave such way that moving the slider around triggers an event and releasing it triggers .
Another note: Autofill events (at least on Chrome/OSX) trigger , but not ! So if I want to capture a change event to an input that might be filled using Chrome's autofill feature, I need to bind to both (to detect keystrokes and autofill) and (to placate React [1]). [1]
for validation messages or things that you want to wait until they stop typing for use debounce in your event handler instead of waiting until onBlur.
Still no way of using onChange? I've been writing lots of logic to get around not having a real change event. I think to be a better abstraction, React needs to stick to onChange and let us use onInput without a silly warning. Validation has never been this hard.
For better or worse, this has been the behavior for quite a while, and many React users rely on it. IMHO, it's probably too late in the game to totally change what "onChange" means in React. But if you feel strongly, maybe do a quick PR to propose a solution with a sensible upgrade path? (Before spending a lot of time on it, get the thoughts of the core team.)
Right I've suggested instead to create a new event and minimise breaking changes.
Definitely a huge design issue with React. Hope it doesn't stay this way forever
This is a mistake or a feature :/
Features are supposed to be useful... this is the opposite of useful.
For anyone who needs a workaround to get true onChange behavior, you can implement your own component to use HTML's built-in event. Here's how I've done it, inspired by . Kaspar's allows you to use both onchange and oninput, mine is just for onchange.
Looks like there is an official answer now:
I don't think that's new. See
It is really aggravating, this "official answer". How presumptuous of them to call the HTML Spec official and consolidated event name a "misnomer".
2024 and issue still exists, this one wasted a serious chunk of time, atleast I now have an answer but if I didnt trust facebook before I sure dont trust them now. Always follow the spec, there should be no alternative breaking change or not.
Guys for people looking to do it with functions, expanding on Ettar solution, this seems to be working (here I am using MUI component, but input component works as well):

Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events. <ins> > Note: > > For `<input>` and `<textarea>`, `onChange` supersedes — and should generally be used instead of — the DOM's built-in [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) event handler. </ins> ## Controlled Components


Question:
The Post gave an example of reconciliation by this . but It's not working, If I understand correctly, it should be something like . Should I create a PR by change the url to fix it?
The problem is that it is a https link for a fiddle that only supports http. There are actually more links with the same bug. Updating the fiddles would be one way to fix it, but that is a lot of work. And since the fiddles are part of old blog posts, it would be kind of like rewriting history. In my opinion the best way to fix it is reverting the links back to http. See for my proposed solution.
I see, thank u
I feel like the more 'correct'/'ideal' solution is to have the fiddle authors update their fiddles. That said, I don't feel too strongly, and will let make the decision on this.

author: vjeux ---  [JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](https://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](https://jsfiddle.net/vjeux/VkebS/) is also available.   [JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.

React (by Facebook) is now available on JSFiddle. facebook.github.io/react/
— JSFiddle (@jsfiddle) June 2, 2013

> lightweight description of what the DOM should look like. We call this process **reconciliation**. Check out <del> [this jsFiddle](https://jsfiddle.net/fv6RD/3/) to see an example of </del> <ins> [this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of </ins> reconciliation in action. Because this re-render is so fast (around 1ms for TodoMVC), the developer

> > [Read the full post...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look) <del> In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](https://jsfiddle.net/vla/Cdrse/). </del> <ins> In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/). </ins> ## Web Components: React & x-tags

> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk) > <del> >  * [JSFiddle](https://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not. </del> <ins> >  * [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not. </ins> > > [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo) > <del> >  * [JSFiddle](https://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node. >  * [JSFiddle](https://jsfiddle.net/R8f5L/5/): Using CSS transition instead. </del> <ins> >  * [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node. >  * [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead. </ins> > > [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4) >

> > [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4) > <del> > * [JSFiddle](https://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount(). </del> <ins> > * [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount(). </ins> ## Introduction to React Screencast


Question:
We currently use the transaction queue too much and build up a giant array on mount. Here's one simple example of where we add things to the queue unnecessarily:
I don't know of anything else easy here.

internalInstance._currentElement ); } <del> transaction.getReactMountReady().enqueue(attachRefs, internalInstance); </del> <ins> if (internalInstance._currentElement.ref != null) { transaction.getReactMountReady().enqueue(attachRefs, internalInstance); } </ins> return markup; },


Question:
At gh-pages branch, there are and files. I think those file name must be and .
Thanks! I just pushed the change to the stable branch so this should be updated on the site and in the gh-pages branch as soon as it builds.
Thanks!

--- id: getting-started-ja-JP title: 始めてみましょう <ins> permalink: getting-started-ja-JP.html </ins> next: tutorial-ja-JP.html redirect_from: "docs/index-ja-JP.html" ---

--- id: tutorial-ja-JP title: チュートリアル <ins> permalink: tutorial-ja-JP.html </ins> prev: getting-started-ja-JP.html next: thinking-in-react-ja-JP.html ---


Question:
I'm not sure how much value there really is in this. react-rails already stopped using it and just builds the files in itself. cc
(I'm currently running to find out how many there might be - looks like this script may take a day to hit the end point for every gem in the registry)
:+1: I made but it's just a toy :)

var npmReactDOMTasks = require('./grunt/tasks/npm-react-dom'); grunt.registerTask('npm-react-dom:pack', npmReactDOMTasks.packRelease); <del> var gemReactSourceTasks = require('./grunt/tasks/gem-react-source'); grunt.registerTask('gem-react-source:release', gemReactSourceTasks.buildRelease); grunt.registerTask('gem-react-source:pack', gemReactSourceTasks.packRelease); </del> grunt.registerTask('version-check', require('./grunt/tasks/version-check')); grunt.registerTask('build:basic', [

'jsx:normal', 'npm-react:release', ]); <del> grunt.registerTask('build:gem-react-source', [ 'build', 'gem-react-source:release', ]); </del> grunt.registerTask('webdriver-phantomjs', require('./grunt/tasks/webdriver-phantomjs'));

'release:setup', 'clean', 'build', <del> 'gem-react-source:release', 'gem-react-source:pack', </del> 'release:bower', 'release:starter', 'compress',

<del> module React module Source def self.bundled_path_for(build) File.expand_path("../../../build/#{build}", __FILE__) end end end </del>

<del> #encoding: utf-8 require('json') # Because of build process, does not necessarily reflect directory path in the # repository. package = JSON.parse(File.read('../../package.json')) gemspec = Gem::Specification.new do |s| s.name = 'react-source' s.version = package['version'] s.license = 'BSD-3-Clause' s.homepage = 'https://github.com/facebook/react' s.summary = 'Ruby bridge to JSX & the React JavaScript library.' s.authors = ['Paul O’Shannessy'] s.email = ['paul@oshannessy.com'] s.files = Dir[ 'build/react.js', 'build/react.min.js', 'build/react-with-addons.js', 'build/react-with-addons.min.js', 'build/JSXTransformer.js', 'lib/react/source.rb' ] end </del>

<del> 'use strict'; var fs = require('fs'); var grunt = require('grunt'); var src = 'gem-react-source/'; var dest = 'build/gem-react-source/'; var build = dest + 'build/'; var buildFiles = [ 'react.js', 'react.min.js', 'JSXTransformer.js', 'react-with-addons.js', 'react-with-addons.min.js', ]; function buildRelease() { if (grunt.file.exists(dest)) { grunt.file.delete(dest); } // Copy gem-react-source/**/* to build/gem-react-source var mappings = [].concat( grunt.file.expandMapping('**/*', dest, {cwd: src}) ); mappings.forEach(function(mapping) { var mappingSrc = mapping.src[0]; var mappingDest = mapping.dest; if (grunt.file.isDir(mappingSrc)) { grunt.file.mkdir(mappingDest); } else { grunt.file.copy(mappingSrc, mappingDest); } }); // Make built source available inside npm package grunt.file.mkdir(build); buildFiles.forEach(function(file) { grunt.file.copy('build/' + file, build + file); }); } function packRelease() { var done = this.async(); var spawnCmd = { cmd: 'gem', args: ['build', 'react-source.gemspec'], opts: { cwd: dest, }, }; grunt.util.spawn(spawnCmd, function(err, result) { if (err) { grunt.log.error(err); } // Gem packing does weird things to versions so 0.12.0-alpha becomes // 0.12.0.pre.alpha. We need to get the filename printed to stdout. var filename = result.stdout.match(/File: (.*)$/)[1]; var buildSrc = 'build/gem-react-source/' + filename; var buildDest = 'build/react-source.tgz'; fs.rename(buildSrc, buildDest, done); }); } module.exports = { buildRelease: buildRelease, packRelease: packRelease, }; </del>

'* put files on CDN', '* push changes to git repositories', '* publish npm module (`npm publish .`)', <del> '* publish gem (`gem push react-source-' + VERSION + '.gem`)', </del> '* announce it on FB/Twitter/mailing list', ].forEach(function(ln) { grunt.log.writeln(ln);


Question:
Consider the following code: The first line is rendered in but the second one in . If you skip the first rendering it works.
Apparently, doesn't work with svg.
Or, maybe, I'd say that does not work as expected. I see it gets markup and it gets wrap and it creates nodes via like this: but for some reason of that is .
cc This wouldn't work with the context scenario. Maybe separate renderers are need at the top level? Or at least a flag.
what do you mean by 'context scenario'? Or separate renderers at the top level?
Sorry that was directed to based on a conversation I had with him yesterday
I thought you're referring to my PR and pinging Do you have any comments about my PR? In particular, where should I put tests?
It works if ReactMount supplies the context. Are you using XHTML? I was under the impression that in HTML, just an tag with no explicit namespace should work fine.
correct, I'm using xhtml (that's because in my svg there are foreign namespaces and they are ignored in html). I can test if my example works in pure html but I suppose that you might be right.
What about ambiguous elements like? This doesn't have a context to be picked up.
I assumed we'd look at the namespace of the container. Sorry for not being more precise.


Question:
I tried updating from to . Something has changed in between these releases that is making it so that in onChange's synthetic event is undefined.
This appears to be related to a bug in . does not accept the argument and does not pass it on to . However that's not the only fix needed, also needs to pass something in place of the that expects. Also it seems has the same issue with being passed. I tried fixing this myself. However I have issues with the test setup and/or the test utils seem incapable of triggering from .
Yes I can confirm I have this issue too! This unfortunately makes the beta unusable in my app. The is null while the native event has a target
Same issue. The workaround is using instead of . But that's kinda wrong :(
Same here, but you can use for now.
Excuse me. I'm a beginners of React. Can I ask a question? Why can I use "jsx -watch src/build" to translate "" file to plain JavaScrip?
In fact, I can't see any result after do all steps
I don't know, but this is not the place for asking such questions. Ask this on Stackoverflow or IRC / Slack channels maybe
Thank you for your answer.

topLevelType, topLevelTarget, topLevelTargetID, <del> nativeEvent </del> <ins> nativeEvent, nativeEventTarget </ins> ) { var eventType; var fallbackData;

var event = SyntheticCompositionEvent.getPooled( eventType, topLevelTargetID, <del> nativeEvent </del> <ins> nativeEvent, nativeEventTarget </ins> ); if (fallbackData) {

topLevelType, topLevelTarget, topLevelTargetID, <del> nativeEvent </del> <ins> nativeEvent, nativeEventTarget </ins> ) { var chars;

var event = SyntheticInputEvent.getPooled( eventTypes.beforeInput, topLevelTargetID, <del> nativeEvent </del> <ins> nativeEvent, nativeEventTarget </ins> ); event.data = chars;

topLevelType, topLevelTarget, topLevelTargetID, <del> nativeEvent </del> <ins> nativeEvent, nativeEventTarget </ins> ) { return [ extractCompositionEvent( topLevelType, topLevelTarget, topLevelTargetID, <del> nativeEvent </del> <ins> nativeEvent, nativeEventTarget </ins> ), extractBeforeInputEvent( topLevelType, topLevelTarget, topLevelTargetID, <del> nativeEvent </del> <ins> nativeEvent, nativeEventTarget </ins> ), ]; },

var event = SyntheticEvent.getPooled( eventTypes.change, activeElementID, <del> nativeEvent </del> <ins> nativeEvent, nativeEvent.target </ins> ); EventPropagators.accumulateTwoPhaseDispatches(event);

topLevelType, topLevelTarget, topLevelTargetID, <del> nativeEvent) { </del> <ins> nativeEvent, nativeEventTarget) { </ins> var getTargetIDFunc, handleEventFunc; if (shouldUseChangeEvent(topLevelTarget)) {

var event = SyntheticEvent.getPooled( eventTypes.change, targetID, <del> nativeEvent </del> <ins> nativeEvent, nativeEventTarget </ins> ); event.type = 'change'; EventPropagators.accumulateTwoPhaseDispatches(event);

var mocks = require('mocks'); describe('ReactDOMInput', function() { <ins> var EventConstants; </ins> var React; var ReactLink; var ReactTestUtils; beforeEach(function() { require('mock-modules').dumpCache(); <ins> EventConstants = require('EventConstants'); </ins> React = require('React'); ReactLink = require('ReactLink'); ReactTestUtils = require('ReactTestUtils');

expect(node.value).toBe('0'); }); <ins> it('should have the correct target value', function() { var handled = false; var handler = function(event) { expect(event.target.nodeName).toBe('INPUT'); handled = true; }; var stub = <input type="text" value={0} onChange={handler} />; var container = document.createElement('div'); var node = React.render(stub, container); node.value = 'giraffe'; var fakeNativeEvent = new function() {}; fakeNativeEvent.target = node; fakeNativeEvent.path = [node, container]; ReactTestUtils.simulateNativeEventOnNode( EventConstants.topLevelTypes.topInput, node, fakeNativeEvent ); expect(handled).toBe(true); }); </ins> it('should not set a value for submit buttons unnecessarily', function() { var stub = <input type="submit" />; stub = ReactTestUtils.renderIntoDocument(stub);


Question:
using npm mocha is not necessarily at (thanks to hoisting). (eg it's actually at for me)
We've found out that it's possible to use eslint-tester with jest, so we should just do that.

]); grunt.registerTask('build:test', [ 'delete-build-modules', <del> 'test:eslint-rules', </del> 'jsx:test', 'version-check', 'populist:test',

grunt.registerTask('coverage:parse', require('./grunt/tasks/coverage-parse')); <del> grunt.registerTask('test:eslint-rules', require('./grunt/tasks/test-eslint-rules')); </del> grunt.registerTask('test:webdriver:phantomjs', [ 'connect', 'webdriver-phantomjs',

<del> 'use strict'; var grunt = require('grunt'); module.exports = function() { var done = this.async(); grunt.util.spawn({ cmd: 'node_modules/eslint-tester/node_modules/mocha/bin/mocha', args: ['eslint-rules/__tests__'], opts: {stdio: 'inherit'}, // allows colors to passthrough }, function(err, result, code) { if (err) { grunt.log.error('Custom linter rules are broken'); } else { grunt.log.ok('Custom linter rules are okay'); } done(code === 0); }); }; </del>

"/.module-cache/" ], "testPathDirs": [ <del> "<rootDir>/src" </del> <ins> "<rootDir>/src", "<rootDir>/eslint-rules" </ins> ], "unmockedModulePathPatterns": [ ""


Question:
Not reporting a bug or issue. I just wanted to let you know I found this part of the walk-through to be unclear and confusing and others may, too: It took me a while to figure out whether I was supposed to be editing in the file provided when I cloned the repo or whether I should make a new file and how to link the two files if they were both necessary. I'm new to React and pretty new to programming overall, but I do have some Javascript and Javascript framework experience. I really enjoyed the walk-through because it was simple to get started, so thanks for the helpful resource!!
Good catch & thanks for the heads up! I'd definitely call that a bug :) We really need to go through the tutorial and make sure it's all cohesive. After 2 years of ad hoc updating it's definitely showing its age. If you have any other feedback (especially as somebody who is relatively new to programming), we'd definitely appreciate it.
No problem! I'm happy to help. Will definitely let you know if I see anything else. Thanks again for the great resources!
I've opened a PR with a minor change to make the bit that mentioned a little easier to follow. +1 on making sure the tutorial is cohesive. What are your thoughts on bringing the actual tutorial as a sub-directory of the React project as opposed to being in a separate repository? I am not even sure myself if that's the best way to go about it, but at least things wouldn't be going out of sync as they are now. If you look at the source code for the tutorial and compare it to the tutorial instructions in the React repo there are some striking differences which might catch people out. The major drawback with this approach would be having to clone the entire React source when you want to get just the tutorial, but I actually don't think that's a bad idea. It might even encourage people to have a poke about the source code, which is always a good thing.

### Getting started <del> For this tutorial, we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document: </del> <ins> For this tutorial, we'll use prebuilt JavaScript files on a CDN. Open up `public/index.html` in your favorite editor, which should contain the following: </ins> ```html <!-- index.html -->


Question:
After migrating from 0.13 to 0.14-beta1, some of our unit tests are reporting false positive failures. It seems as though is no longer able to find elements inside components.
Isn't findRenderedDOMComponentWithTag's first argument supposed to be the name of the react component tree that you've defined (MyElement)?
Oops. That was a typo in my code sample. I've corrected it.
The problem was that was passed as a lowerCase string to . Converting it to upperCase before hand doesn't hurt anyway. What do you guys think?

scryRenderedDOMComponentsWithTag: function(root, tagName) { return ReactTestUtils.findAllInRenderedTree(root, function(inst) { return ReactTestUtils.isDOMComponent(inst) && <del> inst.tagName === tagName.toUpperCase(); </del> <ins> inst.tagName.toUpperCase() === tagName.toUpperCase(); </ins> }); },


Question: Flattening children to an array is 20 times faster than flattening to an object. For long list of elements, this shows up on the initial render flame graphs as pretty hot.

var flattenChildren = require('flattenChildren'); var instantiateReactComponent = require('instantiateReactComponent'); var shouldUpdateReactComponent = require('shouldUpdateReactComponent'); <ins> var traverseAllChildren = require('traverseAllChildren'); var warning = require('warning'); function instantiateChild(childInstances, child, name) { // We found a component instance. var keyUnique = (childInstances[name] === undefined); if (__DEV__) { warning( keyUnique, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.', name ); } if (child != null && keyUnique) { childInstances[name] = instantiateReactComponent(child, null); } } </ins> /** * ReactChildReconciler provides helpers for initializing or updating a set of

* does diffed reordering and insertion. */ var ReactChildReconciler = { /** * Generates a "mount image" for each of the supplied children. In the case * of `ReactDOMComponent`, a mount image is a string of markup.

* @internal */ instantiateChildren: function(nestedChildNodes, transaction, context) { <del> var children = flattenChildren(nestedChildNodes); for (var name in children) { if (children.hasOwnProperty(name)) { var child = children[name]; // The rendered children must be turned into instances as they're // mounted. var childInstance = instantiateReactComponent(child, null); children[name] = childInstance; } </del> <ins> if (nestedChildNodes == null) { return null; </ins> } <del> return children; </del> <ins> var childInstances = {}; traverseAllChildren(nestedChildNodes, instantiateChild, childInstances); return childInstances; </ins> }, /**


Question:
As it is known (but ), React's SyntheticEvent is pooled. This is confusing for many users as they don't understand why the event starts to behave strangely when used in an async callback, like inside a , a or a callback. There has already been an attempt to solve this problem here: The code of SyntheticEvent's default methods is: It may make sense to be more defensive because calling on a pooled event will raise . It would be more useful to add a check like:
To illustrate the problem in not being defensive, I would give you this commit that has made it into production as a workaround in React-tappable: Basically the user is trying to assign an empty function to a SyntheticEvent that as been put back in the pool (the call to persist was from another PR at the same time). And we were basically 3 concurrent PR to try different solutions to the exact same problem.
As the person who made the PR in a panic, I did find the code that broke in react itself. the preventDefault method tries to call the method on . A simple if check for in the method, and a no-op if null would be a great fix to this problem. Similar to how setState is handled on an unmounted component.
I think React should not swallow this error and be fail fast, because this does not make any sense to preventDefault in an async callback (because the default already has been applied), React should rather throw an error. But this is only my opinion, because the browser behavior with dom events is not fail fast and swallow that bad usage of preventDefault. I mean the browser does not throw an error when we do: It simply has no effect (like what you suggest) I don't like this and would rather change the behavior of both React and the browser, but I don't think I can do much on my own... Maybe at least React could issue a warning in DEV env?
Yeah, I think warning is appropriate here.
A warning would be great!
Just wonder what kind of message should be put into this warning. If event pooling is not going to be documented (will it?), it may be strange to explain the pooling system inside a warning no?
Yes, event pooling should/will be documented. Feel free to submit a PR. We should add a warning to let the user know that the event has been returned to the pool and so invoking methods on it makes no sense. Once the docs are written, we can add a link to the end of the warning.
Got a PR for this! Would really appreciate some feedback.

--- markdown: redcarpet name: React <ins> description: A JavaScript library for building user interfaces </ins> redcarpet: extensions: - fenced_code_blocks

- Gemfile.lock - README.md - Rakefile <ins> url: http://facebook.github.io </ins> baseurl: /react permalink: /blog/:year/:month/:day/:title.html

<meta property="og:description" content="A JavaScript library for building user interfaces" /> <link rel="shortcut icon" href="/react/favicon.ico"> <ins> <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml"> </ins> <link rel="stylesheet" href="/react/css/react.css"> <link rel="stylesheet" href="/react/css/syntax.css">

<ins> --- layout: none --- <?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <channel> <title>{{ site.name }}</title> <description>{{ site.description }}</description> <link>{{ site.url }}{{ site.baseurl }}</link> <atom:link href="{{ site.url }}{{ site.baseurl }}/feed.xml" rel="self" type="application/rss+xml" /> {% for post in site.posts limit:10 %} <item> <title>{{ post.title | xml_escape }}</title> <description>{{ post.content | xml_escape }}</description> <pubDate>{{ post.date | date_to_xmlschema }}</pubDate> <link>{{ site.url }}{{ site.baseurl }}{{ post.url }}</link> <guid isPermaLink="true">{{ site.url }}{{ site.baseurl }}{{ post.url }}</guid> </item> {% endfor %} </channel> </rss> </ins>


Question:
We shipped this in 0.13 but then exposed it as (or ) in master. We should deprecate the usage in (separately from other deprecation notices because we aren't shipping this as a standalone addon).
I can't find any information regarding this decision, if goes away, how are we supposed to batch setStates in non-dom event handlers?
. As of right now, the batching is a part of the reconciler which lives in , even if it's used by non-dom event handlers.

var cloneWithProps = require('cloneWithProps'); var shallowCompare = require('shallowCompare'); var update = require('update'); <ins> var warning = require('warning'); var warnedAboutBatchedUpdates = false; </ins> React.addons = { CSSTransitionGroup: ReactCSSTransitionGroup,

PureRenderMixin: ReactComponentWithPureRenderMixin, TransitionGroup: ReactTransitionGroup, <del> batchedUpdates: ReactUpdates.batchedUpdates, </del> <ins> batchedUpdates: function() { if (__DEV__) { warning( warnedAboutBatchedUpdates, 'React.addons.batchedUpdates is deprecated. Use ' + 'ReactDOM.unstable_batchedUpdates instead.' ); warnedAboutBatchedUpdates = true; } return ReactUpdates.batchedUpdates.apply(this, arguments); }, </ins> cloneWithProps: cloneWithProps, createFragment: ReactFragment.create, shallowCompare: shallowCompare,


Question:
Do we want to do this now? mentioned this but I forgot about it until this morning.
That would be nice but shouldn't be blocking. We can make that 0.15.

} } <ins> var testFunc = function testFn() {}; warning( (testFunc.name || testFunc.toString()).indexOf('testFn') !== -1, 'It looks like you're using a minified copy of the development build ' + 'of React. When deploying React apps to production, make sure to use ' + 'the production build which skips development warnings and is faster. ' + 'See https://fb.me/react-minification for more details.' ); </ins> // If we're in IE8, check to see if we are in compatibility mode and provide // information on preventing compatibility mode var ieCompatibilityMode =

for (var i = 0; i < expectedFeatures.length; i++) { if (!expectedFeatures[i]) { <del> console.error( </del> <ins> warning( false, </ins> 'One or more ES5 shims expected by React are not available: ' + 'https://fb.me/react-warning-polyfills' );


Question:
Since upgrading from beta3 to rc1 I've seen this error a few times in production. Haven't been able to trace the source yet though. cc
I was unmounting a root during a keyboard event which caused this to happen. I think this has always been a problem? Perhaps we've only been lucky... leaving open just to be sure. EDIT: Could it make sense to have something along the lines of ? Allowing you to schedule things to occur as soon as the current transaction ends.
This invariant was new in this release. We also hit one case at FB that I haven't yet investigated. Probably need to change something for the final release.
I have seen this on RC1 can't find a sequence of actions to repeat it.
I'm running into this issue as well when conditionally rendering based on state. Not sure how to boil it down to a simple reproducible bug report yet.
My issue only happens when I am leveraging FastClick. Didn't happen before 0.14.
I've found it is because the events are handled in a different order with fastclick, so the batching gets weird...
e.g. click gets fired before touchEnd, so click handler setState to remove subtree, and then react tries to do something with it in touch end perhaps?

echo "Only docs were updated, stopping build process." exit fi <del> npm install -g npm </del> <ins> npm install -g npm@latest-2 </ins> script: - | if [ "$TEST_TYPE" = build_website ]; then

do { lastID = internalGetID(current); current = current.parentNode; <del> invariant( current != null, 'findFirstReactDOMImpl(...): Unexpected detached subtree found when ' + 'traversing DOM from node `%s`.', nodeID ); </del> <ins> if (current == null) { // The passed-in node has been detached from the container it was // originally rendered into. return null; } </ins> } while (lastID !== reactRootID); if (current === containersByReactRootID[reactRootID]) {

 /** * Copyright 2013-2015, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @emails react-core */ 'use strict'; var React; var ReactDOM; var ReactTestUtils; describe('ReactEventIndependence', function() { beforeEach(function() { require('mock-modules').dumpCache(); React = require('React'); ReactDOM = require('ReactDOM'); ReactTestUtils = require('ReactTestUtils'); }); it('does not crash with other react inside', function() { var clicks = 0; var div = ReactTestUtils.renderIntoDocument(
 clicks++} dangerouslySetInnerHTML={{ __html: '<button data-reactid=".z">click me
', }} /> ); ReactTestUtils.SimulateNative.click(div.firstChild); expect(clicks).toBe(1); }); it('does not crash with other react outside', function() { var clicks = 0; var outer = document.createElement('div'); outer.setAttribute('data-reactid', '.z'); var inner = ReactDOM.render( <button onClick={() => clicks++}>click me</button>, outer ); ReactTestUtils.SimulateNative.click(inner); expect(clicks).toBe(1); }); it('does not when event fired on unmounted tree', function() { var clicks = 0; var container = document.createElement('div'); var button = ReactDOM.render( <button onClick={() => clicks++}>click me</button>, container ); // Now we unmount the component, as if caused by a non-React event handler // for the same click we're about to simulate, like closing a layer: ReactDOM.unmountComponentAtNode(container); ReactTestUtils.SimulateNative.click(button); // Since the tree is unmounted, we don't dispatch the click event. expect(clicks).toBe(0); }); });


Question:
defines the "integrity" attribute. This attribute is not defined in HTMLDOMPropertyConfig so it is not included in HTML rendered on a server.
+1 here. Modern browsers have supported this feature. Bootstrap tell me to use the following from CDN: Here is the MDN introduction:
cc Contrary to popular belief, we do get these fairly frequently. Related to
Related in that there should be a good way of replacing whitelisting attributes, but it's not a custom attribute in the same sense as .
Yea "related", the underlying goal of that issue is to really get of the whitelist as much as possible, entirely would be good. I don't know that we called that out explicitly but they're mostly the same problem.
Yeah, my comment was directed at a conversation we had at our last team meeting when figuring out our priorities for the remainder of the year. Basically, there are a whole ton of attributes that we keep adding one-at-a-time, and I was/am pushing for us to solve and wipe them all out (past present and future) with a single swipe. But is a slightly non-trivial change with several dependencies and was thus demoted off the prioirty list :P.

icon: null, id: MUST_USE_PROPERTY, inputMode: MUST_USE_ATTRIBUTE, <ins> integrity: null, </ins> is: MUST_USE_ATTRIBUTE, keyParams: MUST_USE_ATTRIBUTE, keyType: MUST_USE_ATTRIBUTE,


Question:
I tried doing the following to pick up react-dom: However, it said that the only version available was Poking around on Github yielded a repo called that appears to be linked to Bower. I'm guessing this isn't the right library; what's the dependency installation story going to look like with Bower?
Never mind, just found that it shipped in the same package. However, the documentation is misleading on the :
Thanks, we should fix that.

Dev build with warnings: <https://fb.me/react-dom-0.14.0-rc1.js> Minified build for production: <https://fb.me/react-dom-0.14.0-rc1.min.js> <del> These builds are also available in the `react` and `react-dom` packages on bower. </del> <ins> These builds are also available in the `react` package on bower. </ins> ## Changelog

<ins> --- title: "React v0.14" author: spicyj --- We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native. If you tried the release candidate, thank you – your support is invaluable and we've fixed a few bugs that you reported. As with all of our releases, we consider this version to be stable enough to use in production and recommend that you upgrade in order to take advantage of our latest improvements. ## Upgrade Guide Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain. If your code is free of warnings when running under React 0.13, upgrading should be easy. We have two new small breaking changes that didn't give a warning in 0.13 (see below). Every new change in 0.14, including the major changes below, is introduced with a runtime warning and will work as before until 0.15, so you don't have to worry about your app breaking with this upgrade. See the changelog below for more details. ## Installation We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages: * `npm install --save react react-dom` Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster. If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower. * **React** Dev build with warnings: <https://fb.me/react-0.14.0.js> Minified build for production: <https://fb.me/react-0.14.0.min.js> * **React with Add-Ons** Dev build with warnings: <https://fb.me/react-with-addons-0.14.0.js> Minified build for production: <https://fb.me/react-with-addons-0.14.0.min.js> * **React DOM** (include React in the page before React DOM) Dev build with warnings: <https://fb.me/react-dom-0.14.0.js> Minified build for production: <https://fb.me/react-dom-0.14.0.min.js> ## Changelog ### Major changes - #### Two Packages: React and React DOM As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM. To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main `react` package into two: `react` and `react-dom`. **This paves the way to writing components that can be shared between the web version of React and React Native.** We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms. The `react` package contains `React.createElement`, `.createClass`, `.Component`, `.PropTypes`, `.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components. The `react-dom` package has `ReactDOM.render`, `.unmountComponentAtNode`, and `.findDOMNode`. In `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `.renderToStaticMarkup`. ```js var React = require('react'); var ReactDOM = require('react-dom'); var MyComponent = React.createClass({ render: function() { return <div>Hello World</div>; } }); ReactDOM.render(<MyComponent />, node); ``` The old names will continue to work with a warning until 0.15 is released, and we’ve published the [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) we used at Facebook to help you with this transition. The add-ons have moved to separate packages as well: - `react-addons-clone-with-props` - `react-addons-create-fragment` - `react-addons-css-transition-group` - `react-addons-linked-state-mixin` - `react-addons-perf` - `react-addons-pure-render-mixin` - `react-addons-shallow-compare` - `react-addons-test-utils` - `react-addons-transition-group` - `react-addons-update` - `ReactDOM.unstable_batchedUpdates` in `react-dom`. For now, please use matching versions of `react` and `react-dom` (and the add-ons, if you use them) in your apps to avoid versioning problems. - #### DOM node refs The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a React DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. Starting with this release, `this.refs.giraffe` _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.** ```js var Zoo = React.createClass({ render: function() { return <div>Giraffe name: <input ref="giraffe" /></div>; }, showName: function() { // Previously: var input = this.refs.giraffe.getDOMNode(); var input = this.refs.giraffe; alert(input.value); } }); ``` This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components. With this change, we’re deprecating `.getDOMNode()` and replacing it with `ReactDOM.findDOMNode` (see below). If your components are currently using `.getDOMNode()`, they will continue to work with a warning until 0.15. - #### Stateless functional components In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take `props` as an argument and return the element you want to render: ```js // A functional component using an ES2015 (ES6) arrow function: var Aquarium = (props) => { var fish = getFish(props.species); return <Tank>{fish}</Tank>; }; // Or with destructuring and an implicit return, simply: var Aquarium = ({species}) => ( <Tank> {getFish(species)} </Tank> ); // Then use: <Aquarium species="rainbowfish" /> ``` These components behave just like a React class with only a `render` method defined. Since no component instance is created for a functional component, any `ref` added to one will evaluate to `null`. Functional components do not have lifecycle methods, but you can set `.propTypes` and `.defaultProps` as properties on the function. This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. - #### Deprecation of react-tools The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX. - #### Compiler optimizations React now supports two compiler optimizations that can be enabled in Babel 5.8.23 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes. **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`. **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling. ### Breaking changes In almost all cases, we change our APIs gradually and warn for at least one release to give you time to clean up your code. These two breaking changes did not have a warning in 0.13 but should be easy to find and clean up: - `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically. - Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component. These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings: - The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/react/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above. - Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/react/docs/create-fragment.html) helper to migrate, which now returns an array. - Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead. ### New deprecations, introduced with a warning Each of these changes will continue to work as before with a new warning until the release of 0.15 so you can upgrade your code gradually. - Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section. With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically. - `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props. - ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work. - Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object. - Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/react/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed). - Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`. ### Notable enhancements - Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too. - React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.) - Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`] (http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/). - When possible, React DOM now generates XHTML-compatible markup. - React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`. - React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`. - The `image` SVG tag is now supported by React DOM. - In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute). - React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`. - Many small performance improvements have been made. - Many warnings show more context than before. - Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes. - Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name. ### New helpful warnings - React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates. - Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM. - Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems. ### Notable bug fixes - Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari. - SVG elements are created with the correct namespace in more cases. - React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected. - When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling. - Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components). - React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`. - Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work. - Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously. </ins>

* `jscodeshift -t react/packages/react-codemod/transforms/findDOMNode.js <file>` <ins> `react-to-react-dom` updates code for the split of the `react` and `react-dom` packages (e.g., `React.render` to `ReactDOM.render`). It looks for `require('react')` and replaces the appropriate property accesses using `require('react-dom')`. It does not support ES6 modules or other non-CommonJS systems. We recommend performing the `findDOMNode` conversion first. * `jscodeshift -t react/packages/react-codemod/transforms/react-to-react-dom.js <file>` * After running the automated codemod, you may want to run a regex-based find-and-replace to remove extra whitespace between the added requires, such as `codemod.py -m -d src --extensions js '(var Reacts*=s*require(.react.);)nn(s*var ReactDOM)' '1n2'` using https://github.com/facebook/codemod. </ins> `pure-render-mixin` removes `PureRenderMixin` and inlines `shouldComponentUpdate` so that the ES2015 class transform can pick up the React component and turn it into an ES2015 class. NOTE: This currently only works if you

`require('React')` statement in your code files and if you access React as a global. <del> `react-to-react-dom` updates code for the split of the `react` and `react-dom` packages (e.g., `React.render` to `ReactDOM.render`). It looks for `require('react')` and replaces the appropriate property accesses using `require('react-dom')`. It does not support ES6 modules or other non-CommonJS systems. * `jscodeshift -t react/packages/react-codemod/transforms/react-to-react-dom.js <file>` * After running the automated codemod, you may want to run a regex-based find-and-replace to remove extra whitespace between the added requires, such as `codemod.py -m -d src --extensions js '(var Reacts*=s*require(.react.);)nn(s*var ReactDOM)' '1n2'` using https://github.com/facebook/codemod. </del> ### Explanation of the ES2015 class transform * Ignore components with calls to deprecated APIs. This is very defensive, if


Question:
The function isn't quite working for me anymore after upgrading from 0.14-rc1 and 0.14. The error stack looks something like this:
Can you post a minimal repro case please?
The minimal repro for me is this: If I use an element -- I get the error reported above. If I use a element -- there is no error. I tried dropping this as a Jest test in the React source code -- but it passed. However, running this exact same test in my local project -- it fails. I've confirmed that all React libs are 0.14. Could there be some kind of build process that's causing the issue? The line that fails is this when is the element.
Sounds like what mentioned here:
Indeed. Looks like this is the same issue. I hope you can push that out fix in 0.14.1 soon as this is a blocking issue for my team for upgrading to 0.14. Thanks for the fast response.
We'll try. In the meantime, you could copy the definition from here since it doesn't rely on any React internals:

* components with the class name matching `className`. * @return {array} an array of all the matches. */ <del> scryRenderedDOMComponentsWithClass: function(root, className) { </del> <ins> scryRenderedDOMComponentsWithClass: function(root, classNames) { if (!Array.isArray(classNames)) { classNames = classNames.split(/s+/); } </ins> return ReactTestUtils.findAllInRenderedTree(root, function(inst) { if (ReactTestUtils.isDOMComponent(inst)) { <del> var instClassName = ReactDOM.findDOMNode(inst).className; return ( instClassName && (('' + instClassName).split(/s+/)).indexOf(className) !== -1 ); </del> <ins> var classList = ReactDOM.findDOMNode(inst).className.split(/s+/); return classNames.every(function(className) { return classList.indexOf(className) !== -1; }); </ins> } return false; });

expect(scryResults.length).toBe(1); });  it('can scryRenderedDOMComponentsWithClass with multiple classes', function() { var Wrapper = React.createClass({ render: function() { return
Hello Jim
; }, }); var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />); var scryResults1 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, 'x y' ); expect(scryResults1.length).toBe(1); var scryResults2 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, 'x z' ); expect(scryResults2.length).toBe(1); var scryResults3 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, ['x', 'y'] ); expect(scryResults3.length).toBe(1); expect(scryResults1[0]).toBe(scryResults2[0]); expect(scryResults1[0]).toBe(scryResults3[0]); var scryResults4 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, ['x', 'a'] ); expect(scryResults4.length).toBe(0); var scryResults5 = ReactTestUtils.scryRenderedDOMComponentsWithClass( renderedComponent, ['x a'] ); expect(scryResults5.length).toBe(0); });  it('traverses children in the correct order', function() { var Wrapper = React.createClass({ render: function() {


Question:
The function isn't quite working for me anymore after upgrading from 0.14-rc1 and 0.14. The error stack looks something like this:
Can you post a minimal repro case please?
The minimal repro for me is this: If I use an element -- I get the error reported above. If I use a element -- there is no error. I tried dropping this as a Jest test in the React source code -- but it passed. However, running this exact same test in my local project -- it fails. I've confirmed that all React libs are 0.14. Could there be some kind of build process that's causing the issue? The line that fails is this when is the element.
Sounds like what mentioned here:
Indeed. Looks like this is the same issue. I hope you can push that out fix in 0.14.1 soon as this is a blocking issue for my team for upgrading to 0.14. Thanks for the fast response.
We'll try. In the meantime, you could copy the definition from here since it doesn't rely on any React internals:

}, isDOMComponent: function(inst) { <del> // TODO: Fix this heuristic. It's just here because composites can currently // pretend to be DOM components. </del> return !!(inst && inst.nodeType === 1 && inst.tagName); },

} return ReactTestUtils.findAllInRenderedTree(root, function(inst) { if (ReactTestUtils.isDOMComponent(inst)) { <del> var classList = ReactDOM.findDOMNode(inst).className.split(/s+/); return classNames.every(function(className) { return classList.indexOf(className) !== -1; </del> <ins> var className = inst.className; if (typeof className !== 'string') { // SVG, probably. className = inst.getAttribute('class') || ''; } var classList = className.split(/s+/); return classNames.every(function(name) { return classList.indexOf(name) !== -1; </ins> }); } return false;


Question:
Did not know where to post this best. Since some weeks, the layout looks broken on Google Chrome 43, Linux Screenshot: !
Not Linux specific; broken in all browsers / operating systems. This is probably a good first bug if someone wants to submit a pull request.
Closed in .

@include clearfix; } <ins> /* JSX Compiler */ .jsxCompiler { margin: 0 auto; padding-top: 20px; width: 1220px; label.compiler-option { display: block; margin-top: 5px; } #jsxCompiler { margin-top: 20px; } .playgroundPreview { padding: 0; width: 600px; pre { @include code-typography; } } .playgroundError { // The compiler view kills padding in order to render the CodeMirror code // more nicely. For the error view, put a padding back padding: 15px 20px; } } </ins> .docs-prev { float: left; }


Question:
Ref:
I'm taking a look at this as a first bug - from the docs and some testing, the event seems to be fired at the form element level rather than the form itself. That is to say: will not log on submit, but: will log on submit. Does this match the expected behaviour, and if so do we want the handler to be on the individual React.DOM form elements (i.e. so it is called when that element is invalid), or do we want it to bubble up to the parent (i.e. so it is called whenever at least one element in that form is invalid)?
We should match the DOM and fire it on the element (not the form). We already have support for these events which don't bubble. Most of our events are at the document level and then delegated but the ones which don't bubble need to be to specific elements on creation. Here's how we're doing it for forms and the submit & reset events: Thanks for taking this on! Feel free to get a PR up before it's completely ready if you have questions / need help.
Thanks Paul, good to know I was looking in the right place! Will update when I have had time to create a PR or if I need any help :) Cheers Tom
Hey, I've put together a PR at - it would be great to get your feedback on it. A couple of specific questions I had: should I handle automated testing of this? There's a lot of test code to look at and I'm unfamiliar with the React codebase, so I'm unsure if/how this should be tested. the splitting out of the logic make sense? Or do you think it would be better to have a separate statement for this bit, preceeding the other in , matching all the elements which need this setup, and then keep the other as is (minus the first ) Any feedback appreciated, this does seem to work but I'm totally new to the React code so not sure if the way I've gone about it is suitable or not! Cheers, Tom
Awesome!

captured: keyOf({onInputCapture: true}), }, }, <ins> invalid: { phasedRegistrationNames: { bubbled: keyOf({onInvalid: true}), captured: keyOf({onInvalidCapture: true}), }, }, </ins> keyDown: { phasedRegistrationNames: { bubbled: keyOf({onKeyDown: true}),

topError:           eventTypes.error, topFocus:           eventTypes.focus, topInput:           eventTypes.input, <ins> topInvalid:         eventTypes.invalid, </ins> topKeyDown:         eventTypes.keyDown, topKeyPress:        eventTypes.keyPress, topKeyUp:           eventTypes.keyUp,

case topLevelTypes.topEnded: case topLevelTypes.topError: case topLevelTypes.topInput: <ins> case topLevelTypes.topInvalid: </ins> case topLevelTypes.topLoad: case topLevelTypes.topLoadedData: case topLevelTypes.topLoadedMetadata:

), ]; break; <ins> case 'input': case 'select': case 'textarea': inst._wrapperState.listeners = [ ReactBrowserEventEmitter.trapBubbledEvent( EventConstants.topLevelTypes.topInvalid, 'invalid', node ), ]; break; </ins> } }

case 'form': case 'video': case 'audio': <del> this._wrapperState = { listeners: null, }; transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); </del> <ins> this._setupTrapBubbledEventsLocal(transaction); </ins> break; case 'button': props = ReactDOMButton.getNativeProps(this, props, nativeParent); break; case 'input': <ins> this._setupTrapBubbledEventsLocal(transaction); </ins> ReactDOMInput.mountWrapper(this, props, nativeParent); props = ReactDOMInput.getNativeProps(this, props); break;

props = ReactDOMOption.getNativeProps(this, props); break; case 'select': <ins> this._setupTrapBubbledEventsLocal(transaction); </ins> ReactDOMSelect.mountWrapper(this, props, nativeParent); props = ReactDOMSelect.getNativeProps(this, props); break; case 'textarea': <ins> this._setupTrapBubbledEventsLocal(transaction); </ins> ReactDOMTextarea.mountWrapper(this, props, nativeParent); props = ReactDOMTextarea.getNativeProps(this, props); break;

}, /** <ins> * Setup this component to trap non-bubbling events locally * * @private * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction */ _setupTrapBubbledEventsLocal: function(transaction) { this._wrapperState = { listeners: null, }; transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); }, /** </ins> * Creates markup for the open tag and all attributes. * * This method has side effects because events get registered.

topError: null, topFocus: null, topInput: null, <ins> topInvalid: null, </ins> topKeyDown: null, topKeyPress: null, topKeyUp: null,


Question:
I'm trying to use Video element but some attributes doesn't work. from i'm trying to do: but it only renders to:
kind and srcLang were recently in They'll be a part of a future release (likely 0.14.1). I didn't see default then though so I guess we still need to add that.
Related to

crossOrigin: null, data: null, // For `<object />` acts as `src`. dateTime: MUST_USE_ATTRIBUTE, <ins> default: HAS_BOOLEAN_VALUE, </ins> defer: HAS_BOOLEAN_VALUE, dir: null, disabled: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,


Question:
My project uses react, react-dom, and react-bootstrap. react-bootstrap requires react to be a peer dependency. react-dom includes react as a child dependency. So I must install react as a top-level dependency in order for react-bootstrap to work. Now I have two copies of react. When I try to use the Modal component in react-bootstrap, I get the error "Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's method, or you have multiple copies of React loaded". I can fix this by deleting the directory nodemodules/react-dom/nodemodules/react. Maybe react-dom should be changed so react is a peer dependency instead of a child dependency.
As far as I understand it; yeah it should be a peer dependency (cc ?). But dependencies are not child dependencies that's simply a result of how NPM2 unfortunately resolves version issues, so peer dependency is preferable, but a regular dependency is not wrong, you just have to be careful to avoid multiple installations.
I don't know what I did to cause react to be installed below react-dom. I had this: nodemodules/react-dom/nodemodules/react and also: node_modules/react. I can't find a way to reproduce that now.
It can happen quite stealthily when updating/etc in NPM2. I ran into the same issue recently. I'll reopen this for now because it really seems to me that it should be a peer dependency.
Any reason why it is a direct dependency in the first place? Was not the intend of npm's peerDependencies to cover this exact problem? (Avoid duplications of modules built around other module, like react and react-dom), just saying that seems there isn't a reason for react-dom to include react as a direct dependency
It probably should be a peerDep. I don't remember why I put it as a regular dep there… (I did addons-* with React as a peerDep).

"url": "https://github.com/facebook/react/issues" }, "homepage": "https://github.com/facebook/react/tree/master/npm-react-dom", <del> "dependencies": { </del> <ins> "peerDependencies": { </ins> "react": "^0.15.0-alpha" } }


Question:
I'm doing a simple shallow render on a component which has a button () with an handler. I can correctly assert most of its properties, but I can't get asserting whether the button has been clicked (by using and a passed in as handler) to work. TestUtils doesn't throw any Invariant Violation or whatever other error, the spy just never gets called. When I manually call it through it works. Is this expected behavior?
I'm not up to date with what the interaction is supposed to be with the shallow renderer these days so cc … But when you use the shallow renderer you aren't working on a real rendered tree. especially doesn't look like it should work - remember that props are not rendered output. will be a React Element, not a component instance. So as your test case seems to be written, yes this is expected.
That's expected. We should probably give a better error message – changing this issue title to reflect that.
Is there anything I can do to help with this? I haven't contributed to React yet, but we're investing heavily into in-company knowledge. If you can point me to where to assert this, I'd love to help.
Also, where do I submit PR's for React's website? I could clarify this in the documentation...
The docs/ directory has markdown files that turn into the website. Each page should also have an "Edit on GitHub" button at the top that links you straight to it. In the file, you could add an invariant that makes sure React.isValidElement returns false on the passed-in node.

function makeSimulator(eventType) { return function(domComponentOrNode, eventData) { var node; <ins> invariant( !React.isValidElement(domComponentOrNode), 'TestUtils.Simulate expects a component instance and not a ReactElement.' + 'TestUtils.Simulate will not work if you are using shallow rendering.' ); </ins> if (ReactTestUtils.isDOMComponent(domComponentOrNode)) { node = findDOMNode(domComponentOrNode); } else if (domComponentOrNode.tagName) {

expect(handler).toHaveBeenCalledWith(jasmine.objectContaining({target: node})); });  it('should throw when attempting to use ReactTestUtils.Simulate with shallow rendering', function() { var SomeComponent = React.createClass({ render: function() { return (
 hello, world.
 ); }, }); var handler = jasmine.createSpy('spy'); var shallowRenderer = ReactTestUtils.createRenderer(); shallowRenderer.render(<SomeComponent handleClick={handler} />); var result = shallowRenderer.getRenderOutput(); expect(() => ReactTestUtils.Simulate.click(result)).toThrow( 'TestUtils.Simulate expects a component instance and not a ReactElement.' + 'TestUtils.Simulate will not work if you are using shallow rendering.' ); expect(handler).not.toHaveBeenCalled(); });  it('can scry with stateless components involved', function() { var Stateless = () =>

; var SomeComponent = React.createClass({


Question:
There appears to have been a change in how is generated between 0.13 and 0.14 which is causing a number of our shallow rendered tests to fail when upgrading because the deepEquals fails on the property. Here is a simple example component which exhibits the issue.
I've been seeing some similar issues with shallow rendering. My current (messy - sorry!) workaround is this: Let me know if that helps! My version currently breaks some of the Jest tests, but I'm happy to work on this some more and submit a PR.
Thank you very much for this, it's been a tremendous help! While this solved the problem for my test case above it still failed on a large number of our more complex tests. I've been iterating on it and once I have all of our tests passing I'll add the updated version.
Here is the updated workaround, it works for our 238 tests of varying complexity but I'd be interested to see if it passes all of your tests as well.
Awesome! If you don't mind trying, what happens if you do and then use the earlier ?
Much cleaner thanks, I guess I was in my head too much :)
I prefer applying a monkey patch, until we have this fixed in react by wrapping TestUtils in my own module:
This should be fixed by .

} } <ins> function shouldConstruct(Component) { return Component.prototype && Component.prototype.isReactComponent; } </ins> /** * ------------------ The Life-Cycle of a Composite Component ------------------ *

var Component = this._currentElement.type; // Initialize the public class <del> var inst; </del> <ins> var inst = this._constructComponent(publicProps, publicContext); </ins> var renderedElement; <del> if (Component.prototype && Component.prototype.isReactComponent) { if (__DEV__) { ReactCurrentOwner.current = this; try { inst = new Component(publicProps, publicContext, ReactUpdateQueue); } finally { ReactCurrentOwner.current = null; } } else { inst = new Component(publicProps, publicContext, ReactUpdateQueue); } } else { if (__DEV__) { ReactCurrentOwner.current = this; try { inst = Component(publicProps, publicContext, ReactUpdateQueue); } finally { ReactCurrentOwner.current = null; } } else { inst = Component(publicProps, publicContext, ReactUpdateQueue); } if (inst == null || inst.render == null) { renderedElement = inst; warnIfInvalidElement(Component, renderedElement); invariant( inst === null || inst === false || ReactElement.isValidElement(inst), '%s(...): A valid React element (or null) must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component' ); inst = new StatelessComponent(Component); } </del> <ins> // Support functional components if (!shouldConstruct(Component) && (inst == null || inst.render == null)) { renderedElement = inst; warnIfInvalidElement(Component, renderedElement); invariant( inst === null || inst === false || ReactElement.isValidElement(inst), '%s(...): A valid React element (or null) must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component' ); inst = new StatelessComponent(Component); </ins> } if (__DEV__) {

return markup; }, <ins> _constructComponent: function(publicProps, publicContext) { if (__DEV__) { ReactCurrentOwner.current = this; try { return this._constructComponentWithoutOwner(publicProps, publicContext); } finally { ReactCurrentOwner.current = null; } } else { return this._constructComponentWithoutOwner(publicProps, publicContext); } }, _constructComponentWithoutOwner: function(publicProps, publicContext) { var Component = this._currentElement.type; if (shouldConstruct(Component)) { return new Component(publicProps, publicContext, ReactUpdateQueue); } else { return Component(publicProps, publicContext, ReactUpdateQueue); } }, </ins> performInitialMountWithErrorHandling: function( renderedElement, nativeParent,

assign( ShallowComponentWrapper.prototype, ReactCompositeComponent.Mixin, { <ins> _constructComponent: ReactCompositeComponent.Mixin._constructComponentWithoutOwner, </ins> _instantiateReactComponent: function(element) { return new NoopInternalComponent(element); },

]); });  it('should shallow render a functional component', function() { function SomeComponent() { return (

 ); } var shallowRenderer = ReactTestUtils.createRenderer(); var result = shallowRenderer.render(<SomeComponent />); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ , , ]); });  it('should throw for invalid elements', function() { var SomeComponent = React.createClass({ render: function() {


Question:
Count up with 0.14.0 But can't count up 0.14.1 I got this issue on IE 10 and 11 + Windows 8, 7. And Windows 10 + IE 11 is move fine.
:+1: I'm seeing the same issue when I use react-dom 0.14.1
:+1: same
cc seems bad.
Fix incoming. Worth noting (as reminded me) that this is only an issue in dev mode.
:+1:
:+1: Makes our app difficult to test on Windows 7 / 8. I can confirm that switching to production mode does resolve it for us.
Yea sorry about the issues, we'll be shipping 0.14.2 tomorrow with this fixed.
:+1:
Is this related only to anchor tags, or other elements as well? I've seen this when applying onClick to div elements as well as anchors in IE10 and IE11.
All elements.

var fakeNode = document.createElement('react'); ReactErrorUtils.invokeGuardedCallback = function(name, func, a, b) { var boundFunc = func.bind(null, a, b); <del> fakeNode.addEventListener(name, boundFunc, false); </del> <ins> var evtType = `react-${name}`; fakeNode.addEventListener(evtType, boundFunc, false); </ins> var evt = document.createEvent('Event'); <del> evt.initEvent(name, false, false); </del> <ins> evt.initEvent(evtType, false, false); </ins> fakeNode.dispatchEvent(evt); <del> fakeNode.removeEventListener(name, boundFunc, false); </del> <ins> fakeNode.removeEventListener(evtType, boundFunc, false); </ins> }; } }


Question:
Having the constructor passing super a props object that differs (in object equality and/or shallow compare) from the original is... illegal, because: We should have a warning for that, because it's reasonable for someone to assume they could extend a component and modify the props, without considering the ramifications, and the bug won't show up in their initial render test but will show up when the component updates.
Can a shallow comparison of and suffice, or is a deep equality check between the two objects needed?
I think shallow is fine. Deep equality is too difficult/expensive because of cycles. Note that we should only do the check in dev mode, so surround your logic with a block

Component.displayName || Component.name || 'Component' ); } <ins> var propsMutated = inst.props !== publicProps; var componentName = Component.displayName || Component.name || 'Component'; warning( typeof inst.props === 'undefined' || !propsMutated, '%s(...): When calling super() in `%s`, make sure to pass ' + 'up the same props that your component's constructor was passed.', componentName, componentName ); </ins> } // These should be set up in the constructor, but as a convenience for

}); <ins> it('should warn when mutated props are passed', function() { var container = document.createElement('div'); class Foo extends React.Component { constructor(props) { var _props = { idx: props.idx + '!' }; super(_props); } render() { return <span />; } } expect(console.error.calls.length).toBe(0); ReactDOM.render(<Foo idx="qwe" />, container); expect(console.error.calls.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'Foo(...): When calling super() in `Foo`, make sure to pass ' + 'up the same props that your component's constructor was passed.' ); }); </ins> });