From edddf0ba6cd921d45329b2ddda1ad173c894869e Mon Sep 17 00:00:00 2001 From: Chris Kobrzak Date: Thu, 10 Dec 2015 16:11:29 +0000 Subject: [PATCH] Update React to version 0.14, update other packages --- .babelrc | 3 +++ package.json | 28 ++++++++++++++++------------ spec/description_spec.js | 28 +++++++++++++++------------- spec/heading_spec.js | 21 +++++++++++---------- spec/section_spec.js | 8 +++++--- src/app.js | 3 ++- 6 files changed, 52 insertions(+), 39 deletions(-) create mode 100644 .babelrc 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();