How to create a React Component Library | GitLab NPM registry | Babel | Material UI | Step by step

Опубликовано: 21 Сентябрь 2024
на канале: Codeching
5k
58

In this tutorial I will show you how can you create an NPM package using CRA (create react-app) tool. We will use Babel to transpile our code and we will use Gitlab's NPM registry to distribute the package. I will show you, how can you use Babel presets to transpile SVG components, import statemements and other critical parts from your React application made with CRA (create react app) tool. We create a test NPM package based on a project, which uses Material UI and theme override.

Why do you need to create an NPM package in real life situations? One real life example is when you have to separate your design system and common components from your main project's code, you need to create a separate package to be able to use them in multiple projects by multiple teams. I found myself in similar situation few weeks ago, so I decided to create a step by step tutorial about creating NPM packages in React.

!IThe source code will contain the simplified version of the components you can see in the video.

You can access the source code here:

The final source coe here:




------------------------------

Welcome to Codeching channel!

My name is László Leber

Webpage:
Facebook:
Twitter:
Instagram: