React Learning Path -Day 1

What is Emmet?

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist. It is a very useful tool that improves the efficiency of web developers while coding.
One such example is

1) div>div
<div>
  <div></div>
</div>

2) div.flex>(div.flex-item)*3

<div class="flex">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

What is the difference between Library and Framework?

A library is a collection of prewritten code that can be used to simplify tasks. It is essentially a set of pre-defined functions and classes that programmers can use to simplify their work and speed up the development process. So, developers do not have to write code to accomplish specific functionality because the library already includes code for those functionalities. Eg jQuery, Numpy, pandas etc.

A Framework is like a foundation upon which developers build applications for specific platforms. Frameworks combine resources like image files and reference documents into one package. It is thus possible to modify that package to fit specific project requirements. With a framework, developers can integrate new features into an application and give it new capabilities.

What is CDN?

CDN or content delivery network is a geographically distributed group of servers that caches content close to end users. It helps in the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos. To improve speed and connectivity, a CDN will place servers at the exchange points between different networks.

Benefits of Using CDN:

  1. Improving website load times - By distributing content closer to website visitors by using a nearby CDN server (among other optimizations), visitors experience faster page loading times.

  2. Reducing bandwidth costs - Through caching and other optimizations, CDNs can reduce the amount of data an origin server must provide, thus reducing hosting costs for website owners.

  3. Increasing content availability and redundancy - CDN due to its distributed nature can handle more traffic and withstand hardware failure better than many origin servers.

  4. Improving website security - A CDN may improve security by providing DDoS mitigation, improvements to security certificates, and other optimizations.

React CDN

  <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>

Why is React known as React?

React is called "React" because of its core feature, which is its ability to "react" or respond dynamically to changes in data. It was designed to allow developers to "react" to changes in state and data within an application and to update the user interface in a declarative and efficient manner.

What is cross-origin in the script tag?

You must have come across this keyword crossorigin often, have you ever wondered about the use of this keyword? It specifies that the link element supports CORS.

CORS stands for Cross Origin Resource Sharing. It is a standard mechanism to retrieve files from a third-party domain or server.

If crossorigin is specified in the link element, the stylesheet or icon file request will be sent with or without credentials.

<link crossorigin="anonymous | use-credentials">
ValueUsage
anonymous or "" or blankA cross-origin request will be sent without credentials and performs basic HTTP authentication. This is the default. Note: crossorigin="anonymous", crossorigin="", and crossorigin are all the same.
use-credentialsA cross-origin request will be sent with credentials, cookies, and certificates.

React vs React DOM

The react package holds the react source for components, state, props and all the code that is react.

React DOM is the bridge between the react and DOM layers. React was split into two parts react and react DOM due to the introduction of React Native.