Global Installation & Local Installation in React js

packages





You've probably heard of NPM, NPX, NVM and Yarn if you deal with JavaScript. Almost certainly, you've used them to install something. In this piece, I'll explain what they are, as well as the differences between NPX, NPM, NVM, and Yarn as well as their benefits and drawbacks.


NPM:
When you install Node on your PC, you also install npm (which is included by default). NPM(Node Package Manager) is the package manager for the Node JavaScript platform. It puts modules in place so that node can find them, and manages dependency conflicts intelligently. Packages are updated as well, and npm makes it easy for us to stay on top of things. It allows us to. If we want to, we can upgrade the package, or we can utilise a different version if that's what we need.

What is npm and how it works


npm is the world's largest Software Library (Registry), and it is also a software Package Manager and Installer for javascript projects.npm is widely used by nodejs, angular, react, vuejs frameworks, you can create your own package and publish the package to the marketplace. it is very helpful to share the code, plugin with other developers and the open-source community. npm has boosted the open source community to a new level.

How to install

To use the npm, you need to install the nodejs, npm is in-built with nodejs.
You can download the nodejs from the official site nodejs.org,
After downloading, please install it.

  • For windows Install it in the c drive, and copy the installed location path C:\Program Files\nodejs and add it in your enviorement variables
  • Right click on my computer and then properties



    npm-set-envioremnt


  • Now click on the Advanced system settings (Left bar)



    node-global-path-setup


  • Now click on the path and add the new path



    nodejs-global-path-setup


How npm package works

After installing the nodejs, you can verify the installation by running the npm --version command from your command runner.

What is package.json

package.json file is used to maintain the all npm package with the version. this file contains all the npm packages you installed.

How to generate the package.json file

npm provides npm init command to generate the package.json file while running this command it will ask some details like - package name: Name of the package you want to add like demo-app

  • version: version by default 1.0.0
  • description: add description
  • entry point: when you run npm start, the provided entry point will run, you can add index.js or leave blank it
  • test command: Any script you want to use for testing
  • git repo path: You can provide your GitHub repo URL
  • keywords: For searching and SEO purpose
  • author: Add the name of the author
  • licence: Add like MIT or ISC

How to install the npm package

You can get the npm package you want to install from the NpmJS
You can install the package globally and locally


  • A. Globally

Open Your DOS Command Prompt, there use this npm install -g create-react-app, then it will creates some files in your system as globally

  • npm install -g create-react-app
after creating global installation,  use below command where ever u wants to install react in your system, i used GITBash Command Prompt  to executive below command
  • create-react-app appName

  • B. Locally
To install react js into Locally it means in your defined folder, then you have to use  npx create-react-app folderName


List of npm common commands

Below is the list of all npm commands

  • npm init: to generate the package.json file
  • npm i or npm install: to install all packages of the package.json file
  • npm i -g: install the package globally
  • npm start: It will execute the entry point script you added in the package.json file
  • npm install npm@latest -g: Upgrade the npm package to the latest version
  • npm outdated: list of all out date packages
  • npm list -g: list of all global npm packages
  • npm uninstall "package name": it will uninstall the package
  • npm publish: This is used to publish the package at npmjs


YARN:
YARN(Yet Another Resource Negotiator) is a package manager similar to npm, but One of the main difference between NPM and Yarn is how they handle the package installation process. Yarn installs packages in parallel.

Yarn is optimized to fetch and install multiple packages simultaneously(yarn is faster than npm at installing packages).

Yarn Installation

NVM:
NVM(Node Version Manager) which stands for Node Version Manager, is to allow you to check the version of Node.JS you have installed and even to install a fresh, most up to date version of Node. It also allows you to install numerous instances of Node, allowing you to test your app in different versions of the programme to see if it works.

NPX:
The npx stands for Node Package Execute and is included with npm. If you install npm above version 5.2.0, npx will be installed as well.It's a npm package runner that allows you to run any package from the npm registry without having to install it. During a one-time usage package, the npx is useful. Npx is not installed in your computers if you have installed npm prior to 5.2.0.

Note:
The V8 Javascript runtime underpins Node.js. A Javascript engine is built into each browser, including Firefox, Safari, and Chrome, to handle Javascript files on webpages. The V8 engine is used by Google Chrome and Node.js to interpret Javascript files.

I hope this information will assist you in deciding whether to use Yarn, NPM, or NVM in your projects.