This week officially kicked off Phase 2 of my Bootcamp, building on our JavaScript knowledge and moving onto React.
In the introduction to React, we dive into npm, or Node Package Manager. npm is essentially a way to manage JavaScript packages that contain existing, open-sourced, reusable code that allows developers to save time and focus on building their applications.
As a beginner developer that finished building her first app in 4 days, and already thinking about the next, I thought packages were fascinating and wanted to highlight a few in my blog. Coding efficiently and effectively is crucial since we only have 1 week to build an MVP app. The ability to Frankenstein existing code that’s probably 10x better than one I can write is something I certainly want to spend more time exploring. Since it’s also open-sourced, it’s great to know there’s a community of devs helping each other innovate and improve, to build the next great app.
Some interesting facts to know about npm:
- What the npm acronym stands for is actually debatable and there’s a package dedicated to generating random acronym definitions on the npm site. (Some of my favorites are: “Now Packing Magic,” “Node’s Power Meal,” and “Nectar of the Programming Masses”)
- Created in 2009 > npm, Inc. was founded in 2014 > acquired by GitHub in 2020
- Over 11 million devs use over 1.6 million packages, with just under 30 billion downloads in the last week (as of 6/7/21)
- NodeSchool is an educational resource where you can learn essential skills right in your terminal via npm packages!
In the first few days of getting to know React and npm, I searched for some widely-used and unnecessary npm packages:
List of helpful front-end npm packages
(source >popular libraries)
- lodash: makes JavaScript easier to work with arrays, numbers, objects, strings, etc.
- bootstrap: popular frontend framework for building quick, responsive, mobile-first sites (highlights: uses a grid system, and includes glyph-icons for free)
- react/react-responsive: declarative, efficient, and flexible JavaScript library for building user interfaces.
- swiper: mobile touch slider used in mobile websites, mobile web apps, and mobile native/hybrid apps
- moment: JavaScript date library for parsing, validating, manipulating, and formatting dates
…and some not-so-helpful, but fun to know packages
(source)
- is-ten-thousand: check if a number is equal to 10,000
- true/false: function that returns the boolean value true/false
- emoji-poop: logs a poop emoji
- is-odd/is is-odd: is-odd returns true if the number is odd; is is-odd checks for the function is-odd
As I’m going through Phase 2 and completing Labs, I’ll be spending extra time reviewing the code from packages. One of npm’s use cases is to “discover multiple ways to solve the same puzzle,” so in order to become a good developer, I’ll have to look at how other developers structure and build out their code. Hopefully, I’ll be able to publish a package in the future that’ll be helpful to other developers!
