What makes React a Library?
React's flexibility and ability to integrate into existing projects make it 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why is React a Library</title>
</head>
<body>
<main>
<h1>Hello from HTML</h1>
</main>
</body>
</html>
🐊 Creating “h1” element using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why is React a Library</title>
</head>
<body>
<main>
<div id="root"></div>
</main>
<script>
const root = document.getElementById("root"); //creating Root
const heading = document.createElement('h1'); //creating Element
heading.innerHTML = "Hello from JavaScript"; //inner HTML added to Element
root.appendChild(heading); //Adding the Element to Root
</script>
</body>
</html>
♻️ 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.
Development
<script crossorigin src="<https://unpkg.com/react@18/umd/react.development.js>"></script>
<script crossorigin src="<https://unpkg.com/react-dom@18/umd/react-dom.development.js>"></script>
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:
Production
<script crossorigin src="<https://unpkg.com/react@18/umd/react.production.min.js>"></script>
<script crossorigin src="<https://unpkg.com/react-dom@18/umd/react-dom.production.min.js>"></script>
To load a specific version of react and react-dom, replace 18 with the version number.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why is React a Library</title>
</head>
<body>
<main>
<div id="root"></div>
</main>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</body>
</html>
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:
👨🏽💻 Creating “h1” element using React
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why is React a Library</title>
</head>
<body>
<main>
<div id="root"></div>
</main>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
const heading = React.createElement('h1',{}, 'Hello from React 👋🏽');
const root = ReactDOM.createRoot(document.getElementById("root" ));
root.render(heading);
</script>
</body>
</html>
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.
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?
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.
//HTML Schema //<div id="root"> // <h1></h1> // <div> // <h2></h2> // <p></p> // </div> //</div> 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);
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!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Why is React a Library</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main> <header>Hey! I am the Header 👋🏽</header> <div id="root"></div> <footer>Hi! I typically stay down here 🥺👉🏽👈🏽</footer> </main> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="./App.js"></script> </body> </html>
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.