9 July 2015 – Building a React.JS App – Part 3

Part 3 – Sate, Props and Thinking in React

Learning about:

How the child and parent components communicate and how you pass data between them;
How to pass data to the parent component;
Strengthening the understanding of defining components and integrating them together within the app;
Extending the router to receive variables and pass them within the components.

routes.js

var React = require('react');
var Main = require('../components/Main');
var Home = require('../components/Home');
var Profile = require('../components/Profile');
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}>
		<Route name="profile" path="profile/:username" handler={Profile} />
		<DefaultRoute handler={Home} />
	</Route>
);

var React = require('react');

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

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

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

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>

);

Profile.js

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

var Repos = require('./Github/Repos.js');
var UserProfile = require('./Github/UserProfile.js');
var Notes = require('./Notes/Notes.js');

var Profile = React.createClass({
	
	mixins: [Router.State], // Allows to query the route parameter and to get the specific username
	getInitialState: function () {
		return {
			notes: ['noe1', 'note2'],
			bio: {name: 'Smilyan'},
			repos: [1,2,3]
		}
	},
	render: function () {
		var username = this.getParams().username; // "username" is what we use in the route URL in routes.js
		return (
			<div className="row">
				<div className="col-md-4">
					<UserProfile username={username} bio={this.state.bio} />
				</div>
				<div className="col-md-4">
					<Repos username={username} repos={this.state.repos} />
				</div>
				<div className="col-md-4">
					<Notes username={username} notes={this.state.notes} />
				</div>
			</div>
		)
	}
});

module.exports = Profile;

var React = require('react');

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

var Repos = require('./Github/Repos.js');

var UserProfile = require('./Github/UserProfile.js');

var Notes = require('./Notes/Notes.js');

var Profile = React.createClass({

mixins: [Router.State], // Allows to query the route parameter and to get the specific username

getInitialState: function () {

return {

notes: ['noe1', 'note2'],

bio: {name: 'Smilyan'},

repos: [1,2,3]

}

render: function () {

var username = this.getParams().username; // "username" is what we use in the route URL in routes.js

return (

</div>

</div>

</div>

)

}

});

module.exports = Profile;

Repos.js

var React = require('react');

var Repos = React.createClass({
	render: function () {
		return (
			<div>
				Repos <br />
				Username: {this.props.username} <br />
				REPOS: {this.props.repos}
			</div>
		)
	}
});

module.exports = Repos;

var React = require('react');

var Repos = React.createClass({

render: function () {

return (

<div>

Repos <br />

Username: {this.props.username} <br />

REPOS: {this.props.repos}

</div>

)

}

});

module.exports = Repos;

UserProfile.js

var React = require('react');

var UserProfile = React.createClass({
	render: function () {
		return (
			// Each component can have it's own state, but when it receives it's
			// state from the parent component this is called props
			
			// These are the names of the props, because in the main component Profile.js
			// We have passed them as such: <UserProfile username={username} bio={this.state.bio} />
			<div>
				User Profile <br />
				Username: {this.props.username} <br />
				Bio: {this.props.bio}
			</div>
		)
	}
});

module.exports = UserProfile;

var React = require('react');

var UserProfile = React.createClass({

render: function () {

return (

// Each component can have it's own state, but when it receives it's

// state from the parent component this is called props

// These are the names of the props, because in the main component Profile.js

// We have passed them as such: <UserProfile username={username} bio={this.state.bio} />

<div>

User Profile <br />

Username: {this.props.username} <br />

Bio: {this.props.bio}

</div>

)

}

});

module.exports = UserProfile;

Notes.js

var React = require('react');

var Notes = React.createClass({
	render: function () {
		return (
			<div>
				Notes <br />
				Username: {this.props.username} <br />
				NOTES: {this.props.notes}
			</div>
		)
	}
});

module.exports = Notes;