diff --git a/examples/simple.js b/examples/simple.js
index c95e1ba..48398c7 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -1,9 +1,8 @@
-'use strict';
-
 // use jsx to render html, do not modify simple.html
 import 'rc-notification/assets/index.css';
 import Notification from 'rc-notification';
 import React from 'react';
+import ReactDOM from 'react-dom';
 var notification = Notification.newInstance({});
 
 function simpleFn() {
@@ -50,7 +49,7 @@ function manualClose() {
   })
 }
 
-React.render(<div>
+ReactDOM.render(<div>
   <div>
     <button onClick={simpleFn}>simple show</button>
     <button onClick={durationFn}>duration=0</button>
diff --git a/package.json b/package.json
index e65a641..88afb2c 100644
--- a/package.json
+++ b/package.json
@@ -42,14 +42,16 @@
     "expect.js": "0.3.x",
     "precommit-hook": "1.x",
     "rc-server": "3.x",
-    "rc-tools": "3.x",
-    "react": "~0.13.2"
+    "rc-tools": "~4.2.6",
+    "react": "~0.14.0",
+    "react-addons-test-utils": "~0.14.1",
+    "react-dom": "~0.14.0"
   },
   "precommit": [
-    "precommit"
+    "lint"
   ],
   "dependencies": {
-    "rc-animate": "1.x",
+    "rc-animate": "~2.0.0",
     "rc-util": "2.x"
   }
 }
diff --git a/src/Notice.jsx b/src/Notice.jsx
new file mode 100644
index 0000000..1b2097c
--- /dev/null
+++ b/src/Notice.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import {classSet} from 'rc-util';
+
+const Notice = React.createClass({
+  propTypes: {
+    duration: React.PropTypes.number,
+    onClose: React.PropTypes.func,
+    children: React.PropTypes.any,
+  },
+
+  getDefaultProps() {
+    return {
+      onEnd() {
+      },
+      duration: 1.5,
+      style: {
+        right: '50%',
+      },
+    };
+  },
+
+  componentDidMount() {
+    this.clearCloseTimer();
+    if (this.props.duration) {
+      this.closeTimer = setTimeout(()=> {
+        this.close();
+      }, this.props.duration * 1000);
+    }
+  },
+
+  componentDidUpdate() {
+    this.componentDidMount();
+  },
+
+  componentWillUnmount() {
+    this.clearCloseTimer();
+  },
+
+  clearCloseTimer() {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+  },
+
+  close() {
+    this.clearCloseTimer();
+    this.props.onClose();
+  },
+
+  render() {
+    const props = this.props;
+    const componentClass = `${props.prefixCls}-notice`;
+    const className = {
+      [`${componentClass}`]: 1,
+      [`${componentClass}-closable`]: props.closable,
+      [props.className]: !!props.className,
+    };
+    return (
+      <div className={classSet(className)} style={props.style}>
+        <div className={`${componentClass}-content`}>{this.props.children}</div>
+        {props.closable ?
+          <a tabIndex="0" onClick={this.close} className={`${componentClass}-close`}>
+            <span className={`${componentClass}-close-x`}></span>
+          </a> : null
+        }
+      </div>
+    );
+  },
+});
+
+export default Notice;
diff --git a/src/Notification.js b/src/Notification.js
deleted file mode 100644
index 9185bdf..0000000
--- a/src/Notification.js
+++ /dev/null
@@ -1,160 +0,0 @@
-'use strict';
-
-import React from 'react';
-import Animate from 'rc-animate';
-import {createChainedFunction, classSet} from 'rc-util';
-
-var Notice = React.createClass({
-  getDefaultProps() {
-    return {
-      onEnd() {
-      },
-      duration: 1.5,
-      style: {
-        right: '50%'
-      }
-    };
-  },
-
-  clearCloseTimer() {
-    if (this.closeTimer) {
-      clearTimeout(this.closeTimer);
-      this.closeTimer = null;
-    }
-  },
-
-  componentDidUpdate() {
-    this.componentDidMount();
-  },
-
-  componentDidMount() {
-    this.clearCloseTimer();
-    if (this.props.duration) {
-      this.closeTimer = setTimeout(()=> {
-        this.close();
-      }, this.props.duration * 1000);
-    }
-  },
-
-  componentWillUnmount() {
-    this.clearCloseTimer();
-  },
-
-  close() {
-    this.clearCloseTimer();
-    this.props.onClose();
-  },
-
-  render() {
-    var props = this.props;
-    var componentClass = `${props.prefixCls}-notice`;
-    var className = {
-      [`${componentClass}`]: 1,
-      [`${componentClass}-closable`]: props.closable,
-      [props.className]: !!props.className
-    };
-    return (
-      <div className={classSet(className)} style={props.style}>
-        <div className={`${componentClass}-content`}>{this.props.children}</div>
-        {props.closable ?
-          <a tabIndex="0" onClick={this.close} className={`${componentClass}-close`}>
-            <span className={`${componentClass}-close-x`}></span>
-          </a> : null
-        }
-      </div>
-    );
-  }
-});
-
-var seed = 0;
-var now = Date.now();
-
-function getUuid() {
-  return 'rcNotification_' + now + '_' + (seed++);
-}
-
-var Notification = React.createClass({
-  getInitialState() {
-    return {
-      notices: []
-    };
-  },
-
-  getDefaultProps() {
-    return {
-      prefixCls: 'rc-notification',
-      animation: 'fade',
-      style: {
-        'top': 65,
-        left: '50%'
-      }
-    };
-  },
-
-  remove(key) {
-    var notices = this.state.notices.filter((notice) => {
-      return notice.key !== key;
-    });
-    this.setState({
-      notices: notices
-    });
-  },
-
-  add(notice) {
-    var key = notice.key = notice.key || getUuid();
-    var notices = this.state.notices;
-    if (!notices.filter((v) =>  v.key === key).length) {
-      this.setState({
-        notices: notices.concat(notice)
-      });
-    }
-  },
-
-  getTransitionName() {
-    var props = this.props;
-    var transitionName = props.transitionName;
-    if (!transitionName && props.animation) {
-      transitionName = `${props.prefixCls}-${props.animation}`;
-    }
-    return transitionName;
-  },
-
-  render() {
-    var props = this.props;
-    var noticeNodes = this.state.notices.map((notice)=> {
-      var onClose = createChainedFunction(this.remove.bind(this, notice.key), notice.onClose);
-      return (<Notice prefixCls={props.prefixCls} {...notice} onClose={onClose}>{notice.content}</Notice>);
-    });
-    var className = {
-      [props.prefixCls]: 1,
-      [props.className]: !!props.className
-    };
-    return (
-      <div className={classSet(className)} style={props.style}>
-        <Animate transitionName={this.getTransitionName()}>{noticeNodes}</Animate>
-      </div>
-    );
-  }
-});
-
-Notification.newInstance = function (props) {
-  props = props || {};
-  var div = document.createElement('div');
-  document.body.appendChild(div);
-  var notification = React.render(<Notification {...props}/>, div);
-  return {
-    notice(noticeProps) {
-      notification.add(noticeProps);
-    },
-    removeNotice(key) {
-      notification.remove(key);
-    },
-    component: notification,
-    destroy() {
-      React.unmountComponentAtNode(div);
-      document.body.removeChild(div);
-    }
-  };
-};
-
-export default Notification;
diff --git a/src/Notification.jsx b/src/Notification.jsx
new file mode 100644
index 0000000..a06d46a
--- /dev/null
+++ b/src/Notification.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Animate from 'rc-animate';
+import {createChainedFunction, classSet} from 'rc-util';
+import Notice from './Notice';
+
+let seed = 0;
+const now = Date.now();
+
+function getUuid() {
+  return 'rcNotification_' + now + '_' + (seed++);
+}
+
+const Notification = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'rc-notification',
+      animation: 'fade',
+      style: {
+        'top': 65,
+        left: '50%',
+      },
+    };
+  },
+
+  getInitialState() {
+    return {
+      notices: [],
+    };
+  },
+
+  getTransitionName() {
+    const props = this.props;
+    let transitionName = props.transitionName;
+    if (!transitionName && props.animation) {
+      transitionName = `${props.prefixCls}-${props.animation}`;
+    }
+    return transitionName;
+  },
+
+  add(notice) {
+    const key = notice.key = notice.key || getUuid();
+    const notices = this.state.notices;
+    if (!notices.filter((v) => v.key === key).length) {
+      this.setState({
+        notices: notices.concat(notice),
+      });
+    }
+  },
+
+  remove(key) {
+    const notices = this.state.notices.filter((notice) => {
+      return notice.key !== key;
+    });
+    this.setState({
+      notices: notices,
+    });
+  },
+
+  render() {
+    const props = this.props;
+    const noticeNodes = this.state.notices.map((notice)=> {
+      const onClose = createChainedFunction(this.remove.bind(this, notice.key), notice.onClose);
+      return (<Notice prefixCls={props.prefixCls} {...notice} onClose={onClose}>{notice.content}</Notice>);
+    });
+    const className = {
+      [props.prefixCls]: 1,
+      [props.className]: !!props.className,
+    };
+    return (
+      <div className={classSet(className)} style={props.style}>
+        <Animate transitionName={this.getTransitionName()}>{noticeNodes}</Animate>
+      </div>
+    );
+  },
+});
+
+Notification.newInstance = function(properties) {
+  const props = properties || {};
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const notification = ReactDOM.render(<Notification {...props}/>, div);
+  return {
+    notice(noticeProps) {
+      notification.add(noticeProps);
+    },
+    removeNotice(key) {
+      notification.remove(key);
+    },
+    component: notification,
+    destroy() {
+      ReactDOM.unmountComponentAtNode(div);
+      document.body.removeChild(div);
+    },
+  };
+};
+
+export default Notification;
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 5bea8bf..184fe12 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -1,6 +1,6 @@
-var React = require('react');
 var Notification = require('../');
-var TestUtils = React.addons.TestUtils;
+var React = require('react');
+var TestUtils = require('react-addons-test-utils');
 var Simulate = TestUtils.Simulate;
 var expect = require('expect.js');
 require('../assets/index.css');