ReactBasicConcept.js

//Q1. What is JSX 
// JSX is basically build tool that convert html tag into JavaScript 
// For Example: 
	ReactDOM.render(
		<a href="www.blabla.com">
			<img src="https://imgs.xkcd.com/comics/random_number.png" />
		</a>,
		document.getElementById('app')
	);

	// above code would be converted in JavaScript using JSX

	ReactDOM.render(
		React.createElement('a', {href: "www.blabla.com"}, 
			React.createElement('img', {src: 'https://imgs.xkcd.com/comics/random_number.png'})
		),
		document.getElementById('app')
	)

// Component 
// In React components are just functions, These functions accept the props of an element, 
// and return the HTML that should be rendered in their place as React element 
// Components are not only limited to return html elements, They can also return Elements with custom 
// types. They can even return an elements that was passed via props!

function Bold(props){
	const style = {fontStyle: 'Bold'};
	return React.createElement('div', {style}, props.children)
}

ReactDOM.render(
	React.createElement(Bold, {
		children: React.createElement('h1', {}, "Hey Nishant")
	}),
	document.getElementById('app')
);