tsdxでReactコンポーネントを作る

tsdxを使うことで、React(TypeScript)のコンポーネントライブラリを簡単に作ることができます。

Setup

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

Reactコンポーネントを作る場合は --template react

tsdxは basic / react / react-with-storybookからテンプレートを選べます。. reactを選ぶと以下のような構造で作られます。

 % 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

表示を確認しながら作る

exampleディレクトリにサンプルアプリが用意されてます。このアプリを起動させることで見た目の確認をローカルで行えます。

$ 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.

プロジェクトルートのほうでyarn startを実行すると、ファイルの変更をwatchしてビルドしてくれるようになるので、HMR的な動きをしてくれます。

テストコードを書く

test/blah.test.tsxに簡単なコードが用意されてますので、これを参考にすると良いでしょう。enzymeやreact-testing-libraryあたりは自前で入れる必要があります。

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);
  });
});

.npmignore を追加しておこう

exampleなどをこうかいされても困るので、追加しておくと良いかなと思います。

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

作ってみたもの

習作としてhttps://www.npmjs.com/package/react-github-ribbonsというものを公開してみました。GitHub Pagesなどでおなじみのこの画像をReactで使いやすい感じにしています。