ReactJS: Web App Development: Learn one of the most popular Javascript libraries by Daniel Green

Author:Daniel Green
Language: eng
Format: mobi
Published: 2016-03-28T21:00:00+00:00

Just write the following Javascript code:

varAttributeCategoryRow = React.createClass({

render: function() {

return (<tr><thcolSpan="2">{this.props.category}</th></tr>);

}

});

varAttributeRow = React.createClass({

render: function() {

var name = this.props.attribute.stocked ?

this.props.attribute.name :

<span style={{color: 'red'}}>

{this.props.attribute.name}

</span>;

return (

<tr>

<td>{name}</td>

<td>{this.props.attribute.value}</td>

</tr>

);

}

});

varAttributeTable = React.createClass({

render: function() {

var rs = [];

varl Category = null;

this.props.attributes.forEach(function(attribute) {

if (attribute.category !== lCategory) {

rs.push(<AttributeCategoryRow category={attribue.category} key={attribute.category} />);

}

rs.push(<AttributeRow attribute={attribute} key={attribute.name} />);

lCategory = attribute.category;

});

return (

<table>

<thead>

<tr>

<th>Attribute</th>

<th>Value</th>

</tr>

</thead>

<tbody>{rs}</tbody>

</table>

);

}

});

varSBar = React.createClass({

render: function() {

return (

<form>

<input type="text" placeholder="Search..." />

<p>

<input type="checkbox" />

{' '}

Show the available students only

</p>

</form>

);

}

});

varFAttributeTable = React.createClass({

render: function() {

return (

<div>

<SearchBar />

<AttributeTable attributes={this.props.attributes} />

</div>

);

}

});

var ATTRIBUTES = [

{category: 'Form 1', price: '12', stocked: true, name: 'Male'},

{category: 'Form 1', price: '14', stocked: true, name: 'Female'},

{category: 'Form 1', price: '15', stocked: false, name: 'footballers'},

{category: 'Form 2', price: '17', stocked: true, name: 'Male students'},

{category: 'Form 2', price: '14', stocked: false, name: 'Female students'},

{category: 'Form 2', price: '20', stocked: true, name: 'football students'}

];

React.render(<FAttributeTable attributes={ATTRIBUTES} />, document.body);

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.