Merge pull request #901 from rackt/14

Update examples and docs to React 0.14

Author: gaearon

docs/advanced/ExampleRedditAPI.md

@@ -10,9 +10,10 @@ This is the complete source code of the Reddit headline fetching example we buil
 import 'babel-core/polyfill';
 
 import React from 'react';
+import { render } from 'react-dom';
 import Root from './containers/Root';
 
-React.render(
+render(
   <Root />,
   document.getElementById('root')
 );
@@ -195,7 +196,7 @@ export default class Root extends Component {
   render() {
     return (
       <Provider store={store}>
-        {() => <AsyncApp />}
+        <AsyncApp />
       </Provider>
     );
   }

docs/api/applyMiddleware.md

@@ -173,10 +173,12 @@ function makeSandwichesForEverybody() {
 // This is very useful for server side rendering, because I can wait
 // until data is available, then synchronously render the app.
 
+import { renderToString } from 'react-dom/server';
+
 store.dispatch(
   makeSandwichesForEverybody()
 ).then(() =>
-  response.send(React.renderToString(<MyApp store={store} />))
+  response.send(renderToString(<MyApp store={store} />))
 );
 
 // I can also dispatch a thunk async action from a component

docs/basics/ExampleTodoList.md

@@ -8,6 +8,7 @@ This is the complete source code of the tiny todo app we built during the [basic
 
 ```js
 import React from 'react';
+import { render } from 'react-dom';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import App from './containers/App';
@@ -16,11 +17,9 @@ import todoApp from './reducers';
 let store = createStore(todoApp);
 
 let rootElement = document.getElementById('root');
-React.render(
-  // The child must be wrapped in a function
-  // to work around an issue in React 0.13.
+render(
   <Provider store={store}>
-    {() => <App />}
+    <App />
   </Provider>,
   rootElement
 );
@@ -190,7 +189,7 @@ export default connect(select)(App);
 #### `components/AddTodo.js`
 
 ```js
-import React, { findDOMNode, Component, PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 
 export default class AddTodo extends Component {
   render() {
@@ -205,7 +204,7 @@ export default class AddTodo extends Component {
   }
 
   handleClick(e) {
-    const node = findDOMNode(this.refs.input);
+    const node = this.refs.input;
     const text = node.value.trim();
     this.props.onAddClick(text);
     node.value = '';

docs/basics/Reducers.md

@@ -151,7 +151,7 @@ case COMPLETE_TODO:
   });
 ```
 
-Because we want to update a specific item in the array without resorting to mutations, we have to slice it before and after the item. If you find yourself often writing such operations, it’s a good idea to use a helper like [React.addons.update](https://facebook.github.io/react/docs/update.html), [updeep](https://github.com/substantial/updeep), or even a library like [Immutable](http://facebook.github.io/immutable-js/) that has native support for deep updates. Just remember to never assign to anything inside the `state` unless you clone it first.
+Because we want to update a specific item in the array without resorting to mutations, we have to slice it before and after the item. If you find yourself often writing such operations, it’s a good idea to use a helper like [react-addons-update](https://facebook.github.io/react/docs/update.html), [updeep](https://github.com/substantial/updeep), or even a library like [Immutable](http://facebook.github.io/immutable-js/) that has native support for deep updates. Just remember to never assign to anything inside the `state` unless you clone it first.
 
 ## Splitting Reducers
 

docs/basics/UsageWithReact.md

@@ -88,7 +88,7 @@ These are all normal React components, so we won’t stop to examine them in det
 #### `components/AddTodo.js`
 
 ```js
-import React, { findDOMNode, Component, PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 
 export default class AddTodo extends Component {
   render() {
@@ -103,7 +103,7 @@ export default class AddTodo extends Component {
   }
 
   handleClick(e) {
-    const node = findDOMNode(this.refs.input);
+    const node = this.refs.input;
     const text = node.value.trim();
     this.props.onAddClick(text);
     node.value = '';
@@ -274,6 +274,7 @@ First, we need to import `Provider` from [`react-redux`](http://github.com/gaear
 
 ```js
 import React from 'react';
+import { render } from 'react-dom';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import App from './containers/App';
@@ -282,11 +283,9 @@ import todoApp from './reducers';
 let store = createStore(todoApp);
 
 let rootElement = document.getElementById('root');
-React.render(
-  // The child must be wrapped in a function
-  // to work around an issue in React 0.13.
+render(
   <Provider store={store}>
-    {() => <App />}
+    <App />
   </Provider>,
   rootElement
 );

docs/recipes/ServerRendering.md

@@ -64,19 +64,21 @@ The first thing that we need to do on every request is create a new Redux store
 
 When rendering, we will wrap `<App />`, our root component, inside a `<Provider>` to make the store available to all components in the component tree, as we saw in [Usage with React](../basics/UsageWithReact.md).
 
-The key step in server side rendering is to render the initial HTML of our component _**before**_ we send it to the client side. To do this, we use [React.renderToString()](https://facebook.github.io/react/docs/top-level-api.html#react.rendertostring).
+The key step in server side rendering is to render the initial HTML of our component _**before**_ we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring).
 
 We then get the initial state from our Redux store using [`store.getState()`](../api/Store.md#getState). We will see how this is passed along in our `renderFullPage` function.
 
 ```js
+import { renderToString } from 'react-dom/server';
+
 function handleRender(req, res) {
   // Create a new Redux store instance
   const store = createStore(counterApp);
 
   // Render the component to a string
-  const html = React.renderToString(
+  const html = renderToString(
     <Provider store={store}>
-      {() => <App />}
+      <App />
     </Provider>
   );
 
@@ -130,6 +132,7 @@ Let’s take a look at our new client file:
 
 ```js
 import React from 'react';
+import { render } from 'react-dom';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import App from './containers/App';
@@ -141,17 +144,17 @@ const initialState = window.__INITIAL_STATE__;
 // Create Redux store with initial state
 const store = createStore(counterApp, initialState);
 
-React.render(
+render(
   <Provider store={store}>
-    {() => <App />}
+    <App />
   </Provider>,
   document.getElementById('root')
 );
 ```
 
 You can set up your build tool of choice (Webpack, Browserify, etc.) to compile a bundle file into `dist/bundle.js`.
 
-When the page loads, the bundle file will be started up and [`React.render()`](https://facebook.github.io/react/docs/top-level-api.html#react.render) will hook into the `data-react-id` attributes from the server-rendered HTML. This will connect our newly-started React instance to the virtual DOM used on the server. Since we have the same initial state for our Redux store and used the same code for all our view components, the result will be the same real DOM.
+When the page loads, the bundle file will be started up and [`ReactDOM.render()`](https://facebook.github.io/react/docs/top-level-api.html#reactdom.render) will hook into the `data-react-id` attributes from the server-rendered HTML. This will connect our newly-started React instance to the virtual DOM used on the server. Since we have the same initial state for our Redux store and used the same code for all our view components, the result will be the same real DOM.
 
 And that’s it! That is all we need to do to implement server side rendering.
 
@@ -171,6 +174,7 @@ The request contains information about the URL requested, including any query pa
 
 ```js
 import qs from 'qs'; // Add this at the top of the file
+import { renderToString } from 'react-dom/server';
 
 function handleRender(req, res) {
   // Read the counter from the request, if provided
@@ -184,9 +188,9 @@ function handleRender(req, res) {
   const store = createStore(counterApp, initialState);
 
   // Render the component to a string
-  const html = React.renderToString(
+  const html = renderToString(
     <Provider store={store}>
-      {() => <App />}
+      <App />
     </Provider>
   );
 
@@ -231,6 +235,7 @@ On the server side, we simply wrap our existing code in the `fetchCounter` and r
 ```js
 // Add this to our imports
 import { fetchCounter } from './api/counter';
+import { renderToString } from 'react-dom/server';
 
 function handleRender(req, res) {
   // Query our mock API asynchronously
@@ -246,9 +251,9 @@ function handleRender(req, res) {
     const store = createStore(counterApp, initialState);
 
     // Render the component to a string
-    const html = React.renderToString(
+    const html = renderToString(
       <Provider store={store}>
-        {() => <App />}
+        <App />
       </Provider>
     );
 

docs/recipes/WritingTests.md

@@ -252,6 +252,12 @@ describe('todos reducer', () => {
 
 A nice thing about React components is that they are usually small and only rely on their props. That makes them easy to test.
 
+First, we will install [React Test Utilities](https://facebook.github.io/react/docs/test-utils.html):
+
+```
+npm install --save-dev react-addons-test-utils
+```
+
 To test the components we make a `setup()` helper that passes the stubbed callbacks as props and renders the component with [React shallow renderer](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering). This lets individual tests assert on whether the callbacks were called when expected.
 
 #### Example
@@ -290,13 +296,11 @@ can be tested like:
 
 ```js
 import expect from 'expect';
-import jsdomReact from '../jsdomReact';
-import React from 'react/addons';
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
 import Header from '../../components/Header';
 import TodoTextInput from '../../components/TodoTextInput';
 
-const { TestUtils } = React.addons;
-
 function setup() {
   let props = {
     addTodo: expect.createSpy()
@@ -314,8 +318,6 @@ function setup() {
 }
 
 describe('components', () => {
-  jsdomReact();
-
   describe('Header', () => {
     it('should render correctly', () => {
       const { output } = setup();
@@ -363,7 +365,18 @@ global.window = document.defaultView;
 global.navigator = global.window.navigator;
 ```
 
-It’s important that this code is evaluated *before* React is imported. To ensure this, modify your `mocha` command to include `--require ./test/setup.js` in the options.
+It’s important that this code is evaluated *before* React is imported. To ensure this, modify your `mocha` command to include `--require ./test/setup.js` in the options in your `package.json`:
+
+```js
+{
+  ...
+  "scripts": {
+    ...
+    "test": "mocha --compilers js:babel/register --recursive --require ./test/setup.js",
+  },
+  ...
+}
+```
 
 ### Connected Components
 
@@ -475,7 +488,7 @@ describe('middleware', () => {
 
 ### Glossary
 
-- [React Test Utils](http://facebook.github.io/react/docs/test-utils.html): Test utilities that ship with React.
+- [React Test Utils](http://facebook.github.io/react/docs/test-utils.html): Test Utilities for React.
 
 - [jsdom](https://github.com/tmpvar/jsdom): A plain JavaScript implementation of the DOM API. jsdom allows us to run the tests without browser.
 

examples/async/index.js

@@ -1,14 +1,15 @@
 import 'babel-core/polyfill';
 import React from 'react';
+import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import App from './containers/App';
 import configureStore from './store/configureStore';
 
 const store = configureStore();
 
-React.render(
+render(
   <Provider store={store}>
-    {() => <App />}
+    <App />
   </Provider>,
   document.getElementById('root')
 );

examples/async/package.json

@@ -27,8 +27,9 @@
   "homepage": "http://rackt.github.io/redux",
   "dependencies": {
     "isomorphic-fetch": "^2.1.1",
-    "react": "^0.13.3",
-    "react-redux": "^2.1.2",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
+    "react-redux": "^4.0.0",
     "redux": "^3.0.0",
     "redux-logger": "^2.0.2",
     "redux-thunk": "^0.1.0"

examples/counter/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
+import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import App from './containers/App';
 import configureStore from './store/configureStore';
 
 const store = configureStore();
 
-React.render(
+render(
   <Provider store={store}>
-    {() => <App />}
+    <App />
   </Provider>,
   document.getElementById('root')
 );