Create React Component (TypeScript) by tsdx

We can easy to create your own React component library using tsdx.

Setup

We can create own package by tsdx create.

$ npx tsdx create --help
  Description
    Create a new package with TSDX

  Usage
    $ tsdx create <pkg> [options]

  Options
    --template    Specify a template. Allowed choices: [basic, react, react-with-storybook]
    -h, --help    Displays this message

  Examples
    $ tsdx create mypackage
    $ tsdx create --template react mypackage

Select --template react to create component

We can select template when create project from basic / react / react-with-storybook. Choose react, it will create a new React component project.

 % npx tsdx create --template react tsdx-react
 % cd tsdx-react 
% tree -L 1 -I node_modules 
.
├── LICENSE
├── README.md
├── dist
├── example
├── package.json
├── src
├── test
├── tsconfig.json
└── yarn.lock

4 directories, 5 files

Start development application

The template has example directory to test your Component in your browser.

$ cd example
$ yarn
$ yarn start
✨  Done in 9.64s.
yarn run v1.21.1
$ parcel index.html
Server running at http://localhost:1234 
✨  Built in 6.32s.

When you run yarn start in the project root directory. The example application will automatically refresh by your code updating.

Test the application

tsdx will create example test code in the test/blah.test.tsx. You can update the test code.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Thing } from '../src';

describe('it', () => {
  it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<Thing />, div);
    ReactDOM.unmountComponentAtNode(div);
  });
});

Add .npmignore for publishing

Probably, we have to put .npmignore before publish the package.

example/
.github/
test/
yarn.lock
src/

Conclusion

tsdx is useful tools for React & TypeScript developers.

I’ve created a new component react-github-ribbons by using it. It’s super easy!.