swashata/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Simple React Application</title>
	<!-- Add React and React DOM from CDN -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
	<div id="seema"></div>
	<script src="./script.js" type="text/javascript"></script>
</body>
</html>

## script.js
function MyChild(props) {
  const { color, children, underline } = props;
}

function AppChild(props) {
  const { color, children, underline } = props;
  const virtualDom = React.createElement(
    'span',
    {
      style: { color, textDecoration: underline ? 'underline' : 'none' },
    },
    children
  );
  console.log(virtualDom);
  return virtualDom;
}

function App() {
  const virtualDom = React.createElement(
    'h2',
    null,
    'Hello ',
    React.createElement(
      AppChild,
      {
        color: 'blue',
        underline: true,
      },
      'World',
      '!'
    ),
    React.createElement(
      AppChild,
      {
        color: 'red',
        underline: false,
        fontWeight: 'bold',
      },
      ' whats going on?'
    )
  );
  console.log(virtualDom);
  return virtualDom;
}

ReactDOM.render(React.createElement(App), document.querySelector('#seema'));

// 1: Virtual DOM - Render
// 2: Committing / Snapshot - React/ReactDOM
// 3: Update DOM (if any) - ReactDOM

## script.jsx
function AppChild(props) {
  const { color, children, underline } = props;
  // const virtualDom = React.createElement(
  //   'span',
  //   {
  //     style: { color, textDecoration: underline ? 'underline' : 'none' },
  //   },
  //   children
  // );
  const virtualDom = (
    <span
      style={{
        color,
        textDecoration: underline ? 'underline' : 'none',
      }}
    >
      {children}
    </span>
  );
  console.log(virtualDom);
  return virtualDom;
}

function App() {
  // const virtualDom = React.createElement(
  //   'h2',
  //   null,
  //   'Hello ',
  //   React.createElement(
  //     AppChild,
  //     {
  //       color: 'blue',
  //       underline: true,
  //     },
  //     'World',
  //     '!'
  //   ),
  //   React.createElement(
  //     AppChild,
  //     {
  //       color: 'red',
  //       underline: false,
  //       fontWeight: 'bold',
  //     },
  //     ' whats going on?'
  //   )
  // );
  // JSX
  // 1. JSX starts at any opening <Component> type code.
  // 2. It always takes literal string or other components as children. If we
  //    need to have a JS expression, we put it inside curly braces { }. But
  //    it should evaluate to a string.
  // 3. For props, we either pass in string values within double quotes or
  //    for other values, we do so within curly braces expressions.
  const virtualDom = (
    <h2>
      Hello{' '}
      <AppChild color="blue" underline={true}>
        World!
      </AppChild>{' '}
      <AppChild color="red" underline={false}>
        Whats going on?
      </AppChild>
    </h2>
  );
  console.log(virtualDom);
  return virtualDom;
}

ReactDOM.render(React.createElement(App), document.querySelector('#seema'));

// 1: Virtual DOM - Render
// 2: Committing / Snapsho - React/ReactDOM
// 3: Update DOM (if any) - ReactDOM
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Simple React Application</title>
	<!-- Add React and React DOM from CDN -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	</head>
	<body>
	<div id="seema"></div>
	<script src="./script.js" type="text/javascript"></script>
	</body>
	</html>
	function MyChild(props) {
	const { color, children, underline } = props;
	}

	function AppChild(props) {
	const { color, children, underline } = props;
	const virtualDom = React.createElement(
	'span',
	{
	style: { color, textDecoration: underline ? 'underline' : 'none' },
	},
	children
	);
	console.log(virtualDom);
	return virtualDom;
	}

	function App() {
	const virtualDom = React.createElement(
	'h2',
	null,
	'Hello ',
	React.createElement(
	AppChild,
	{
	color: 'blue',
	underline: true,
	},
	'World',
	'!'
	),
	React.createElement(
	AppChild,
	{
	color: 'red',
	underline: false,
	fontWeight: 'bold',
	},
	' whats going on?'
	)
	);
	console.log(virtualDom);
	return virtualDom;
	}

	ReactDOM.render(React.createElement(App), document.querySelector('#seema'));

	// 1: Virtual DOM - Render
	// 2: Committing / Snapshot - React/ReactDOM
	// 3: Update DOM (if any) - ReactDOM
	function AppChild(props) {
	const { color, children, underline } = props;
	// const virtualDom = React.createElement(
	// 'span',
	// {
	// style: { color, textDecoration: underline ? 'underline' : 'none' },
	// },
	// children
	// );
	const virtualDom = (
	<span
	style={{
	color,
	textDecoration: underline ? 'underline' : 'none',
	}}
	>
	{children}
	</span>
	);
	console.log(virtualDom);
	return virtualDom;
	}

	function App() {
	// const virtualDom = React.createElement(
	// 'h2',
	// null,
	// 'Hello ',
	// React.createElement(
	// AppChild,
	// {
	// color: 'blue',
	// underline: true,
	// },
	// 'World',
	// '!'
	// ),
	// React.createElement(
	// AppChild,
	// {
	// color: 'red',
	// underline: false,
	// fontWeight: 'bold',
	// },
	// ' whats going on?'
	// )
	// );
	// JSX
	// 1. JSX starts at any opening <Component> type code.
	// 2. It always takes literal string or other components as children. If we
	// need to have a JS expression, we put it inside curly braces { }. But
	// it should evaluate to a string.
	// 3. For props, we either pass in string values within double quotes or
	// for other values, we do so within curly braces expressions.
	const virtualDom = (
	<h2>
	Hello{' '}
	<AppChild color="blue" underline={true}>
	World!
	</AppChild>{' '}
	<AppChild color="red" underline={false}>
	Whats going on?
	</AppChild>
	</h2>
	);
	console.log(virtualDom);
	return virtualDom;
	}

	ReactDOM.render(React.createElement(App), document.querySelector('#seema'));

	// 1: Virtual DOM - Render
	// 2: Committing / Snapsho - React/ReactDOM
	// 3: Update DOM (if any) - ReactDOM