Introducing JSX : basic

JSX is much more strict that html, must be closed with </>

• <b>...</b>
• <img src='..' /> : self closing tag is must

if want to render several components, you need to wrap it up in div, section or form.

 

 

function getMood() {
	const moods = ['happy', 'angry', 'sad', 'silly'];
	return moods[Math.floor(Math.random() * moods.length)];
}


class JSXDemo extends React.Component {
	render() {
		return (
			<div>
				<h1>My Page</h1>
				<img src="https://images.unsplash.com/photo-1505909182942-e2f09aee3e89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80" />
				<p> My numbe is: {2 * 8} </p>
				<p>My current mood is: {getMood()}</p>
			</div>
		);// we can use js code inside of {}
	}
}


ReactDOM.render(<JSXDemo />, document.getElementById('root'));