Is a bundler that uses the new advancements, like native ES bundles on the browser, to increase the speed of development. It gains amazing speed results compared to other options.
Vite gains this speed by dividing the app modules in two categories, dependencies and source code:
Dependencies: those that don’t change too often during development and are commonly plain javascript. Some dependencies are hard to process because of their size.To fix these problems, Vite pre-bundles this category of modules using “esbuild”, which is 10-100x faster than other JavaScript-based bundlers.
Source code: those that are being changed constantly and contain other formats than plain Javascript (example: css, jsx, ts). To speed up the processing times, Vite serves the source code as native es modules directly to the browser, making it take part of the job of the bundler.
Vite only transforms and serves code on demand by the browser requests.
It also supports Hot Module Replacement (HMR) over ESM (es modules). When a developer edits a file, Vite invalidates the links from that file’s ESM and replaces it with the new updated one, this results in a new render of the old module only, leaving the rest of the app alone.
As we are comfortable with it and our designs are based on material design, we will use MUI.
MUI is a React UI library that is based on Material Design and provides a lot of components that can be customized and applied to fasten up the development process.
Easy to use, well documented and with it’s own API, it's considered as one of the best UI libraries out there for React. It also provides a lot of tools to adapt the library to the proposed design system, from dark mode to custom color pallets and theming.
When working with HTTP requests we could just use ES native methods like “fetch”, but if we need to have more control over every request, axios is the best for the job.
It’s API provides functionalities that range from cancellation of requests, to transformation or interception of requests and responses.
We need axios for that last one, interception and transformation of requests to add the header values to each call, and counting of their number to show a loading screen while we wait for a response.
As React is a library, not a framework, we will need to add some dependencies to get some functionalities frameworks would normally provide. react-router-dom is the developer’s library of choosing when talking about routing, it provides a powerful API that can satisfy every need. From nesting of routes, management of parameters and queries, to the management of the famous 404 screen, react-router-dom has it all.