I am starting to experiment with building react projects, but its annoying having to install 300MB folder of packages, when my own src folder is less than a MB and react packages are also not too great of a size. I came to the point i have a boilerplate folder with NPM installed and just swap import paths in the index file to the current project i work with, but still i dont get it. There must be a way to include React for the sake of learning it in your projects without lal the extra weight. On codepen all i did was include the cdn link to react and react dom.
Right, but what you’re downloading locally is all the tools that let you develop. The actual end product is just a small file of Javascript code.
You need Node, which is around 200Mb, to run the tools, then each project has its own copy of the tools/libraries/etc it uses, which is what you’re talking about – they are called packages, and they are stored in a given project’s node_modules folder.
CodePen doesn’t have a special way of doing things that doesn’t require lots of tooling, all those tools are still there, you just use them via a web app.
And you can still just use CDN links if you want, there are instructions on the React website, you just won’t get any of the useful things you get when you install tools to help you develop and build that end product.
All programming languages (well, platforms really) need to do this. There are some where you install one version of all your tools once, in one place on your computer. This approach has the major issue that if you update any of the tools, it may in turn then not be possible to build any of the existing projects you have on your computer: they will break. If there is very limited storage space, then this is a reasonable approach as conserving storage space is very important. This approach just tends to be extremely painful to manage.
NPM, the package manager used by Node, avoids this problem in the same way a large number of other languages do: you install tools specific to a project alongside that project. This has the downside of needing more disk space, but storage is very cheap nowadays so this is seen as a reasonable trade-off.
Edit: NPM does not do anything particularly clever, it just dumps basically everything in that node_modules folder. There are two other JS package managers that have slightly different approaches
- PNPM installs each version of each package once on the system, and links that into node_modules. So if you’ve already got one version of one package installed, you don’t need to reinstall it, PNPM will just link the existing package
- Yarn doesn’t use node_modules, it zips packages and stores them in a cache in the project, which means it cuts the storage requirements drastically (looking at about ~40Mb rather than ~300Mb)
For comparison, to build iOS apps, I need to install a minimum of 13 gigabytes of tooling before I even think about starting to create an app, and before I even think about adding libraries/frameworks etc.
2 Likes
Thanks for your reply Dan!
I used Codepen only as a reference for easy to build projects environment.
VSCode alone gives me enough extentions to ease my life. Recently i built a game, using vanilla JS, without external libraries, apart from SASS for the styles part. There was no downloading involved. Now, in an attempt to get better familiar with React, i wanna build the same game with that framework and boom, ive got to include the 300MB in order to develop it, but i fail to see my big use of all that bulk. All im doing is accessing the React hooks and the ReactDOM object. They cant be larger than a couple of MB. My main concern is to get more familiar with the React syntax and how to properly apply the hooks etc. On the machine i code, i odnt have large HDD and dont really want to install and load NPM everytime i start a project, nore store it for each and every project in order to run it per call. For a month, i reviewed and coded like 20 basic example projects and i find it overkill to apply NPM for each and every one of them.
Is CDN a safe approach for get going for lesser projects? Isnt there a way to put the React data locally on the project and only access that data, containing the hooks and nooks and Objects i use 
without Node/NPM and its inventory of packages
1 Like
Yes, of course, there are instructions in the React website to do just that. That is more than enough to learn. Edit: At some point soon you’ll have to wade into managing projects and figure it all out, but that’s a huge rabbit hole & IMO you don’t need the extra load atm
If you can forgo JSX it becomes even easier, as you don’t need to use a transpiler to convert JSX to JS, but it’s painful writing code that way (though there is the option of Preact, which has the exact same API as React but can use string templates that look almost identical to JSX but require no transpiling & can be loaded entirely in modern browsers using ES modules)
There are also services like CodeSandbox, which provide an online development environment, so you’d avoid downloading [as much] – CodeSandbox & most similar services use a version of VSCode, so the interface should be immediately familiar.
Re size, React itself is around 70Kb. What you have to remember is that create-react-app, which I assume is what you’re talking about, contains everything and the kitchen sink in terms of tools you might need, plus it needs to work for everyone, on any OS, so there are piles of stuff that you specifically might not use but that someone else relies on.
It’s designed to be one-stop, you just download it and you don’t have to mess on finding all the bits and bobs you might want (compile to CSS stuff, testing, a development server that reloads as you code, etc). The tradeoff is that means there’s a lot of stuff
1 Like
I mean, I know it’s a shock, perhaps, but practically, I see a 1TB SSD for $115. That means .0115 cents for a MB or 3.45 cents for that 300MB. For what we get, I think that’s a pretty good deal.
Yes, it is a shock. But in the end, I don’t think it is a big deal. Dan mentions some mitigation strategies. I also occasionally just go in and delete node_modules folders - I need to write a recursive script for that.
Don’t worry about too much, unless it becomes a problem.
1 Like
We have node server side projects that weigh in at 700-800GB when dockized with the native libraries we need. Our main site is around 400MB for the Front End prebuild and 900MB for the Back End. Think about it this way, you are coding on the shoulders of giants. I’ve done a plain js single page site with out React or even JQuery and it took 4-5 times longer.
3 Likes
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.