warn when a propName looks like a mistyped event

closes #3548

src/renderers/dom/shared/ReactDOMComponent.js

@@ -211,6 +211,15 @@ function checkAndWarnForMutatedStyle(style1, style2, component) {
  */
 var BackendIDOperations = null;
 
+var eventTypes = {};
+
+if (__DEV__) {
+  Object.keys(EventConstants.topLevelTypes)
+    .forEach(function(key) {
+      var eventType = key.replace(/^top/, 'on');
+      eventTypes[eventType.toLowerCase()] = eventType;
+    });
+}
 /**
  * @param {object} component
  * @param {?object} props
@@ -267,6 +276,18 @@ function assertValidProps(component, props) {
     'not a string. For example, style={{marginRight: spacing + \'em\'}} when ' +
     'using JSX.'
   );
+  if (__DEV__) {
+    Object.keys(props).forEach(function(propName) {
+      var lowerCasePropName = propName.toLowerCase();
+      warning(
+        !eventTypes.hasOwnProperty(lowerCasePropName) ||
+          eventTypes[lowerCasePropName] === propName,
+        '`%s` seems to be an invalid event name, did you mean `%s`?',
+        propName,
+        eventTypes[lowerCasePropName]
+      );
+    });
+  }
 }
 
 function enqueuePutListener(id, registrationName, listener, transaction) {

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -768,6 +768,40 @@ describe('ReactDOMComponent', function() {
     });
   });
 
+  describe('wrong event name case warning', function() {
+    var React;
+    var ReactTestUtils;
+
+    beforeEach(() => {
+      React = require('React');
+      ReactTestUtils = require('ReactTestUtils');
+    });
+
+    it('should warn when an event is lowercased', () => {
+      spyOn(console, 'error');
+      ReactTestUtils.renderIntoDocument(<div onclick={function() {}} />);
+      expect(console.error.calls.length).toBe(1);
+      expect(console.error.mostRecentCall.args[0]).toBe(
+        'Warning: `onclick` seems to be an invalid event name, did you mean `onClick`?'
+      );
+    });
+
+    it('should warn when an event has the wrong case', () => {
+      spyOn(console, 'error');
+      ReactTestUtils.renderIntoDocument(<div onMouseup={function() {}} />);
+      expect(console.error.calls.length).toBe(1);
+      expect(console.error.mostRecentCall.args[0]).toBe(
+        'Warning: `onMouseup` seems to be an invalid event name, did you mean `onMouseUp`?'
+      );
+    });
+
+    it('should not warn when a prop is not a supported, mistyped event type', () => {
+      spyOn(console, 'error');
+      ReactTestUtils.renderIntoDocument(<div one={function() {}} />);
+      expect(console.error.calls.length).toBe(0);
+    });
+  });
+
   describe('tag sanitization', function() {
     it('should throw when an invalid tag name is used', () => {
       var React = require('React');