青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

react

Amplify + Cognito + React ならこのQiita見ておけば良いっぽい

qiita.com

AmplifyでNo Credentialsとか言われちゃう時

qiita.com らしい。 ただ、今の開発環境、Amplify関連のファイルはあるがこの記事によると肝心のaws-export.jsがなかった。 調べた感じ、どうやらamplify initとかしないとgenerateはしないっぽい感じがする。 でもすでにAmplify関連のファイルはあって、ini…

Storybookでdecolaterを使い、各Storyを共通のもので包む

storybook.js.org qiita.com decorators: [ Story => ( <div style={{ width: '216px' }}> <Story /> </div> ), ], これでこのコンポーネントのStoryは全てこのdivに包まれる。

Storybookの諸々の書き方まとめ

index.stories.tsx importする、Metaがいる import { Story, Meta } from '@storybook/react/types-6-0'; descriptionでStorybookの上の方にそのコンポーネントの説明が出る subComponent指定でこのStoryからそのコンポーネントも見れる export default { ti…

useEffectを調べた。ライフサイクル扱えるようになるのね。

React・TypeScriptで書いてHTMLにビルドして〜みたいなことをしているのだが、コンポーネントはStorybookで閲覧できるようにしている。 HTMLにビルドしているのでJSとかは普通にquerySelectorして〜みたいに書くのですが、Storybookは普通にReactで動くから…

reactでVimeoを埋め込む

Vimeo埋め込むときってiframe埋め込みじゃないですか。でもJSXでどうやって埋め込むんだろうなーって思ってちょっと調べていたところ、ライブラリがあったんでそれを使うことに。 github.com www.npmjs.com // TODO 仮でvimeoのIDを入れています const video…

Next.jsで特定のディレクトリがPCのみの画面だとしたらSPではその画面ないので同等の画面にリダイレクトさせる

pageディレクトリがあったとして、ただその画面はPCでのみ存在し、SPではルートにリダイレクトさせたい。 react-responsiveとrouterでいけます import { useMediaQuery } from 'react-responsive' import Router from 'next/router' export const page = (pr…

基本肯定文のほうが読みやすいので、分岐の際は肯定から書く

基本肯定文のほうが読みやすいので、 !login ? () : (); ではなく login ? () : (); と書く

Reactでmapで生成するときの、keyに入れる値はindexを出来れば避ける

qiita.com Reactでmapで繰り返しする場合keyを指定する必要がある。 なにも考えずに、よく array.map((item, idx) => { return ( <item key={idx}> のようにやっていました。なんかもう、keyにはindexを入れるものだと。 そしたらレビューでkeyはindexじゃなくて、この場合な</item>…

react-responsiveでレスポンシブ対応。TypeScriptで使う場合は@types/react-responsiveも必要

www.npmjs.com github.com qiita.com Reactでレスポンシブするときに普通にStyled-Componentで@media〜とか書いてやるのかなーと思っていたらこれよく使うと。便利ですねこれ。画面幅によって要素がそもそも全然違う時とかはこれでコンポーネントごとそもそ…

Reactでstyled-componentなプロジェクトに、reset.cssを導入する

最近はじめてstyled componentでCSSを書いています。 で、reset.cssを入れようと思ったのですが、もうそもそもどう入れるのかわからず。 qiita.com を参考にやりました。 入れたresetは github.com こちら。このパッケージをnpmやyarnでインストールして、 _…

ReactでTypeScriptで、propsで?で渡しているときに、?だからなんも渡さないと、定義した型 | undefined としてエラーが出る

type Props = { option?: string; } export const foo: React.FC<Props> = props = { return ( <div>{props.options}</div> ) } foo.defaultProps = { img: 'dummy.jpg', }; で、 型 'string | undefined' を型 'string' に割り当てることはできません。 型 'undefined' を型 '</props>…

Create React App と Next.js と Gatsby.js の違いは何なのか調べようと色々まとめてみた

Single Page ApplicationかServer Side RenderingかStatic Site Generateか、の3種類ある watablogtravel.com 前提として、Next.jsのStatic Site Genelateが可能になったのは最近の話??2020年3月に本格的に純粋なStatic Site Genelateの機能が備わったらし…

ヘッドレスCMSを使ってみる contentful

fromscratch-y.work これが参考になります。ちなみに qiita.com 最初これ参考にして進めてたけど、CLIからいじることあんのかよくわかんなくて結局途中から普通にブラウザ上からいじる方に以降した、そしたらなんかCLIでやってた過程でContent ModelとかCont…