kevinhaas/react-routing-example

## react-routing-example
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~
                                 BASIC SETUP WITH ROUTING
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~

// This is a basic guide to the React-Router and rendering two Components
// You will need a server setup (node/express) and babel configured for ES6
// You will need to bundle react with webpack/browserify however you choose and require the bundled
   files enclosed in <script> tags at the bottom of index.html

// TODO: Expand into Flux, Footer/Navbar/Static Components, Server side rendering, gulp

=------------=
PROJECT LAYOUT
=------------=
-- Project-Name
  -- app
    -- components
      - Home.js
      - PageOne.js
    -- routes
      - react-routes.js
    - main.js
  -- public(Static Files & Client Side Code)
    -- images
    -- stylesheets
      - main.css
    -- javascript
    -- views
  -- node modules
  - package.json
  - README.md
  - server.js(node setup)

// only packages for react, you will need node/express server setup as well
* npm i -S react react-dom react-router

// dev dependencies for babel
* npm i -D babel-cli babel-core babel-preset-es2015 babel-prest-react babel-register

=-----------------------------------=
INDEX.HTML - HTML PAGE REACT BINDS TO
=-----------------------------------=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>React Routing Example</title>
    <link rel="stylesheet" href="../css/main.css"/>
</head>
<body>

<div id="app">
    <!-- React components rendered here, simalar to ng-view -->
</div>

<script src="yourBundledFiles.js"></script>

</body>
</html>

=------------------------------=
MAIN.JS - ENTRY POINT FOR REACT
=------------------------------=
import React from "react";
import ReactDOM from 'react-dom";
import Router from "react-router";
import createBrowserHistory from "history/lib/createBrowserHistory";
import routes from "./routes/react-routes";

let history = createBrowserHistory();

ReactDOM.render(

  <Router history={history}>
    {routes}
  </Router>,

  document.getElementById("app")
);

=--------------------------------=
COMPONENT 1 - BAISC HTML COMPONENT
=--------------------------------=
import React from "react";

class Home extends React.Component {
  render() {
    return (
      <div>
        This is the home page component!
      </div>
    );
  };
}

export default Home;

=--------------------------------=
COMPONENT 2 - BAISC HTML COMPONENT
=--------------------------------=
import React from "react";

class PageOne extends React.Component {
  render() {
    return (
    <div>
      This is the second component!
    </div>
    );
  }
}

export default PageOne;

=---------------------------------------=
REACT-ROUTER - EX. OF BASIC 2 ROUTE SETUP
=---------------------------------------=
import React from "react";
import {Route} from "react-router";
import Home from "../components/Home";
import PageOne from "../components/PageOne";

// define the desired pathnames for your components here
export default (
	<Route>
			<Route path="/" component={Home} />
			<Route path="/page1" component={PageOne} />
	</Route>
);
	~~~~~~~~~~~~~~~~~~~~~~~~~~
	BASIC SETUP WITH ROUTING
	~~~~~~~~~~~~~~~~~~~~~~~~~~

	// This is a basic guide to the React-Router and rendering two Components
	// You will need a server setup (node/express) and babel configured for ES6
	// You will need to bundle react with webpack/browserify however you choose and require the bundled
	files enclosed in <script> tags at the bottom of index.html

	// TODO: Expand into Flux, Footer/Navbar/Static Components, Server side rendering, gulp

	=------------=
	PROJECT LAYOUT
	=------------=
	-- Project-Name
	-- app
	-- components
	- Home.js
	- PageOne.js
	-- routes
	- react-routes.js
	- main.js
	-- public(Static Files & Client Side Code)
	-- images
	-- stylesheets
	- main.css
	-- javascript
	-- views
	-- node modules
	- package.json
	- README.md
	- server.js(node setup)

	// only packages for react, you will need node/express server setup as well
	* npm i -S react react-dom react-router

	// dev dependencies for babel
	* npm i -D babel-cli babel-core babel-preset-es2015 babel-prest-react babel-register

	=-----------------------------------=
	INDEX.HTML - HTML PAGE REACT BINDS TO
	=-----------------------------------=
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>React Routing Example</title>
	<link rel="stylesheet" href="../css/main.css"/>
	</head>
	<body>

	<div id="app">
	<!-- React components rendered here, simalar to ng-view -->
	</div>

	<script src="yourBundledFiles.js"></script>

	</body>
	</html>

	=------------------------------=
	MAIN.JS - ENTRY POINT FOR REACT
	=------------------------------=
	import React from "react";
	import ReactDOM from 'react-dom";
	import Router from "react-router";
	import createBrowserHistory from "history/lib/createBrowserHistory";
	import routes from "./routes/react-routes";

	let history = createBrowserHistory();

	ReactDOM.render(

	<Router history={history}>
	{routes}
	</Router>,

	document.getElementById("app")
	);

	=--------------------------------=
	COMPONENT 1 - BAISC HTML COMPONENT
	=--------------------------------=
	import React from "react";

	class Home extends React.Component {
	render() {
	return (
	<div>
	This is the home page component!
	</div>
	);
	};
	}

	export default Home;

	=--------------------------------=
	COMPONENT 2 - BAISC HTML COMPONENT
	=--------------------------------=
	import React from "react";

	class PageOne extends React.Component {
	render() {
	return (
	<div>
	This is the second component!
	</div>
	);
	}
	}

	export default PageOne;

	=---------------------------------------=
	REACT-ROUTER - EX. OF BASIC 2 ROUTE SETUP
	=---------------------------------------=
	import React from "react";
	import {Route} from "react-router";
	import Home from "../components/Home";
	import PageOne from "../components/PageOne";

	// define the desired pathnames for your components here
	export default (
	<Route>
	<Route path="/" component={Home} />
	<Route path="/page1" component={PageOne} />
	</Route>
	);