Let's first initialise our directory and install the modules. I'm using nodejs v5.10.1.
mkdir our_dir && cd our_dir
mkdir src
npm init -y
npm install react react-dom react-router --save
npm install webpack babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
Now let's use a webpack.config.js
that uses an entry point of src/router.js and outputs to bundle.js using the babel loader with es2015 and react presets:
module.exports = {
entry: "./src/router.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ loader: 'babel', query: { presets: ['es2015', 'react'] }, exclude: /node_modules|bower_components/ }
]
}
};
The first files in our src
directory will simple components that output some simple text. pageone.js:
import React from 'react'
import { render } from 'react-dom'
const Pageone = React.createClass({
render: function() {
return <div>This is page one</div>;
}
});
export default Pageone;
pagetwo.js:
import React from 'react'
import { render } from 'react-dom'
const Pagetwo = React.createClass({
render: function() {
return <div>This is page two</div>;
}
});
export default Pagetwo;
The next component will be the main layout. We'll call it mainlayout.js
. It uses the Link
component from react-router to create links. The {this.props.children}
part will be replaced with the components to which we will navigate.
import React from 'react'
import { render } from 'react-dom'
import { Link } from 'react-router'
const MainLayout = React.createClass({
render() {
return (
<div>
<Link to="/pageone">Page one</Link> | <Link to="/pagetwo">Page two</Link>
{this.props.children}
</div>
)
}
})
export default MainLayout;
The next file router.js
, which we refer to in our webpack.config.js file, is where we import all our components and define the route:
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import MainLayout from './mainlayout';
import Pageone from './pageone';
import Pagetwo from './pagetwo';
render((
<Router history={hashHistory}>
<Route path="/" component={MainLayout}>
<Route path="pageone" component={Pageone} />
<Route path="pagetwo" component={Pagetwo} />
</Route>
</Router>
), document.getElementById('container'));
We use the Router
tag to start the routes, specifying {hashHistory}
, which we imported, to tell react-router how to deal with history.
Within such, we have a Route
which has a path
attribute, which is just the root, and a component
attribute, which is the MainLayout component we defined earlier.
Without that, we define two routes, named pageone
and pagetwo
, which relate to the link names in MainLayout. And we set the components to the ones we defined above.
And we render all that in to a container
id which we will create in our index.html
file.
Now go back into the main directory, and create this simple index.html
file, with the container
id relating to the above router.js file, and the bundle.js
relating to the file webpack will shortly create for us.
<div id="container"> </div>
<script src="bundle.js"></script>
Finally, webpack to create the bundle.js file:
./node_modules/webpack/bin/webpack.js
which should output something like:
Hash: 4aeabfc523370b2c0c2c
Version: webpack 1.13.0
Time: 1246ms
Asset Size Chunks Chunk Names
bundle.js 858 kB 0 [emitted] main
+ 228 hidden modules
And now if you visit your index.html file on your web server, you should see the router in action, complete with browser history.
The first page will just be what we defined in our MainLayout. If you want a default component there, use <IndexRoute component={Index} />
within your Route
and create the Index
component.