./libs/jquery/2.1.1/jquery.min.js
./libs/react/react-router/3.0.0/react-router.js
./libs/react/0.14.2/react-dom.js
./libs/react/0.14.2/react.js
./libs/babel/babel-core/5.8.23/browser.min.js
./libs/history/3.0.0/history.js
./index.html
index.html
========
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Antwan Wimberly's React Router Tutorial via ES5 and Babel</title> <script src="libs/react/0.14.2/react.js"></script> <script src="libs/react/0.14.2/react-dom.js"></script> <script src="libs/babel/babel-core/5.8.23/browser.min.js"></script> <script src="libs/jquery/2.1.1/jquery.min.js"></script> <script src="libs/react/react-router/3.0.0/react-router.js"></script> <script src="libs/history/3.0.0/history.js"></script> <style> body { padding: 50px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } a { color: #00B7FF; } </style> </head> <body> <div id="content"></div> <script type="text/babel"> // To get started with this tutorial running your own code, simply remove // the script tag loading scripts/example.js and start writing code here. // make these convenietly available so we don't have to fully qualify
them (i.e Router vs ReactRouter.Router) var Router = ReactRouter.Router; var Link = ReactRouter.Link; // instead of straight up <a href="blah">
we'll have to use the Link component instead var Route = ReactRouter.Route; var history = History.useBasename(History.createHistory)(); var IndexPage = React.createClass({ render: function() { return ( // render the content from the child route via this.props.children
(i.e. DetailsPage, Users, User) <div className="indexPage"> Hello, world! I am a index page. <ul> <li><Link to="/details">Details</Link></li> <li><Link to="/users">Users</Link></li> <li><Link to="/stand-alone">Stand Alone</Link></li> </ul> {this.props.children} </div> ); } }); var DetailsPage = React.createClass({ render: function() { return ( <div className="detailsPage"> Hello, world! I am a details page. </div> ); } }); var NotFound = React.createClass({ render: function() { return ( <div className="no-match"> Woah dere!!! 404 Not Found .Fix that!!! </div> ); } }); var Users = React.createClass({ render: function() { return ( <div id="users"> This is just the users shell, bra!!! <div><Link to="/users/user/1">See User #1</Link></div> My child content for the Users compoent is..... {this.props.children} </div> ); } }); var User = React.createClass({ render: function() { return ( <div id="user-{this.props.params.userId}"> The user you are retrieving details for is {this.props.params.userId} </div> ); } }); var NonNestedPage = React.createClass({ render: function() { return ( <p>Hi, I do not share content with the IndexPage component.
I am stand alone</p> ); } }); ReactDOM.render( <Router history={history}> <Route path="/" component={IndexPage}> <Route path="details" component={DetailsPage} /> <Route path="users" component={Users}> <Route path="user/:userId" component={User} /> </Route> </Route> <Route path="/stand-alone" component={NonNestedPage} /> <Route path="*" component={NotFound} /> </Router>, document.getElementById('content') ); </script> </body> </html>
-------------------------
For running refer to https://mohiplanet.blogspot.com/2015/10/react-bootstrap-listgrid-toggle.html
References:
https://github.com/armw4/react-router-example-es5
