8 July 2015 – Building a React.JS App – Part 2

Part 2: Building a ReactJS App – Basic Routing with React Router

app.js

var React = require('react');
var Router = require('react-router');
var routes = require('./config/routes');

// This file will be in charge of the render methods

Router.run(routes, function (Root) {
// Similar to what we did initially in Main.js, but instead the component is replaced dynamically and rendered here;
	React.render(<Root />, document.getElementById('app'));
});

var React = require('react');

var Router = require('react-router');

var routes = require('./config/routes');

// This file will be in charge of the render methods

Router.run(routes, function (Root) {

// Similar to what we did initially in Main.js, but instead the component is replaced dynamically and rendered here;

React.render(<Root />, document.getElementById('app'));

});

routes.js

var React = require('react');
var Main = require('../components/Main');
var Home = require('../components/Home');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;

// Instructions for the router, to know which component is active based on the current path

module.exports = (
	<Route name="app" path="/" handler={Main}>
		<DefaultRoute handler={Home} />
	</Route>
);

var React = require('react');

var Main = require('../components/Main');

var Home = require('../components/Home');

var Router = require('react-router');

var DefaultRoute = Router.DefaultRoute;

var Route = Router.Route;

// Instructions for the router, to know which component is active based on the current path

module.exports = (

</Route>

);

webpack.config.js

module.exports = {
	entry: "./app/app.js",
	output: {
		path: "./public/",
		filename: "bundle.js"
	},
	module: {
		loaders: [
			{
				test: /\.jsx?$/,
				exclude: /(node_modules|bower_components)/,
				loader: 'babel'
			}
		]
	}
};

module.exports = {

entry: "./app/app.js",

output: {

path: "./public/",

filename: "bundle.js"

module: {

loaders: [

{

test: /\.jsx?$/,

exclude: /(node_modules|bower_components)/,

loader: 'babel'

}

]

}

};

Main.js

var React = require('react');
var RouteHandler = require('react-router').RouteHandler;

var Main = React.createClass({
	render: function () {
		return (
			<div className="main-container">
				<nav className="navbar navbar-default" role="navigation">
					<div className="col-sm-7 col-sm-offset-2" style={{marginTop: 15}}>
						Menu
					</div>
				</nav>
				<div className="container">
					<RouteHandler />
				</div>
			</div>
		)
	}
});

// We don't want this file to decide when to render this component,
// so we are removing it
//React.render(<Main />, document.getElementById('app'));

// Instead we are going to expert the compontent, so that whenever you
// do require('Main') it will render the compontent above.
module.exports = Main;

var React = require('react');

var RouteHandler = require('react-router').RouteHandler;

var Main = React.createClass({

render: function () {

return (

</div>

</nav>

</div>

)

}

});

// We don't want this file to decide when to render this component,

// so we are removing it

//React.render(<Main />, document.getElementById('app'));

// Instead we are going to expert the compontent, so that whenever you

// do require('Main') it will render the compontent above.

module.exports = Main;

Home.js

var React = require('react');

var Home = react.createClass({
	render: function () {
		return (
			<h2 className="text-center">
				Search by Github Username Above
			</h2>
		)
	}
});

module.exports = Home;