React
SPA の速度カイゼンやパッケージやファイルのサイズを可視化してみたい事が多々あります。 今回は create-react-app で作成したアプリでバンドルサイズを可視化してみたのメモ。 create-react-app v3 以降は --stats オプションが廃止され webpack bundle an…
create-react-app で作った React アプリで yarn start での開発時と yarn build でビルドした時に使う環境変数を切り替えたい。 .env のファイル名で自動的に切り替わる create-react-app で作られたファイルにある .gitignore を見ると次のように設定され…
create-react-app, react-scripts で作った React アプリを外部ライブラリやAPIの都合で localhost の時も https で動かしたい時のメモ .env に HTTPS=true を設定すればOK HTTPS=true のオプション付きで起動すれば localhost も https で起動できるようで…
React の useState で返される state の型を指定したい useState<型>(initial value) で state に型を強制できる type IdolType = 'cute' | 'cool' | 'pop' | 'sexy'; const [type, setType] = useState<IdolType>('cute'); setType('foo'); // => Argument of type '"</idoltype>…
フロントを React バックエンドを PHP で作成していて、ファイルのアップロードを試してみたのでメモ File を扱うコンポーネント React では、<input type="file" /> は値がユーザだけが設定できるものでありプログラムでは操作できないため、常に非制御コンポーネントです。 cf. …
React で子コンポーネントを ref で触りたい時、forwardRef APIを使うように言われます。 例えばボタンをクリックしたらフォーカスされるインプットフィールドだとこんな感じ。 import React, { useRef } from 'react'; const InputField = React.forwardRef…
APIからエラーの時、改行コード付きの文字列が返ってくるので、改行を <br> に変換して出力したかったのメモ 例えばこんな文字列を改行させて表示させたい const msg = "星宮いちご\n霧矢あおい\n紫吹蘭"; タグが入っていても文字列は文字列として出力される 改…
Docker で構築したバックエンド (localhost:3000)に Docker に積んでいない create-react-app (localhost:8080) で作成した React アプリからアクセスしようとしたら次のようなエラーにってしまいました。 Access to XMLHttpRequest at 'http://localhost:30…
creat-react-app, react-scripts で作った React の開発環境で react-scripts start (npm start) で起動する localhost のポート番号を変更したい時 .env ファイルにポート番号の指定を書く .env PORT=8080 これで $ npm startすると localhost:8080 でアプ…
インフラ知識皆無なので Docker は雰囲気で使っています。 構成 / |- docker-compose.yml |- /api |- /frontend | |- Dockerfile |- /mysql | |- /data | |- /init | | |- 1_ddl.sql | |- Dockerfile | |- my.cnf |- /nginx | |- nginx.conf |- /php |- Dock…
React で form を作っていたら次のような Warning が発生しました。 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide …
create-react-app, react-script で作られた React application は内部で dotenv が使われていて、.env で設定した値には、process.env 経由でアクセスができる。 ただし値にはREACT_APP_ のプレフィックスが必要 REACT_APP_ から始まらない値は React appli…
Debounce で値を反映したいコンポーネントを作っていて、setTimeout 内で event から渡された event.target を使おうとしたら null になっていてエラーになり、なんもわからん… になってハマっていたのでメモ event.target が null になるコード useDebounce…
create-react-app 内で使われている react-scripts を使って必要な部分だけを自分で設定する react プロジェクトを作成することができます。 方法としては 1. 必要なパッケージのインストールとファイルの作成 $ npm init $ yarn add -D react-scripts $ yar…
今スクールに通っていて、JavaScriptで何か作れって課題の一貫で React の学習も兼ねて じゃんけんアプリ 作ったので、折角だから Netlify で公開してみました。 JAN=KEN GOGO! ５歳児らしいネーミングです!! Netlify 「Get start for free」 で GitHub アカ…
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-router-dom を使うと簡単に SPA のルーティングができたのですが、スクロールした状態でページが切り替わると元のスクロール量が残り切り替わったページもスクロールされた状態で描画されしまう問題に直面ました。 windowのスクロールは、VDOMの世界外…
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…
SVGな画像を扱う時に、CSSやJSで色などをコントロールしたい場合、inline-svg にするのが扱いやすくて良いです。 create-react-app で作成した React のプロジェクトで eject せずに inline-svg を使えるように出来たのでメモ。 環境 "react": "^16.13.1" "r…
環境づくりの勉強がてら ReactHooks・テストは JEST + Enzyme で作っていたプロジェクトを TypeScript 化したメモ 1. TypeScript 化のパッケージをインストール して babel 関連のパッケージをアンインストール TypeScript 化するにあたって必要なパッケージ…
create-react-app を使わずに自分で独自に作成していたプロジェクトにテストとして Jest を導入したけど、テストコマンドを走らせると SyntaxError: Unexpected identifier が出てハマってしまったのでメモ。 構成 |- /tests | |- setup.enzyme.js | |- App.…
React のテストの定番 Jest + Enzyme の構成で、React 16.x 系だと Enzyme の Adapter を読み込ませる必要がり、今までは下記の用な感じで Adapter を読み込ませるファイルを作りテストファイルで都度 import をしていました。 setup.enzyme.js import Enzym…
APIからあるオブジェクトが渡され、フロントでデータが無ければデフォルト値を付けるような処理を TypeScript で書いていてハマったのでメモ。 ※ フロントは React です API から渡されるデータ InitUnitData = { first: { id: 1, name: '春風 わかば', type…
カルーセルとか横並びの要素の高さをReactで揃えたいような場合 (display: flex が使えないようなケース) 要素のそれぞれのDOMにアクセスして高さを取得して最も高いものを取得しなければならないので、リストのような Ref が必要になります。 また、ウィン…
input タグの onChange イベントとか、入力の度に state 変更して再レンダリングするのなんだかなーと思ってたので、イベントの処理を間引いて実行したいと思ったので色々調べながら作ってみました。 要件としては、イベントが発生した後に同じイベントが発…
useState の setter で値を更新しても即時 state に反映されるわけではないので、更新された state を使って別の処理を行いたい時などで意図しない動作になってしまうことがあります。 function Counter({ initCount }) { const [count, setCount] = useSta…
// Credit.js export function Credit({ character, singer }) { return ( <> <b>{character}</b> <small>song by: {singer}</small> ); } こんな感じのコンポーネントがあり、props を渡さなければデフォルトで character, singer を表示させたい 1. オブジェクトの引数を分割代…
全面ReactなSPAではなく、部分的にReactを導入しているようなサービスにモーダルとそれを表示させるボタンをReact Component で作ろうとすると次のような構成になるかと思います。 function ShowDetailByModal() { return ( <> <button onClick={showModal}> SHOW </button> <Modal /> ); } しかし、このよ</modal>…
VanillaJSなら DocumentFragment を作成してDOMに追加したい要素を溜めておき、appendChild( DocumentFragment ) で丸っと実際に表示されるDOMに追加することができる！
危機管理〜 JSX内でコンポーネントを出し分けしようとしてハマったのでメモ ダメだったコード function App( isAdmin ) { return ( <> {isAdmin? ( <AdminMain /> <AdminAside /> ) : ( <Main /> <Aside /> )} ); } エディターのシンタックスハイライトで次のようなエラーが表示されていた Left side of </aside></main></adminaside></adminmain>…
