The Web Applications needs HTML, JavaScript, CSS and Icons to work. Creating a web application in modular approach makes it hard for packaging HTML, JS, CSS and Icons of a component and combine them during deployment.
The solution for modular web application development is to develop all these parts (HTML, JS, CSS and Icons) using the technologies which can be transpiled into Pure Javascript. The Javascript then can be shared as NPM package. JSX can be used to create HTML in javascript. CSS-IN-JS libraries (for example styled-components) used to create CSS in Javascript. The Icons created using SVG can be embedded in JSX which inturn compiled into pure javascript.
During deployment, the bundler and other tools can re-generate the HTML, CSS and JS back from the Javascript. Tools like webpack, parcel, vite generates the web applications from these reusable NPM packages.
Check out these Amazing Material UI Components here https://sodaru.github.io/mui-extended
These components uses JSX, and Styled Components and can be included in any of your react application.
Happy coding
Top comments (0)