Difference between Npm and Npx in React

Severally i have seen react books where npm and npx are used in the codes but i don’t really know the difference between them so i can know where they are respectively necessary to be inserted.

Please explicit Answer

  • npm is a tool mainly used to install packages.
  • npx is a tool to execute packages.

What does it means? That if you want to execute a package without installing it on your computer and then launch it you can use npx directly.
Speaking of react , create-react-app is an utility to bootstrap a react project: if you use it with npx ( npx create-react-app my-app ) you will have your my-app project in place without the need to install create-react-app itself ( which will need another passage: npm install create-react-app and then create-react-app my-app) ^^

EDIT:
Oh, welcome to the community btw! :smiley:

7 Likes

Alright, thank you very much
i think this is more comprehensive for me. So using npx create-react-app my-app will only allow me use the react packages without it being installed normally on my application right?

So preferably npm is much nicer to use ?

npx is mostly used to run scripts located in ./node_modules/.bin, but it has a few other uses, including running commands from a specific version of a package, whereas npm is for installing packages themselves.

If you’re on linux or a mac, type man npx and you’ll see the documentation on its uses.

1 Like

npm:
npm create-react-app my-app executes the local create-react-app package from your machine, so you first have to install it globally on your system with npm install -g create-react-app.

npx:
If you run npx create-react-app my-app and don’t have create-react-app globally on your system, it will get downloaded and not installed globally. This is great if you don’t want to pollute your system with global packages that you only run once every two months.

8 Likes

Cool, tnx for answer, but where is it store the downloaded package by npx? In node_modules temp folders?

By default, into wherever your NPM cache location is. You can specify the location of the cache when you use the tool (via the --cache flag) if you really want to (it is highly probable that you don’t want to do this though).

1 Like

NPM - Package manager
NPX - Package runner