diff --git a/manuscript/03_webpack_and_react.md b/manuscript/03_webpack_and_react.md index d59c1100..edd08c6e 100644 --- a/manuscript/03_webpack_and_react.md +++ b/manuscript/03_webpack_and_react.md @@ -184,10 +184,12 @@ This setup provides you more control over Babel's behavior depending on the envi It is time to add a first application level dependency to our project. Hit ```bash -npm i react --save +npm i react react-dom --save ``` -to get React installed. This will save React to `dependencies` section of *package.json*. Later on we'll use this to generate a vendor build for the production version. It's a good practice to separate application and development level dependencies this way. +to get React installed. This will save React to the `dependencies` section of *package.json*. Later on we'll use this information to generate a vendor build for the production version. It's a good practice to separate application and development level dependencies this way. + +*react-dom* is needed as React can be used to target multiple systems (DOM, mobile, terminal, i.e.,). Given we're dealing with the browser, *react-dom* is the correct choice here. Now that we got that out of the way, we can start to develop our Kanban application. First we should define the `App`. This will be the core of our application. It represents the high level view of our app and works as an entry point. Later on it will orchestrate the entire app. @@ -238,6 +240,7 @@ We'll need to adjust our `index.js` to render the component correctly. Note that import './main.css'; import React from 'react'; +import ReactDOM from 'react-dom'; import App from './components/App.jsx'; main(); @@ -247,7 +250,7 @@ function main() { document.body.appendChild(app); - React.render(, app); + ReactDOM.render(, app); } ``` diff --git a/project_source/03_webpack_and_react/kanban_app/app/index.jsx b/project_source/03_webpack_and_react/kanban_app/app/index.jsx index a477ad1d..6f95652c 100644 --- a/project_source/03_webpack_and_react/kanban_app/app/index.jsx +++ b/project_source/03_webpack_and_react/kanban_app/app/index.jsx @@ -1,6 +1,7 @@ import './main.css'; import React from 'react'; +import ReactDOM from 'react-dom'; import App from './components/App.jsx'; main(); @@ -10,5 +11,5 @@ function main() { document.body.appendChild(app); - React.render(, app); + ReactDOM.render(, app); } diff --git a/project_source/03_webpack_and_react/kanban_app/package.json b/project_source/03_webpack_and_react/kanban_app/package.json index 8136e5e9..9e27991c 100644 --- a/project_source/03_webpack_and_react/kanban_app/package.json +++ b/project_source/03_webpack_and_react/kanban_app/package.json @@ -26,6 +26,7 @@ "webpack-merge": "^0.1.2" }, "dependencies": { - "react": "^0.13.3" + "react": "^0.14.0", + "react-dom": "^0.14.0" } } diff --git a/project_source/04_implementing_notes/kanban_app/app/index.jsx b/project_source/04_implementing_notes/kanban_app/app/index.jsx index 725a2ed3..7074f591 100644 --- a/project_source/04_implementing_notes/kanban_app/app/index.jsx +++ b/project_source/04_implementing_notes/kanban_app/app/index.jsx @@ -2,6 +2,7 @@ import 'array.prototype.findindex'; import './main.css'; import React from 'react'; +import ReactDOM from 'react-dom'; import App from './components/App.jsx'; main(); @@ -11,5 +12,5 @@ function main() { document.body.appendChild(app); - React.render(, app); + ReactDOM.render(, app); } diff --git a/project_source/04_implementing_notes/kanban_app/package.json b/project_source/04_implementing_notes/kanban_app/package.json index 1a9bf2aa..663dde78 100644 --- a/project_source/04_implementing_notes/kanban_app/package.json +++ b/project_source/04_implementing_notes/kanban_app/package.json @@ -26,6 +26,7 @@ "dependencies": { "array.prototype.findindex": "^1.0.0", "node-uuid": "^1.4.3", - "react": "^0.13.3" + "react": "^0.14.0", + "react-dom": "^0.14.0" } } diff --git a/project_source/05_react_and_flux/kanban_app/app/index.jsx b/project_source/05_react_and_flux/kanban_app/app/index.jsx index f1da67e2..6277ae85 100644 --- a/project_source/05_react_and_flux/kanban_app/app/index.jsx +++ b/project_source/05_react_and_flux/kanban_app/app/index.jsx @@ -2,6 +2,7 @@ import 'array.prototype.findindex'; import './main.css'; import React from 'react'; +import ReactDOM from 'react-dom'; import App from './components/App.jsx'; import alt from './libs/alt'; import storage from './libs/storage'; @@ -15,5 +16,5 @@ function main() { document.body.appendChild(app); - React.render(, app); + ReactDOM.render(, app); } diff --git a/project_source/05_react_and_flux/kanban_app/package.json b/project_source/05_react_and_flux/kanban_app/package.json index 5660d910..a7840d6f 100644 --- a/project_source/05_react_and_flux/kanban_app/package.json +++ b/project_source/05_react_and_flux/kanban_app/package.json @@ -24,9 +24,10 @@ "webpack-merge": "^0.1.2" }, "dependencies": { - "alt": "^0.17.1", + "alt": "^0.17.4", "array.prototype.findindex": "^1.0.0", "node-uuid": "^1.4.3", - "react": "^0.13.3" + "react": "^0.14.0", + "react-dom": "^0.14.0" } } diff --git a/project_source/06_from_notes_to_kanban/kanban_app/app/index.jsx b/project_source/06_from_notes_to_kanban/kanban_app/app/index.jsx index f1da67e2..6277ae85 100644 --- a/project_source/06_from_notes_to_kanban/kanban_app/app/index.jsx +++ b/project_source/06_from_notes_to_kanban/kanban_app/app/index.jsx @@ -2,6 +2,7 @@ import 'array.prototype.findindex'; import './main.css'; import React from 'react'; +import ReactDOM from 'react-dom'; import App from './components/App.jsx'; import alt from './libs/alt'; import storage from './libs/storage'; @@ -15,5 +16,5 @@ function main() { document.body.appendChild(app); - React.render(, app); + ReactDOM.render(, app); } diff --git a/project_source/06_from_notes_to_kanban/kanban_app/package.json b/project_source/06_from_notes_to_kanban/kanban_app/package.json index 5660d910..a7840d6f 100644 --- a/project_source/06_from_notes_to_kanban/kanban_app/package.json +++ b/project_source/06_from_notes_to_kanban/kanban_app/package.json @@ -24,9 +24,10 @@ "webpack-merge": "^0.1.2" }, "dependencies": { - "alt": "^0.17.1", + "alt": "^0.17.4", "array.prototype.findindex": "^1.0.0", "node-uuid": "^1.4.3", - "react": "^0.13.3" + "react": "^0.14.0", + "react-dom": "^0.14.0" } } diff --git a/project_source/07_implementing_dnd/kanban_app/app/index.jsx b/project_source/07_implementing_dnd/kanban_app/app/index.jsx index f1da67e2..6277ae85 100644 --- a/project_source/07_implementing_dnd/kanban_app/app/index.jsx +++ b/project_source/07_implementing_dnd/kanban_app/app/index.jsx @@ -2,6 +2,7 @@ import 'array.prototype.findindex'; import './main.css'; import React from 'react'; +import ReactDOM from 'react-dom'; import App from './components/App.jsx'; import alt from './libs/alt'; import storage from './libs/storage'; @@ -15,5 +16,5 @@ function main() { document.body.appendChild(app); - React.render(, app); + ReactDOM.render(, app); } diff --git a/project_source/07_implementing_dnd/kanban_app/package.json b/project_source/07_implementing_dnd/kanban_app/package.json index 13e200aa..d68649d0 100644 --- a/project_source/07_implementing_dnd/kanban_app/package.json +++ b/project_source/07_implementing_dnd/kanban_app/package.json @@ -24,10 +24,11 @@ "webpack-merge": "^0.1.2" }, "dependencies": { - "alt": "^0.17.1", + "alt": "^0.17.4", "array.prototype.findindex": "^1.0.0", "node-uuid": "^1.4.3", - "react": "^0.13.3", - "react-dnd": "^1.1.4" + "react": "^0.14.0", + "react-dnd": "^1.1.4", + "react-dom": "^0.14.0" } } diff --git a/project_source/08_building_kanban/kanban_app/app/index.jsx b/project_source/08_building_kanban/kanban_app/app/index.jsx index f1da67e2..6277ae85 100644 --- a/project_source/08_building_kanban/kanban_app/app/index.jsx +++ b/project_source/08_building_kanban/kanban_app/app/index.jsx @@ -2,6 +2,7 @@ import 'array.prototype.findindex'; import './main.css'; import React from 'react'; +import ReactDOM from 'react-dom'; import App from './components/App.jsx'; import alt from './libs/alt'; import storage from './libs/storage'; @@ -15,5 +16,5 @@ function main() { document.body.appendChild(app); - React.render(, app); + ReactDOM.render(, app); } diff --git a/project_source/08_building_kanban/kanban_app/package.json b/project_source/08_building_kanban/kanban_app/package.json index 7e0540f1..9913a5ca 100644 --- a/project_source/08_building_kanban/kanban_app/package.json +++ b/project_source/08_building_kanban/kanban_app/package.json @@ -28,10 +28,11 @@ "webpack-merge": "^0.1.2" }, "dependencies": { - "alt": "^0.17.1", + "alt": "^0.17.4", "array.prototype.findindex": "^1.0.0", "node-uuid": "^1.4.3", - "react": "^0.13.3", - "react-dnd": "^1.1.4" + "react": "^0.14.0", + "react-dnd": "^1.1.4", + "react-dom": "^0.14.0" } } diff --git a/project_source/09_testing_react/kanban_app/app/index.jsx b/project_source/09_testing_react/kanban_app/app/index.jsx index f1da67e2..6277ae85 100644 --- a/project_source/09_testing_react/kanban_app/app/index.jsx +++ b/project_source/09_testing_react/kanban_app/app/index.jsx @@ -2,6 +2,7 @@ import 'array.prototype.findindex'; import './main.css'; import React from 'react'; +import ReactDOM from 'react-dom'; import App from './components/App.jsx'; import alt from './libs/alt'; import storage from './libs/storage'; @@ -15,5 +16,5 @@ function main() { document.body.appendChild(app); - React.render(, app); + ReactDOM.render(, app); } diff --git a/project_source/09_testing_react/kanban_app/package.json b/project_source/09_testing_react/kanban_app/package.json index 6381069f..91db12f3 100644 --- a/project_source/09_testing_react/kanban_app/package.json +++ b/project_source/09_testing_react/kanban_app/package.json @@ -34,6 +34,7 @@ "mocha": "^2.3.2", "phantomjs": "^1.9.18", "phantomjs-polyfill": "0.0.1", + "react-addons-test-utils": "^0.14.0", "react-transform-hmr": "^1.0.1", "style-loader": "^0.12.3", "webpack": "^1.10.1", @@ -41,10 +42,11 @@ "webpack-merge": "^0.1.2" }, "dependencies": { - "alt": "^0.17.1", + "alt": "^0.17.4", "array.prototype.findindex": "^1.0.0", "node-uuid": "^1.4.3", - "react": "^0.13.3", - "react-dnd": "^1.1.4" + "react": "^0.14.0", + "react-dnd": "^1.1.4", + "react-dom": "^0.14.0" } } diff --git a/project_source/09_testing_react/kanban_app/tests/editable_test.js b/project_source/09_testing_react/kanban_app/tests/editable_test.js index caa3390c..bfce0dd7 100644 --- a/project_source/09_testing_react/kanban_app/tests/editable_test.js +++ b/project_source/09_testing_react/kanban_app/tests/editable_test.js @@ -1,13 +1,12 @@ -import React from 'react/addons'; -import assert from 'assert'; -import Editable from 'app/components/Editable.jsx'; - -const { +import React from 'react'; +import { renderIntoDocument, findRenderedDOMComponentWithClass, findRenderedDOMComponentWithTag, Simulate -} = React.addons.TestUtils; +} from 'react-addons-test-utils'; +import assert from 'assert'; +import Editable from 'app/components/Editable.jsx'; describe('Editable', () => { it('renders value', () => { @@ -18,7 +17,7 @@ describe('Editable', () => { const valueComponent = findRenderedDOMComponentWithClass(component, 'value'); - assert.equal(valueComponent.getDOMNode().textContent, value); + assert.equal(valueComponent.textContent, value); }); it('enters edit mode', () => { @@ -32,7 +31,7 @@ describe('Editable', () => { const input = findRenderedDOMComponentWithTag(component, 'input'); - assert.equal(input.getDOMNode().value, value); + assert.equal(input.value, value); }); it('triggers onEdit', () => { diff --git a/project_source/09_testing_react/kanban_app/tests/note_test.js b/project_source/09_testing_react/kanban_app/tests/note_test.js index 84dd8ad5..a1c56960 100644 --- a/project_source/09_testing_react/kanban_app/tests/note_test.js +++ b/project_source/09_testing_react/kanban_app/tests/note_test.js @@ -1,11 +1,12 @@ -import React from 'react/addons'; +import React from 'react'; +import { + renderIntoDocument +} from 'react-addons-test-utils'; import TestBackend from 'react-dnd/modules/backends/Test'; import {DragDropContext} from 'react-dnd'; import assert from 'assert'; import Note from 'app/components/Note.jsx'; -const {renderIntoDocument} = React.addons.TestUtils; - describe('Note', () => { it('renders children', () => { const test = 'test'; diff --git a/project_source/10_typing_with_react/flow_app/package.json b/project_source/10_typing_with_react/flow_app/package.json index c1929d01..0d132355 100644 --- a/project_source/10_typing_with_react/flow_app/package.json +++ b/project_source/10_typing_with_react/flow_app/package.json @@ -35,6 +35,7 @@ "mocha": "^2.3.2", "phantomjs": "^1.9.18", "phantomjs-polyfill": "0.0.1", + "react-addons-test-utils": "^0.14.0", "react-transform-hmr": "^1.0.1", "style-loader": "^0.12.3", "webpack": "^1.10.1", @@ -42,10 +43,11 @@ "webpack-merge": "^0.1.2" }, "dependencies": { - "alt": "^0.17.1", + "alt": "^0.17.4", "array.prototype.findindex": "^1.0.0", "node-uuid": "^1.4.3", - "react": "^0.13.3", - "react-dnd": "^1.1.4" + "react": "^0.14.0", + "react-dnd": "^1.1.4", + "react-dom": "^0.14.0" } } diff --git a/project_source/10_typing_with_react/flow_app/tests/editable_test.js b/project_source/10_typing_with_react/flow_app/tests/editable_test.js index caa3390c..bfce0dd7 100644 --- a/project_source/10_typing_with_react/flow_app/tests/editable_test.js +++ b/project_source/10_typing_with_react/flow_app/tests/editable_test.js @@ -1,13 +1,12 @@ -import React from 'react/addons'; -import assert from 'assert'; -import Editable from 'app/components/Editable.jsx'; - -const { +import React from 'react'; +import { renderIntoDocument, findRenderedDOMComponentWithClass, findRenderedDOMComponentWithTag, Simulate -} = React.addons.TestUtils; +} from 'react-addons-test-utils'; +import assert from 'assert'; +import Editable from 'app/components/Editable.jsx'; describe('Editable', () => { it('renders value', () => { @@ -18,7 +17,7 @@ describe('Editable', () => { const valueComponent = findRenderedDOMComponentWithClass(component, 'value'); - assert.equal(valueComponent.getDOMNode().textContent, value); + assert.equal(valueComponent.textContent, value); }); it('enters edit mode', () => { @@ -32,7 +31,7 @@ describe('Editable', () => { const input = findRenderedDOMComponentWithTag(component, 'input'); - assert.equal(input.getDOMNode().value, value); + assert.equal(input.value, value); }); it('triggers onEdit', () => { diff --git a/project_source/10_typing_with_react/flow_app/tests/note_test.js b/project_source/10_typing_with_react/flow_app/tests/note_test.js index 84dd8ad5..a1c56960 100644 --- a/project_source/10_typing_with_react/flow_app/tests/note_test.js +++ b/project_source/10_typing_with_react/flow_app/tests/note_test.js @@ -1,11 +1,12 @@ -import React from 'react/addons'; +import React from 'react'; +import { + renderIntoDocument +} from 'react-addons-test-utils'; import TestBackend from 'react-dnd/modules/backends/Test'; import {DragDropContext} from 'react-dnd'; import assert from 'assert'; import Note from 'app/components/Note.jsx'; -const {renderIntoDocument} = React.addons.TestUtils; - describe('Note', () => { it('renders children', () => { const test = 'test'; diff --git a/project_source/10_typing_with_react/proptypes_app/package.json b/project_source/10_typing_with_react/proptypes_app/package.json index 6381069f..91db12f3 100644 --- a/project_source/10_typing_with_react/proptypes_app/package.json +++ b/project_source/10_typing_with_react/proptypes_app/package.json @@ -34,6 +34,7 @@ "mocha": "^2.3.2", "phantomjs": "^1.9.18", "phantomjs-polyfill": "0.0.1", + "react-addons-test-utils": "^0.14.0", "react-transform-hmr": "^1.0.1", "style-loader": "^0.12.3", "webpack": "^1.10.1", @@ -41,10 +42,11 @@ "webpack-merge": "^0.1.2" }, "dependencies": { - "alt": "^0.17.1", + "alt": "^0.17.4", "array.prototype.findindex": "^1.0.0", "node-uuid": "^1.4.3", - "react": "^0.13.3", - "react-dnd": "^1.1.4" + "react": "^0.14.0", + "react-dnd": "^1.1.4", + "react-dom": "^0.14.0" } } diff --git a/project_source/10_typing_with_react/proptypes_app/tests/editable_test.js b/project_source/10_typing_with_react/proptypes_app/tests/editable_test.js index caa3390c..bfce0dd7 100644 --- a/project_source/10_typing_with_react/proptypes_app/tests/editable_test.js +++ b/project_source/10_typing_with_react/proptypes_app/tests/editable_test.js @@ -1,13 +1,12 @@ -import React from 'react/addons'; -import assert from 'assert'; -import Editable from 'app/components/Editable.jsx'; - -const { +import React from 'react'; +import { renderIntoDocument, findRenderedDOMComponentWithClass, findRenderedDOMComponentWithTag, Simulate -} = React.addons.TestUtils; +} from 'react-addons-test-utils'; +import assert from 'assert'; +import Editable from 'app/components/Editable.jsx'; describe('Editable', () => { it('renders value', () => { @@ -18,7 +17,7 @@ describe('Editable', () => { const valueComponent = findRenderedDOMComponentWithClass(component, 'value'); - assert.equal(valueComponent.getDOMNode().textContent, value); + assert.equal(valueComponent.textContent, value); }); it('enters edit mode', () => { @@ -32,7 +31,7 @@ describe('Editable', () => { const input = findRenderedDOMComponentWithTag(component, 'input'); - assert.equal(input.getDOMNode().value, value); + assert.equal(input.value, value); }); it('triggers onEdit', () => { diff --git a/project_source/10_typing_with_react/proptypes_app/tests/note_test.js b/project_source/10_typing_with_react/proptypes_app/tests/note_test.js index 258f58cf..a1c56960 100644 --- a/project_source/10_typing_with_react/proptypes_app/tests/note_test.js +++ b/project_source/10_typing_with_react/proptypes_app/tests/note_test.js @@ -1,17 +1,18 @@ -import React from 'react/addons'; +import React from 'react'; +import { + renderIntoDocument +} from 'react-addons-test-utils'; import TestBackend from 'react-dnd/modules/backends/Test'; import {DragDropContext} from 'react-dnd'; import assert from 'assert'; import Note from 'app/components/Note.jsx'; -const {renderIntoDocument} = React.addons.TestUtils; - describe('Note', () => { it('renders children', () => { const test = 'test'; const NoteContent = wrapInTestContext(Note); const component = renderIntoDocument( - {test} + {test} ); assert.equal(component.props.children, test);