22 July 2015 – Building a React.JS App – Part 14

Part 14: ES6 Refactor Routing without Mixins

Home.js

import React from 'react';

class Home extends React.Component {
	render () {
		return (
			<h2 className="text-center">
				Search by Github Username Above
			</h2>
		)
	}
};

export default Home; 

/*var React = require('react');

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

module.exports = Home;*/

import React from 'react';

class Home extends React.Component {

render () {

return (

Search by Github Username Above

</h2>

)

}

};

export default Home;

/*var React = require('react');

var Home = React.createClass({

render: function () {

return (

Search by Github Username Above

</h2>

)

}

});

module.exports = Home;*/

Main.js

import React from 'react';
import { RouteHandler } from 'react-router';
import SearchGithub from './SearchGithub'; 

class Main extends React.Component {
	render () {
		return (
			<div className="main-container">
				<nav className="navbar navbar-default" role="navigation">
					<div className="col-sm-7 col-sm-offset-2" style={{marginTop: 15}}>
						<SearchGithub />
					</div>
				</nav>
				<div className="container">
					<RouteHandler {...this.props} />
				</div>
			</div>
		)
	}
}

export default Main;

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

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}}>
						<SearchGithub />
					</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;*/

import React from 'react';

import { RouteHandler } from 'react-router';

import SearchGithub from './SearchGithub';

class Main extends React.Component {

render () {

return (

</div>

</nav>

</div>

)

}

export default Main;

/*var React = require('react');

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

var SearchGithub = require('./SearchGithub');

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;*/

app.js

import React from 'react';
import Router from 'react-router';
import routes from './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'));
});*/

Router.run(routes, (Root, state) => {
	React.render (<Root {...state} />, document.getElementById('app'));
});

import React from 'react';

import Router from 'react-router';

import routes from './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'));

});*/

Router.run(routes, (Root, state) => {

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

});

SearchGithub.js

import React from 'react';

class SearchGithub extends React.Component {
	handleSubmit () {
		// We pass the router through this.context so that we can use it with the
		// .transitionTo method as this. is not referring to the mixing function in our ES6 refactor 
		var router = this.context.router;
		var username = this.refs.username.getDOMNode().value;
		this.refs.username.getDOMNode().value='';
		router.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property
	}
	render () {
		return (
			<div className="col-sm-12">
				<form onSubmit={this.handleSubmit.bind(this)}>
					<div className="form-group col-sm-7">
						<input type="text" className="form-control" ref="username" />
					</div>
					<div className="form-group col-sm-5">
						<button type="submit" className="btn btn-block btn-primary">Search Github</button>
					</div>
				</form>
			</div>
		)
	}
};


// Because in ES6 we can't use mixins, we need to pass the function to the component
// through the property contextTypes which then can access the function within the component
SearchGithub.contextTypes = {
	router: React.PropTypes.func.isRequired
};

export default SearchGithub;

/*var React = require('react');
var Router = require('react-router');

var SearchGithub = React.createClass({
	mixins: [Router.Navigation],
	handleSubmit: function () {
		var username = this.refs.username.getDOMNode().value;
		this.refs.username.getDOMNode().value='';
		this.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property
		// We pass the route we want to transition to - in routes.js we defined the router as "profile" = <Route name="profile" path="profile/:username" handler={Profile} />
	},
	render: function () {
		return (
			<div className="col-sm-12">
				<form onSubmit={this.handleSubmit}>
					<div className="form-group col-sm-7">
						<input type="text" className="form-control" ref="username" />
					</div>
					<div className="form-group col-sm-5">
						<button type="submit" className="btn btn-block btn-primary">Search Github</button>
					</div>
				</form>
			</div>
		)
	}
});

module.exports = SearchGithub;*/

import React from 'react';

class SearchGithub extends React.Component {

handleSubmit () {

// We pass the router through this.context so that we can use it with the

// .transitionTo method as this. is not referring to the mixing function in our ES6 refactor

var router = this.context.router;

var username = this.refs.username.getDOMNode().value;

this.refs.username.getDOMNode().value='';

router.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property

}

render () {

return (

</div>

<button type="submit" className="btn btn-block btn-primary">Search Github</button>

</div>

</form>

</div>

)

}

};

// Because in ES6 we can't use mixins, we need to pass the function to the component

// through the property contextTypes which then can access the function within the component

SearchGithub.contextTypes = {

router: React.PropTypes.func.isRequired

};

export default SearchGithub;

/*var React = require('react');

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

var SearchGithub = React.createClass({

mixins: [Router.Navigation],

handleSubmit: function () {

var username = this.refs.username.getDOMNode().value;

this.refs.username.getDOMNode().value='';

this.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property

// We pass the route we want to transition to - in routes.js we defined the router as "profile" = <Route name="profile" path="profile/:username" handler={Profile} />

render: function () {

return (

</div>

<button type="submit" className="btn btn-block btn-primary">Search Github</button>

</div>

</form>

</div>

)

}

});

module.exports = SearchGithub;*/