React, JSX で条件分岐(If)やループ(For)を使う方法
ReactコンポーネントのJSXで条件分岐やループを使いたい ReactコンポーネントをJSXで書いて切るときに、条件分岐やループを使いたくなります。VueやAngularなどでは属性を使ってうまく書くことができますが、JSXでは直接IF文やFor文を使うことができません。 ここでは特定の条件でのみ要素を表示したり、複数の要素をまとめて表示するための方法をまとめます。 条件分岐 JSX内インライン […]
Web備忘録 プログラミングを中心に技術的な事柄を忘れないように書き残します。
ReactコンポーネントのJSXで条件分岐やループを使いたい ReactコンポーネントをJSXで書いて切るときに、条件分岐やループを使いたくなります。VueやAngularなどでは属性を使ってうまく書くことができますが、JSXでは直接IF文やFor文を使うことができません。 ここでは特定の条件でのみ要素を表示したり、複数の要素をまとめて表示するための方法をまとめます。 条件分岐 JSX内インライン […]
Reactで画像を表示させる方法 create-react-app で環境を作ったReactアプリの場合、Reactで画像をコンポーネントに表示するには、画像ファイルを import することで Javascript から参照することができます。 例えば、以下の例はロゴ画像を表示するヘッダーです。内部で動いているWebpackがモジュールとして組み込んでくれるため、このようにJavascriptか […]
Ducks というデザインパターン Reduxのファイル構成は『Ducks』がオススメ – Qiita The Ducks File Structure for Redux – S.C. Barrus – Medium erikras/ducks-modular-redux: A proposal for bundling reducers, action types and acti […]
React + Redux でライフゲームを作る React + Redux でライフゲームを作ってみます。 Reduxでセルの状態を管理し、その状態をReactで描画するというイメージです。Canvasなどを使わずにDOMのスタイルを状態に応じて動的に切り替えて描画するようにしてみます。 ライフゲームというのは、生命の誕生、進化、淘汰などのプロセスを簡易的なモデルで再現したシミュレーションゲーム […]
ReactでTodoアプリを作ってみる Reactのサンプルとして、Todoアプリを作ってみます。 テキストボックスで入力した値が、画面に追加される単純なものを作っていきます。 状態管理には Redux を使用します。 install まずは必要なものをインストールします。 create-react-app $ npm install -g create-react-app Reactのプロジェク […]