19 July 2015 – Building a React.JS App – Part 11

Part 11: ES6 Refactor Non Components

Module system in ES6
Structuring
Template strings – http://url/${}
Arrow function in ES6 – () => {}

helpers.js

import axios from 'axios';

function getRepos (username) {
	return axios.get(`https://api.github.com/users/${username}/repos`);
}

function getUserInfo (username) {
	return axios.get(`https://api.github.com/users/${username}`);
}

var helpers = {
	getGithubInfo(username) {
		return axios.all([getRepos(username), getUserInfo(username)]) // Waiting for both "promises" to be resolved before it returns an array of data to .then
			.then((arr) => { // Benefit of the arrow function is that the context of .then is the same as the one inside the arrow function
				return {
					repos: arr[0].data,
					bio: arr[1].data
				}
			});
	}
};

export default helpers;

import axios from 'axios';

function getRepos (username) {

return axios.get(`https://api.github.com/users/${username}/repos`);

}

function getUserInfo (username) {

return axios.get(`https://api.github.com/users/${username}`);

}

var helpers = {

getGithubInfo(username) {

return axios.all([getRepos(username), getUserInfo(username)]) // Waiting for both "promises" to be resolved before it returns an array of data to .then

.then((arr) => { // Benefit of the arrow function is that the context of .then is the same as the one inside the arrow function

return {

repos: arr[0].data,

bio: arr[1].data

}

});

}

};

export default helpers;

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'));

});

routes.js

import React from 'react';
import Main from '../components/Main';
import Home from '../components/Home';
import Profile from '../components/Profile';

import { Router, Route, DefaultRoute } from 'react-router';

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

export default (
	<Route name="app" path="/" handler={Main}>
		<Route name="profile" path="profile/:username" handler={Profile} />
		<DefaultRoute handler={Home} />
	</Route>
);