Part 9: Rendering UI from dynamic data
Repos.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var React = require('react'); var Repos = React.createClass({ // Validate that the component is receiving the required props (data) propTypes: { username: React.PropTypes.string.isRequired, repos: React.PropTypes.array.isRequired }, render: function () { var repos = this.props.repos.map(function (repo, index) { return ( <li className="list-group-item" key={index}> {repo.html_url && <h4><a href={repo.html_url}>{repo.name}</a></h4>} {repo.description && <p> {repo.description} </p>} </li> ) }); return ( <div> <h3>User repos </h3> <ul className="list-group"> {repos} </ul> </div> ) } }); module.exports = Repos; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var React = require('react'); var UserProfile = React.createClass({ propTypes: { username: React.PropTypes.string.isRequired, bio: React.PropTypes.object.isRequired }, 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> <h3> User Profile </h3> <ul className="list-group"> {this.props.bio.avatar_url && <li className="list-group-item"><img serc={this.props.bio.avatar_url} className="" /></li>} {this.props.bio.name && <li className="list-group-item">Name: {this.props.bio.name}</li>} {this.props.bio.login && <li className="list-group-item">Username: {this.props.bio.username}</li>} {this.props.bio.email && <li className="list-group-item">Email: {this.props.bio.email}</li>} {this.props.bio.location && <li className="list-group-item">Location: {this.props.bio.location}</li>} {this.props.bio.company && <li className="list-group-item">Company: {this.props.bio.company}</li>} {this.props.bio.followers && <li className="list-group-item">Followers: {this.props.bio.followers}</li>} {this.props.bio.following && <li className="list-group-item">Following: {this.props.bio.following}</li>} {this.props.bio.public_repos && <li className="list-group-item">Public repos: {this.props.bio.public_repos}</li>} {this.props.bio.blog && <li className="list-group-item">Blog: <a href={this.props.bio.blog}>{this.props.bio.blog}</a></li>} </ul> </div> ) } }); module.exports = UserProfile; |
