Simple React.js example
// to run this use: https://jscomplete.com/repl | |
import React from 'react'; | |
import { render } from 'react-dom'; | |
const Card = (props) => { | |
return ( | |
<div style={{margin: '1em'}}> | |
<img width="75" src={props.avatar_url} /> | |
<div style={{display: 'inline-block', marginLeft: 10}}> | |
<div style={{fontSize: '1.25em', fontWieght: 'bold'}}> | |
{props.name} | |
</div> | |
<div>{props.company}</div> | |
</div> | |
</div> | |
); | |
}; | |
let data = [ | |
{ | |
name: "Paul O’Shannessy", | |
avatar_url: "https://avatars1.githubusercontent.com/u/8445?v=4", | |
company: "Facebook" | |
}, | |
{ | |
name: "Gyuris Gellért", | |
avatar_url: "https://avatars0.githubusercontent.com/u/847982?v=4", | |
company: "Szent András Evangelizációs Alapítvány" | |
}, | |
{ | |
"avatar_url": "https://avatars1.githubusercontent.com/u/790821?v=4", | |
"name": "gyurisc", | |
"company": null, | |
"blog": "http://www.littlebigtomatoes.com/", | |
"location": "Budapest" | |
} | |
]; | |
const CardList = (props) => { | |
return ( | |
<div> | |
{props.cards.map(card => <Card key={card.id} {...card} />)} | |
</div> | |
); | |
}; | |
class Form extends React.Component { | |
state = { userName: '' } | |
handleSubmit = (event) => { | |
event.preventDefault(); | |
axios.get(`https://api.github.com/users/${this.state.userName}`) | |
.then(resp => { | |
this.props.onSubmit(resp.data); | |
this.setState({ userName: '' }); | |
}); | |
}; | |
render () { | |
return ( | |
<form onSubmit={this.handleSubmit}> | |
<input type="text" | |
value={this.state.userName} | |
onChange={(event) => this.setState({ userName: event.target.value })} | |
placeholder="Github username" /> | |
<button>Add card</button> | |
</form> | |
); | |
} | |
} | |
class App extends React.Component { | |
state = { | |
cards: [] | |
}; | |
addNewCard = (cardInfo) => { | |
this.setState(prevState => ({ | |
cards: prevState.cards.concat(cardInfo) | |
})); | |
}; | |
render() { | |
return ( | |
<div> | |
<Form onSubmit={this.addNewCard} /> | |
<CardList cards={this.state.cards} /> | |
</div> | |
); | |
} | |
} | |
ReactDOM.render(<App />, mountNode); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment