CodePen でのテンプレート react-typescript-template。Reactのロゴが使えなかったので、CSSで作ったアイコンを回しています。css animation のデモにもなっている。デモとソースコード
カウンター react-countapp。シンプルな例ですが、useEffect, useState を使っています。TypeScript の型定義 union type 、Msg と switch, prevCount 使ったりと盛り沢山です。デモとソースコード
react による form タグの処理 react-form。簡単に言うと、html の管理に任せず、useState を使う。onChange => handleChange => setInputValue => handleSubmit と一見面倒だが全て React で管理出来るのですっきりします。デモとソースコード
React本家チュートリアルのスターター react-tutorial-starter。React本家チュートリアルはとても良く出来ているので、これ以外の方法でReactを勉強している人はぜひ読んで欲しいのですが、TypeScript でやりたい、と言う人はスターターコードでつまずくかもしれない。私の場合そうでした。とりあえず書き直したものをあげておきます。チュートリアルとは違っているけど参考になると思う。デモとソースコード
ハローワールド react-hello-world。普通のハローワールドですが、hello と言う変数に <h1>Hello, World!</h1> を代入して、JSX 表記で {hello} で呼び出した物を App の中で return する事によって render させている。デモとソースコード
レスポンシブ・デザイン react-responsive-dot。幅をいじると中身の表示が縦並びになったり、横並びになったりします。ccs で @media を使って、その中でdisplay をいじくっている。codepen では codepen 全体の幅を変えてみてください。三段階に変化します。デモとソースコード
CSS だけで描いた国旗 react-css-flags。これは CodePen にあったものを TypeScript と普通の CSS に書き直したものです。元は Sass(SCSS)と Html で書かれていました。CSS だけでこんなにも複雑な絵が描けるという勉強になりました。デモとソースコード
正三角形を描く react-css-equilateral-triangle。正三角形や四面体が好きです。CSS もバージョンアップしてこういうのもいずれは簡単に描けるようになると思うので今の機能で工夫してなんになる、と思わないでもない。border を使って描くので辺の長さが一定とかが使えず、高さを手で計算して入れる。css の calc で平方根が使えない。デモとソースコード
transtionサンプルコード react-css-transtion-base。transition と transform と translate に混乱してしまったのでベースとなる transition のサンプルを作っておく。デモとソースコード
transtion durationサンプルコード react-css-transtion-duration。デモとソースコード
transition-timing-function デモとソースコード
transition-delay サンプル。デモとソースコード
transition-shorthand サンプル。デモとソースコード
transform-scale サンプル。デモとソースコード
transform-rotate サンプル。デモとソースコード
transform-translate サンプル。デモとソースコード
transform-skew サンプル。デモとソースコード
transform-origin サンプル。デモとソースコード
multiple-transform サンプル。デモとソースコード
transform-matrix サンプル。デモとソースコード
offload-hover サンプル。デモとソースコード
textarea タグの処理 react-textarea。デモとソースコード
select タグの処理。 react-selected。デモとソースコード
select multiple の処理 react-select-multiple。デモとソースコード
multiple input の処理 react-form-multiple-input。デモとソースコード
multiple input の処理 react-form-multiple-input-checkbox。デモとソースコード
react-functional-component-props。デモとソースコード
css で描いた正三角形を回転する。react-css-equilateral-triangle-rotate。デモとソースコード

2022-09-07

CodePenでReact+TypeScript

React CodePen TypeScript

はじめに

JavaScriptの勉強にCodePenでデモとソースコードを並べてみながら色々やってみるのは生産性が高い。 React本家のチュートリアルでも盛んに使っている。

これをTypeScriptにしてみたので備忘です。

デモとソースコード

手順

設定でTypeScriptにする。
設定でCDNでreactとreact-domを指定する。
Htmlは<div class="container"></div>と一行書く。
JS (TypeScript) の最後の行にReactDOM.render(<App />, document.querySelector(".container"));と書く。
Templateとしてsaveすれば、次回からは最下行のUse This Templateが使える。
JS (TypeScript) の一行目に import React とか入れるとエラーになる。const { Component, useState, useEffect, useContext, createContext } = React; とか書く。今回のデモとソースコードでは使っていない。

逆にこのソースコードからローカルのプロジェクトを作る場合は一行目に必要な部品をimportするだけで良い。

便利だね!!!!

以上

2022-09-06

React についての今の考え

React TypeScript

どの言語やフレームワークでもそうだけど、下手な入門書よりも本家のホームページのチュートリアルの方が良く出来ている。

しかし、

違ったアプローチで学びたい時、チュートリアルを自分のアプローチに翻訳しながら進む事になってけっこう大変。

何を言っているかと言うと、

React 本家のチュートリアルは TypeScript で書かれていない。JSXの部分はそのまま使えるので問題ないのだが、コンポーネントとの props のやり取りは全部明示的に格付けする必要があって、難しくはないのだが見かけがずいぶん変わる。
React 本家のチュートリアルは基本的にクラスコンポーネントを使っていて、今は関数コンポーネントが主流なのではないか。
state で書かれているところを hook に書き直す必要がある。
React 本家のチュートリアルでは途中経過のデモとソースコードを codepen を利用しているが、これに直接 TypeScript のコードを書いても使えない。
一旦チュートリアルで学んで、その上で TypeScript を学ぶのが良い、とか、クラスコンポーネントを理解してから先に進むように、と言っている人が多いが、どう考えても初めから TypeScript で、関数コンポーネントで学んだ方がわかりやすいだろうと思う。

で、解決策なのだが、今の考えでは

ローカルで作った途中をプロジェクトとして github pages で公開しながら進むアイデア。

codepen に TypeScript のページがあるのでそこを使う。

と言う、２つのやり方があると思う。やってみよう。

2022-08-18

Reactでカウントアプリを作る[2022年版]

Elm GitHub TypeScript React

はじめに

qiita に

Reactでカウントアプリを作る - Qiita

と言う記事があって、コピペして今ふうに書き直してデプロイできたのでご紹介。

https://kalz2q.github.io/react-countapp/

ソースは

https://github.com/kalz2q/react-countapp/

で、ローカルで動かすにはこれを git clone して、cd して npm install , npm start すれば動きます。

直したところ

元記事では countApp と言うプロジェクト名でしたが、

npx create-react-app countApp --template typescript

としたら今はもうプロジェクト名に大文字はダメです、と言われました。react-countapp に変更。

元記事では React の Component を import して props でデータを管理していましたが、これだと型管理がめんどうなので今ふうに useState を使って props を使わないようにしてみたところ、エラーが消えた。

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  const onIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const onDecrement = () => {
    setCount((prevCount) => prevCount - 1);
  };

  return (
    <div>
      <div>{count}</div>
      <div>
        <button type="button" onClick={onIncrement}>
          +
        </button>
        <button type="button" onClick={onDecrement}>
          -
        </button>
      </div>
    </div>
  );
};
export default App;

感想

ほとんど Elm のコードのようにシンプルになりました。気持ちがよい。