Update React to version 0.14, update other packages

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

package.json

@@ -3,31 +3,35 @@
   "version": "0.1.0",
   "description": "A dummy project on how to integrate React and Webpack in a Web project",
   "devDependencies": {
-    "autoprefixer": "^5.2.0",
-    "babel-core": "^5.8.22",
-    "babel-loader": "^5.3.2",
+    "autoprefixer": "^6.1.2",
+    "babel-core": "^6.3.15",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
     "chai": "^3.2.0",
     "core-js": "^1.0.1",
-    "css-loader": "^0.15.6",
-    "eslint": "^1.1.0",
+    "css-loader": "^0.23.0",
+    "eslint": "^1.10.3",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^3.3.0",
     "http-server": "^0.8.0",
-    "isparta-loader": "^0.2.0",
+    "isparta-loader": "^2.0.0",
     "karma": "^0.13.9",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^0.5.0",
     "karma-mocha": "^0.2.0",
     "karma-phantomjs-launcher": "^0.2.1",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.2.5",
-    "node-sass": "3.2.0",
-    "postcss-loader": "^0.6.0",
-    "react": "^0.13.3",
+    "node-sass": "*",
+    "postcss-loader": "^0.8.0",
+    "react": "^0.14.3",
+    "react-addons-test-utils": "^0.14.3",
+    "react-dom": "^0.14.3",
     "react-hot-loader": "^1.2.8",
-    "sass-loader": "^2.0.0",
-    "style-loader": "^0.12.3",
-    "webpack": "^1.11.0",
+    "sass-loader": "^3.1.2",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.9",
     "webpack-dev-server": "^1.10.1"
   },
   "scripts": {

spec/description_spec.js

@@ -1,20 +1,22 @@
 import 'core-js/es5';
-import React from 'react/addons';
+/*eslint-disable */
+import React from 'react';
+/*eslint-enable */
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
 import Description from '../src/book/description.jsx';
 
-var ReactTestUtils = React.addons.TestUtils;
-
 describe('Description', function() {
   it('is a React element', function() {
-    let validation = ReactTestUtils.isElement(
+    let validation = TestUtils.isElement(
       <Description />
     );
 
     expect(validation).to.be.ok;
   });
 
   it('is a Description React element', function() {
-    let validation = ReactTestUtils.isElementOfType(
+    let validation = TestUtils.isElementOfType(
       <Description />,
       Description
     );
@@ -23,29 +25,29 @@ describe('Description', function() {
   });
 
   it('is not a DOM component', function() {
-    let component = ReactTestUtils.renderIntoDocument(<Description />);
-    let validation = ReactTestUtils.isDOMComponent(component);
+    let component = TestUtils.renderIntoDocument(<Description />);
+    let validation = TestUtils.isDOMComponent(component);
 
     expect(validation).to.not.be.ok;
   });
 
   it('is a composite component', function() {
-    let component = ReactTestUtils.renderIntoDocument(<Description />);
-    let validation = ReactTestUtils.isCompositeComponent(component);
+    let component = TestUtils.renderIntoDocument(<Description />);
+    let validation = TestUtils.isCompositeComponent(component);
 
     expect(validation).to.be.ok;
   });
 
   it('is a composite Description component', function() {
-    let component = ReactTestUtils.renderIntoDocument(<Description />);
-    let validation = ReactTestUtils.isCompositeComponentWithType(component, Description);
+    let component = TestUtils.renderIntoDocument(<Description />);
+    let validation = TestUtils.isCompositeComponentWithType(component, Description);
 
     expect(validation).to.be.ok;
   });
 
   it('renders a <p> tag', function() {
-    let component = ReactTestUtils.renderIntoDocument(<Description />);
-    let descriptionElement = React.findDOMNode( component );
+    let component = TestUtils.renderIntoDocument(<Description />);
+    let descriptionElement = ReactDOM.findDOMNode( component );
 
     expect( descriptionElement.tagName ).to.equal( 'P' );
   });

spec/heading_spec.js

@@ -1,20 +1,21 @@
 import 'core-js/es5';
-import React from 'react/addons';
+/*eslint-disable */
+import React from 'react';
+/*eslint-enable */
+import TestUtils from 'react-addons-test-utils';
 import Heading from '../src/book/heading.jsx';
 
-var ReactTestUtils = React.addons.TestUtils;
-
 describe('Heading', function() {
   it('is a React element', function() {
-    let validation = ReactTestUtils.isElement(
+    let validation = TestUtils.isElement(
       <Heading />
     );
 
     expect(validation).to.be.ok;
   });
 
   it('is a Heading React element', function() {
-    let validation = ReactTestUtils.isElementOfType(
+    let validation = TestUtils.isElementOfType(
       <Heading />,
       Heading
     );
@@ -23,22 +24,22 @@ describe('Heading', function() {
   });
 
   describe('rendered into DOM', function() {
-    let component = ReactTestUtils.renderIntoDocument(<Heading />);
+    let component = TestUtils.renderIntoDocument(<Heading />);
 
     it('is not a DOM component', function() {
-      let validation = ReactTestUtils.isDOMComponent(component);
+      let validation = TestUtils.isDOMComponent(component);
 
       expect(validation).to.not.be.ok;
     });
 
     it('is a composite component', function() {
-      let validation = ReactTestUtils.isCompositeComponent(component);
+      let validation = TestUtils.isCompositeComponent(component);
 
       expect(validation).to.be.ok;
     });
 
     it('is a composite Heading component', function() {
-      let validation = ReactTestUtils.isCompositeComponentWithType(component, Heading);
+      let validation = TestUtils.isCompositeComponentWithType(component, Heading);
 
       expect(validation).to.be.ok;
     });
@@ -48,7 +49,7 @@ describe('Heading', function() {
     let headingComponent;
 
     before( function() {
-      let shallowRenderer = ReactTestUtils.createRenderer();
+      let shallowRenderer = TestUtils.createRenderer();
 
       shallowRenderer.render( <Heading/> );
       headingComponent = shallowRenderer.getRenderOutput();

spec/section_spec.js

@@ -1,5 +1,8 @@
 import 'core-js/es5';
-import React from 'react/addons';
+/*eslint-disable */
+import React from 'react';
+/*eslint-enable */
+import TestUtils from 'react-addons-test-utils';
 import Section from '../src/book/section.jsx';
 import Heading from '../src/book/heading.jsx';
 import Description from '../src/book/description.jsx';
@@ -8,8 +11,7 @@ describe('Section', function() {
   let sectionComponent;
 
   before(function() {
-    let ReactTestUtils = React.addons.TestUtils,
-      shallowRenderer = ReactTestUtils.createRenderer();
+    let shallowRenderer = TestUtils.createRenderer();
 
     shallowRenderer.render( <Section/> );
     sectionComponent = shallowRenderer.getRenderOutput();

src/app.js

@@ -2,10 +2,11 @@ import './core/core.scss';
 import './navigation/links.scss';
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Book from './book/book.js';
 
 import Section from './book/section.jsx';
-React.render( <Section />, document.getElementById( 'heading-container' ) );
+ReactDOM.render( <Section />, document.getElementById( 'heading-container' ) );
 
 var book = new Book();
 book.logSomething();