Packages
Packages, of libraries, zijn tools om je app en/of development proces beter te laten verlopen. Op het moment dat je deze packages installeert (via NPM), komen ze in de package.json van je project te staan. Ze komen dan in de lijst van dependencies of devDependencies te staan. dependencies is de lijst van de packages die voor de applicatie zijn en de devDependencies zijn de packages die voor het development proces zijn. Hieronder een voorbeeld van hoe zo'n package.json eruit ziet met zijn packages.
Het installeren van dependencies gaat bij devDependencies even iets anders dan bij normale dependencies. Je moet er dan namelijk --save-dev achterzetten, omdat je wil dat deze package in de devDependencies ge-savet wordt.
Dit is een devdependencie (tool om het developen makkelijker te maken) om ervoor te zorgen dat je code overzichtelijk èn consistent blijft. Wat ik erg nice vind aan deze package, is dat je hem helemaal kan configureren naar hoe jij hem wilt hebben. Oftewel: wat bij jou als developer past.
npm install --save-dev eslint
Deze package is een devDependencie die zorgt voor het automatisch reloaden van de applicatie in de broswer. Op het moment dat je een aanpassing maakt in je applicatie en hem opslaat, wordt de applicatie automatisch gerefresht. Dat is handig voor de developer, anders moet hij telkens naar de browser gaan om zelf handmatig te refreshen en dat kost tijd. En 🕒 = 💰 .
npm install --save-dev nodemon
Deze package heb ik geïnstalleerd, omdat ik het een erg fijne tool vind om mijn componenten ermee te stylen. De styling gebeurt precies zoals plain CSS dat ook doet. De styling bevindt zich binnen in het component zelf, dus je hebt gelijk alles bij elkaar. Bovendien genereert deze package ook unieke 'classnames'. Hierdoor zal het nooit in conflict raken met overige styling van de applicatie. De toepassing van deze package kan je hier zien.
npm install --save styled-components