React

技術情報

TypeScriptでMaterial-UI練習帳 〜 Grid 〜

React Material-UI のGridを使用してレイアウトを組んでみる練習。
技術情報

TypeScriptでMaterial-UI練習帳 — Hello, world! —

React/Material-UI/TypeScriptでUIを開発する練習。今回はボタンを押したらダイアログを表示する超絶簡単なサンプル。
技術情報

ReactアプリをTypeScriptで始める方法

ググって一番わかりやすかったはこのブログ。(英語だけど。ところどころ、そのまま動かない箇所があったけど流れはわかりやすかった) npx create-react-app my-typescript-app --typescript ...
サンプル開発

React練習 – 割り勘計算アプリ(5)

前回の投稿までで大部分の実装ができたので、残りは人数の増減アクションの追加。各明細の横に削除と追加のボタンを配置して、クリック時のイベントで処理を行う。 明細のJSXに、以下のようにボタンを配置してclickのイベントハンドラ呼び出...
サンプル開発

React練習 – 割り勘計算アプリ(3)

前回の投稿では、割り勘計算アプリをコンポーネント化し、HTMLがレンダリングされるところまで実装した。 BillSplitter …親コンポーネント。状態保持や計算処理を司るHeader …子コンポーネント。合計金額などの表示や入力...
Books

[読書記録] React入門

評価:★★★☆☆ Reactの勉強のために2冊目に読んだ本。 ヤフーなどでフロントエンジニアとして働く著者グループによる書籍なので、実践的なSPAのアプリケーションを開発するために必要な内容がカバーされている。ただ、Redux...
サンプル開発

React練習 – 割り勘計算アプリ(4)

前回の投稿では、ヘッダの支払額入力に反応して割り勘計算を行い、結果をヘッダおよび各明細に反映させるように実装を行った。 今回は、各明細の操作を可能にする。まずは、明細コンポーネントの各入力要素のchangeイベントにハンドラメソッド...
サンプル開発

React練習 – 割り勘計算アプリ(2)

前回の投稿では、ヘッダーコンポーネントと明細コンポーネントを作成し、固定値をプロパティで渡すところまで実装した。次のステップとして、これらのコンポーネントをまとめる親コンポーネントを作成し、親コンポーネントのstateに保持するデータを渡...
サンプル開発

React練習 – 割り勘計算アプリ(1)

公式のスタートガイド、チュートリアルのほか本2冊を読んでReactの基本は理解できた気がするので、ちょっとしたサンプルコードを書いて確認したいと思う。題材は割り勘計算アプリ。 とりえあずnodeとcreate-react-appはイ...
Books

[読書記録]WebデベロッパーのためのReact開発入門

評価:★☆☆☆☆ サンプルアプリのフロントをReactで作りたいと思い、積ん読になっていた本を引っ張りだして読んだ。発行日が2016年12月1日なので内容は古いだろうが、まずは入門ということで。 コンパクトサイズ、20...
タイトルとURLをコピーしました