What is React ?
React is an open-source JavaScript library that is used for building user interfaces.
It was developed by Facebook and released in 2013
It allows developers to create reusable UI components and efficiently update and render them when there is a change in the application's state.
It follows a component-based architecture where the UI is broken down into small components. Each component manages its own state and can be composed together to build complex user interfaces.
Difference between a library and framework?
A library is a collection of pre-written code that provides specific functionality or features. It is used to simplify and speed up the development process. It takes min effort for the library to put it inside some other code/application.
on the other hand, a framework is a more comprehensive software tool that provides a structured way to build applications. It is a collection of libraries, tools, and conventions that dictate the overall architecture and flow of the application. They often include a set of predefined rules and guidelines that developers must follow.
Ways to create element using HTML , JS and React
using html -
<div id="root">
<h1>Hello World using Html</h1>
</div>
using JS (DOM Manipulation)-
the browser has a JS engine, hence it knows what is document, createElement, getElementById, window, etc.
<body>
<div id="root"></div>
</body>
<script>
const heading = document.createElement("h1");
heading.innerHTML = "Hello World using JS";
const root = document.getElementById("root");
root.appendChild(heading);
</script>
using React -
React is a Javascript library hence we have to inject it into our code.
We can inject it using CDN Links.
What is CDN?
CDN stands for Content Delivery Network. It is a distributed network of servers located in different geographical locations. CDNs are designed to deliver web content, such as images, CSS files, JavaScript files, and other static assets, to users more efficiently and quickly.
<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>
There are two scripts related to React and React-dom. React is responsible for the core functionality of building and managing components, while React DOM provides the necessary tools for interacting with the Document Object Model (DOM) of the web page
<!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>Epiosde 01 - Inception</title>
</head>
<body>
<div id="root"></div>
<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 World from React"
)
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(heading);
</script>
</body>
</html>
React.createElement
This method is used to create react elements.
It takes 3 arguments - type, props and children.
React.createRoot()
it is used to create a root-level render container for a React application.
render()
it is used to render a React element or component into a specified container. render method takes React element and modifies our DOM.
In the above code, React runs just inside the root element. It is ok if we develop a complete site using HTML and just render one element using React.
React will override whatever is written inside <div id="root">...</div> with the heading element.
<body>
<div id="header">This is header</div>
<div id="root"></div>
<div id="footer">This is Footer</div>
<script>
const heading = React.createElement(
"h1",
{},
"Hello World from React"
)
console.log(heading)
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(heading);
</script>
</body>
The output of the above code is like this -
This is the beauty of React. we can inject it into any existing code or we can rely on React only for specific parts of an application.
Understanding React.createElement(type, props, ...children)
type - it is a type of element e.g. - h1, div, span, etc
props - this object contains properties and attributes to be passed to the element. eg - id, class, etc.
children - it contains children elements of the created element. it can be numbers, strings or react elements.
eg -
const heading = React.createElement(
"h1",
{
id: "titleID",
class: "titleClass"
},
"Hello World from React"
)
console.log(heading)
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(heading);
output -
Nested React Element
<div id="container">
<h1 id="title1">Heading 1</h1>
<h2 id="title2">Heading 2</h2>
</div>
we can create a div element like the above using the following way -
const heading1 = React.createElement(
"h1",
{
id: "title1",
},
"Heading 1"
)
const heading2 = React.createElement(
"h2",
{
id: "title2",
},
"Heading 2"
)
const container = React.createElement(
"div",
{
id: "container",
},
[heading1,heading2]
)
"using React.CreateElement is very complex to write heavy and nested html hence JSX comes into the picture."
Few Important Points
What is the difference between Production CDN and Developement CDN provided by React?
React provides two different CDNs: one for production and one for development. The main differences between the two CDNs lie in the content they serve and the optimizations applied.
The production CDN serves optimized and minified versions of the React library. These optimized versions have reduced file sizes, which results in faster downloads and improved performance in production environments.
The development CDN serves unoptimized, non-minified versions of the React library. These versions include additional warnings, debug information, and helpful development tools. The development CDN is intended for use during the development and debugging phase of your React application. It allows for easier debugging, error tracking, and access to development-specific features.
What is meant by crossorigin ?
The crossorigin attribute is an HTML attribute that can be used with certain elements, such as <script>, <img>, and <link>. It is used to control how the browser handles cross-origin requests when fetching external resources.
When a resource, such as a JavaScript file or an image, is requested from a different domain (origin) than the one serving the web page, it is considered a cross-origin request. Browsers have security measures in place to prevent unauthorized access to resources across different origins, known as the same-origin policy. The crossorigin attribute allows you to specify how the browser should handle cross-origin requests.
What is the difference between async and differ ?
Async - The async attribute is a boolean attribute. The script is downloaded in parallel(in the background) to parsing the page, and executed as soon as it is available (do not block HTML DOM construction during downloading process) and don’t wait for anything.
<script src="demo_async.js" async></script>
Defer - The defer attribute is a boolean attribute. The script is downloaded in parallel(in the background) to parsing the page, and executed after the page has finished parsing(when browser finished DOM construction). The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM.
<script src="demo_defer.js" defer></script>
What is emmet ?
Emmet is a powerful plugin or extension available for various code editors, including Visual Studio Code (VS Code). It enhances HTML and CSS coding productivity by providing a set of abbreviations, or shortcuts, that expand into complete HTML or CSS code snippets. It allows developers to write code faster and with fewer keystrokes.