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.

ネットに有ったやつの移植です。 研究中。 See the Pen FormEvent by kalz2q (@kalz2q) on CodePen. 名前を入れて送信するとメッセージが出ます。 cf. react-hook-form, 名前入力フォーム

前回のところでNext.jsのドキュメントの中のReactを学ぶ、の所が終わった。 ここから次に Next.js では React本家を学ぶか、Next.jsの学習に入るかする、と言う選択肢を示された。 数年前のReact本家のチュートリアルはコンポーネントがクラスのやつで、hook…

increment decrement See the Pen countIncrDecr by kalz2q (@kalz2q) on CodePen. コメント 前回までので codepen でのtypescript の設定が抜けていた。

Next.js 環境でReact 勉強しててやっとuseStateが出てきた。 Next.js から codepen に移植できた。 See the Pen useState by kalz2q (@kalz2q) on CodePen. やったこと "use client"; import { useState } from "react"; をカットして、const { useState } =…

貰い物のロードバイクです。 くれた人は身長180cm で私が身長168cm で車種は Anchor の RNC3 で 2007 年くらいに買ったものらしい。コンポはSORA。当時13万円くらいで購入とのこと。 大き過ぎるのでサドルは一番下に下げている。 それでも高い。 ステムを短…

Next.js のドキュメントに学習コースがあってその中で React が学べるみたい。 Prerequisite knowledge This course assumes you have a basic understanding of React and JavaScript. If you're new to React, we recommend going through our React Found…

react のバージョンが 18 になっていたので codepen の設定を変えてみた。 昨日のベルギー国旗の色違いです。 See the Pen react18 by kalz2q (@kalz2q) on CodePen.

オリジナルはgradient を使っていましたが tailwind で gradient で縞模様にする方法がわかりませんでした。 これでは3つのボックスを並べています。 See the Pen belgium by kalz2q (@kalz2q) on CodePen.