useRef サンプル よくわからない。 See the Pen useRef by kalz2q (@kalz2q) on CodePen.

useState を useReducer で書き直している。 See the Pen useReducer by kalz2q (@kalz2q) on CodePen.

テキストに載っていた useEffect の最初の例。 See the Pen useeffect by kalz2q (@kalz2q) on CodePen.

tailwindで楕円を描く。 css の border-radius と tailwind の rounded とが同じではない。 かと言って、border-radius が tailwind の 中で使えるのが限定的なのですんなりとは書けなかった。 See the Pen ellipse by kalz2q (@kalz2q) on CodePen.

borderをうまく使うと陰陽図が描けます。 相当トリッキーな使い方だと思う。 See the Pen yinyang by kalz2q (@kalz2q) on CodePen.

tailwindにline-clampと言う便利なclassNameがあって文章の冒頭を数行だけ表示してくれる。 See the Pen lineClamp by kalz2q (@kalz2q) on CodePen. 課題 上記の原文は途中に改行があるのにスペースを入れて連続して出力しているがそれで良いのか。 それよ…

Lern React with TypeScript の第1章が React の導入で、Alert を作っている。 useState を使ってクローズボタンを押すと画面が消える。 それはいいのだけれど、props のやり取りがちょっと納得が行かないので、例によって壊して学んで見ようと思ってます。 …

中国の景気が悪いと言うニュースや記事が目に付くのだけれど、隣の国が戦争をやっていてその特需で儲かっているのではないかと言う素朴な疑問。 不動産バブルがはじけて大恐慌、と言うのは日本やアメリカだとそういう連想になるけれど、中国的にはまあいずれ…

qiitaにあったアンパンマンをchatgptでtailwindに書き直してみた。 解析はこれからですが、元記事に詳しく説明があります。 See the Pen anpanman by kalz2q (@kalz2q) on CodePen.

じゃんけんプログラムを作ろうと思ってまずcssでグー・チョキ・パーを作ってみました。 あtailwindです。 See the Pen gu-choki-pa by kalz2q (@kalz2q) on CodePen.

むかしEllieで作ったしりとりゲームをchatgptでreactに翻訳してもらったらなんとそのまま動きました。 codepenで公開しようとしたらファイルが大きすぎるって。 codesandboxに持っていったら簡単に出来た。 コメント ゲームとしてより連想のネタ探しのために…

Reactチュートリアルの三目並べをcodepen, tailwindに移植してみました。 これで存分に壊して学べるw もとのはcodesandboxでcssは別途 styles.cssでした。 遊び方はマス目をクリックすると先手後手の順にマークがついてどちらかが勝つと勝者が上に表示されま…

課題 荒川サイクリングロードには様々なロードバイクが走っています。 そのうち、TREK, BIANCHI, GIANTについて数を数えて100台まで数えようと思いました。 それぞれカウンターを用意し、カウントするたびに合計も変化するプログラムを作る。 See the Pen co…

数字を入力すると倍にして返します。 もっと複雑なもの、例えば因数分解するとか、カウントダウンアニメを表示するとか作ってみたい。 See the Pen typeNumber by kalz2q (@kalz2q) on CodePen. このプログラムでは送信 submit が押されるまでは出力欄が前の…

シンプルバージョンです。 See the Pen inputValue by kalz2q (@kalz2q) on CodePen.

Reactでページのタイトルを変える Htmlの<title>タグでページにタイトルをつけるのをReactのuseEffectでやり方。 import { useEffect } from "react"; useEffect(() => { document.title = "learning react"; });

合計欄付きメニュー 色々書き換えていますが、大体はドットインストールのReact入門の教材です。 それをCodepen上のReact18, TypeScript, Tailwind環境に移植して、無事動きました。 See the Pen menuTotal01 by kalz2q (@kalz2q) on CodePen. コメント 以前…

現在 下に「出来ました」と書いてあるが Codepen上では出来ていない。 ローカルでは入力した文字列が表示されるのにCodepen上では表示されない。 なにか考え違いをしてるのだろうか。 対策: 人の作ったものを動かしてみよう。 React-Hook-Form を使った単純…

Twitter(X)に投稿した写真が埋め込めるか。 ちなみに記事の内容は。 ディスクブレーキでもつけられるスタンドをグラベルロードNESTOガベルにつけてみた。若干靴のかかとに当たるが問題なし。 です。

研究中 React-Hook-Formで再掲ですが前回codepenで動いていたのをローカルに移したら動かなかったのが動くようになったのでとりあえず再度codepenに乗せてみる。 あれ？ 動かない。 メモによると // registerの使い方が変わった。 // userのタイプを定義せず…

ハートとチェックボックス オリジナルはcheckedでアニメーションするのだがうまく行かない。 チェックボックスが大きく出来た。 See the Pen checkboxWithHeart by kalz2q (@kalz2q) on CodePen. cf. オリジナル https://codepen.io/kalz2q/pen/PoaWdMK?edit…

虫眼鏡 をクリックしたら検索窓が出現するのは出来たのですが。 そこに自動的にfocusが行かない。 See the Pen onBlur by kalz2q (@kalz2q) on CodePen.

search icon のtailwindバージョンです。 See the Pen searchIcon by kalz2q (@kalz2q) on CodePen.

以前のやつのTailwindバージョンです。 ボタンをクリックすると色と形が変化します。 useStateでisActive と言うフラグを切り替えています。 See the Pen isActive by kalz2q (@kalz2q) on CodePen.

インプットチェック こんな例ばかりで肝心の入出力の例がない。 思うにJavascriptの基本に立ち返って勉強しよう。 See the Pen ReactHookForm04 by kalz2q (@kalz2q) on CodePen. cf. qiita react-hook-formの使い方を解説 v6.13.0 useController追加! cf. r…

React-Hook-Form 送信ボタンを押すとインプットチェックが2つめのフィールドについて働いて、空欄ではいけません、と叱られます。 See the Pen ReactHookForm03 by kalz2q (@kalz2q) on CodePen. 宿題 先日のreactの入出力をReact-Hook-Formを使って書き直す…

useStateの使い方 ボタンの中で使うとそれぞれのボタンの状態が保持されるのですね。 不思議。 See the Pen multipleButton by kalz2q (@kalz2q) on CodePen. cf. multipleButton, useState

style={{ color: product.isFruit ? "magenta" : "darkgreen" }} とすると次のようにスタイルを条件で変えられる。 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. コメント mapを使ったリスト表示の例にもなっている。

入力した文字列を出力する これはreact-hook-formを使わずにuseStateだけで入力されたテキストを取得して変数に入れて出力しています。 See the Pen IO01 by kalz2q (@kalz2q) on CodePen. とりあえずこれと同じことをreact-hook-formを使って実現したい。 u…

react-hook-form がわからないので研究中。 See the Pen React Hook Form by kalz2q (@kalz2q) on CodePen.