Part 13: Building a React App: ES6 Refactor propTypes in ES6
UserProfile.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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import React from 'react'; class UserProfile extends React.Component { render () { return ( <div> <h3> User Profile </h3> <ul className="list-group"> {this.props.bio.avatar_url && <li className="list-group-item"><img src={this.props.bio.avatar_url} /></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> ) } } UserProfile.propTypes = { username: React.PropTypes.string.isRequired, bio: React.PropTypes.object.isRequired } export default UserProfile; /*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 src={this.props.bio.avatar_url} /></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;*/ |
|
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React from 'react'; class Repos extends React.Component { render () { var repos = this.props.repos.map((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> ) } } Repos.propTypes = { username: React.PropTypes.string.isRequired, repos: React.PropTypes.array.isRequired } export default Repos; /*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 |
import React from 'react'; class NotesList extends React.Component{ render () { var notes = this.props.notes.map((note, index) => { return <li className="list-group-item" key={index}>{note}</li> }); return ( <ul className="list-group"> {notes} </ul> ) } }; /*var NotesList = React.createClass({ render: function () { var notes = this.props.notes.map(function (note, index) { return <li className="list-group-item" key={index}>{note}</li> }); return ( <ul className="list-group"> {notes} </ul> ) } });*/ export default NotesList; //module.exports = NotesList; |
|
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React from 'react'; class AddNote extends React.Component { HandleSubmit () { var newNote = this.refs.note.getDOMNode().value; // This is getting the value from the input below with a ref="note" this.refs.note.getDOMNode().value = ''; this.props.addNote(newNote); } // Don't have to put commas - technically not in an object render () { return ( <div className="input-group"> <input type="text" className="form-control" ref="note" placeholder="Add New Note" /> <span className="input-group-btn"> <button type="submit" className="btn btn-default" onClick={this.handleSubmit.bind(this)}>Add Note</button> </span> </div> ) } }; AddNote.propTypes = { username: React.PropTypes.string.isRequired, addNote: React.PropTypes.func.isRequired }; export default AddNote; /*var AddNote = React.createClass({ propTypes: { username: React.PropTypes.string.isRequired, addNote: React.PropTypes.func.isRequired }, handleSubmit: function () { var newNote = this.refs.note.getDOMNode().value; // This is getting the value from the input below with a ref="note" this.refs.note.getDOMNode().value = ''; this.props.addNote(newNote); }, render: function () { return ( <div className="input-group"> <input type="text" className="form-control" ref="note" placeholder="Add New Note" /> <span className="input-group-btn"> <button type="submit" className="btn btn-default" onClick={this.handleSubmit}>Add Note</button> </span> </div> ) } }); module.exports = AddNote;*/ |
