これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ isElement() element が任意の React 要素である場合 true を返す。 expect(TestUtils.isElement(<div />)).toBe(true); @JS('React.addons.TestUtils.isElement')</div>…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ mockComponent() mockComponent( componentClass, [mockTagName] ) モック化されたコンポーネントモジュールをこのメソッドに渡すとダミーのReactコンポー…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ act() アサーション用のコンポーネントの準備のためにレンダーして更新を実行するコードをact()でラップする。 ラップすることでテストはブラウザでのReact…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ 概要 ReactTestUtilsはReactコンポーネントのテストをしやすくするもの。 FacebookではJestを利用している。 Jestを使いたい場合はチュートリアルを使って…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) リファレンス UI イベント イベント名：onScroll プロパティ： number detail DOMAbstractView view ホイールイベント イベント名：onWheel プロ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) リファレンス 選択イベント イベント名：onSelect タッチイベント イベント名：onTouchCancel onTouchEnd onTouchMove onTouchStart プロパティ：…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) リファレンス フォームイベント イベント名：onChange onInput onInvalid onReset onSubmit フォームに詳細は書いてあるのでここでは紹介だけにな…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) リファレンス フォームイベント イベント名：onChange onInput onInvalid onReset onSubmit フォームに詳細は書いてあるのでここでは紹介だけにな…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) リファレンス キーボードイベント イベント名：onKeyDown onKeyPress onKeyUp プロパティ： boolean altKey number charCode boolean ctrlKey boo…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) リファレンス クリップボードイベント イベント名：onCopy onCut onPaste プロパティ：DOMDataTransfer clipboardData コンポジションイベント イ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) サポートするイベント Reactは異なるブラウザ間でも一貫したプロパティを持つよう正規化する。 サポートしているイベントは以下のようなものがあ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) イベントのプール SyntheticEventはプールされる。 また、再利用されnullでコールバックが呼び出された後に初期化される。 ここで初期化される理…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 合成イベント (SyntheticEvent) SyntheticEventのラッパについて説明する章になっている。 概要 イベントハンドラにはSyntheticEventのインスタンスが渡される。 ここでみていく…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 サポートされている全ての HTML 属性 React16では標準あるいは独自の DOM 属性全てが完全にサポートされている。 ReactはDOMAPIと同様、キャメルケースの命名規則を属性…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 属性についての差異 value この属性はinputコンポーネントとtextareaコンポーネントでサポートされている。 これはコンポーネントの値を設定するのに利用でき、制御され…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 属性についての差異 suppressHydrationWarning サーバサイドのReactレンダリングを使用している場合、サーバとクライアントが違う内容をレンダーするときに警告が出る。…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 属性についての差異 suppressContentEditableWarning 子要素を持つ要素にcontentEditable属性が付与されていると動作しないため、警告が出る。 suppressContentEditable…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 属性についての差異 style CSSではなくキャメルケースプロパティを持ったJavaScriptオブジェクトを受け取る。 JavaScriptのDOMのstyleプロパティと一貫性がある。 こう…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 属性についての差異 onChange フォームフィールドに変更があるたびにこのイベントが発生する。 Reactはリアルタイムでのユーザ入力を扱うためにこのイベントに依存して…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 属性についての差異 htmlFor forはJavaScriptで予約語になっているのでReactではhtmlForを使用する。 <label for='xx'>は<label htmlFor='xx'>みたいになるってことですね。 他にいろいろやっていてあまりで</label></label>…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 属性についての差異 dangerouslySetInnerHTML innerHTMLの代替にあたる。 基本的にHTMLをコードに設定することはXSSの対象になりやすいので避けるべき。 Reactではdange…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 属性についての差異 className CSSクラスを指定するにはclassName属性を使用していく。 あまり一般的ではないが、ReactをWebComponentsとともに使用する場合は、代わり…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org DOM 要素 パフォーマンスとブラウザ間での互換性のためにブラウザから独立したDOMシステムを使う。 ReactではDOMのプロパティと属性すべてがキャメルケースで名前付けされる必要…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ReactDOMServer リファレンス renderToStaticNodeStream() このAPIはサーバ専用になるためブラウザでは利用できない。 マークアップをインタラクティブなものにするためにクライ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ReactDOMServer リファレンス renderToNodeStream() このAPIはサーバ専用になるためブラウザで利用できない。 React要素を初期状態のHTMLへ変換する。 HTMLの文字列を出力するス…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ReactDOMServer リファレンス renderToStaticMarkup() Reactが内部的に使用するdata-reactrootのような追加のDOM属性を作成しないことをのぞいて、renderToStringと同様の動作を…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ReactDOMServer リファレンス renderToString() React要素を初期状態のHTMLへと変換する。 このメソッドによってサーバ上でHTMLを生成して最初のリクエストに対してマークアップ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ReactDOMServer 一般的にNodeサーバで使われる。 オブジェクトはコンポーネントを静的なマークアップとして変換できるようにする。 概要 メソッドのラインナップは以下。 ・rende…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ReactDOM リファレンス createPortal() その名の通りポータルを作る。 ポータルについてはここで詳しく記載されている。 ja.reactjs.org これでReactDOMについては終了。 次はRea…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ReactDOM リファレンス findDOMNode() 基本使わないこと。 というより基本的にDOMノードにrefをアタッチすれば使用を避けられる上に、 コンポーネントの抽象化に穴をあけてしまっ…