かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

2020-04-01から1ヶ月間の記事一覧

React npm init + react-scripts で react プロジェクトを作った時の罠

create-react-app 内で使われている react-scripts を使って必要な部分だけを自分で設定する react プロジェクトを作成することができます。 方法としては 1. 必要なパッケージのインストールとファイルの作成 $ npm init $ yarn add -D react-scripts $ yar…

JavaScript 再帰関数でもカリー化したい

再帰内で使う値を先に生成して使いたかったので、再帰関数をカリー化 したいと思ってやってみたのでメモ。 カリー化 (currying)とゎ? 1. カリー化した callback 関数を再帰関数に渡すパターン const curry = (func, validFunc) => { return (arg, callback)…

Netlify で React のアプリ公開してみた。

今スクールに通っていて、JavaScriptで何か作れって課題の一貫で React の学習も兼ねて じゃんけんアプリ 作ったので、折角だから Netlify で公開してみました。 JAN=KEN GOGO! 5歳児らしいネーミングです!! Netlify 「Get start for free」 で GitHub アカ…

npm run してるターミナルを閉じてしまった時の対処法

yarn start してホットリドーロしてるターミナルを閉じてしまった。 止める npm script も作ってなかったので、ブラウザのタブを落としても処理が実行されて続けてしまう状態になってしまいました。 owata PID を探して kill する ターミナルでプロセスを探…

React JSX の <pre> の中で改行したい

JSX で <pre> の内容を書いていてもそのままでは、改行が消えてしまいます。 function Pre() { return ( <pre> Hoshimiya Ichigo Kirija Aoi Shibuki Ran </pre> ); } 👇出力: 改行は無視される <pre>Hoshimiya Ichigo Kirija Aoi Shibuki Ran</pre> JavaScript の Template literals `{}`</pre>…

React Hooks React-router-dom ページ遷移した時にページのスクロール位置をリセットしたい

React-router-dom を使うと簡単に SPA のルーティングができたのですが、スクロールした状態でページが切り替わると元のスクロール量が残り切り替わったページもスクロールされた状態で描画されしまう問題に直面ました。 windowのスクロールは、VDOMの世界外…

React-router-dom の <Switch> で React does not recognize the `computedMatch` prop on a DOM element. な警告が出る

React-router-dom を使っナビゲーションを作っていた際に下記の warning が表示されてしまいました。 React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spe…

React `ReactComponent as` で inline-svg を使う時に気をつけること

create-react-app や react-scripts で作った React のプロジェクトは下記のような感じで svg ファイルを inline-svg として使うことができます。 import React from 'react'; import { ReactComponent as MySVGIcon } from './img/my-svg-icon.svg'; functi…

ESlint module.exports が no-undef なエラーになるとき

react-scripts で作成したプロジェクトで init で下記のようなオプションを選択して .eslintrc.js を作成しました。 $ yarn eslint --init ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your projec…

React create-react-app したプロジェクトで inline-svg を使いたい

SVGな画像を扱う時に、CSSやJSで色などをコントロールしたい場合、inline-svg にするのが扱いやすくて良いです。 create-react-app で作成した React のプロジェクトで eject せずに inline-svg を使えるように出来たのでメモ。 環境 "react": "^16.13.1" "r…

npm script ESlint で No files matching the pattern なエラーにハマる。

React のプロジェクトに ESlint + Prettier でフォーマットする仕組みを入れたのですが、npm script で lint を走らせようとしたら、パターンマッチしないというエラーが出て少しハマったのでメモ 問題の npm script // package.json "scripts": { "lint": "…

CSS :nth-child(n) の順番についてのメモ

CSSの要素の順番に応じてスタイルを当てる :nth-chaild 疑似要素で上手く行かないという相談を受けて、ちゃんと仕様を把握できてなかったので改めて調べたのでメモ 相談を受けたHTML と CSS HTML <body> <header></header> <section>section 1</section> <section>section 2</section> <section>section 3</section> </body> CSS section:nth-child(2)…