react 勉強メモ 5日目（react/redux: ActionsとReducers）

Actionsの役割

アプリから受け取ったデータをReducersに渡す

Actionでは純粋なデータを渡すのみで、どのstateをどう変えるかはReducersが決める。そのためActionはプレーンなオブジェクトを返す。

Actionsの書き方

1. Action type を定義してexport

2. typeとpayloadを記述

3. プレーンなobjectを返す

expo

Stamp コードのご紹介：マウスイベントをタッチイベントに変換するフック

個人で開発したアプリ Stamp のコードを紹介しようというシリーズ

Stamp の URL はこちら。

Stamp の紹介記事はこちら

Stamp のパレットでは、react-color-palette を使っています

ですがこれ、タッチイベントは拾ってくれません

スマホで色と濃淡を変えようとしても、タッチイベントを拾ってくれないので変えられません。

カスタムフックでタッチイベントを

react 勉強メモ 4日目（react/redux）

Why Redux ??

- reactのコンポーネント内ではなくstoreでstateを管理できるので、全体の見通しがいい場所でstate管理できる

- どのコンポーネントからでもstateの参照/変更できる

- モジュールを疎結合（互いに依存性を持たず影響し合わない）にできる

- Reactだけでstate管理しようとするとイベント発生時の伝達が、親から子へ子から親へと、propsのバ

Stamp コードのご紹介：キャンバスの高さを求めるフック

個人で開発したアプリ Stamp のコードを紹介しようというシリーズ

Stamp の URL はこちら。

Stamp の紹介記事はこちら

Stamp は、キャンバスが画面に収まるようになっています

今回は、以下の記事の続きです。

画面の高さを取得→そこからヘッダー、フッターの高さを引く、という二段構えでキャンバスの高さを求めています

画面上部、ロゴや Gallery、About がある

#1 React.js でプログラミング・プラモデル Vol.3 「BlackJack」：BlackJack のルールを知る

今回のタスク

・BlackJack のルールを知る

BlackJack って？

BlackJack はトランプを使用するカジノゲームの一つです。
ジョーカーを含めない 52枚のカードでプレイします。

プレイヤーとディーラーがいて、ハンド（手札）の合計が 21 に近づくように、ただし 21 を超えないようにカードを引いていきます。
ハンドが決まったら、両者の数字を比較して 21 に近い方が勝

react 勉強メモ 3日目

フック(hooks)

クラスの機能をFunctional Compomnent でも使える

class component よりもシンプルでわかりやすく書ける上に後方互換なので既存のコードに影響を与えない

クラスコンポーネントのデメリット

- thisがわかりにくい

- stateロジックが複雑

- 副作用のある処理が複数ライフサイクルメソッドに分かれてしまう

useState関数

Stamp コードのご紹介：画面の高さを取得するカスタムフック

個人で開発したアプリ Stamp のコードを紹介しようというシリーズ

Stamp の URL はこちら。

Stamp の紹介記事はこちら

Stamp は、キャンバスが画面に収まるようになっています

■フル画面で横長のキャンバスにした状態

■画面を小さくしておおよそ正方形のキャンバスにした状態

カスタムフックで実装しました

画面幅が変わったときのイベントは、普通に resize イベン

Figma to React Component で今後やりたいこと

先日 Figma から React コンポーネントのコードを生成するプラグインを公開しました。

ただ、現状ベーシックな JSX と CSS を吐き出すだけなので、物足りない部分もいくつかあります。理想としては「生成されたものをコピって貼り付けたら完璧に動いた」という体験です。

無理な部分もあるとは思いますが、上記を目指すために今後どういうものを追加して行こうかなーというのを五月雨に書いて行こう

4月3・4日開催のフジテレビ系のVイベント「V-Carnival」についてのライブレポートがPANORAの記事に。
https://panora.tokyo/archives/23889
出演者の話題から、テレビマン達の気合の演出・各舞台画像等まで、細かく纏まっています。主に未視聴者向け記事かと。

useContextを使用したReact Compound Patternについて

こんにちわ。
スペースマーケットでFEチームのEMやっている成原です。
子供が言葉をよく覚えるようになってきました。
最近は「ホワタァー！！！！」という言葉を連呼しています。
こいつは強い子に育ちそうだ。
ちなみに娘です。

さて本日はReactのデザインパターン、 Compound Patternについて話します。

Compound Patternについて

Compound Patternは