我尝试使用React制作了一个简单的Web应用程序

这里有一篇关于给这个应用添加功能的文章！我尝试给React的Web应用添加功能，使其像编辑器应用一样。

首先

简要

• サイトはこちら、Githubリポジトリはこちら

ボタンデザインを自分で作れるサイト
開発環境はReact, Typescript, Vite, MUI
所要時間は20時間程度 (約1週間)
レスポンシブは600px以上(スマホ横画面、タブレット縦画面程度)対応

功能- 功能

• ランダムなテキスト・色のボタンを追加、選択中のボタンを複製、Reactコードを表示、色を変更、選択中のボタンを削除

＋ボタンを押すとランダムなテキスト、ランダムな色のボタンを作ってくれます。色は完全ランダムだとめちゃくちゃなボタンばかりできてしまうので、いい感じのを種類化して作りました。テキストは200種類ほど、色が60パターン程なので、全パターン数は12000種類程度。

技术

• グローバル状態管理はuseRecoilを使用

• useStateだとバケツリレーが辛く、Redux使うほどでもないのでちょうどいいuseRecoilにしました。RecoilはuseContext + useStateと機能的にはほぼ同じですが、書き方やデータ管理がより楽です。

• UI系は基本的にMUIを使用

• MUIからはButton, IconButton, TextField, Tooltip、他はコード表示部分でreact-syntax-highlighterを使用しました。MUIは実務でよく使っていて慣れていたので、細かい調整等もそこまで大変ではありませんでした。

デプロイは、gh-pagesを使ってGithub pagesにデプロイしました。CIはGithub Actionsで、ビルドが通るかの確認だけしています。

努力付出的部分

ユーザのアクションは全てアイコンボタンにして、カーソルを合わせると説明が表示されるようにしました（以下画像参照）。はじめはテキストが入ったボタンにしようとしたのですが、ここのゾーンがかなりごちゃごちゃする印象になったのでこのようにスッキリさせました。

总结和感想

作为个人开发者，这是我第一次认真地输出成果。虽然这个应用程序还有一些我想加入的功能，但我同时也想尝试其他的项目。

我有一篇关于给这个应用程序增加功能的文章！我把它加到了React的Web应用程序中，使其呈现出类似编辑器应用程序的风格。