'use strict';
let React = require('react'),
Router = require('react-router'),
Route = Router.Route;
let App = require('App');
let content = document.getElementById('content');
let routes = (
<Route handler={App} path="/"/>
);
Router.run(routes, Router.HistoryLocation,
(Handler) => React.render(<Handler/>, content));
var React = require('react');
var Router = require('react-router');
var routes = require('./routes');
var rootProps = JSON.parse(document.getElementById('root-props').innerHTML)
Router.run(routes, Router.HistoryLocation, function (Handler, state) {
React.render(
<Handler {...rootProps} />,
document.getElementById('react-app')
);
});
'use strict';
import React from 'react';
import { default as Router, Route, Redirect, Link, RouteHandler } from 'react-router';
import Demo from './demo';
window.React = React;
class App extends React.Component {
render () {
return (
<div>
<RouteHandler />
</div>
)
}
}
var routes = (
<Route handler={App} path="/">
<Route name="demo" handler={Demo} />
<Redirect from="/" to="demo" />
</Route>
);
Router.run(routes, Router.HashLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
import 'babel/polyfill';
import 'isomorphic-fetch';
import React from 'react';
import Router from 'react-router';
import routes from '../common/routes';
import Flux from '../common/Flux'
import performRouteHandlerStaticMethod from '../common/utils/performRouteHandlerStaticMethod';
import FluxComponent from 'flummox/component';
import debug from 'debug';
window.React = React;
window.myDebug = debug;
const flux = new Flux();
Router.run(routes, Router.HistoryLocation, async (Handler, state) => {
const routeHandlerInfo = { state, flux };
await performRouteHandlerStaticMethod(state.routes, 'routerWillRun', routeHandlerInfo);
React.render(
<FluxComponent flux={flux}>
<Handler {...state} />
</FluxComponent>,
document.getElementById('container')
);
});
document.addEventListener('DOMContentLoaded', () => {
Router.run(routes, (Handler, state) => {
React.render(<Handler params={state.params} />, document.body);
});
});
function renderToString(Handler, data) {
return React.renderToString(<Handler data={data} />);
}
module.exports = {
// sync will fetch all data *before* returning
// ideal for running from server
sync(routes, opts, cb) {
opts = opts || {};
var render = opts.render || renderToString;
var loc = opts.location || Router.HistoryLocation;
Router.run(routes, loc, (Handler, state) => {
fetchAllData(state.routes, state.params).then(data => {
var out = render(Handler, { data }, opts.context);
if (cb)
cb(out, data);
});
});
},
// async will render *first* without data, then fetch data and re-render
// ideal for running from the client
async(routes, opts, cb) {
opts = opts || {};
var render = opts.render || renderToDocument;
var loc = typeof opts.location === 'undefined' ?
Router.HistoryLocation :
opts.location;
// cordova shouldn't use HistoryLocation
function app() {
Router.run(routes, Router.HistoryLocation, (Handler, state) => {
React.render(<Handler />, document.querySelector('#app-container'))
})
}
'use strict';
var AgilerootsApp = require('./AgilerootsApp');
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var content = document.getElementById('content');
var Routes = (
<Route handler={AgilerootsApp}>
<Route name="/" handler={AgilerootsApp}/>
</Route>
);
Router.run(Routes, function (Handler) {
React.render(<Handler/>, content);
});
var React = require('react');
var Router = require('react-router');
var Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
RouteHandler = Router.RouteHandler,
Link = Router.Link;
var PokemonApp = require('./components/PokemonApp.react'),
MapSection = require('./components/MapSection.react'),
MainSection = require('./components/MainSection.react'),
LoginSection = require('./components/LoginSection.react'),
ErrorSection = require('./components/ErrorSection.react');
var routes = (
/*jshint ignore:start */
<Route name="app" path="/" handler={PokemonApp}>
<Route name="map" path="/map" handler={MapSection} />
<Route name="stuff" path="/stuff" handler={MainSection} />
<Route name="error" path="/error" handler={ErrorSection} />
<DefaultRoute handler={LoginSection}/>
</Route>
/*jshint ignore:end */
);
Router.run(routes, (Root) => {
React.render(
/*jshint ignore:start */
<Root/>,
/*jshint ignore:end */
document.getElementById('app'));
});
app.use(function(req, res) {
Router.run(ReactApplication, req.url, function(Handler) {
var flux = require("./app/shared/flux/FluxApplication");
res.render("index", { application: React.renderToString(Handler({flux: flux}))});
});
});
import React from 'react';
import Router from 'react-router';
import routes from './routes';
Router.run(routes, (Handler, state) =>
React.render(<Handler {...state} />, document.body)
);
<RouteHandler style={{clear:'both'}}/>
</div>
);
}
});
// var injectTapEventPlugin = require("react-tap-event-plugin");
// // injectTapEventPlugin();
// <TextField
// hintText="Hint Text"
// floatingLabelText="Floating Label Text" />
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Dashboard = React.createClass({
handleClick: function(e) {
console.log('handleClick on dashboard')
},
render: function() {
return <div style={appStyle.div} onClick={this.handleClick}>dashboard</div>
}
})
Router.run(Routes, function (Handler) {
React.render(<Handler/>, document.body);
});
var React = require('react');
var Router = require('react-router');
var ReactDOM = require('react-dom');
var routes = require('./routes.js');
Router.run(routes, Router.HistoryLocation, function(Root){
ReactDOM.render(<Root/>, document.getElementById('app-container'));
});
<Link to="user-login" className="navbar-brand" style={LoginSignUpStyle} >登录</Link>
<Link to="user-signup" className="navbar-brand" style={LoginSignUpStyle} >注册</Link>
</ul>
</header>
</nav>
<RouteHandler {...this.props} />
</div>
);
}
});
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="carts" path="carts" handler={CartList}/>
<Route name="orders" path="orders" handler={OrderList}/>
<Route name="user-login" path="account/login" handler={UserLogin}/>
<Route name="user-signup" path="account/signup" handler={UserSignUp}/>
<Route name="categories" path="/categories/?:categoryId?" handler={FoodList}/>
<DefaultRoute handler={FoodList }/>
</Route>
);
Router.run(routes, function (Handler, state) {
var params = state.params;
React.render(<Handler params={params}/>, document.body);
});
var source = Rx.Observable.fromEventPattern(function(h) {
Router.run(routes, h);
});
window.console.log(`loaded main.js with Babel ES6, ${JSON.stringify(obj)}`);
// end simple test
*/
//{DefaultRoute, Route, Link, RouteHandler}
var {DefaultRoute, Route} = Router;
const flux = new AppFlux();
//routes = (
// <Route name="app" path="/" handler={App}>
// <Route name="nineties_image" path="nineties-image/:id"
// handler={NinetiesImage}/>
// <Route name="nineties_image_index" path="nineties-image"
// handler={NinetiesImageIndex}/>
// </Route>
//);
// Router.HistoryLocation gets rid of the the /#/ hash by using html5 history
// API for cleaner URLs
// Router.run(routes, Router.HistoryLocation, (Handler) => {
Router.run(AppRoutes.routes, (Handler) => {
React.render(
<FluxComponent flux={flux} connectToStores={[AppStore.ID]}>
<Handler/>
</FluxComponent>,
document.getElementById('app')
);
});
var React = require('react/addons');
Object.assign = require('object-assign');
var Router = require('react-router');
var qs = require('qs');
var routes = require('./routes');
var Handler = Router.Handler;
if (location) {
global.params = qs.parse(window.location.search.slice(1));
}
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler />, document.getElementById('main'));
});
window.React = React;
import React from 'react';
import Router from 'react-router';
import routes from 'routes';
Router.run(routes, Router.HistoryLocation, (Root, state) => {
React.render(<Root {...state}/>, document.getElementById('content'));
});
app.rehydrate(dehydratedState, function (err, context) {
if (err) {
throw err;
}
window.context = context;
var firstRender = true;
Router.run(app.getComponent(), Router.HistoryLocation, async function (Handler, state) {
// Track Pageviews with Google Analytics
if (config.googleAnalytics.enabled === true) {
debug('Track pageview', state.pathname);
ga.pageview(state.pathname);
}
// Send hit to Facebook Pixel
try {
fbq('track', 'PageView');
} catch (err) {
debug('Unable to send hit to Facebook Pixel', err);
}
if (firstRender) {
debug('First render');
// When first loading the app on the client, trigger fetching of user account
// details before proceding so that, if a user is logged in, this information
// is readily available to the application (e.g. for limiting access to certain pages)
await dispatchGetAccountDetails(context);
// Now that we have the account figured out, let's figure out the state of the cart,
// fetching any one that we currently have or creating a new one if necessary
await dispatchFetchOrCreateCart(context);
// Don't call the action on the first render on top of the server rehydration
// Otherwise there is a race condition where the action gets executed before
// render has been called, which can cause the checksum to fail.
firstRender = false; // This has to be done before render
await RenderApp(context, Handler);
// Add listener to page size changes and trigger respective action right away
// so that components that depend on this information for implementing responsive
// behaviors have this information available now and updated whenever it changes.
// Note: this should only be triggered after React has finished rendering, to avoid
// warnings regarding invalid DOM checksums.
window.addEventListener('resize', dispatchPageResize.bind(null, context), false);
dispatchPageResize(context);
} else {
debug('Single-page-mode render');
context.executeAction(triggerPageLoading, true);
// Trigger fetching and wait for the data required by the components of the given route.
// On first render, this is done on the server side.
await fetchData(context, state);
// Set page title and snippets from the route handlers
let pageTitleAndSnippets = fetchPageTitleAndSnippets(context, state);
document.title = pageTitleAndSnippets ? pageTitleAndSnippets.title : config.app.title;
// Route Errors (i.e. most likely 404 Not Found)
// There are are routes that may be valid in the sense that they "exist" but,
// in reality, are invalid because the underlying resource does not exist (e.g. Product ID not found).
// We should catch those here and act accordingly, like rendering Not Found page or setting
// proper HTTP status code.
let routeError = context.getStore(ApplicationStore).getRouteError();
await dispatchClearRouteErrors(context); // Very important!!!
if (routeError) {
debug(`(Client) Route Error ${routeError}`);
}
context.executeAction(navigateAction, state, function () {
RenderApp(context, Handler).then(function () {
context.executeAction(triggerPageLoading, false);
});
});
}
});
});
var React = require('react'),
Router = require('react-router');
// React-router variables
var Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
NotFoundRoute = Router.NotFoundRoute;
// Authentication related page components
var NotFound = require('./components/404');
// Publicly accessible page components
var Base = require('./components/base'),
Dashboard = require('./components/dashboard'),
LiveLog = require('./components/livelog'),
History = require('./components/history');
// Routes representing the frontend
var sitemap = (
<Route name="public" path="/" handler={Base}>
<Route name="livelog" handler={LiveLog}/>
<Route name="history" handler={History}/>
<DefaultRoute handler={Dashboard}/>
<NotFoundRoute handler={NotFound}/>
</Route>
);
// Bind the routes to the DOM
Router.run(sitemap, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
<Route name="mixin" handler={require('./mixin')} />
<Route name="reflux" handler={require('./reflux')} />
<Route name="login" handler={require('./login')} />
<Route name="markdown" handler={require('./markdown')} />
<Route name="home" handler={require('./home')} />
<Route name="button" handler={require('./button')} />
<Route name="mcfly" handler={require('./mcfly')} />
<Route name="source" handler={require('./source')} />
<Route name="articles" handler={require('./articles')}>
<Route name="article/:id" handler={require('./articles/item/index')} >
<Route name="edit" handler={require('./articles/item/edit')} >
</Route>
</Route>
</Route>
<Route name="breadcrumbs" handler={require('./breadcrumbs')} />
<Route name="reactfire" handler={require('./reactfire')} />
<Route name="forms" handler={require('./forms')} />
<Route name="charts" handler={require('./charts')} />
<Route name="animations" handler={require('./animations')} />
<Route name="component" handler={require('./component')} />
<Redirect from="/" to="home" />
</Route>
);
// Run the router
Router.run(routes, function (Handler) {
// Render the root app view-controller
React.render(<Handler />, window.document.getElementById('app-root'));
});
// Render the full application
// RouteHandler will always be TodoMain, but with different 'showing' prop (all/completed/active)
var TodoApp = React.createClass({
//this will cause setState({list: updatedlist}) whenever the store does trigger(updatelist)
mixins: [Reflux.connect(todoListStore, "list")],
render: function() {
return (
<div>
<TodoHeader />
<ReactRouter.RouteHandler list={this.state.list} />
<TodoFooter list={this.state.list} />
</div>
);
}
});
var routes = (
<ReactRouter.Route handler={TodoApp}>
<ReactRouter.Route name='All' path='/' handler={TodoMain} />
<ReactRouter.Route name='Completed' path='/completed' handler={TodoMain} />
<ReactRouter.Route name='Active' path='/active' handler={TodoMain} />
</ReactRouter.Route>
);
ReactRouter.run(routes, function(Handler){
React.render(<Handler />, document.getElementsByClassName('todoapp')[0])
});
import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
import AppRoutes from './routes/appRoutes';
let mountNode = document.getElementById("react-main-mount");
/* this is where we could add the history clause */
Router.run(AppRoutes, function (Handler) {
React.render(<Handler />, mountNode);
});
import Leaderboards from './components/leaderboards'
import Main from './components/main'
import Profile from './components/profile'
import About from './components/about'
import Home from './components/home'
const onLeave = () => {
console.log('leaving route')
}
var routes = (
<Route path='/' handler={Main} onLeave={onLeave}>
<Route handler={Home}/>
<Route path='about' handler={About}/>
<Route path='pridat-hovno' handler={AddPoo}/>
<Route path='pridat-kos' handler={AddBin}/>
<Route path='zebricky' handler={Leaderboards}/>
<Route path='profil' handler={Profile}/>
<Route path='profil/:id' handler={Profile}/>
<Route path=':type/:id' handler={Home}/>
</Route>
)
Router.run(routes, Router.HashLocation, (Root) => {
React.render(<Root/>, document.getElementById('app'))
})
System.import('jspm_packages/npm/react-intl@1.2.0/dist/locale-data/' + navigator.language)
export let __hotReload = true
var ReactRouter = require('react-router');
var gettingStarted = require('./scripts/documentation01-gettingstarted');
var apiReference = require('./scripts/documentation02-apireference');
var componentsDocs = require('./scripts/documentation03-components');
var { Route, RouteHandler, Link } = ReactRouter;
var App = React.createClass({
render: function () {
return (
<div>
<h1 className="page-header">Documentation</h1>
<RouteHandler/>
</div>
);
}
});
var routes = (
<Route handler={App}>
<Route name="gettingstarted" handler={gettingStarted} />
<Route name="apireference" handler={apiReference} />
<Route name="componentsDocs" handler={componentsDocs} />
</Route>
);
ReactRouter.run(routes, function (Handler) {
ReactDOM.render(<Handler/>, document.getElementById('documentation'));
});
* props or context. We'll use context, in case we have deeply-nested views.
*
* TODO: implement dehydration/rehydration
*/
let flux = new Flux();
Router.run(routes, Router.HistoryLocation, (Handler, state) => {
async function run() {
/**
* Like we did on the server, wait for data to be fetched before rendering.
*/
await performRouteHandlerStaticMethod(state.routes, 'routerWillRun', state, flux);
/**
* Pass flux instance as context
*/
React.withContext(
{ flux },
() => React.render(<Handler />, document.getElementById('app'))
);
}
/**
* Don't gobble errors. (This is the worst feature of promises, IMO.)
*/
run().catch(error => {
throw error;
});
});
var React = require('react'),
Router = require('react-router'),
LoginPage = require('./components/LoginPage'),
Logout = require('./components/Logout'),
PrivateHome = require('./components/PrivateHome'),
PublicHome = require('./components/PublicHome'),
MainContainer = require('./components/MainContainer'),
MyForm = require('./components/MyForm'),
RouteHandler = Router.RouteHandler,
Route = Router.Route,
Link = Router.Link,
DefaultRoute = Router.DefaultRoute,
routesConstants = require('./constants/routesConstants');
var routes = (
<Route handler={MainContainer} path={routesConstants.ROOT}>
<Route name={routesConstants.LOGIN} handler={LoginPage}/>
<Route name={routesConstants.LOGOUT} handler={Logout}/>
<Route name={routesConstants.HOME_PRIVATE} handler={PrivateHome}/>
<Route name={routesConstants.SOMETHING} handler={MyForm}/>
<DefaultRoute handler={PublicHome}/>
</Route>
);
Router.run(routes, Router.HashLocation, function (Handler) {
React.render(<Handler/>, document.getElementById('app'));
});
/**
* Only run once, at app boot.
*/
boot() {
Router.run(routes, Router.HashLocation, (Handler) => {
React.render(<Handler/>, document.getElementById('app'))
})
}
//入门
var React = require("react");
var Router = require('react-router');
var routes = require("./router");
Router.run(routes, function (Handler) {
React.render(<Handler/>, document.getElementById("app"));
});
var React = require('react');
var Router = require('react-router');
var routes = require('./config/routes');
React.initializeTouchEvents(true)
var liStyle = {
display: 'inline'
};
Router.run(routes, function(Root){
React.render(<Root />, document.getElementById('app'));
});