# What makes React a Library?
Before understanding how React works let's first understand how **HTML creates elements** and then how we can do it using JavaScript and that is where we can understand how **React** as a **JavaScript Library** creates, updates and deletes elements.
## Creating Elements
### **🦖** Creating **“h1”** element only using **HTML**
```xml
Why is React a Library
Hello from HTML
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697007574192/1c9e118f-421d-4437-80dc-e61cd9775c20.png align="center")
---
### 🐊 Creating **“h1”** element using **JavaScript**
```xml
Why is React a Library
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697008864575/1f3c4f83-0fff-43a1-a806-d1205ee15918.png align="center")
♻️ Now that we know that we can use JavaScript to manipulate our HTML Schema on Browser also known as DOM (Document Object Model) and create, update and delete elements. This essentially also means we can also import JavaScript from other codebases and use it, as a Library in the world of Programming.
---
### 🦍 Importing React Inside a Project
So let’s do the Inception. Let’s import react inside the existing HTML that we wrote above using CDNs.
```jsx
Development
```
💡
Question: Why do we have two files? One for react and one for react-dom?
> This is primarily because of the fact that the first script tag is responsible for the core functionalities of react and the second one is responsible for creating the shadow DOM and the fact that react is not only used in browsers but also in Native applications, it makes total sense to separate the DOM operations onto another file. Shadow Dom(React Dom/ Virtual Dom) is a bridge that helps us connect React to the browser and perform DOM operations.
The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
```jsx
Production
```
> To load a specific version of **react** and **react-dom**, replace 18 with the version number.
```xml
Why is React a Library
```
🦾
Type React in your browser console to see magic come to life
**__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697010817894/af2821e1-a15c-4413-bd72-bc4037f5bcfe.png align="center")
---
### 👨🏽💻 Creating **“h1”** element using **React**
```xml
Why is React a Library
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697011397749/67381e0c-8a27-4d6b-9c7d-e0fd950d9073.png align="center")
💡
Question: What does console.log(heading) will return or What is React.createElement ?
> *It returns an* ***"Object"*** *which is a React Element. It’s NOT an HTML element which can be noted here. The* ***render*** *method converts the Object into real DOM element.*
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697011487153/4ccdebcb-0bd3-4462-bcd9-7e9ad13525ee.png align="center")
---
## **Splitting The React Code (App Structure)**
Here we will be splitting our JS code to an **App File**, Add **CSS** to the project, Nothing too fancy 😄. Looks Familiar?
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697011786573/a5f44f64-cbd5-403a-aaf3-47d15b633a38.png align="center")
---
## **Creating Nested HTML Components in React**
* ***React.createElement*** should be called recursively inside the **child prop** to create nested elements.
* The children prop takes an array of elements those are siblings, hence to create siblings we need to call ***React.createElement*** in an array.
* The render method ***REPLACES*** any HTML element inside the root element with components created using React. That’s the reason we see the text being replaced in milliseconds of lag.
```javascript
//HTML Schema
//
//
//
//
//
//
//
const heading = React.createElement('div',{id: 'child'}, [
React.createElement('h1',{id: 'heading'}, "Hello from Super Charged React 🔋"),
React.createElement('div', {id: 'child2'}, [
React.createElement('h2', {id: 'h2Tag'}, 'Hello I am H2 Tag'),
React.createElement('p', {id: 'pTag'}, 'Hello I am P Tag'),
])
]);
const root = ReactDOM.createRoot(document.getElementById("root" ));
console.log(heading); //object root. render (heading);
root.render(heading);
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697012759578/ac040be7-33e4-4b1c-bc59-925afca24ed5.png align="center")
* It’s important to note here that ***ReactDOM.createRoot*** identifies the element where react needs to be running. Hence any element placed before or after the root won’t be affected by React. This also means that React can be injected to a specific part of the code, legacy project, or a JavaScript project using other libraries like jQuery without having to bother about the existing infrastructure in place. **That’s exactly why React is a library and NOT a framework!**
```xml
Why is React a LibraryHey! I am the Header 👋🏽
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697012939376/7ee2ec29-4f28-4bd7-9846-f0c27ec6cc1e.png align="center")
👨🎓
A Small Haiku on React:
> A tool, not a frame,
> Virtual DOM's is it's grace,
> UIs it inflames.
---
## Summary
> ⚡ React is a **JavaScript library** used for building user interfaces (UIs) in web applications.
>
> This is something we all know but we fail to understand what makes it a library because we usually go by the route of why it is not a framework and make ourselves understand that "Okay so it's not a Framework". **This post tries to take a detour from the default approach of why it's not a FRAMEWORK and trying to understand what instead makes it a library.**
>
> * **What is React?**
> React consists of two main files: **react.development.js** for core functionality and **react-dom.development.js** for DOM operations.
>
> * By calling **React.createElement**, we can create React elements that are different from traditional HTML elements.
>
> * The **ReactDOM.createRoot** method specifies where React should be rendered in the HTML document.
>
>
> and hence the ability to use it inside an existing project and not having to worry about creating an app to start is what makes it a library.
>
> " **React's flexibility and ability to integrate into existing projects make it a library rather than a full-fledged framework.** " React can be imported and used in existing HTML files using script tags and CDNs.