BETA

React.js+Material UI+axiosでJSONデータを読み込んで表示させるペライチなページを作る

投稿日:2020-04-08
最終更新:2020-04-08

React.js、はじめました。

今回作ったのは個人的な用途でグルーピングされたドメインの一覧を列挙するページです。

これだけ。

内容的にはもう少しありますが

  • どこかに保持しているJSONデータをaxiosで取得し、textareaに表示
    • 表示直前にJSONの配列から改行を含むベタなテキストへの変換を実施
  • textareaのデータはボタンをクリックするとクリップボードに貼り付けることができる

という内容。「表示してコピペできるよ」というものです。

詳しい処理は省きますが、初めてまともにReact.jsに向き合ったので、練習がてらという感じです。

  • React.jsの基本的な書き方(axiosでJSONデータを取得し子コンポーネントに渡すタイミングの都合でApp.jsのみClass Componentとし、他は全てFunctional Componentにした)
  • create-react-appの基本的な使い方
  • コンポーネント化
  • propsによるデータの受け渡し
  • Material UIの練習

この辺りの良い練習になったと思います。子コンポーネントから親コンポーネント経由で他のコンポーネントにデータを渡そうとして四苦八苦した辺り(結局App.jsでやることにした)はVue.jsでも経験した記憶があるので、Vue.jsの勉強も活きたと感じました。

余談として、クリップボード周りを最初react-clipboard.jsでやろうと思ったのですが、buttonタグが生成されてデフォルトのデザインになってしまってMaterial UIと乖離してしまったので、他のパッケージに当たったということもありました。

今回はMaterial UIを活かしつつクリップボード周りの挙動のみのパッケージがあったので良かったですが、なかったらもっと苦労していたと思います。

参考

React.js

React.js内でaxios

React.js内でasync/awaitを使用

Reactの子コンポーネントから親コンポーネントにstateを渡す

Vue.jsでも面倒臭かった記憶が……結局、「親コンポーネントでsetStateした値をpropsで子コンポーネントに渡す」と逆転させることで解決。

React.jsでクリップボードにアクセス

いくつか候補はあったがMaterial UIのButtonコンポーネントを使いたかったので、デザインの当たらないreact-copy-to-clipboardを採用。

Material UI

React ComponentクラスにMateriau UIでスタイルを当てる方法

makeStylesではなくwithStylesを使う。

SnackBar

ビルド時に静的ファイルのパスを相対パスに変更

textarea内の文字サイズが小さくなる現象への対処

その他

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう