Update Introduction.md

Updated the docs to use `classes` and `ReactDOM`. 

This allows the user to get the most updated approached to build React with react-router

Author: stanleycyang

docs/Introduction.md

@@ -7,27 +7,28 @@ To illustrate the problems React Router is going to solve for you, let's build a
 ### Without React Router
 
 ```js
-import React from 'react'
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
 
 const About = React.createClass({/*...*/})
 const Inbox = React.createClass({/*...*/})
 const Home = React.createClass({/*...*/})
 
-const App = React.createClass({
-  getInitialState() {
-    return {
+class App extends Component {
+  constructor() {
+    this.state = {
       route: window.location.hash.substr(1)
     }
-  },
-
+  }
+  
   componentDidMount() {
     window.addEventListener('hashchange', () => {
       this.setState({
         route: window.location.hash.substr(1)
       })
     })
-  },
-
+  }
+  
   render() {
     let Child
     switch (this.state.route) {
@@ -47,9 +48,9 @@ const App = React.createClass({
       </div>
     )
   }
-})
+}
 
-React.render(<App />, document.body)
+ReactDOM.render(<App />, document.body)
 ```
 
 As the hash portion of the URL changes, `<App>` will render a different `<Child>` by branching on `this.state.route`. Pretty straightforward stuff. But it gets complicated fast.
@@ -101,14 +102,15 @@ We'd have to make our URL parsing a lot smarter, and we would end up with a lot
 Let's refactor our app to use React Router.
 
 ```js
-import React from 'react'
+import ReactDOM from 'react-dom'
+import React, { Component } from 'react'
 
 // First we import some components...
 import { Router, Route, Link } from 'react-router'
 
 // Then we delete a bunch of code from App and
 // add some <Link> elements...
-const App = React.createClass({
+class App extends Component {
   render() {
     return (
       <div>
@@ -127,11 +129,11 @@ const App = React.createClass({
       </div>
     )
   }
-})
+}
 
 // Finally, we render a <Router> with some <Route>s.
 // It does all the fancy routing stuff for us.
-React.render((
+ReactDOM.render((
   <Router>
     <Route path="/" component={App}>
       <Route path="about" component={About} />
@@ -153,7 +155,7 @@ const routes = {
   ]
 }
 
-React.render(<Router routes={routes} />, document.body)
+ReactDOM.render(<Router routes={routes} />, document.body)
 ```
 
 ## Adding More UI
@@ -162,13 +164,13 @@ Alright, now we're ready to nest the inbox messages inside the inbox UI.
 
 ```js
 // Make a new component to render inside of Inbox
-const Message = React.createClass({
+class Message extends Component {
   render() {
     return <h3>Message</h3>
   }
-})
+}
 
-const Inbox = React.createClass({
+class Inbox extends Component {
   render() {
     return (
       <div>
@@ -178,9 +180,9 @@ const Inbox = React.createClass({
       </div>
     )
   }
-})
+}
 
-React.render((
+ReactDOM.render((
   <Router>
     <Route path="/" component={App}>
       <Route path="about" component={About} />
@@ -200,7 +202,7 @@ Now visits to URLs like `inbox/messages/Jkei3c32` will match the new route and n
 We're going to need to know something about the message in order to fetch it from the server. Route components get some useful properties injected into them when you render, particularly the parameters from the dynamic segment of your path. In our case, `:id`.
 
 ```js
-const Message = React.createClass({
+class Message extends Component
 
   componentDidMount() {
     // from the path `/inbox/messages/:id`