Find How Many Packages We Need to Run a React' Hello World' App

A tutorial on finding how many packages are needed to run a React' Hello World' app.

I built a really simple React app with the create-react-app command. I recently started the npm-cli series on my website. When I was writing an article on my next topic, suddenly, one idea popped into my mind — how many packages require to run a simple hello world app?

I think React only needs 100 to 200 packages for running. So I run the npm command to figure out the actual number of available packages in the node_modules folder. Unfortunately, the list of packages is ten times higher than my expectation.

The answer is 2839 packages are required to run the simple React hello world app. That is true. Yes, it is true because some packages depend on other packages, project dependencies increasing the list.

famous quote on node.js copyright Internet

Suppose you see this type of code based on Node.js. Then, at the end of the article, you will understand the code's meaning in my writing. If someone asks you for proof, send my article link to that person.

In the end, you understand the concept and how to find the direct dependencies and all present dependencies in your project and tell me how many dependencies are currently in your project in the comment section.

How do we find how many packages are currently in my React app?

Simple, you run one npm command to check all the package lists presently used.

npm ls -a

Npm ls -a or ls --allwill show all outdated and installed packages or dependencies list. It also offers only those packages that depend directly on the current project and package.

List of packages present in your react app.

How many folders or direct dependencies are present in my React hello world app?

There are two ways to count your project's direct or immediate dependencies. First, it is directly associated with your root-level project.

1. With npm (recommended way)
2. With Linux Command

With npm (recommended way)

The npm ls the command comes with lots of prebuilt options or flags. With flags, you count direct dependencies or immediate dependencies in your project.

To count direct dependencies, we use npm ls --depth command.

npm ls --depth

npm ls --depth Shows only the direct dependencies of the root project. npm --all flag shows you all dependencies of your project.

With Linux Command

You can check all the dependencies using two commands. Every folder in node_modules have dependencies for your app.

1. First way
2. Second-way

First way

First ways we use ls command and combine with wc command to check all the dependencies.

radewala_2@cloudshell:~/my-app/node_modules (ghosttesting)$ ls | wc -l
801

Second-way

In Second-way, we use find command and wc command to the print count of the folder present in your node_modules .

radewala_2@cloudshell:~/my-app/node_modules (ghosttesting)$ find . -mindepth 1 -maxdepth 1 -type d | wc -l
803

1. For find -mindepth means total number recursive in directories
2. -maxdepth means total number recursive in directories
3. -type d means directory

Why is Nextjs so fast as compere to Reactjs?

Conclusion

When I see the total number of dependencies present in my React project, I'm more concerned about Node.js and afraid of my app's security and speed.

I know some frameworks like Next.js, etc., work very well in terms of speed. However, the problem when we add more packages, enhance user experience, and provide other functionality is that we lose the security of our app.

In terms of security and speed, Deno is the future of the web. But Deno faces a lack of altercation between companies and developers. Node.js, I think, never was promoted seriously.

Note:

My article is based on create-react-app . If you add separately React.js to your project in that case maybe your project dependencies also increase or decrease. it depends on your requirement.

You can follow and read more articles on officialrajdeepsingh.dev and tag them on Twitter.

Read More content on the frontend web. Sign up for a free newsletter and join the frontend web community on medium.