個人開発で使うReactのライブラリをまとめました

はじめに

学習したことのアウトプットとして書きました。 現在プログラミング学習中の実務未経験の者であり、技術的な内容などに誤りを含む可能性があるので不適切な記述などがありましたらコメントで教えていただけると幸いです


ライブラリを実装する際の注意

ライブラリを実装するとそれだけ処理が重くなり、レンダリングが遅くなるので過度に使い過ぎないようにするのがいい。👉 成果物の使いやすさを重視

UI, CSSフレームワーク

https://mui.com/

https://ant.design/

https://react-bootstrap.github.io/

https://chakra-ui.com/

https://headlessui.com/

https://nextui.org/

https://mantine.dev/

https://tailwindcss.com/

https://ui.shadcn.com/

HTTP Client

https://github.com/axios/axios

キャッシュ

  • RectQueryの方が多機能なので様々な機能を使いたいときはReactQuery
  • とりあえず導入したいときはSWR

https://swr.vercel.app/ja

https://tanstack.com/query/latest

フォーム、バリデーション

https://react-hook-form.com/

https://github.com/jquense/yup

https://github.com/colinhacks/zod

テキストフォーム

自動でサイズ調整してくれる

https://github.com/Andarist/react-textarea-autosize

状態管理

https://zustand-demo.pmnd.rs/

https://github.com/pmndrs/zustand

https://jotai.org/

https://recoiljs.org/

https://redux.js.org/

参考https://react-uncle-blog.netlify.app/blog/react-state-managment

アイコン

https://react-icons.github.io/react-icons/

https://fontawesome.com/v5/docs/web/use-with/react

https://mui.com/material-ui/material-icons/

ポップアップ

https://react-hot-toast.com/

https://www.npmjs.com/package/react-toastify

ローディング

https://mhnpd.github.io/react-loader-spinner/

https://www.npmjs.com/package/react-loading

セレクトボックス

https://react-select.com/home

オーディオ再生

https://howlerjs.com/

アニメーション

https://www.react-spring.dev/

https://www.framer.com/motion/

紙吹雪

https://www.npmjs.com/package/react-confetti


最後に

よく見かけるようなものを初心者がまとめてみました おすすめがあったら教えてください