DEV Community


Npx in React ... A typo or something that actually makes sense

・2 min read

Npm as we all know is a package manager for node. It is a tool that we use to install packages locally on our machine. It is a default package manager for node. If you wanna run the package that you just installed then you gotta specify that package in your package.json and install it locally and then do npm run the-package-you-just-installed.

But when initializing a new react project using create-react-app we do npx create-react-app. why is that? First, let's understand the problem we're trying to solve. So let's just forget npx and all that and let's do it using npm.

  • ok so first we gotta create the package.json file. So fire up your cmd and type npm init -y. -y will generate the package.json file without asking any questions.
  • next step is to install the create-react-app so type npm install create-react-app.
  • so we just installed create-react-app and now we run the package to create our react project. to do that we gotta modify the package.json file and tell npm the command to execute. Open up package.json in your favorite code editor and in the scripts object create a new key and name it react-app (you can name it anything you want). then store the string name "create-react-app" in that key. Alt Text
  • finally go to your terminal again and type npm run react-app [your app name]. after doing this your react project should be created. uuuf such a long process. Alt Text

lets make it much much much simpler ...

so now instead of npm just type npx create-react-app [app name]. this will skip all the previous steps and just create your project directly. so easy right xd. so what's happening here?
well, npx just executed the package specified without ever installing it locally. while npm installed the package locally npx just executed the package without ever installing it. so the conclusion is npx makes sense

Drop a comment or like the post or do both if you enjoyed the read. Follow me for more such content.

Discussion (0)