React isn’t only in JSX, Let’s burst this myth !!
Our favorite browsers have a JavaScript Engine in them. They only understand browser scripts and don’t understand any other strange machine code. So, we try to write React code in .JSX. However, at the core, React is just JavaScript. It is a JavaScript library that was developed by Facebook developers in the early days. While we can’t directly write React code using JavaScript, we need to import certain things that are written by these developers. These imports are making developers’ lives easier nowadays. The core of React, which is React.development.js, should be injected into our script file before we begin to write any React code. Additionally, React.DOM needs to be imported for portability. We have to inject these two using our favorite CDN (Content Delivery Networks). Creating an element is a core concept of React, and creating a root is fundamental in React DOM. To render an element using React, we need to create a root and then render our heading element in that root. The root is associated with ReactDOM and is where everything gets rendered. createElement is an object where, after creating the root, it gets rendered in the root.
This createElement function takes 3 arguments: first, the element itself, second, an object to provide attributes (known as props later) to our element tag, and third, children for the element tag (to provide more than one child or element, pass multiple children as an array). By using createRoot from ReactDOM, we obtain the root. Finally, we render this root with the element tag using root.render(). But hold on, didn’t we mention that React is not understood by our browser? This React Element (a JavaScript Object) is converted into browser-understandable scripts (HTML and scripts) by the render method, which transforms your React object into a normal HTML element and displays it in your browser. The philosophy of React is to manipulate the DOM using JavaScript. Take a look at the code below.
const parent = React.createElement('div', {id: "parent"}, [
React.createElement("div", {id: "child1"}, [
React.createElement("h1", {}, "Prime header here"),
React.createElement("h2", {}, "co-prime (younger brother of prime)")
]),
React.createElement("div", {id: "child2"}, [
React.createElement("h1", {}, "Prime header here"),
React.createElement("h2", {}, "co-prime (brother of prime)")
]),
]);
However, doesn’t this approach become more cumbersome and complex? It’s often better to write in HTML to create these elements rather than using createElement and the root of ReactDOM. This is where JSX comes into play, which was also developed by Facebook developers in the early days to make developers’ lives much easier. Once we use JSX, we can bid farewell to createElement and all its complexities. Nevertheless, this demonstrates that React is not exclusively written in JSX. The foundation of React is JavaScript itself; it’s evident that it was initially written there. JSX serves as a simplification. But hold on! Is JSX a part of React? We will delve into this topic in future writings. Until then, grab your coffee, continue exploring more documentation, debunk myths, and stick to the facts.
Top comments (1)
Blog post on medium