Trying To Understand React

To create a production ready app we need to take care of multiple things - bundle things up, minimize files, optimization, code cleaning, caching, etc.

To get this functionality we have to use something known as bundlers.

There are various bundlers modules available named as Webpack, Parcel, Vite, etc. These bundlers have superpowers to make App Production ready. create-react-app use a Webpack bundler to build things up. most of the bundlers perform the same job. Parcel is one of the most powerful bundler. It is easy to set up and easy to build. to get parcel package inside our app we need to use Package Manager eg - NPM, yarn, etc. NPM is one of the popular package manager.

What is NPM?

Does not stand for Node Package Manager

It is a package manager for the JavaScript programming language, primarily used in conjunction with the Node.js runtime environment. npm allows developers to discover, install, and manage software packages and libraries, called "packages," that are published on the npm registry.

It's the world's largest software registry. Open source developers from every continent use npm to share and borrow packages.

use "npm init" to initialize npm in our app, it asks for few setup questions and setup npm, to skip setup questions use "npm init -y". After initializing it creates a package.json file with some configuration.

React app is huge, it does not run only on React, there are lots of packages that React uses as dependencies, hence package manager is Required.

What is Parcel?

Parcel is a web application bundler that simplifies the process of building and bundling JavaScript, CSS, and other web assets. It is often referred to as a "zero-configuration" bundler because it requires minimal setup and configuration, making it easier to get started with a new project.

Parcel aims to provide a seamless development experience. It automatically detects and handles dependencies between files, allowing developers to include various types of assets, such as JavaScript modules, CSS stylesheets, images, and more, without requiring explicit configuration.

Features

HMR (Hot Module Replacement) - using File Watcher Algorithm (written in C++)
Caching
creates Server
Bundling
Minifying
Cleaning our Code
Image optimization
Code compression
takes care of older versions of browsers (using the BrowserList module)
Zero Configuration
Superfast build algorithm
manages port numbers
uses a consistent hashing algorithm
manages https while development

to get parcel module , use -

> npm install -D parcel

after installing parcel , it adds packages in node_module folder and also update package.json and package-lock.json with its configuation.

Create an App using React and ReactDOM packages

using React, ReactDOM packages instead of using React cdn links are always recommended. there are several reasons -

version control - using packages versions are upgraded automatically which using CDN we have to do it manually.
dependency management - When using the React npm package, you can easily manage these dependencies through the package.json file, ensuring that all your dependencies are compatible.

install react, react-dom using npm

> npm install react

> npm install react-dom

after installing packages we can remove CDN links from our app. we have to first import React and ReactDOM into our scripts -

import React from "react"

import ReactDOM from "react-dom/client"

we have to make the script type as module because in our script we are importing things React, ReactDOM, etc

add type="script" in index.html where we are calling App.js.

<script type="module" src="./script.js"></script>

App ready for Ignition

to execute our app use > npx parcel index.html, parcel creates mini server and return URL on which our app is running.

creates dist and .parcel-cache folder. dist folder contains the build where as .parcel-cache folder is the space utilized by parcel for its work

Few Important Points

Dependencies vs devDependecies

Dependencies are the packages that our app needs to run. There are two types - Normal Dependencies also referred to as "Dependencies" and "devDependencies".

Dependencies - these are packages that are essential for the functioning of your application in production. These dependencies are required for your application to run properly and are typically used by your application's codebase at runtime. They are installed when you run npm install without any additional flags.

eg - we React as normal Dependency npm install react
DevDependencies - these are packages that are only required during development and are not necessary for the production runtime of your application.

eg - we install parcel as a devDependency npm install -D parcel

Package.json vs Package-lock.json

Both package.json and package-lock.json are files used in the Node.js/npm ecosystem to manage dependencies.

package.json

This file is mandatory for every project
It contains basic information about the project
Application name/version/scripts

package-lock.json

this lock file that ensures consistent and reproducible installations of dependencies with exact versions and integrity checks.

Difference between ~ and ^ for version control

when we install any package using npm, its configuration is updated in package.json file like this -

"devDependencies": { "parcel": "^2.9.0", "process": "^0.11.10" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }

^ (caret)- indicates that the package will automatically update for minor versions

whereas ~ (tilde) indicates that the package will update for major versions only.

What is transitive dependency

React library depends on many packages to work efficiently eg - bundlers - the parcel, similarly, these packages are also dependent on other packages to work. This is how the dependencies keep on adding and it is called as Transitive dependency.

BrowserList package

The "browserslist" package is a popular tool in the web development ecosystem that helps define the list of target browsers for your web application. It allows you to specify which browser versions you want to support.

npm install browserslist use this to install browserlist package. it allows us to add queries configuration on package.json

"browserslist": [
    "last 2 chrome versions",
    "> 1%",
    "IE 11"
  ]

writing "last 2 chrome versions" in the configuration file does not mean that it will run only for last two chrome versions but it means that it will 100% run on last 2 chrome versions.

BTS, browserlist uses polyfill to make code compatible with browsers that do not support new code.

polyfill is a replacement code which is written for the new version of code.

eg - suppose any old version of the browser does not support map() in ES6 version of JS, then it creates its own function which behaves exactly similar to map().

babel is a npm package that converts modern Js to older Js.

https://browserslist.dev/?q=bGFzdCAyIHZlcnNpb25z This site helps with query composition for our target audience.

Script Configuration in package.json

to start the app using parcel we use the command >npx parcel index.html , instead of this we can write start script in package.json to start/build the app.

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html",
  }

after this configuration, we can use npm run start to start sunning our app. (consider npm = npm run)

here , npm run start = npx parcel index.html

npm run build = npx parcel build index.html.

"babel-plugin-transform-remove-console" Package

This plugin helps to remove console.* calls from our code.

refer https://www.npmjs.com/package/babel-plugin-transform-remove-console.

first, we have to install dependency as devDependency and then do configuration.

Key prop

while creating React element, whenever there are multiple siblings or children in an array we have to pass a key prop to those elements. (key should be unique and different for different children).

In React, the key prop is used to help with reconciliation, which is the process of efficiently updating the user interface (UI) when the underlying data changes.

When a list of elements is rendered in React, it assigns a unique identifier to each element in the list. This identifier is the key. When the list is updated, React uses the key to determine which elements have changed, been added, or been removed. Using key helps in Identifying elements, Efficient updates and Preventing reordering issues, etc.

const heading1 = React.createElement(
    "h1",
    {
        id: "title1",
        key:"h1",
    },
    "Heading 1"
)

Imp Tips

never put your node_module, dist, and parcel-cache folder created by parcel into your git repo.

these are heavy files and we can regenerate them using package.json, parcel directly on Production. (hence add it in .gitignore)

Trying To Understand React - Part 2

Table of contents