Think_Straight

Episode 1: React

Rashika Veera's photo
Rashika Veera
·

4 min read

Before diving into the code functionality of react, there are some basic terms that we have to understand.

The most common question that most of us have

Is React a Library or a Framework?

The technical difference between a framework and a library lies in a term called inversion of control.

When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.

A library is a collection of reusable, compiled, and tested code that can facilitate the automation or augmentation of application functionalities. It’s designed to support both the code developer and code compiler during the build process and the running of the application. A library implements many functions, variables, and parameters.

When we use a framework, we can use resources to facilitate faster development and a greater user experience. A library is used to enhance the functionality of an application. If we develop our own library, we can use the functions in many applications.

Is there an alternative to creating react apps by using node.js or npm?

Yes, we can use CDNs. So what does a CDN denote and why do we need it?

A CDN or Content Delivery Network improves the speed of a website by placing the content on different servers across the globe. It is then delivered to the application from the nearest server. This process results in faster loading of the website as it reduces the delivery time and the distance from the server.

It also makes the website load faster and makes it responsive. This is done by compressing the file and optimizing the network simultaneously in the application.

If a responsive UI is to be built, a JavaScript library such as React is popularly used. The React library can be made fast using Google CDN and other CDN. In the case of Content Delivery Network, a combination of React CDN reduces the gap between the user and the server. This helps in accelerating the speed and makes the page load faster.

We can get the React CDNs from :

https://legacy.reactjs.org/docs/cdn-links.html

What is Cross-origin and why do we need it?

Cross-origin resource sharing (CORS) is a mechanism that allows a client application to request restricted resources hosted on server from a different origin. These resources may include; web fonts, videos, scripts, iframes, images and stylesheets. By default, client applications making AJAX requests are only allowed to request resources that live on the same origin as the location where the client application is running.
CORS defines a way in which a browser and server can interact to determine whether it is safe to allow the cross-origin request. If an application running on different domain tries to make a XMLHttpRequest to a different domain, it will be blocked by same-origin policy.
It extends the same-origin policy and offers freedom and functionality than simply same-origin requests and it is more secured.
Poor configuration & implementation of CORS policy could lead to data access denial, data theft and potential cross-domain attacks.

HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Namaste React</title>
    <link href="style.css" rel="stylesheet">


</head>
<body>
    <h1>Above code</h1>
    <div id="id">
        <h1>Rashika is here!</h1>
    </div>
    <h1>Below code</h1>
    <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>

JS File:

The heading is nothing but a react element and it returns an object which is then converted into html element when it's rendered.

In case you have some code inside the id tag it'll get replaced with the content from heading elements. These code wouldn't get appended instead rendered.

const heading=React.createElement("div",
{id:"parent"},
[React.createElement("div",{id:"child"},[
    React.createElement("h1",{},"I am a H1 tag"),
    React.createElement("h1",{},"I am a H2 tag")
]),
React.createElement("div",{id:"child2"},[
    React.createElement("h1",{},"I am a H1 tag"),
    React.createElement("h1",{},"I am a H2 tag")
])]

    );
console.log(heading)

const root=ReactDOM.createRoot(document.getElementById("id"))
root.render(heading);

This code would create the below structure with the help of react elements. You might wonder if the below code is much easier when compared with the above ones. But this is just to understand that we don't need Jsx instead we can use Reactelements as well to create HTML elements.

<div id="id">
    <div id="parent">
        <div id="child">
            <h1>I am a H1 tag</h1>
            <h1>I am a H2 tag</h1>
        </div>
        <div id="child2">
            <h1>I am a H1 tag</h1>
            <h1>I am a H2 tag</h1>
        </div>
    </div>
</div>

Why my code doesn't work when the script tag is in the head tag?

First, the HTML gets parsed from top to bottom, So Whatever encounters first will get run.

If you place the script tag at the end of the head tag then It will run first before the HTML body

So the output would be whatever the content that's on HTML and the JS wouldn’t be implemented.

React