Drop use of React.createClass in project templates and tests

Avoids deprecation warnings in React >= 15.5

Closes #216

CHANGES.md

@@ -25,6 +25,7 @@
 **Changed:**
 
 - Default options are no longer used if you provide a custom `loader` for a rule in `webpack.rules` [[#256](https://github.com/insin/nwb/issues/256)]
+- React project templates now use classes and `React.Component` instead of `React.createClass()`, which is deprecated as of React v15.5 [[#216](https://github.com/insin/nwb/issues/216)]
 
 **Fixed:**
 

templates/react-app/src/App.js

@@ -1,8 +1,8 @@
 import './App.css'
 
-import React from 'react'
+import React, {Component} from 'react'
 
-let App = React.createClass({
+class App extends Component {
   render() {
     return <div className="App">
       <div className="App-heading App-flex">
@@ -14,6 +14,6 @@ let App = React.createClass({
       </div>
     </div>
   }
-})
+}
 
 export default App

templates/react-component/demo/src/index.js

@@ -1,15 +1,15 @@
-import React from 'react'
+import React, {Component} from 'react'
 import {render} from 'react-dom'
 
-import Component from '../../src'
+import Example from '../../src'
 
-let Demo = React.createClass({
+class Demo extends Component {
   render() {
     return <div>
       <h1>{{name}} Demo</h1>
-      <Component/>
+      <Example/>
     </div>
   }
-})
+}
 
 render(<Demo/>, document.querySelector('#demo'))

templates/react-component/src/index.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, {Component} from 'react'
 
-export default React.createClass({
+export default class extends Component {
   render() {
     return <div>
       <h2>Welcome to React components</h2>
     </div>
   }
-})
+}

tests/commands/build-test.js

@@ -32,7 +32,6 @@ describe('command: build', function() {
   }
 
   describe('building a React app', () => {
-    let builtAppSource
     let builtHTML
 
     before(done => {
@@ -42,7 +41,6 @@ describe('command: build', function() {
         process.chdir(path.join(tmpDir, 'test-app'))
         cli(['build'], (err) => {
           expect(err).toNotExist('No errors building a React app')
-          builtAppSource = fs.readFileSync(glob.sync('dist/app*.js')[0], 'utf8')
           builtHTML = fs.readFileSync('dist/index.html', 'utf8')
           done(err)
         })
@@ -65,9 +63,6 @@ describe('command: build', function() {
         'vendor.js.map',
       ])
     })
-    it('generates displayName for React.createClass calls in the build', () => {
-      expect(builtAppSource).toInclude('displayName:"App"')
-    })
     it('injects the Webpack manifest into generated HTML', () => {
       expect(builtHTML).toInclude('window.webpackJsonp')
     })
@@ -125,10 +120,6 @@ describe('command: build', function() {
         'index.html',
       ])
     })
-    it('generates displayName for React.createClass calls in the demo build', () => {
-      expect(fs.readFileSync(glob.sync('demo/dist/demo*.js')[0], 'utf8'))
-        .toInclude('displayName:"Demo"')
-    })
   })
 
   describe('building and cleaning a Web app with spaces in the path', () => {

tests/fixtures/projects/async-await/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {Component} from 'react'
 
 // Async function to test that babel-runtime is available
 async function fetchStories(subreddit) { // eslint-disable-line no-unused-vars
@@ -7,10 +7,10 @@ async function fetchStories(subreddit) { // eslint-disable-line no-unused-vars
   return json
 }
 
-export default React.createClass({
+export default class extends Component {
   render() {
     return <div>
       <h2>Welcome to React</h2>
     </div>
   }
-})
+}

tests/fixtures/projects/express-middleware/src/App.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, {Component} from 'react'
 
-export default React.createClass({
+export default class extends Component {
   render() {
     return <div>
       <h2>Welcome to React</h2>
     </div>
   }
-})
+}

tests/fixtures/projects/router-app/_package.json

@@ -4,6 +4,7 @@
   "description": "test project",
   "dependencies": {
     "bootstrap": "3.x",
+    "prop-types": "15.x",
     "react": "15.x",
     "react-dom": "15.x",
     "react-router": "3.x"

tests/fixtures/projects/router-app/src/components/Thing.js

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, {Component} from 'react'
 
-let Thing = React.createClass({
+class Thing extends Component {
   render() {
     return <div className="Thing">
       Thing
     </div>
   }
-})
+}
 
 export default Thing

tests/fixtures/projects/router-app/src/routes/App.js

@@ -1,14 +1,16 @@
 import './App.css'
 
-import React, {PropTypes as t} from 'react'
+import t from 'prop-types'
+import React, {Component} from 'react'
 import {Link} from 'react-router'
 
 import Thing from 'src/components/Thing'
 
-let App = React.createClass({
-  propTypes: {
+class App extends Component {
+  propTypes = {
     test: t.string
-  },
+  }
+
   render() {
     return <div>
       <h1>Welcome to React</h1>
@@ -22,6 +24,6 @@ let App = React.createClass({
       {this.props.children}
     </div>
   }
-})
+}
 
 export default App

tests/fixtures/projects/router-app/src/routes/child1/Child1.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, {Component} from 'react'
 
-let Child1 = React.createClass({
+class Child1 extends Component {
   render() {
     return <h2>Child 1</h2>
   }
-})
+}
 
 export default Child1

tests/fixtures/projects/router-app/src/routes/child2/Child2.js

@@ -1,8 +1,8 @@
 require('./Child2.css')
 
-import React from 'react'
+import React, {Component} from 'react'
 
-let Child2 = React.createClass({
+class Child2 extends Component {
   render() {
     let {site} = this.props.routeParams
     return <div className="Child2">
@@ -11,6 +11,6 @@ let Child2 = React.createClass({
       {site && <p>Site param: {site}</p>}
     </div>
   }
-})
+}
 
 export default Child2