Effect Hook でライフサイクルを扱う クラスコンポーネントのライフサイクルメソッド componentDidMount(), componentDidUpdate(), componentWillUnmount() に相当する機能を実現するもの クラスコンポーネントのライフサイクルメソッドは、「このタイミング…

Hooks Hooks は様々な React の機能をクラスを使わずに利用 できるようにするもの。 Local State とか Lifecycle とか。 この Hooks の発表が React Conf 2018 の基調講演のなかでされたということなんだけど、ここでずいぶん流れが変わってしまっているんだ…

関数コンポーネント 今後はクラスコンポーネントではなく関数コンポーネントを優先して書いていく流れ、とのこと。 以前書いたクラスコンポーネントのコードを関数コンポーネントに書き換えてみた。 github.com コンポーネントとコンテナ Presentational Com…

github.com ちなみに私のコードはサンプルコードにちょっと変更を加えていて、 componentDidUpdate で timeLeft が 0 のときに「60秒たちました！」というアラートメッセージを出すようにしました。 しかし今の状態だと、カウンターには 1 が表示されている…

私用環境を整理する 強いチームはオフィスを捨てる: 37シグナルズが考える「働き方革命」作者:ジェイソン・フリード,デイヴィッド・ハイネマイヤー・ハンソン発売日: 2014/01/24メディア: 単行本 先日この↑本を読んでいて、そうだなーと共感したのが 仕事のP…

コンポーネントのライフサイクル 初期化され、マウントされ、レンダリングされ、再レンダリングされ、アンマウントされ…というサイクルのなかで、 それぞれのフェーズに介入して処理を差し込むメソッドが用意されている。 Mounting フェーズ constructor [vo…

技術書典8が新型コロナウイルス感染症の影響により中止となったため、 オンラインで応援祭が開催されています。（2020年4月5日まで） それで昨日こちらを購入しました。 techbookfest.org テストコミュニティには以前何度か参加したことがあり、ふだん自分が…

コンポーネントと props コード写したり本文読んでいたんですが、やっぱりちょっと「コンポーネント」という考え方が身についていない。 ja.reactjs.org 概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受…

最近運動不足が気になっているので、バランスボールに座りながら仕事できないかな？と考えています。 バランスボールは場所をとりそうなので、こちらを購入検討中。。 バランスワン フィットネスチェア（ワブリー）(GREEN)メディア: その他 新しいReactアプ…

やっと「りあクト！」本文に戻ってきました。。 Props サンプルコード（CharacterList.tsx） interface CharacterListProps { school: string; characters: Character[]; } class CharacterList extends Component<CharacterListProps> { render(){ const { school, characters }</characterlistprops>…

TypeScriptでジェネリクス(Generics)を理解するための簡単なチュートリアル | I am mitsuruog こちらを参考にジェネリクスを使ったコードを書いてみました。 User クラスと Company クラスを定義して、それらの配列にオブジェクトを追加できるmerge関数を定…

いつもの朝会（1時間）で、毎週金曜日は結城浩さんの「デザインパターン入門」を読むことにしました。 増補改訂版Java言語で学ぶデザインパターン入門作者:結城 浩発売日: 2004/06/19メディア: 大型本 Javaは書いたことがないのですが、デザインパターンの本…

JSX内でのコメント JSX内はあくまでJavaScriptなので、JavaScriptのコメント記述方法を使用します。 chaika.hatenablog.com ジェネリクス 「クラス宣言のとこ、Component と今までComponentクラスを継承するときにな かったジェネリクスみたいなのがあ…

Semantic UI React 簡単にスタイルを適用するためのライブラリ react.semantic-ui.com create-react-appしたディレクトリで、このライブラリを追加します。 >> yarn add semantic-ui-react semantic-ui-css index.tsx に import文を追加します。 import 'sem…

世田谷区池尻で週に一度、おいしいランチを食べながら読書会をする、というスタートを切った Ikejiri.rb ですが、 メンバーのいろんな事情に柔軟に対応した結果、 現在は2週間に一度、オンラインで読書会をしています。 メンバーも4人に増えました！ 2月から…

コンポーネントとProps React では、データは必ず親コンポーネントから子コンポーネン トへ一方通行で渡されます。下の階層から上の階層にデータの変更を反映させることはできないの 親コンポーネントから子コンポーネントのデータの…