nojaja/.siteeditor

## .siteeditor
HelloWorld

## README.md

      
    Raw
  

              README.md
            
          
    HelloWorld

  
## file1.txt
String file contents via ajax

## index.html
<html>
	<head>
		<meta charset='utf-8' />
		<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
		<title>
			React Routing
		</title>
		<style>
    .nav a {padding: 8px 16px; margin: 8px;}
		</style>
		<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
		<script src='https://fb.me/react-15.1.0.js'></script>
		<script src='https://fb.me/react-dom-15.1.0.js'></script>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js'></script>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js'></script>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.1.1/react-router-dom.min.js'></script>
	</head>
	<body>
		<div id='app' />
	</body>
</html>

## reactrouterdom-v4-test-redux.markdown

      
    Raw
  

              reactrouterdom-v4-test-redux.markdown
            
          
    ReactRouterDOM v4 test + redux

A Pen by nojaja on CodePen.
License.

  
## script.babel.js

const { BrowserRouter, HashRouter, Switch, Route, Link } = ReactRouterDOM;
const ReactLink = ReactRouterDOM.Link;
const createStore = Redux.createStore;
const Provider = ReactRedux.Provider;

function mainReducer(state = {"message":"hello"}, action) {
  switch (action.type) {
    default:
      return state;
  }
}

//store
var apps = Redux.combineReducers({
  main: mainReducer
});
var store = createStore(apps);

class XNav extends React.Component {
  render() {
    return React.createElement(
      "div",
      { className: "nav" },
      console.log(this.context.router),
      React.createElement(ReactLink, { to: "/home" }, "home"),
      React.createElement(ReactLink, { to: "/about" }, "about"),
      React.createElement("button", { onClick: this.handleChange }, "test")
    );
  }
  static get contextTypes() {
    return { router: React.PropTypes.any };
  }
  handleChange(e) {
    console.log(this);
    //history.back();
    history.pushState(null, null, "/about");
  }
}
class PageHome extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      React.createElement("h1", null, "Home Page")
    );
  }
}
class PageAbout extends React.Component {
  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    console.log("handleClick", this);
    console.log(store.getState().main.message);
    this.props.history.push("/home");
  }
  render() {
    return React.createElement(
      "div",
      null,
      React.createElement("h1", null, "Link 1 Page"),
      React.createElement("button", { onClick: this.handleClick }, "test")
    );
  }
}
class App extends React.Component {
  render() {
    return React.createElement(Provider, { store: store },
      React.createElement(
        HashRouter,
        null,
        React.createElement(
          "div",
          null,
          React.createElement(XNav, null),
          React.createElement(Route, { path: "/home", component: PageHome }),
          React.createElement(Route, { path: "/about", component: VisiblePageAbout })
        )
      )
    );
  }
}

var mapStateToProps = function mapStateToProps(state) {
  return state;
};

const VisiblePageAbout = ReactRedux.connect(mapStateToProps)(PageAbout);


var render = function render() {
  ReactDOM.render(
    React.createElement(App, null),
    document.querySelector("#app")
  );
};

$(function() {
  render();
});
	<html>
	<head>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
	<title>
	React Routing
	</title>
	<style>
	.nav a {padding: 8px 16px; margin: 8px;}
	</style>
	<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
	<script src='https://fb.me/react-15.1.0.js'></script>
	<script src='https://fb.me/react-dom-15.1.0.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.1.1/react-router-dom.min.js'></script>
	</head>
	<body>
	<div id='app' />
	</body>
	</html>

	const { BrowserRouter, HashRouter, Switch, Route, Link } = ReactRouterDOM;
	const ReactLink = ReactRouterDOM.Link;
	const createStore = Redux.createStore;
	const Provider = ReactRedux.Provider;

	function mainReducer(state = {"message":"hello"}, action) {
	switch (action.type) {
	default:
	return state;
	}
	}

	//store
	var apps = Redux.combineReducers({
	main: mainReducer
	});
	var store = createStore(apps);

	class XNav extends React.Component {
	render() {
	return React.createElement(
	"div",
	{ className: "nav" },
	console.log(this.context.router),
	React.createElement(ReactLink, { to: "/home" }, "home"),
	React.createElement(ReactLink, { to: "/about" }, "about"),
	React.createElement("button", { onClick: this.handleChange }, "test")
	);
	}
	static get contextTypes() {
	return { router: React.PropTypes.any };
	}
	handleChange(e) {
	console.log(this);
	//history.back();
	history.pushState(null, null, "/about");
	}
	}
	class PageHome extends React.Component {
	render() {
	return React.createElement(
	"div",
	null,
	React.createElement("h1", null, "Home Page")
	);
	}
	}
	class PageAbout extends React.Component {
	constructor(props) {
	super(props);

	// This binding is necessary to make `this` work in the callback
	this.handleClick = this.handleClick.bind(this);
	}
	handleClick(e) {
	console.log("handleClick", this);
	console.log(store.getState().main.message);
	this.props.history.push("/home");
	}
	render() {
	return React.createElement(
	"div",
	null,
	React.createElement("h1", null, "Link 1 Page"),
	React.createElement("button", { onClick: this.handleClick }, "test")
	);
	}
	}
	class App extends React.Component {
	render() {
	return React.createElement(Provider, { store: store },
	React.createElement(
	HashRouter,
	null,
	React.createElement(
	"div",
	null,
	React.createElement(XNav, null),
	React.createElement(Route, { path: "/home", component: PageHome }),
	React.createElement(Route, { path: "/about", component: VisiblePageAbout })
	)
	)
	);
	}
	}

	var mapStateToProps = function mapStateToProps(state) {
	return state;
	};

	const VisiblePageAbout = ReactRedux.connect(mapStateToProps)(PageAbout);


	var render = function render() {
	ReactDOM.render(
	React.createElement(App, null),
	document.querySelector("#app")
	);
	};

	$(function() {
	render();
	});