warengonzaga/build_your_own_react.md

## build_your_own_react.md

      
    Raw
  

              build_your_own_react.md
            
          
    Build Your Own React

Here's the code on how you can build your own react. So you can understand how react works.

  
## index.html
<html>
<body>
  <div id="root"></div>
</body>
</html>

## index.js
function render(reactElement, containerDOMElement) {
  const element = document.createElement(reactElement.type);

  element.innerText = reactElement.children;
  for (const key in reactElement.props) {
    const value = reactElement.props[key];
    element.setAttribute(key, value);
  }

  containerDOMElement.appendChild(element);
}

const reactElement = {
  type: 'a',
  props: {
    href: 'https://warengonzaga.com/',
  },
  children: 'Visit my website!',
};

const containerDOMElement =
  document.querySelector('#root');

render(reactElement, containerDOMElement);
	function render(reactElement, containerDOMElement) {
	const element = document.createElement(reactElement.type);

	element.innerText = reactElement.children;
	for (const key in reactElement.props) {
	const value = reactElement.props[key];
	element.setAttribute(key, value);
	}

	containerDOMElement.appendChild(element);
	}

	const reactElement = {
	type: 'a',
	props: {
	href: 'https://warengonzaga.com/',
	},
	children: 'Visit my website!',
	};

	const containerDOMElement =
	document.querySelector('#root');

	render(reactElement, containerDOMElement);