npm , npx, CRA, VITE in Java Script

NPM:

• It Stands for Node Package Manager

• It is default package manager for Node.js

NPM REGISTRY:

It is the online repository were the developer can find and share the open source package.

NPM CLI:

• CLI stands for command line interface

• It is used for developer to interact with the npm registry and manage package

Install package in project:

npm install package name - is the command for installing the package

npm update - is the command for updating the existing packages in project

node_module - Installed packages are added in this directory in project

package.json

• This file holds the npm managed projects

• when you run the npm install in the project directory npm reads the package.json and install the depend file for the project

Install npm in linux:

sudo apt install npm - command for installing the npm

npm install -gnpm@latest -command for installing the latest version of npm globally

NPX:

• It stands for Node package Execute

• It allows the execution of package directly from the npm registry

• npx run command from the package not installed in your system

• It is useful for one time task

Difference Between NPM and NPX:

• npm installed with bundle of node.js and npx installed with bundle of npm

-npm execution of package the package need to be installed in the project directory were as in npx it directly execute the package

-npm create package.json for package management where as npx focus only on execution of package so the package management not happen

CRA:

• It stands for Create React App

• Command line tool developed by facebook

• Used to set up the new react.js project

• It provide pre-configured environment for development and handling the set up of essential tool

  • web pack -> Bundling
  • Bable -> Transpiling modern Java script
  • JSX -> Browser Compatible -index.html , package.json, index.js are configured in the project

Command for creating the app in linux:

• create-react-app appname
• cd appname
• npm start

Output of create app:

Viet:

• It is a development server

• It provide a faster and efficient development for web project

• It eliminating the need for bundling during development and fasting the server setup

Hot Module Replacement:

It updates designed to improve developer productivity

Vite use Rollup for production build and support for multiple pages in project

How to install the react application using VITE:

npm create vite@latest frontendreact

select framework : react

select a variant : java script

cd frontendreact

npm run dev - > start the development server

Output: