Standalone/Non-NodeJS version of a simple Single Page Application ( SPA ) with React Router

Project Structure:

./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>


-------------------------

Full working code Download .


For running refer to  https://mohiplanet.blogspot.com/2015/10/react-bootstrap-listgrid-toggle.html

 References:
https://github.com/armw4/react-router-example-es5

Posted by
Labels: , ,

No comments:

Post a Comment