Introduction
React is an open-source JavaScript library designed to create user interfaces (components) with the goal of facilitating the development of single-page applications (SPAs). It is maintained by Facebook and a large open-source community.
Imperative Programming vs. Declarative Programming
React aims to be simple, declarative, and easy to compose. In computer science, declarative programming refers to a software programming paradigm in which the steps to be followed are not specified in detail; instead, only the desired result of a given source code is defined.
The traditional approach to manipulating the DOM in JavaScript involves writing instructions on how things should be done that will be displayed in the browser—that is, an imperative paradigm.
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById("app");
// Create a new H1 element
const header = document.createElement("h1");
// Create a new text node for the H1 element
const text = "Develop. Preview. Ship.";
const headerContent = document.createTextNode(text);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
But wouldn’t it be simpler to describe what you want to display? In other words, imperative programming is like step-by-step instructions for making a pizza. Meanwhile, declarative programming is like ordering a pizza without worrying about the steps involved in making it.
<div id="app"></div>
<!-- react is the core React library -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- react-dom provides DOM-specific methods that enable you to use React with the DOM -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel JavaScript compiler to transform JSX code into regular JavaScript -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const domNode = document.getElementById("app");
const root = ReactDOM.createRoot(domNode);
root.render(<h1>Develop. Preview. Ship.</h1>);
</script>