Reactで画像をアスペクト比を維持して表示する方法メモ。 import Img from './images/img.png' const imgStyle = { object-fit: contain; } const ImgComponent = () => ( <img className="imgStyle" src={Img} alt="" /> ) object-fitは、置換要素(<img>や<video>)などの中身を、コンテナーにどのようにはめ込むかを設</video>…

Reactで配列やオブジェクトをfor文で回そうとするとESLintにUsing 'ForInStatement' is not allowed.eslint(no-restricted-syntax)と怒られてしまします。 NG例: 配列をfor...inで回す const arr = [1, 2, 3, 4]; for (e in arr) { console.log(e); } // Usi…

今回は、前回Reactで作った簡易掲示板をReduxでリプレイスします。 前回同様、↑のような簡易掲示板をReduxを使って作ります。 それでは、↓の手順にそって実装していきます。 必要なパッケージのインストールaction作成reducer作成store作成component作成 必…

Reactを用いて↓のような簡易掲示板を作ったのでメモ。 コンポーネントに分けず、Stateのみを用いたパターンと、コンポーネントにわけPropsを用いたパターンの2つを実装してみました。 実装 今回は値の追加にformは用いていません。handleInputChangeメソッド…

Reactで子コンポーネントに値を渡すコードメモ。 propsは親コンポーネントから子コンポーネントへ値を渡す時に使い、変更不可な値(イミュータブル)。 ＊対してstateはコンポーネント内の状態であり、変更可(ミュータブル)。 ↓は、AppコンポーネントからUser…

はじめに 今回はReactのstateについてメモ。setState()でstateの値を更新し、同期的に取得する方法を書いていきます。 結論 ↓のようにすると、同期的にstateの値を更新/取得することができます。 import React, { Component } from 'react'; class App exten…

JSXで出てくる波括弧の意味について調べたのでメモします。 JSX内で出てくる波括弧{}は、JavaScriptの値を取得したいときに使います。 なので例えば、 <Button> title="なみかっこ" color="blue" style={{ display: 'none' }} </Button> のstyleの値部分は、 内側の{}はオブジ…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。今回は論理演算子とショートサーキット評価(短絡評価)について書いていきます。 論理演算子 論理演算は3つ種類があります。 論理積(AND) / 論理和( || ) / 否定(NOT)の3つです。それらを表…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。 今回はECMAScript2015(ES6)から導入された、分割代入やスプレッド記法などの配列/オブジェクトに関する便利な書き方についてまとめます。 まずは分割代入から。 分割代入 分割代入とは、…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。 今回はECMAScript2015(ES6)から導入されたクラスについて書いていきます。基本的に他言語におけるクラスと同じですが、クラスの作成方法やプロパティの定義の仕方が独自ですのでまとめて…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。 今回はECMAScript2015(ES6)で導入されたアロー関数とそのthisの挙動についてまとめます。 アロー関数って？ アロー関数は、ES6から導入された通常の関数(function)を代替する構文です。 /…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。 この記事では、ECMScript2015(ES6)から導入された新たなスコープについて、そして変数宣言(var/let/const)についてまとめていきます。 スコープ スコープとは、変数の有効範囲を定義した…

Reactを書籍やチュートリアルで勉強していると、見慣れないJavaScriptの記法をちらほら見かけました。調べてみると、それらはES6以降に導入されたものでした。この記事では、Reactで用いられるES6以降の仕様についてまとめていきます。 React開発で使われる…