Hello🙋♂️ to all the curious devs🤓. Today in this post I'm going to breakdown the things that npx create-react-app does for us. I know there are many other articles for the same but as always I'm documenting👻 this firstly for me and if it proves to be useful for anyone out here reading this it would make me more than happy😸.
So let's start. I'll break this down in the form of questions, and below is the first.
What exactly is npx?
So all those who don't know and just kept on running the command
npx create-react-app, know that npx is a node package runner😎.
Oh! that was simple. N-node, P-package and X-???
Let the X here be from
executor, kind of program executor in other words program runner. So here we have it
node package runner.
We are going good😁 so far, now this article is not about npm but you might be thinking, and I mean might be thinking🤨 what is npm then?
So, again the same way npm is 'Node Package Manager' - N-Node, P-Package, M-Manager.
Now let's break down what is the role of a package manager and a package runner.🤫
Node Package Manager
- npm is a
package managerthat helps💪 you in managing the
dependencies/packagesyou as a developer want to have in your project.
- It also helps you in managing🤏 whether you want to install those packages globally (for all the projects) or locally (for the current project).
- This all that we are talking about is a CLI (command line interface) that gets installed when you install Node JS in your system.
But npm is more than that.🕵🏼♂️
So when you install a package on your system it's fetched from online, and in online that place is the npm repository.
So npm is a
package managerwhich is a
CLI and a Repository.
With now this sorted😼, it's time to hop back towards npx.
So it's obvious that you installed a package and you wanna do something with it. Maybe uninstall it which you can easily do with npm or use it by running it.
There's a catch
How to run a package or in other words execute it. Can't we do with the help of npm? And boy we can do it.
So the answer to why we need npx in the very first place is just about to be revealed.🦹♂️
How to run a package with the help of npm?
Now, for those who are thinking "I've run a package with npm before and aren't be always starting react server with the help of the command -
npm run start"
Yes, so if we are able to do it why in the world npx🥴🥴???
So the catch here is that - you can run
only those packages using npm run those are
specified in your projects package.json. And that simply means if you wanna run a npm package you gotta add that in your package.json.
You see all those
inside scripts. That's the
npm runfor various packages. Like
formatis for the
There are other
tedious wayto do so, such as specifying the local path:
_ npm run ./node_modules/.bin/your-package_
Now, there comes our hero🦸♂️ into the picture - NPX.
Let's explore what npx brings on the table🧙♂️ for us.
- npx easily runs Node.js based executable installed via npm.
- We can run a locally installed package easily, and that's what we are looking here for.
- There are other perks of npx but not in this article.
Do you know you can start react server with npx also as:
npx react-scripts start
It's time for CRA (create-react-app)👩🏻🎨
If you're a react-dev like me. Then you might have used this command atleast once in your life -
Now we know what npx is and from all our discussion it's also clear that create-react-app is an executable, so let's find out what it does for us.
CRA is a toolchain.
And now another term to breakdown🤦. What is a toolchain??
- Don't worry💆 it's a simple term which holds its meaning in its name. It's a chain of tools or a
collection of distinct toolsthat
helpsin achieving the
process of completingthe
software developmentand sometimes
CRA (create-react-app)is a
help in creation of a react project.
So instead of reinventing the wheel again, I would add few content from React Docs:
package manager, such as
Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
bundler, such as
webpack or Parcel. It lets you write modular code and
into small packagesto
optimize load time.
Babel. It lets you
works in older browsers.
So, in short a CRA offers all these functionalities. For more info on this you can refer to react docs.
Thank you folks for reading all through this article. I tried my best to breakdown the terms that would've otherwise made you feel like you are missing some context to this.
Keep reading, keep learning, and never stop being curious. See you until next time.✌️✌️✌️
Top comments (2)
Fabulously explained 👏
npx create-react-app, ideally you should do
npm init react-app. Any package with the
create-prepend can be used with
npm initomitting the
create-, so because the package is called
create-react-app, you can just do:
Still, you might want to take a look at Vite instead, a way faster dev experience for React and many others :D