Live preview can be found here
The node package manager grants access to a vast number of libraries and other tools that can be used in development and/or in production. `package.json` will let you manage your project's dependencies with ease.
From what i understood, webpack allows you to compile javascript modules and "aggregate" your segregated code into single/few files 🤔. One thing that I like about it is it watches the changes in my file and automatically reloads them.
There is also these concepts called entry and output in webpack. The source code, the files that webpack will bundle are saved in the `src` folder. In the `src` folder, you have an entry file, for example, in this project, `src/index.js`. It is the JS entry code. When index.js is compiled, all imported modules and other code in it will be bundled by webpack and saved in the distribution folder `dist` as `main.js`.
Development dependency are the libraries that can be used during the development process of the project, but not in production. For example, the web-pack CLI is needed during development but not during production.
I have heard about transpiling code before, but it is my first time SLIGHTLY understanding what it is for 😆. Transpiling code means you convert a source code from another language or from current JS version to a previous version. This is very helpful in order to avoid cross-browser compatibility issues or unsupported features in a browser with code using more modern JS styles.
Mmmmm 🤔, I believe the normal advantages of grouping code based on what it does leads to more readability and at the same time reusability.
In named exports, you can export multiple functions or objects. In default, only one single export is allowed.
``` export {one, two}; ``` ⬅️ named export
``` export default One; ``` ⬅️ default export
Overall, in this exercise, I did a lot of DOM manipulation because I am only supposed to leave the html file as simplest as possible and render the components dynmically
