はじめに randomが大好きです。簡単な例があったので react+typescriptに翻訳してみました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 感想 random の部分は普通に javascript の Math.random() を使うので react も typescript も関係…

以下Qiitaに書いた記事そのままでcodepenの埋め込みが出来るかどうかの実験です。 => 出来た。いいね!!!! はじめに CSSでborderを使って正三角形を書く方法は分かったのですが、これを回転rotateさせると、borderで描いたので中心がわからないのできれいに回…

はじめに React+TypeScript の勉強を始めてからまだすごく初期段階なのですが、前回の記事でCodePenを利用出来ることがわかったので、いつでもデモとソースを見る事ができるサンプル集を作っておくと便利かも、と思いました。 作って書き足していきます。 サ…

はじめに JavaScriptの勉強にCodePenでデモとソースコードを並べてみながら色々やってみるのは生産性が高い。 React本家のチュートリアルでも盛んに使っている。 これをTypeScriptにしてみたので備忘です。 デモとソースコード 手順 設定でTypeScriptにする…

どの言語やフレームワークでもそうだけど、下手な入門書よりも本家のホームページのチュートリアルの方が良く出来ている。 しかし、 違ったアプローチで学びたい時、チュートリアルを自分のアプローチに翻訳しながら進む事になってけっこう大変。 何を言って…

はじめに qiita に Reactでカウントアプリを作る - Qiita と言う記事があって、コピペして今ふうに書き直してデプロイできたのでご紹介。 https://kalz2q.github.io/react-countapp/ ソースは https://github.com/kalz2q/react-countapp/ で、ローカルで動か…

create react で作ったサンプルサイトでは React のロゴがくるくる回っている。 ロゴでなく、テキストを回すことが出来るかどうかの実験。出来た。 https://kalz2q.github.io/react-animate/ ソースは https://github.com/kalz2q/react-animate にあります。…

追記 今見たら、以下の記事に書いてあるソースでは動かなかったのでとりあえず記事をペンディングにします。調査中。 React 本家のチュートリアルでマルバツ三目並べを作っていて、それの TypeScript バージョンをネットの記事を参考にしながらようやく動き…

今の考え elm という言語があって、簡単にサイト(ページ)が作れる。 関数型で型チェックをしてくれるのでアイデアを適当に書くと、コンパイラーがエラーを出してくれてそれを直している内に出来上がる。 javascrip にコンパイルされる。 ところが!!!、少し慣…

前回はいいねボタンをデプロイしましたが、今日は Hello World をやってみました。 ハローワールド https://kalz2q.github.io/react-hello-world/ とりあえず問題なく出来たと思う。 データベースを使わない静的なサイトならばこれで十分ですね。簡単だし。 …

Reactの初期ページをGitHub Pagesで公開(デプロイ)する方法 という記事がありました。 一方、別のところに TypeScript 入門 Reactでいいねボタンを作ろう と言う記事があって、 これらを組み合わせれば いいねボタンが簡単に公開できるね!!!! と思いついてや…