Final Picky fix with ES6

Added Component to import to save some space. We have two choices.

Either to do React.Component with all other than huge-apps, for

huge-apps to be an example or we could use Component rather than

React.Component in the entire examples. This PR is about that.

Author: Even Stensberg

examples/active-links/app.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { render } from 'react-dom'
 import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
 
 const ACTIVE = { color: 'red' }
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <div>
@@ -92,4 +92,3 @@ render((
     </Route>
   </Router>
 ), document.getElementById('example'))
-

examples/animations/app.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { render } from 'react-dom'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
 import './app.css'
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <div>
@@ -30,7 +30,7 @@ class App extends React.Component {
 }
 
 
-class Index extends React.Component {
+class Index extends Component {
   render() {
     return (
       <div className="Image">
@@ -41,7 +41,7 @@ class Index extends React.Component {
   }
 }
 
-class Page1 extends React.Component {
+class Page1 extends Component {
   render() {
     return (
       <div className="Image">
@@ -52,7 +52,7 @@ class Page1 extends React.Component {
   }
 }
 
-class Page2 extends React.Component {
+class Page2 extends Component {
   render() {
     return (
       <div className="Image">

examples/breadcrumbs/app.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 import './app.css'
 
-class App extends React.Component {
+class App extends Component {
   render() {
     const depth = this.props.routes.length
 

examples/dynamic-segments/app.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, Redirect } from 'react-router'
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <div>
@@ -16,7 +16,7 @@ class App extends React.Component {
   }
 }
 
-class User extends React.Component {
+class User extends Component {
   render() {
     const { userID } = this.props.params
 
@@ -33,7 +33,7 @@ class User extends React.Component {
   }
 }
 
-class Task extends React.Component {
+class Task extends Component {
   render() {
     const { userID, taskID } = this.props.params
 

examples/nested-animations/app.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { render } from 'react-dom'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import { browserHistory, Router, Route, Link } from 'react-router'
 import './app.css'
 
-class App extends React.Component {
+class App extends Component {
   render() {
     const { pathname } = this.props.location
 
@@ -28,7 +28,7 @@ class App extends React.Component {
   }
 }
 
-class Page1 extends React.Component {
+class Page1 extends Component {
   render() {
     const { pathname } = this.props.location
 
@@ -50,7 +50,7 @@ class Page1 extends React.Component {
   }
 }
 
-class Page2 extends React.Component {
+class Page2 extends Component {
   render() {
     const { pathname } = this.props.location
 
@@ -72,7 +72,7 @@ class Page2 extends React.Component {
   }
 }
 
-class Tab1 extends React.Component {
+class Tab1 extends Component {
   render() {
     return (
       <div className="Image">
@@ -83,7 +83,7 @@ class Tab1 extends React.Component {
   }
 }
 
-class Tab2 extends React.Component {
+class Tab2 extends Component {
   render() {
     return (
       <div className="Image">

examples/query-params/app.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 
-class User extends React.Component {
+class User extends Component {
   render() {
     let { userID } = this.props.params
     let { query } = this.props.location
@@ -17,7 +17,7 @@ class User extends React.Component {
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   render() {
     return (
       <div>

examples/sidebar/app.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 import data from './data'
 import './app.css'
 
-class Category extends React.Component {
+class Category extends Component {
   render() {
     const category = data.lookupCategory(this.props.params.category)
 
@@ -19,7 +19,7 @@ class Category extends React.Component {
   }
 }
 
-class CategorySidebar extends React.Component {
+class CategorySidebar extends Component {
   render() {
     const category = data.lookupCategory(this.props.params.category)
 
@@ -39,7 +39,7 @@ class CategorySidebar extends React.Component {
   }
 }
 
-class Item extends React.Component {
+class Item extends Component {
   render() {
     const { category, item } = this.props.params
     const menuItem = data.lookupItem(category, item)
@@ -53,7 +53,7 @@ class Item extends React.Component {
   }
 }
 
-class Index extends React.Component {
+class Index extends Component {
   render() {
     return (
       <div>
@@ -67,7 +67,7 @@ class Index extends React.Component {
   }
 }
 
-class IndexSidebar extends React.Component {
+class IndexSidebar extends Component {
   render() {
     return (
       <div>
@@ -84,7 +84,7 @@ class IndexSidebar extends React.Component {
   }
 }
 
-class App extends React.Component {
+class App extends Component {
   render() {
     const { content, sidebar } = this.props