Exporting a Web Component from a React Codebase using Webpack: A step-by-step guide
In this tutorial, we will walk through the process of exporting a small part of a regular React app as a separate web component using Webpack.
Web components are reusable, modular components that can be imported and used in any web application, regardless of the underlying technology. This can be particularly useful if you have a software application with multiple frontends for different user groups, such as a user interface and a back office/administration interface.
In many cases, the frontend technologies used in these different views are incompatible, making it difficult or impossible to copy and paste React code between them. However, by creating a web component from a part of your React app, you can easily reuse that component in other parts of your application.
Why is this article special? This tutorial is end-to-end and also covers how to actually build your Web Component using Webpack. Also, you get an idea of how to structure your code in an existing codebase.
1. Set up a React project (optional)
To begin, you will need to set up a React project. If you do not already have one, you can use the create-react-app (CRA) tool to bootstrap a new TypeScript React project…
