This content originally appeared on Bits and Pieces - Medium and was authored by Ghazi Khan
Learn how to create a React library using TSDX and automate its publishing with GitHub Actions.
React is a popular library for building web applications and creating reusable React components can save a lot of development time. TSDX is a tool that helps in creating, testing and publishing React libraries. It is easy to set up, comes with several pre-configured libraries, and supports TypeScript out of the box. In this tutorial, we will learn how to create a React library using TSDX and automate its publishing with GitHub Actions.
Step 1: Setting up the Project
To start, we will create a new project with TSDX by running the following command in the terminal:
npx tsdx create my-react-library
This command will create a new project with a pre-configured TSDX environment. Once the project is created, we can start adding our components to it.
Step 2: Creating the Components
We will create a simple React component that displays a greeting message. We will add this component to the library we are creating. Here is the code for the component:
import React, { FC } from 'react';
interface GreetingProps {
name: string;
}
const Greeting: FC<GreetingProps> = ({ name }) => {
return (
<div>
<h1>Hello, {name}!</h1>
</div>
);
};
export default Greeting;Once the component is created, we need to add it to the index.ts file, which exports all the components in the library. Here is the code for the index.ts file:
export { default as Greeting } from './components/Greeting';Step 3: Testing the Library
We can test our library by running the following command in the terminal:
npm run test
This command will run the tests in the src directory. We can add more tests in the __tests__ directory.
Step 4: Publishing the Library
We can publish our library to the npm registry by running the following command in the terminal:
npm publish
This command will publish the library to the npm registry, and it will be available for other developers to use in their projects.
Step 5: Automating the Publishing Process with GitHub Actions
We can automate the publishing process with GitHub Actions, which allows us to automatically run scripts and tasks when certain events occur, such as pushing code to the repository. Here are the steps to automate the publishing process with GitHub Actions:
- Create a .github/workflows/publish.yml file in the root directory of the project.
- Add the following code to the publish.yml file:
name: Publish
on:
push:
branches:
- main
jobs:
build-and-publish:
runs-on: ubuntu-latest
steps:
- name: Checkout Code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14.x'
- name: Install Dependencies
run: npm ci
- name: Build Library
run: npm run build
- name: Publish to NPM
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
run: npm publish
3. This GitHub Action will run when the code is pushed to the main branch. It will check out the code, set up Node.js, install dependencies, build the library, and publish it to the npm registry using the NODE_AUTH_TOKEN environment variable.
Conclusion
Creating a reusable library package is very useful when we need to use similar functionality or UI component in different projects. By using the above steps it will help you to create a library and publish it to NPM with a one-time setup of GitHub Actions.
💡 You can also publish your reusable library package to a component hub like bit.dev. With OSS tools such as Bit, you can independently test, document, version, and publish your UI components which can be reused across multiple projects and teams.
Learn more here:
Building a Composable UI Component Library
Follow me on Medium to get more updates on ReactJS, NextJS, NodeJS, Web3, Solidity and lots of exciting topics.
Build React Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
- How to Reuse and Share React Components in 2023: A Step-by-Step Guide
Creating a React Library Using TSDX and Automating Publishing with GitHub Actions was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Ghazi Khan
Ghazi Khan | Sciencx (2023-04-15T06:01:40+00:00) Creating a React Library Using TSDX and Automating Publishing with GitHub Actions. Retrieved from https://www.scien.cx/2023/04/15/creating-a-react-library-using-tsdx-and-automating-publishing-with-github-actions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.