Skip to content

Instantly share code, notes, and snippets.

@kevinhaas
Last active June 15, 2016 21:02
Show Gist options
  • Save kevinhaas/af4605f753e370dcff698da727a4b548 to your computer and use it in GitHub Desktop.
Save kevinhaas/af4605f753e370dcff698da727a4b548 to your computer and use it in GitHub Desktop.
basic example of routing two components with the react router
~~~~~~~~~~~~~~~~~~~~~~~~~~
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>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment