diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..86c445f
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["es2015", "react"]
+}
diff --git a/package.json b/package.json
index 15be684..7a7f4c3 100644
--- a/package.json
+++ b/package.json
@@ -3,17 +3,19 @@
"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",
@@ -21,13 +23,15 @@
"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": {
diff --git a/spec/description_spec.js b/spec/description_spec.js
index 073271a..d880a9c 100644
--- a/spec/description_spec.js
+++ b/spec/description_spec.js
@@ -1,12 +1,14 @@
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(
);
@@ -14,7 +16,7 @@ describe('Description', function() {
});
it('is a Description React element', function() {
- let validation = ReactTestUtils.isElementOfType(
+ let validation = TestUtils.isElementOfType(
,
Description
);
@@ -23,29 +25,29 @@ describe('Description', function() {
});
it('is not a DOM component', function() {
- let component = ReactTestUtils.renderIntoDocument();
- let validation = ReactTestUtils.isDOMComponent(component);
+ let component = TestUtils.renderIntoDocument();
+ let validation = TestUtils.isDOMComponent(component);
expect(validation).to.not.be.ok;
});
it('is a composite component', function() {
- let component = ReactTestUtils.renderIntoDocument();
- let validation = ReactTestUtils.isCompositeComponent(component);
+ let component = TestUtils.renderIntoDocument();
+ let validation = TestUtils.isCompositeComponent(component);
expect(validation).to.be.ok;
});
it('is a composite Description component', function() {
- let component = ReactTestUtils.renderIntoDocument();
- let validation = ReactTestUtils.isCompositeComponentWithType(component, Description);
+ let component = TestUtils.renderIntoDocument();
+ let validation = TestUtils.isCompositeComponentWithType(component, Description);
expect(validation).to.be.ok;
});
it('renders a
tag', function() {
- let component = ReactTestUtils.renderIntoDocument();
- let descriptionElement = React.findDOMNode( component );
+ let component = TestUtils.renderIntoDocument();
+ let descriptionElement = ReactDOM.findDOMNode( component );
expect( descriptionElement.tagName ).to.equal( 'P' );
});
diff --git a/spec/heading_spec.js b/spec/heading_spec.js
index d7deceb..2a9214c 100644
--- a/spec/heading_spec.js
+++ b/spec/heading_spec.js
@@ -1,12 +1,13 @@
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(
);
@@ -14,7 +15,7 @@ describe('Heading', function() {
});
it('is a Heading React element', function() {
- let validation = ReactTestUtils.isElementOfType(
+ let validation = TestUtils.isElementOfType(
,
Heading
);
@@ -23,22 +24,22 @@ describe('Heading', function() {
});
describe('rendered into DOM', function() {
- let component = ReactTestUtils.renderIntoDocument();
+ let component = TestUtils.renderIntoDocument();
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( );
headingComponent = shallowRenderer.getRenderOutput();
diff --git a/spec/section_spec.js b/spec/section_spec.js
index bb464ab..5aa659e 100644
--- a/spec/section_spec.js
+++ b/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( );
sectionComponent = shallowRenderer.getRenderOutput();
diff --git a/src/app.js b/src/app.js
index e35a639..cc180df 100644
--- a/src/app.js
+++ b/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( , document.getElementById( 'heading-container' ) );
+ReactDOM.render( , document.getElementById( 'heading-container' ) );
var book = new Book();
book.logSomething();