ReactにはReact Routerをはじめとして多くのライブラリがあり、ライブラリを使うことで効率的に開発することができます。今回は多くの人に愛用されるReactライブラリについてご紹介します。
個人的によく使ってるライブラリ
- React Router @v6 (react-router-dom)、axios、Semantic-ui-react
Reactで使われやすいライブラリ
ライブラリが多いほど処理が重くなるので、必要なもののみを採用すること。
- MUI：最も有名なライブラリ。@mui/materialなど。MUI入門。見た目の統一。
- React Router Dom：ルーティング(画面遷移)。
- React-Bootstrap：2番人気。
- Semantic UI React：3番人気。React-Bootstrapの代替として人気。
- Ant Design：4番人気。アリババ開発。
- Chakra UI：5番人気。webベースappとwebsiteを対象にしている。
- AXIOS：特定のエンドポイントへのリクエストを送信できるようにする、HTTP クライアントライブラリ。リクエストを送信することで、API に、そのリクエストに応じた処理の実行を要求する。API(バックエンド)とフロントエンド間の通信ライブラリ。フロントエンドからaxiosでgetリクエストを出して、バックエンドからjsonを返す。外部APIの取得。
Reactのおすすめライブラリ②
- Redux：状態管理。Zustandやjotaiもあるが、最もシェアが高いのはRedux。
- Redux-toolkit：Reduxのヘルパーライブラリ。Reduxよりコード量が減る。
- React Loader Spinner：良い感じのローディング画面を表示してくれる。
- Font Awesome React：アイコンに特化したもの。
- react beautiful dnd：Drag and Dropの動きを表示できる
- Framer Motion：ページが遷移するときのアニメーション。
- react-hook-form：フォームの主流。バリデーションはZod(Yup)がおすすめ。入力項目が増えてきた場合に使いやすい。
- emotion：CSSのおすすめ。tailwindはクラス名を考える必要がなく選択肢に入る。
- React Reveal：画面スクロールで起こるアニメーションに特化している。
- ReactQuery、SWR：通信で取得したデータをキャッシュして利用できるライブラリ。
Reactでおすすめのライブラリ③
- Styled Components：保守性の高いコンポーネントの提供。
- React Virtualized：パフォーマンスの改善。
- Jest & Enzyme：テストライブラリ。
- Video React：ビデオを埋め込みを良い感じにしてくれる。
- React Flicking：スクロールやスライドできるUIを提供する。
- React Animations：簡単なアニメーションを実装できる。文字が動いたり。
- Material Table：テーブル系で最も使われている。
- React PDF：PDFをコンポーネントとしてレンダリングして見やすくしてくれる。
- Spectacle：マークダウンやスライスを作成でき、スライド発表機能まで搭載されている。
- React Awesome Slider：画像スライドを簡単に作成できる。
- React Image Gallery：フォトギャラリーを簡単に作れる。
- react-textarea-authosize：自動でサイズを調整してくれる。
- React hot toast：お手軽にポップアップを実装できる。
- grapqh-codegen：GraphQLのスキーマからTypeScriptの型定義や、Hooksを自動生成してくれる。
- react-three-fiber：ReactでWebGLを使いたいときに活躍する。
- react-ztext：マウスカーソルで任意の文字列や絵文字をぐりぐり動かせる。
- Expo：React Nativeの開発ツール。
- Rebass：UIの構築が楽になる。
- Recharts：グラフ系で最も古いライブラリ。
- Vivtory：色んなグラフやチャートを表示できる。
- Visx：Airbnbが開発した、チャート用ライブラリ。
- React-Vis：Uberの開発した、チャート用ライブラリ。
- React StockCharts：株価専用のチャート。
コメント