青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

react

Reactで良い感じにページ内アンカー(ページ内遷移)を実装する

www.npmjs.com github.com これ便利。 import { Element, Link as ScrollLink } from 'react-scroll' <ScrollLink to="section" smooth={true} duration={500}> TextText </ScrollLink> <Element name="section"> Section </Element> これでScrollLink to="section"を押下時にスムーススクロールでElement name="section"まで遷移してくれる。 import { anima…

Reactで数字入ってるかを条件に&&で出し分けようとすると、0が描画される→なぜなら0はfalseだから…!

どういう状況の話かと言うと、 num && ( <Text>{list[num]}</Text> ) のように、型がnumberの変数numが入っていたらlist[num]を描画したい、という状況。 で、numに1とか入ったら意図通り<Text>list[1]</Text>が描画されるのだけど、numに0が入ると、<Text>list[0]</Text>ではなく、なぜか0だけ描画…

React.Fragmentにkeyを入れる必要がある場面がある

qiita.com わざわざ<React.Fragment>って書く場面あるのかなとか思って全て<>にしてました。ありました。 mapとかでreturnする際にkeyを指定しておく必要ありますが、一番外側に必要なので、その際にFragmentが一番外の場合は<>だとkeyを指定できないので <React.Fragment key={hoge}> </React.Fragment> のようにする必要</react.fragment>…

Next.jsでlocalStorageを使う

Next.jsでStorageオブジェクトを使う これが参考になります あと、localStorageとかのキー名は1つのファイルにまとめておいたほうが管理的に良い

ReactでSNSシェア機能をreact-shareというライブラリで

yurufuwa-tech.hatenablog.com ReactでSNSのシェアをしたいときに、 github.com これが便利。 TwitterのツイートボタンとかはHTMLだとTwitterのなんかそれ用のページでぽちぽちするとタグを生成できるのでそれを埋め込むだけだが、ReactだとTwitter用のJSを…

styled-componentsでforwardedAsを使ってコンポーネント拡張した上でタグを変更する

qiita.com <EventButton forwardedAs="p"> dummydummy </EventButton> const EventButton = styled(Button)` width: 320px; height: 53px; ` ↑pages/page.tsx export const Button = (props: Props, as: any) => { <Container forwardedAs={as} > const Container = styled.button`` ↑Button.tsx これで、buttonタグで作られているforw</container>…

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…