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.