はてなブックマーク

import React, { Component, PropTypes } from 'react'; export default class CanvasComponent extends Component { componentDidMount() { this.updateCanvas(); } componentWillReceiveProps(nextProps) { if (this.props !== nextProps) { this.updateCanvas(); } } componentDidUpdate() { this.updateCanvas(); } updateCanvas() { const { canvas } = this; const context = canvas.getContext('2d'); this.props.updateCan

!!!Caution!!! (2019/8/15追加） ここに書いてあるやり方には、今は推奨されていない古い書き方があります（Class Component、propTypesなど）。 近年、推奨されているやり方でまとめたものが見たい場合はこちらを御覧ください。 https://qiita.com/pullphone/items/fdb0f36d8b4e5c0ae893 とりあえず ReactDOM.render() 基本的にルートポイントとなるスクリプト（例：app.js）を用意して、そこからまたルートとなる Component（Container とも呼ばれる）を呼んだり、Redux の Store を作って Provider と合体させたり（というのは次回書く予定）というのがセオリーらしい。 で、ReactDOM.render() を呼ぶことで、呼び出した HTML の決められた箇所

!!!Caution!!! (2019/8/15追加） ここに書いてあるやり方には、今は推奨されていない古い書き方があります（Class Component、propTypes、Redux における Action と Reducer の扱い方など）。 近年、推奨されているやり方でまとめたものが見たい場合はこちらを御覧ください。 https://qiita.com/pullphone/items/fdb0f36d8b4e5c0ae893 前回までのまとめ React Tutorial 編 http://qiita.com/pullphone/items/efcaee59cf2a5725c61d 今回のテーマ そもそも Redux とは？ Redux で実装するにあたってのテンプレ・お約束 React と Redux をつなぐ そもそも Redux とは何者なのか？ React State の

そもそもなんで ECMAScript 6（ES6）を使うの？（使う動機） 下記はあくまでも個人的な意見です。 React（と Redux）関連のコードサンプルが尽く ES6 を前提としたものが多く、普通の JavaScript（≒ECMAScript 5）で書くのはちょっと辛みがある import とか class とかデフォルトパラメータとか使いたい Mozilla とかも仕様策定に関わってるっぽいので将来性はあんま心配なさそう Node.js 環境を用意する ES6 によりブラウザで動くフロントエンドを実装していくためには、そのままではブラウザで動かないため変換する作業（ビルド）のために Node.js が必要になります。 以下のようにして、ローカル環境に Node.js をインストールします。 # 既に Homebrew で入れている場合はアンインストールする $ brew unin

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?