The relationship between React, JavaScript, HTML, and CSS
I will get to NPM shortly. First, it’s important to take a quick peak at the relationship between React, JS, HTML, and CSS in order to figure out where NPM fits in all this.
Before I started coding, I asked a software developer friend of mine what the difference between all these programming languages were (ah, baby SWE me was very naive and lost). He explained the difference to me as a metaphor. Imagine building a house:
- HTML is the blueprint. It says “frame here, door here, wall here, sink here, lightswitch here”
- CSS is the styling. It says “door is blue and made of oak, and fills up the doorframe with an inch of space at the bottom”
- Javascript makes the house work. It says “when you turn the door knob and push, the door opens. When you press the lightswitch, the lights turn on”
- React is a building company. It builds the house for you in a particular way, and makes everything in it work.
Now devs argue over whether React is a JavaScript framework or a JS library, but regardless, when we create React based applications, we often need to download additional libraries and dependencies for our apps to work.
Enter npm
npm is here to save the day! npm is a JavaScript software tool that automates the processes of installing and configuring those other packages, a type of file containing computer programs and metadata, that we need for our app. npm was originally released in January 2010 (a whooping 12 years ago!) but it is now run by a subsidiary of GitHub and Microsoft. (While many people believe npm is an acronym for “Node Package Manager”, they would be wrong — apparently the people running npm have a quirky sense of humor and have deemed npm a “recursive bacronymic abbreviation for “npm is not an acronym”.)
By running npm install while in the terminal of our React application, we are able download those additional dependencies that are needed to make the app function.
Wait so what is npm exactly? Why do we need it again?
npm is a repository of mostly open source software that can be used by anyone — that’s where the dependencies come from! Why do we need it again? Let’s use another analogy. Let’s say you’re trying to build a car. If you **really** wanted to (and had unlimited time and resources) you could go mining(?) for material, smelt the metal, make each of the parts, put it all together, blah, blah. That takes a lot of time, money, effort, expertise, etc.
A normal person, if they wanted a (custom) car, could just go buy parts (steering wheel, body, engine, etc.) and then put them all together. Software engineers are not here to re-invent the wheel (pun intended) either. That would be hella tedious to say the least! Through npm, SWEs can rely on pre-built code that other SWE’s wrote and published onto the npm registry.
To use that package, you simply type into you command line npm install <package> and ta-da! you now have access to that software file on your own computer!
In conclusion…
Suffice to say npm makes coding easier and while it seems mysterious to just type npm in our command line and see a bunch of lines of code pop up and do magic, we’ve briefly delved into and unpacked what npm is, which is basically another way SWEs help one another on the quest to make coding projects that make our lives easier.
Running on Tofu Legs 