Created
November 22, 2016 03:42
-
-
Save digitalmacgyver/4b5a2ddb388683bddf5c49df892212da to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
</head> | |
<body> | |
<div id="test"></div> | |
<script type="text/javascript" src="build/bundletest.js" charset="utf-8"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import ReactDOM from 'react-dom'; | |
import React from 'react'; | |
import update from 'immutability-helper'; | |
class AuthorList extends React.Component { | |
render() { | |
let authors = this.props.authors; | |
return ( | |
<div> | |
{ Object.keys( authors ).map( ( author_id ) => { | |
return <Author key={author_id} author={authors[author_id]} />; | |
} ) } | |
</div> | |
); | |
} | |
} | |
class Author extends React.Component { | |
render() { | |
if ( this.props.author.name === 'Bob Baker' ) { | |
alert( "Rendering Bob!" ); | |
} | |
return ( | |
<div> | |
<p>Name: {this.props.author.name}</p> | |
<p>Bio: {this.props.author.bio}</p> | |
</div> | |
); | |
} | |
} | |
class PublicationList extends React.Component { | |
render() { | |
console.log( 'Rendering PublicationList' ); | |
let authors = this.props.authors; | |
let publications = this.props.publications; | |
return ( | |
<div> | |
{ Object.keys( publications ).map( ( publication_id ) => { | |
return <Publication key={publication_id} publication={publications[publication_id]} authors={authors} />; | |
} ) } | |
</div> | |
); | |
} | |
} | |
class Publication extends React.Component { | |
render() { | |
console.log( 'Rendering Publication' ); | |
let authors = this.props.authors; | |
let publication_authors = this.props.publication.authors.reduce( function( obj, x ) { | |
obj[x] = authors[x]; | |
return obj; | |
}, {} ); | |
return ( | |
<div> | |
<p>Title: {this.props.publication.title}</p> | |
<div>Authors: | |
<AuthorList authors={publication_authors} /> | |
</div> | |
</div> | |
); | |
} | |
} | |
class TestApp extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
'authors': { | |
1: { | |
'name': 'Alice Author', | |
'bio': 'Alice initial bio.' | |
}, | |
2: { | |
'name': 'Bob Baker', | |
'bio': 'Bob initial bio.' | |
} | |
}, | |
'publications': { | |
1 : { | |
'title' : 'Two Authors', | |
'authors' : [ 1, 2 ] | |
}, | |
2 : { | |
'title' : 'One Author', | |
'authors' : [ 1 ] | |
} | |
} | |
}; | |
this.updateState = this.updateState.bind( this ); | |
} | |
updateState() { | |
let new_bio = this.state.authors['1'].bio + ' updated '; | |
this.setState( update( this.state, { 'authors' : { '1' : { 'bio' : {$set : new_bio } } } } ) ); | |
} | |
render() { | |
return ( | |
<div> | |
<p> | |
<span onClick={this.updateState}><b>Click to Change Alice!</b></span> | |
</p> | |
<div>Authors: | |
<AuthorList authors={this.state.authors} /> | |
</div> | |
<div>Publications: | |
<PublicationList authors={this.state.authors} publications={this.state.publications} /> | |
</div> | |
</div> | |
); | |
} | |
} | |
ReactDOM.render( | |
<TestApp />, | |
document.getElementById( 'test' ) | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment