Category: JavaScript

React / Client side routing – Path component

May 11, 2014 by Daniel Kos·0 Comments

React is view only library. I really like that it doesn’t try to be a full stack solution. Thanks to that it’s easy to fill the gaps with the library you know and prefer. And routing is one of those gap. In my first react’s app I simply took a look at complementary tools page and chose directorjs for a start. It worked well although very soon I stumbled across few annoying bugs (like not calling route action on init). Workarounds exist but looks like author has no time recently to provide proper fixes. But bugs are not a problem actually. Directorjs simply doesn’t fit conceptually to react. They are two different worlds. So I looked further. The next promising library was react router component. Composable routes in a way one compose react’s comonents was exactly what I was looking for. Unfortunately I have to give up on it because it was a nodejs component and I needed simple and pure javascript solution. And it was too big for my needs. Finally I decided to create my own routing component. Of course it doesn’t have so many features – for example it lacks server side routing (I use scala and spray for that) or server side component rendering but it solves client side routing (for now without supporting html5 history). Sources can be find here: https://github.com/unodgs/react-path-router. Screenshot from github demo:

And the demo source file:

/** @jsx React.DOM */
var About = React.createClass({
	render: function() {
		return (
			<h1>This is a routing demo!</h1>
		);
	}
});

var UserList = React.createClass({
	render: function() {
		var _this = this;

		var users = [
			{id: 1001, username: 'unodgs', password: 'topsecret', firstName: 'Daniel', lastName: 'Kos'},
			{id: 1002, username: 'admin', password: 'admin', firstName: 'Jack', lastName: 'Strong'},
			{id: 1003, username: 'mike', password: 'mike123', firstName: 'Mike', lastName: 'Weak'},
			{id: 1004, username: 'frodo', password: 'ppp222', firstName: 'Michael', lastName: 'Watson'}
		];

		var usersHtml = _.map(users, function(u) {
			return (
				<tr>
					<td>{u.username}</td>
					<td>{u.password}</td>
					<td>{u.firstName}</td>
					<td>{u.lastName}</td>
					<td><A url={_this.props.componentUrl} path={"edit/" + u.id}>Edit</A></td>
				</tr>
			);
		});

		return (
			<table className="table">
				<thead>
					<th>Username</th>
					<th>Password</th>
					<th>First name</th>
					<th>Last name</th>
					<th></th>
				</thead>
				<tbody>
					{usersHtml}
				</tbody>
			</table>
		);
	}
});

var UserEdit = React.createClass({
	render: function() {
		return (
			<Paths>
				<Path url={this.props.url} name="/">
					<form role="form">
						<div className="form-group">
							<label>Username</label>
							<input className="form-control"/>
						</div>
						<div className="form-group">
							<label>Password</label>
							<input type="password" className="form-control"/>
						</div>
						<div className="form-group">
							<label>First name</label>
							<input className="form-control"/>
						</div>
						<div className="form-group">
							<label>Last name</label>
							<input className="form-control"/>
						</div>
						<A className="btn btn-default" url={this.props.componentUrl} path="addfriend">Add friend</A>
					</form>
				</Path>
				<Path url={this.props.url} name="/addfriend">
					<h1>Adding friend form :)</h1>
				</Path>
			</Paths>
		);
	}
});

var UsersModule = React.createClass({
	render: function() {
		return (
			<Paths>
				<Path url={this.props.url} name="/" render={UserList}/>
				<Path url={this.props.url} name="edit/:userId" render={UserEdit}/>
			</Paths>
		);
	}
});

var ClientsModule = React.createClass({
	render: function() {
		return (
			<h1>This is a client list!</h1>
		);
	}
});

var App = React.createClass({
	render: function() {
		var menu = [
			{
				url: 'users',
				name: 'Users'
			},
			{
				url: 'clients',
				name: 'Clients'
			},
			{
				url: 'about',
				name: 'About'
			}
		];

		var _this = this;

		var drawMenu = function(menu) {
			var mm = _.map(menu, function(m) {
				var currentUrl = PathUtils.current();
				var menuUrl = PathUtils.combine(_this.props.parentUrl, m.url);

				return (
					<li className={menuUrl === currentUrl ? "active": ""}>
						<A url={_this.props.componentUrl} path={m.url}>{m.name}</A>
					</li>
				);
			});
			return (
				<nav className="navbar navbar-default navbar-top" role="navigation">
					<ul className="nav navbar-nav">{mm}</ul>
				</nav>
			);
		};

		var menuHtml = drawMenu(menu);

		return (
			<div>
				{menuHtml}
				<div className="container">
					<Path url={this.props.url} name="users" render={UsersModule}/>
					<Path url={this.props.url} name="clients" render={ClientsModule}/>
					<Path url={this.props.url} name="about" render={About}/>
				</div>
			</div>
		);
	}
});

PathInit(<App/>, document.body);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

/** @jsx React.DOM */

var About = React.createClass({

render: function() {

return (

<h1>This is a routing demo!</h1>

);

}

});

var UserList = React.createClass({

render: function() {

var _this = this;

var users = [

{id: 1001, username: 'unodgs', password: 'topsecret', firstName: 'Daniel', lastName: 'Kos'},

{id: 1002, username: 'admin', password: 'admin', firstName: 'Jack', lastName: 'Strong'},

{id: 1003, username: 'mike', password: 'mike123', firstName: 'Mike', lastName: 'Weak'},

{id: 1004, username: 'frodo', password: 'ppp222', firstName: 'Michael', lastName: 'Watson'}

];

var usersHtml = _.map(users, function(u) {

return (

<tr>

<td>{u.username}</td>

<td>{u.password}</td>

<td>{u.firstName}</td>

<td>{u.lastName}</td>

</tr>

);

});

return (

<thead>

<th>Username</th>

<th>Password</th>

<th>First name</th>

</thead>

<tbody>

{usersHtml}

</tbody>

</table>

);

}

});

var UserEdit = React.createClass({

render: function() {

return (

<Paths>

<label>Username</label>

</div>

<label>Password</label>

</div>

<label>First name</label>

</div>

</div>

<A className="btn btn-default" url={this.props.componentUrl} path="addfriend">Add friend</A>

</form>

</Path>

<h1>Adding friend form :)</h1>

</Path>

</Paths>

);

}

});

var UsersModule = React.createClass({

render: function() {

return (

<Paths>

</Paths>

);

}

});

var ClientsModule = React.createClass({

render: function() {

return (

<h1>This is a client list!</h1>

);

}

});

var App = React.createClass({

render: function() {

var menu = [

{

url: 'users',

{

url: 'clients',

{

url: 'about',

}

];

var _this = this;

var drawMenu = function(menu) {

var mm = _.map(menu, function(m) {

var currentUrl = PathUtils.current();

var menuUrl = PathUtils.combine(_this.props.parentUrl, m.url);

return (

</li>

);

});

return (

</nav>

);

};

var menuHtml = drawMenu(menu);

return (

<div>

{menuHtml}

</div>

);

}

});

PathInit(<App/>, document.body);

To initialize router PathInit function must be used. First argument is the main react component instance and the second is a dom node to which rendered component will be attached to. Having done that in App component we can now use <Path/>.

<Path url={this.props.url} name="users" render={UsersModule}/>
<Path url={this.props.url} name="/clients" render={ClientsModule}/>
<Path url={this.props.url} name="about/" render={About}/>

url is a constant attribute that must be passed to the Path to allow it properly analyze the url. It contains previous part of an url that was matched in the parent component and the “next url” that will be parsed in the context of current component (component that Path belongs to). I hope React authors allow in the future to define attributes that are automatically transferred from parent component. That would allow to avoid this boilerplate making Path declaration clearer. Anyway for now url is required to be provided by the user. Second attribute name defines part of the url that must be matched to render component pointed by render attribute. Name don’t distinguish between /clients, clients/ and clients. They are all equivalent. Name can also contains many parts: /clients/new, /clients/under/32 and so on. What’s more interesting it can contains parameters like that:

/client/:id
/group/:groupName/user/:userId

If such an url is matched, every parameter that was found is passed to the rendered component in it’s props. In the case above id would be accessed by this.props.id and the gorupName by this.props.groupName.

Path also passes one more parameter in the props of rendered component. It’s a componentUrl and it contains current component’s url. In the combination with an A component it can be used to build links in a safe way (that means you won’t need to change urls everywhere if for example one of the parent component’s name will change). In the example it’s used like this:

<li className={menuUrl === currentUrl ? "active": ""}>
	<A url={_this.props.componentUrl} path={m.url}>{m.name}</A>
</li><span style="background-color: #ffffff; font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.625;"> </span>

</li><span style="background-color: #ffffff; font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.625;"> </span>

Sometimes instead of building separate components and passing them as render attribute in many Paths it’s easier to choose what to render directly in one component.

<Paths>
	<Path url={this.props.url} name="/tab0">
		Content of the first tab
	</Path>
	<Path url={this.props.url} name="/tab1">
		Content of the second tab
	</Path>
</Paths>

<Paths>

Content of the first tab

</Path>

Content of the second tab

</Path>

</Paths>

Paths can be replaced with anything (<div> for example). It’s there only because in react you cannot return tags without common parent.

And pretty much that’s all :). I certainly will keep on working on Path component but I think it’s a good start for everyone that would like to develop something similar adjusted to his requirements. The current code is only 196 lines and should be easy to follow. See you.

React / Form component II

May 4, 2014 by Daniel Kos·0 Comments

I’ve been working on my form component and here it is: https://github.com/unodgs/react-semanticui-forms. Of course this is still work in progress and it’s missing few essential parts like select tag or better form definition errors handling but I’m already using it in my apps so why not you ;). Below screenshot from example app (from github repo):

Since the last time I made following changes:

ref is no longer needed in Submit declaration
data property was changed to dataFn. Now it points to this.dataFn (that comes from FormMixin). Unfortunately there is no (known to me) way of making it unnecessary (provided implicitly by Form component). But I can live with that – I hope future versions of react will make it possible.
dataFn must be provided in every component (including Form)

This is the code of the form from the screenshot:

var PersonalDataForm = React.createClass({
	mixins: [FormMixin],
	render: function() {
		return (
			<Form errorMsg={this.state.errorMsg} successMsg={this.state.successMsg} header="Personal data" formFn={this.formFn} ref="form" visible={this.props.visible}>
				<div className="two fields">
					<TextField label="First name" ref="firstName" formFn={this.formFn} notEmpty/>
					<TextField label="Last name" ref="lastName" formFn={this.formFn} notEmpty/>
				</div>
				<EmailField label="Email" ref="email" formFn={this.formFn} notEmpty/>
				<TextField label="Username" ref="userName" formFn={this.formFn} notEmpty/>
				<div className="two fields">
					<PasswordField label="Password" ref="password" formFn={this.formFn} notEmpty minLength="6"/>
					<PasswordField label="Repeat password" ref="repeat" valueFrom="password" formFn={this.formFn} notEmpty matchRef="password"/>
				</div>
				<Submit formFn={this.formFn}/>
			</Form>
		);
	}
});

var PersonalDataForm = React.createClass({

mixins: [FormMixin],

render: function() {

return (

</div>

</div>

</Form>

);

}

});

For now my form component is strictly connected with semantic ui css framework but I’m working on make it css independent. I hope you’ll find it useful. I’m aware of others similar components but none of them fits my needs. What I was missing the most was inability to freely mix form inputs with form layout. See you soon.

React / Form component

April 29, 2014 by Daniel Kos·0 Comments

As you probably already know React is quite a new gamer in SPA world. In contrast to AngularJS it prefers functional approach to deal with complex and interactive UI. After creating two projects with Angular I decided to try it out with my new application. I will describe overall impression later, here I want to share my problems with form component.

My application consists of many forms like settings, user profile, registration panel etc. Each of them:

has input elements and submit button
loads initial data via ajax
stores entered data via ajax
blocks form during ajax calls
has nice progress indicator

I could create each of those form in classical way described in react documentation but that would be cumbersome and generated too much code. This is what I wanted to achieve:

var PersonalDataForm = React.createClass({
	onSuccess: function(data) {
		return "Form saved successfully";
	},
	onError: function(e) {
		if(e.status == 101)
			return "Duplicate user name";
		else
			return null;
	},
	render: function() {
		return(
			<Formu url='/api/account/personal' onScucces={this.onSuccess} onError={this.onError}>
				<div className="two fields">
					<TextField label="First name" ref="firstName" notEmpty/>
					<TextField label="Last name" ref="lastName" notEmpty/>
				</div>
				<EmailField label="Email" ref="email" notEmpty/>
				<TextField label="Username" ref="userName" notEmpty/>
				<div className="two fields">
					<PasswordField label="Password" ref="password" notEmpty minLength="6"/>
					<PasswordField label="Repeat password" ref="repeat" notEmpty matchRef="password" errorMsg="Repeated password does not match"/>
				</div>
				<SubmitButton/>
			</Form>
		);
	}
});

var PersonalDataForm = React.createClass({

onSuccess: function(data) {

return "Form saved successfully";

onError: function(e) {

if(e.status == 101)

return "Duplicate user name";

else

return null;

render: function() {

return(

</div>

</div>

</Form>

);

}

});

Every kind of html input is wrapped in a react component that stores input type, its value and other necessary parameters as well as internal state if component is a little bit complex. Then Form component iterates over its children, creates validation rules for validation plugin (which in my case comes from http://semantic-ui.com) and responds to submit button. Form component is also responsible for loading and saving form data from url passed through url attribute.

I was really surprised that such a functionality is impossible to achieve in react (at least in current version). Of course that might be my fault and I would be thankful if someone shared a similar component that is working. So what is the problem? The problem is parent – children communication. Let’s take a look at a Form component (simplified version):

var Form = React.createClass({
	getInitialState: function() {
		...
	},
	buildValidationRules: function(child) {
		...
	},
	componentDidMount: function() {
		var validationRules = Utils.processChildren(this.buildValidationRules);

		var node = this.refs.formular.getDOMNode();
		var formNode = $('.form', node);
		var _this = this;

		$(this.refs.formular.getDOMNode()).form(
			validationRules, {
				onSuccess: function() {
					var fields = $(':input', formNode).serializeJSON();
					var fieldsJson = JSON.stringify(fields);
					$(':input', formNode).attr("disabled", true);
	
					$.ajax({
						url: _this.props.url || _this.props.submitUrl,
						dataType: 'json',
						contentType: "application/json",
						type: 'POST',
						data: fieldsJson,
						complete: function() {
							$(':input', formNode).attr("disabled", false);
						},
						error: function(e) {
							var errorMsg = null;
							if(_this.props.onError)
								errorMsg = _this.onError(e);
							_this.setState({errorMsg: errorMsg ? errorMsg : e.statusText});
						},
						success: function(data) {
							var successMsg = null;
							if(_this.onSuccess)
								successMsg = _this.onSuccess(data);
							_this.setState({successMsg: successMsg});
						}
					});
				}
			}
		);
	},
	render: function() {
		return (
			<div>
				<div className="ui small attached message error login" style={{display: this.props.errorMsg ? 'block' : 'none'}}>
					<div className="header">{this.props.errorMsg}</div>
				</div>
				<div className="ui small form attached fluid segment" ref="formular">
					{this.props.children}
				</div>
				<div className="ui small bottom attached info message" style={{display: this.props.successMsg ? 'block' : 'none'}}>
					{this.props.successMsg}
				</div>
			</div>

		);
	}
});

var Form = React.createClass({

getInitialState: function() {

...

buildValidationRules: function(child) {

...

componentDidMount: function() {

var validationRules = Utils.processChildren(this.buildValidationRules);

var node = this.refs.formular.getDOMNode();

var formNode = $('.form', node);

var _this = this;

$(this.refs.formular.getDOMNode()).form(

validationRules, {

onSuccess: function() {

var fields = $(':input', formNode).serializeJSON();

var fieldsJson = JSON.stringify(fields);

$(':input', formNode).attr("disabled", true);

$.ajax({

url: _this.props.url || _this.props.submitUrl,

dataType: 'json',

contentType: "application/json",

type: 'POST',

data: fieldsJson,

complete: function() {

$(':input', formNode).attr("disabled", false);

error: function(e) {

var errorMsg = null;

if(_this.props.onError)

errorMsg = _this.onError(e);

_this.setState({errorMsg: errorMsg ? errorMsg : e.statusText});

success: function(data) {

var successMsg = null;

if(_this.onSuccess)

successMsg = _this.onSuccess(data);

_this.setState({successMsg: successMsg});

}

});

}

);

render: function() {

return (

<div>

<div className="header">{this.props.errorMsg}</div>

</div>

{this.props.children}

</div>

{this.props.successMsg}

</div>

);

}

});

The most interesting part is {this.props.children}. In this property all the tags between <Form></Form> declared in PersonalDataForm are passed. One can iterate over them using React built in functions. Here’s my iteration helper (react’s foreach looks for children only one level deep in dom hierarchy):

Utils = {
	processChildren0: function(self, children, callback, data) {
		var _this = this;
		React.Children.forEach(children, function(child) {
			var tagName = child.type ? child.type.displayName : null;
			var refName = child.props && child.props.ref ? child.props.ref : null;
			callback(self, child, tagName, refName, data);
			if(_.isArray(child.props.children))
				_this.processChildren0(self, child.props.children, callback, data);
		});
	},
	processChildren: function(self, children, callback, data) {
		this.processChildren0(self, children, callback, data);
	}
};

Utils = {

processChildren0: function(self, children, callback, data) {

var _this = this;

React.Children.forEach(children, function(child) {

var tagName = child.type ? child.type.displayName : null;

var refName = child.props && child.props.ref ? child.props.ref : null;

callback(self, child, tagName, refName, data);

if(_.isArray(child.props.children))

_this.processChildren0(self, child.props.children, callback, data);

});

processChildren: function(self, children, callback, data) {

this.processChildren0(self, children, callback, data);

}

};

Unfortunately (in this case) Form component is not the owner of those children. The PeronalDataForm is. That has consequences. I can’t in Form update the children properties or transfer properties passed to Form (it’s a problem because this is the preferred way of communicating with children in react). Also if I would like to modify state of children I’m forced to use undocumented internals of react (that can change in feature versions) like __realComponentInstance (if that only worked 🙂 , the render method of child component still used previous state). What worked in the code above was validation as reading data from this.props.children was perfectly fine. What didn’t work was modifying props or state of children. I wasn’t able to load data from server and distribute it among children from within Form component.

I hope in future version communicating between children and parent will be addressed in some way or another. In the meantime I used mixins. Now PersonalDataForm looks like this:

var PersonalDataForm = React.createClass({
	mixins: [FormMixin],
	render: function() {
		return(
			<Form errorMsg={this.state.errorMsg} successMsg={this.state.successMsg} ref="form">
				<div className="two fields">
					<TextField label="First name" ref="firstName" data={this.state.data} notEmpty/>
					<TextField label="Last name" ref="lastName" data={this.state.data} notEmpty/>
				</div>
				<EmailField label="Email" ref="email" data={this.state.data} notEmpty/>
				<TextField label="Username" ref="userName" data={this.state.data} notEmpty/>
				<div className="two fields">
					<PasswordField label="Password" ref="password" data={this.state.data} notEmpty minLength="6"/>
					<PasswordField label="Repeat password" ref="repeat" data={this.state.data} notEmpty match={['password', 'Repeated password does not match']}/>
				</div>
				<Submit ref="submit"/>
			</Form>
		);
	}
});

var PersonalDataForm = React.createClass({

mixins: [FormMixin],

render: function() {

return(

</div>

</div>

</Form>

);

}

});

I simply inlined all the methods that previously were placed in the Form component into the PersonalDataForm. Now PersonalDataForm is the owner of all inputs and is able to manipulate them. I also gave up on iterating over children through this.props.children. Now I iterate over this.refs. That simplifies the code but requires providing ref attribute at every input wrapper. Another disadvantage is forcing user to mix in FormMixin in every form component and unnecessary code duplication because of that. User also has to pass this.state.data (which contains ajax data) everywhere, but the final effect is very similar to what I really wanted. I will post sources of my components soon.

Digital Software Blog

C++, Scala, Javascript, U++, ReactJS, Spray.io

Category: JavaScript

React / Client side routing – Path component

React / Form component II

React / Form component