【コンポーネント #1】ReactでComponentライブラリをつくってみる

今回よりComponentライブラリを作っていきます。

TypeScriptとReactベースで、CSSはBulmaを利用します。

その他には下記のツール等を利用します。

vite
Storybook
ESLint
Prettier
asdf

初期準備

まずasdfでnode.jsのバージョンを固定します。

node.jsのバージョンは、現在のLTSである20を指定します。

nodejs.org

asdfでNode.jsをインストールし、バージョンを固定します。

asdf-vm.com

asdf local nodejs 20.9.0

記述ルールを統一するために、.editorconfigを用意します。

(.editorconfig)

# EditorConfig is awesome: https://EditorConfig.org

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[Makefile]
indent_style = tab

[*.md]
trim_trailing_whitespace = false

プロジェクト作成

React + TypeScriptでプロジェクトを作成します。

Viteでプロジェクトを作成します。

ja.vitejs.dev

npm create vite@latest components -- --template react-ts

プロジェクトを作成します。

(package.json)

{
  "name": "components",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}