はじめに 自分用の備忘録として書いているので説明が簡素なのと、細かなところまで確認していないので確認が漏れている箇所がある。 よって間違いが含まれている可能性がある。 また、この修正自体はちょっとした検証を行う際に必要だったという理由で行った…

まだ --unstable をつけないといけないが、 以下のようにして npm モジュールを参照できるようになっているので、この方法を用いてDenoからReactを触ってみたメモ import * as React from "npm:react"; Denoのバージョン deno 1.26.1 (release, aarch64-appl…

vitestを触ってみようと思い、viteで作成したTypeScript(React)プロジェクトを立ち上げてテストを書いていた際、下記の記述に従って、vite.config.ts の defineConfig.test.setupFiles で指定したファイルに下記のような記述を追加した。 reactjs.org global…

目次 目次 最初に ライブラリのインストール 必要なファイルの作成 webpack.config.jsの記述 アプリケーションコードの記述 index.html index.js App.js ソースコード 最初に create-react-appは用いず、自身でwebpackをインストールしてReact環境を作成する…

Create React Appで作成したアプリケーションに対して、E2EテストをTestCafeで実装した。 ローカルでE2Eテストを動かす分にはさほど難しくはなかったが、GitHub Actions で動かす際にはハマったりすることが多かったので、一旦このように書けば動く、という…

最近、表題のような処理を書くべき状況になったのだが、うまく書けなかったので、反省の意味を込めて書いていく。 useRef を用いて対象のDOMを取得 useRef を使うと対象のDOMを取得できる。 https://ja.reactjs.org/docs/hooks-reference.html#useref Ref と…

Reactを自作するための学習の記録の続き この続き shinshin86.hateblo.jp 参照ドキュメント 現在ここに記述しているコードは、下記のドキュメントのほぼ写経となっています。 pomb.us zenn.dev 関数コンポーネントに対応する 現在の実装では関数コンポーネン…

Reactを自作するための学習の記録の続き この続き shinshin86.hateblo.jp 参照ドキュメント 現在ここに記述しているコードは、下記のドキュメントのほぼ写経となっています。 pomb.us zenn.dev Render Phase と Commit Phase のおはなし Reactはページをレン…

Reactを自作するための学習の記録の続き この続き shinshin86.hateblo.jp 参照ドキュメント 現在ここに記述しているコードは、下記のドキュメントのほぼ写経となっています。 pomb.us zenn.dev おさらい ここまでの実装は下記。 なお、createElement や rend…

深い階層を持つHTMLを生成するための関数を書いた。 あまり使いみちはない。 下記で書いている、Reactを自作する際に生み出した謎の副産物である。 shinshin86.hateblo.jp 以下、ソースコード。 const generateDeepElement = (depth) => { depth = depth - 1…

最近、Reactの中身をちゃんと理解せねばと思い、Reactの自作につながるような勉強をしています。 一応下に備忘録を残していっていますが、個人用のメモみたいなレベルなので、あまり見やすくはないと思います。 うまく成果を得られたらQiitaかZennにまとめよ…

1から続いて、引き続き行っていく。 shinshin86.hateblo.jp 参照しているドキュメントも変わらない。今はまだドキュメントをなぞっているだけなので、ここに乗っているコードは下記の記事に乗っているものと同じだ。 React.createElement関数を自作する 下記…

私は普段ソフトウェアエンジニアとして仕事をしているときが多い。 そして普段の業務でよく触るライブラリの一つに、Reactがある。 私は普段からReactをよく触っているくせに、そういえばこのReactの内部の仕組みを深堀りしたことがなかった。 (ザックリとだ…

以前、物凄くシンプルなnpm packageを作っていた。 random-fruits-name.js という名前のpackageである。 GitHubはこちら。 github.com READMEにも書いているが、ReactでもNode.js環境下でも動くものになっている。 Reactでのコードサンプルはこちら。 import…

これまた下書きフォルダに入りっぱなしになっていた文章を見つけたので、整理してアウトプットする。 去年書いていたものだ。 よくある、ボタンやテキストなどをクリックしたときに、クリップボードに対象の文字が自動的にコピーされる機能。 あれをReactで…

去年書いていたポストだが、下書きの状態のママになっていたため、公開することにした。 以下本文。 最近Reactで実装されたPaginationに触れる機会があったので、自分の理解を深める意味も込めて、自分なりに１から実装してみる。 といっても、スタイルはboo…

追記: Google analyticsに関するコードは"pages/_document.js"内に書いたほうが良いかもしれない 以前書いたこちらの記事だが、本文のとおりにやればGoogle Analytics側では正常に認識されるものの(Google Search Consoleでの確認も完了できる)、 どうやら正…

next.jsでreact-notifications用のcssファイルを読み込もうとしたら、Module parse failed: Unexpected character '@' (1:0) というエラーが出た next.jsで書いたアプリに先日書いたreact-notificationsを導入しようとしたら、コンパイル時に下記のようなエ…

Reactでnotificationを簡単に実装できるreact-notificationsを試してみた Reactで簡単にnotificationを使えるライブラリを見つけた github.com create-react-appを使ってサクッと試してみる npx create-react-app react-notifications-sample cd react-notif…

Airbnb製のReact用Calendarライブラリ、react-datesというものを試してみました。今回はその備忘録 (結構導入、というかセットアップ段階でハマりどころが個人的に多かったので、この記録には誤りが含まれている可能性があります。割と最後までやるのに疲れ…

完全なる備忘録です。 Next.js 9 with TypeScript セットアップ 最近 Next.js 9 を余暇を利用して触っているので、今回はそちらの環境のセットアップから行います。 ちなみに最初からTypeScriptで書けるように設定していきます。 以前Qiitaに書いたNext.jsで…

metabase で 質問をコピーする方法 未来の自分に向けた metabase に関する備忘録となります。 www.metabase.com metabase で 質問をコピーするには、既存の質問を一度開き、なにかしらの編集を行い、それから新しい質問として保存することで、結果的に質問を…