ちょっとハマったので、自分のメモ用。以下のissueにかかれていたことを元にして解決。 github.com上記の内容をカスタムフックにラップすればOK const { loading, data, error } = useQuery(SOME_QUERY) const [state, setState] = React.useState([]) React…

React Hook Formを使用するのは初めて。 React Hook Formを使用することでform内の値を管理するstateが不要になり、バリデーション機能も含まれているため、コード量を大幅に減らすことができる。またネット上にサンプルも非常に多いのも魅力的。form値の監…

Material UI学習時のメモ書き Gridシステム bootstrapを使用するときも同じだが、まずは基本のGridシステムの使い方を最初に知る必要がある。Gridは親Gridでcontainerを書き、その内側の子Gridでitemを定義する。 boostrapでいう、div class='container'とdi…

何も考えずにNext.jsでMaterial UIを使おうとすると以下のエラーが出ます。 Warning: Prop 'className' did not match. Server ... Material UIではSSRへの対応方法が準備されており、以下がそのサンプルです。 material-ui/examples/ssr at master · mui-or…

・コンポーネントはクラスコンポーネントではなく、関数コンポーネントを使用する。 ・Atomic Designをベースにコンポーネントを管理する 自分はとりあえずこの構成でやる。 - src - pages (only container: データ取得、APIアクセス、ロジック) - component…

CSS in JS。 コンポーネント内にCSSを記述できるのでスコープが明確になる。TypeScriptを使用するので、@types/styled-componentsをインストール。 TypeScript内のCSSの補完を行いたいので、typescript-styled-pluginもインストール インストール $ npm inst…

パッケージマネージャーはnpmを使用。 エディターはVSCode。VSCodeの設定とPrettierの設定は以前書いた。MacでVSCodeを使用してみた - とーますメモ 【VSCode】 フロントエンド開発の使う自分用のPrettier設定まとめ - とーますメモ Next.jsインストール $ n…