Mostly large-scale frontend apps which we see in today’s world are developed using React, but react solely doesn't makes those large scale applications. But there are a lot of other libraries and packages are used along with React to make a full-fledged react application.

Introduction to NPM

npm is the default package manager for the javascript runtime environment Node.js which manages all the packages and dependencies which are used in the project. It is an online database of thousands of packages called the npm registry.

How to use npm in a project

A project can be initialized as an npm project by using this command.

npm init -y

After initializing it as an npm project, two new files are introduced into your project which are package.json & package-lock.json.

What is package.json

It is a configuration file for npm for our project. It contains the version of the packages on which our project is dependent on. It also contains scripts to run npm commands in the terminal.

How can the versions of dependencies be managed?

The version is written in the front of the dependency name, for example 2.8.3 or ^2.8.3 or ~2.8.3

There is a difference between these three notations, when there is just 2.8.3 it means that this version is installed and it will never be updated automatically.

Caret (^) sign indicates that the dependency will automatically get updated if any minor updates or bugs fixed are released, example 2.9.0 (recommended).

Tilde (~) sign indicates that the dependency can automatically get updated to a major update if there is any update, example 3.0.0 (not recommended as it can break things into your app).

What is package-lock.json

This file keeps the track of all the dependencies and their sub-dependencies (also known as Transitive Dependencies) including their exact versions which are used in that app. There are many other information of any particular dependency like its integrity key, sub-dependencies etc.

Installing a package

In an app, there can be two types of dependencies, Normal dependencies and Dev dependencies.

Dev dependencies are used just for the development environment but normal dependencies are those dependencies on which your code is dependent and which will be used in production environment as well.

npm install parcel //Installing a normal dependency

npm install -D parcel //Installing a dev dependency

Running these commands will install react in your app by fetching it from the npm registry and a new folder will be created named as node_modules which contains all the files of the dependencies installed. Those dependencies can have their own sub-dependencies so npm will install them all and store it in node_modules.

node_modules can be regenerated with the help of package.json file by using the following command. That is why, they need to be uploaded on the git or production environment.

npm install //Install node_modules

Note : Every dependency in the node_modules has its own package.json file which helps npm to install its sub-dependencies.

---

Bundlers

When we have our code in a lot of different files like HTML, CSS and Javascript files, then our whole code has to be bundled or compressed so that it can be pushed to the production environment, this is the use of a bundler. Some of the famous bundlers are Webpack, Vite & Parcel. They are used to optimize the code to make it production suitable.

Using Parcel

Features of Parcel

• Dev Build

• Local Server

• HMR = Hot Module Replacement (Used for fast refresh after changes)

• File Watching Algorithm - Checks for any changes (Written in C++)

• Caching - Faster Builds

• Image Optimization

• Minification

• Bundling

• Compression

• Content Hashing

• Code Splitting

• Differential Bundling - Supports older versions of browsers

• Error handling

• Tree Shaking - Removes unused code

• Different development & production bundles

• HTTPs in local server

• Lazy Dev Builds

• Transpilation - Automatically transpiles CSS and JavaScript for targeted browsers

To start the server on the local host

npx parcel index.html

What is the difference between npm and npx ?

npm - to install a package

npx - to execute a package

NOTE : Using react using CDN links is not recommended as it requires more network bandwidth and sometimes it can throw errors. The best way to use react is by installing it as a node dependency.

How to install React as node dependency ?

npm install react //Install React

npm install react-dom //Install ReactDOM

Now, React can used be inside any file just by importing it from its dependency files.

import React from 'react';
import ReactDOM from 'react-dom/client';

Note : By default, a JavaScript file is attached to the index.html file as a browser script, so import statements won’t work. To make them work, type=”module” has to be added in the <script> tag.

Builds

A build is a version of a program that's been compiled and is ready for testing or deployment. Builds optimize software for performance and distribution, packaging it into formats like .dist, .build etc. It is made by compressing and optimizing a code into a package so that the code is cached and the same code is not compressed again.

There are two types of builds

1. Development Build - Used for testing (Takes less time to build)

npx parcel index.html

2. Production Build - Used for deployment (Takes more time to build)

npx parcel build index.html

Both the build generates 2 folders - dist and .parcel-cache

• dist contains 3 major files which are .html, .css and .js which contains all the code in the optimized form.

• .parcel-cache contains the cache files in the binary format required for faster builds.

How to make our app supported by older browsers ?

Older versions of browsers can be supported by adding browserslist array in the package.json file of your app.

Link to browsers list page → Browserslist
Link to browsers list documentation → Browserslist Documentation

---

In this session, we have studied about using bundlers and react to make an app and igniting it on a local server. In the upcoming sessions, we’ll dive into the JSX.