アルム＝バンド 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を渡す
- コンポーネント間で情報の受け渡し – React入門 – to-R Media
- javascript – A string ref, “grid”, has been found within a strict mode tree – Stack Overflow
Vue.jsでも面倒臭かった記憶が……結局、「親コンポーネントでsetStateした値をpropsで子コンポーネントに渡す」と逆転させることで解決。
React.jsでクリップボードにアクセス
いくつか候補はあったがMaterial UIのButtonコンポーネントを使いたかったので、デザインの当たらないreact-copy-to-clipboardを採用。
Material UI
React ComponentクラスにMateriau UIでスタイルを当てる方法
- reactjs – How to style components using makeStyles and still have lifecycle methods in Material UI? – Stack Overflow
- API – Material-UI
makeStylesではなくwithStylesを使う。