例えばこのような2つのコンポーネントがある。これらのコンポーネントの問題点は何だろうか？ 親コンポーネント state = { users: [{ id: 1, name: 'rin' }, { id: 2, name: 'sin' }] } render () { <div className="container"> <ListGroup items={this.state.users} /> <div> } 子コンポーネント const ListGroup = ({items}) => {</div></listgroup></div>…

純粋なcssはエラーを吐かなかったり、クラス名を重複しないようにしたり、cssのためだけにクラス名をつけたり、と言ったデメリットが存在する。それを解決するstyled-componentsを使っていく。 インストール $ npm install styled-components エディタにstyl…

Reactでよく使われるアロー関数の引数で分割代入を行うパターンを解説する。 まずは分割代入の復習から 分割代入はオブジェクトのキーと値をオブジェクトの外に出して変数として使えるようにすること。 英語名はObject destructuringで、その名の通りオブジ…

子が好きなタイミングで親のメソッド実行する Vueと同じように子コンポーネントの好きなタイミングで親コンポーネントに作成したカスタムイベントを発火させることができる。その時の引数としてデータを受け取る、という流れである。 注意点として、親コンポ…

リモートブランチと同じ名前のブランチをローカルに持ってくる 新しいコマンドのgit switchが便利！ $ git switch remote_branch_name もしうまくいかない場合は$ git fetchを実行してローカルのリモート追跡ブランチを更新してください。 リモートブランチ…

Railsで作るフォームの中で、Reactを使う必要があった。 Reactのコンポーネントで作ったボタン(<button>)を押すと、なぜかpostリクエストが飛んでしまう。 原因 <form>内の<button>は<button type="submit">がデフォルトになっているようだ。 対処法 type="button"を追加する。 <button type="button">Increment</button></button></button></form></button>

props 親コンポーネントからもらうデータ 読み取り専用で変更することはできない state コンポーネントが持つデータ 変更が可能 コンポーネント内のプライベート変数のようなもの 他のコンポーネントはアクセスすることができない 親からもらうデータを加工…

動的ファイルならコントローラーを経由する必要がある。しかし静的ファイルならもっと簡単にできる。 public/にfoo.txtを作成 download: "ダウンロードする時のファイル名"という文法でviewに書く <%= link_to 'foo.txtをダウンロード', '/foo.txt', downloa…