ReactJS 0.14.3 + React-Router 1.0.2 (with CDN)

index.html

<div id="app"></div>

ReactJS 0.14.3 + React-Router 1.0.2 (with CDN).markdown

ReactJS 0.14.3 + React-Router 1.0.2 (with CDN)

Testing ReactRouter

A Pen by Izaias di Araújo on CodePen.

License.

script.js

var {Component} = React
var {Router, Route, IndexRoute, Link} = ReactRouter

class App extends Component{
  render(){
    return(
      <div>
        <Link to="/contact"> Página 1 </Link> <br />
        <Link to='/about'> Página 2 </Link>
        <hr />
        <h5> Conteúdo: </h5>
        <p> {this.props.children} </p>
      </div>
    );
  }
}
class Contact extends Component{
  render(){
    return ( <h2> Página 1 </h2>);
  }
}

class About extends Component {
  render(){
      return (<h1> Página 2 </h1>);
    }
}
              
// Página inicial que será exibida por padrão
// Isso é determinado pelo componente <IndexRoute>
class HomeScreen extends Component{
  render(){
    return(
      <h5> Aqui é a página inicial </h5>
    );
  }
}
    
            
        
 ReactDOM.render ((
<Router>
  <Route path="/" component={App}>
   {/* onEnter é executado assim que componente será chamado*/}
    <Route path="contact" component={Contact} onEnter={()=>{alert("Page 1")}}/>
    <Route path="about" component={About} />
    <IndexRoute component={HomeScreen} />
  </Route>
</Router>
), document.getElementById('app')); 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/1.0.2/ReactRouter.js"></script>