<script>
const e = React.createElement;
class LikeButton extends React.Component{
constructor(props){
super(props);
this.state = {
liked: false
};
}
render(){
return e('button', {
onClick:()=>{this.setState({liked: true})}
},{this.state.liked ? 'Liked': 'Like'});
}
}
</script>So this is how you might create a component in React in the older days.
But with the help of Babel, we can use a syntax called 'JSX', which is Javascript + XML
<head>
...
<script src="unpkg.com/babel...">
</head>
<script type="text/babel">
class LikeButton extends React.Component{
constructor(props){
super(props);
this.state = {
liked: false
};
}
render(){
return <button type="submit" onClick={()=>this.setState({liked:true})>
{this.state.liked ? 'Liked':'Like'}
</button>
}
}
</script>
<script type="text/babel">
ReactDOM.render(<LikeButton />,document.querySelector('#root'));
</script>'Archive until 15 Jul 2021 > Learning React' 카테고리의 다른 글
| UseContext (0) | 2021.01.07 |
|---|---|
| React - switching from class way to functional way (ft. hooks) (0) | 2021.01.02 |
| React - ref (0) | 2021.01.02 |
| React - times table (0) | 2021.01.02 |
| How react integrates with html code (0) | 2021.01.02 |