Archive until 15 Jul 2021/Learning React

React - Babel and JSX

hajinny 2021. 1. 2. 14:41 
<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>