Under the Hood of React Components

Doing It The JSX Way

Components are the building blocks of react websites and UIs and these components are built using Java script XML(extended markup language). I was confused when I first looked at the code in the begining, it was html code being embedded in java-script code.

import React from 'react'

const Header = () => {

return (

<div className='container'>

<h1>Under the Hood</h1>

</div>

)}

export default Header

Doing It The Native JS Way

import React from 'react'

const Header = () => {

return React.createElement('div',{className:'container'},

React.createElement('h1',{},'Under the Hood'))

}

export default Header

Just image the whole website using the JS way, this would need so many lines of code, the JSX way is easier and manageable. But, when we write code using the JSX way, the JS way is what happens under the hood. For further reading, check https://reactjs.org/docs/introducing-jsx.html.