Ui Functions Example
Here's an example of how react takes your function and returns it as a UI function.
var getProfilePic = function (username) { return 'https://photo.fb.com/' + username } var getProfileLink = function (username) { return 'https://www.fb.com/' + username } var getProfileData = function (username) { return { pic: getProfilePic(username), link: getProfileLink(username) } } getProfileData('tylermcginnis')
Converted to React UI with state
class ProfilePic extends React.Component { render() { return ( <img src={'https://photo.fb.com/' + this.props.username} /> ) } }) class ProfileLink extends React.Component { render() { return ( <a href={'https://www.fb.com/' + this.props.username}> {this.props.username} </a> ) } }) class Avatar extends React.Component { render() { return ( <div> <ProfilePic username={this.props.username} /> <ProfileLink username={this.props.username} /> </div> ) } }) <Avatar username="tylermcginnis" />
Stateless
var ProfilePic = function (props) { return <img src={'https://photo.fb.com/' + props.username} /> } var ProfileLink = function (props) { return ( <a href={'https://www.fb.com/' + props.username}> {props.username} </a> ) } var Avatar = function (props) { return ( <div> <ProfilePic username={props.username} /> <ProfileLink username={props.username} /> </div> ) } <Avatar username="tylermcginnis" />
page revision: 1, last edited: 01 Feb 2018 17:19