これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックの導入 動機 フックが導入されるきっかけとなった要素がどんなものかみていきます。 ステートフルなロジックをコンポーネント間で再利用するのは難しい Reactは再利用可能…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックの導入 互換性のない変更はありません フックは互換性のない変更ではない。 完全にオプトイン。既存のコードに影響なく、フックを試すことが可能。 100％後方互換。破壊的…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックの導入 React16.8で追加された新機能 フックの導入 参考 import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll …

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JavaScript 環境の要件 React16はコレクション型Map、Setに依存しており、これらをネイティブに提供しないIE11や、 古いブラウザをサポートする場合にはグローバル環境のポリフィ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス testInstance.props 当該インスタンスに対応するコンポーネントのprops コンポーネントがあった場合、propsは{size: 'small'} となる。 testInstance.parent 名前の…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス testInstance.type 当該点ストインスタンスに対応するコンポーネントの型 <Button /> はButton 型を持ってる。 コンポーネントの型を知りたいとかに使うのかな。 今日はここま</button>…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス testInstance.findAllByProps() 与えたpropsを持つ全ての子テストインスタンスを検索する testInstance.findAllByProps(props) とすることで()内のpropsを検索し、…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testInstance.findAll() testInstanceがtrueを返す全ての子テストインスタンスを検索する。 testInstance.findAllByType(type) typeで指定したタイプを持つ全ての…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testInstance.findByProps() 与えられた props を持つ単一のテストインスタンスを検索する。 単一でない場合はエラーがスローされます。 今日はここまで

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testInstance.find() test(testInstance)がtrueを返す単一の子テストインスタンスを検索する。 testに対してtrueを返すテストインスタンスの数が1ジャストでない場…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testRenderer.root ツリー上の特定のノードに対してアサーションを行う際に役立つ、テストインスタンスを返す。 配下の他のテストインスタンスを検索する際に使用…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testRenderer.getInstance() ルート要素に対応したインスタンスがある場合はそのまま返す。 関数コンポーネントはインスタンスを持っていないので、ルート要素が関…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testRenderer.unmount() メモリ上のツリーをアンマウントし、適切なライフサイクルイベントを発生させる。 だんだん少ない気がするけど他が忙しいので... 今日はこ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testRenderer.update() メモリ上のツリーを新規のルート要素で再レンダーする。 ルートでのReact更新をシミュレートし、新しい要素が以前の要素と同じ方とkeyを持…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス testRenderer.toTree() レンダーされたツリーを表すオブジェクトを返す。 toJSON()とは異なる点としてこのツリーはより詳細なものになり、ユーザ定義のコンポーネン…

これは React Native for macOSのスタートをやってみたメモ的なものです。 前回Windowsを触ったので今回はMacOSでやってみます。 参考 公式を参考にしています。 microsoft.github.io まずは導入前の準備をします ここを参考にするとよいそうです。 microsof…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス testRenderer.toJSON() レンダーされたツリーを表すオブジェクトを返す。 このツリーはもしくはのようなプラットフォーム固有のノードとプロパティを含む。 しかし…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス TestRenderer.act() TestRenderer.actはtest-utilsのactヘルパーと同様にアプリケーション用のコンポーネントを準備する。 これを使ってTestRenderer.create と tes…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス TestRenderer.create() TestRenderer.create(element, options); 渡されたReact要素からTestRendererインスタンスを作成する。 実際のDOMは使用しないが、コンポー…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 概要の続き 詳細は次回以降見ていく。 Test Renderer TestRenderer.create() TestRenderer.act() TestRenderer instance testRenderer.toJSON() testRenderer.toTree() testRende…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org Test Renderer インポート import TestRenderer from 'react-test-renderer'; // ES6 const TestRenderer = require('react-test-renderer'); // ES5 with npm 概要 このパッケー…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org その他のユーティリティ Simulate Simulate.{eventName}( element, [eventData] ) 省略可能なeventDataを使ってDOMノード乗のイベントディスパッチをシミュレートする。 Simulate…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ renderIntoDocument() renderIntoDocument(element) ドキュメントから切り離されたDOMノードにレンダーする。 DOMノードにレンダーするため、実行にはDOMが…

これは React Native for Windowsのスタートをやってみたメモ的なものです。 React Native for Windows for Macなるものがあるという情報を見たので、その前にWindows向けを触ってみようと思って書いてます。 参考 公式を参考にしています。 microsoft.githu…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ findRenderedComponentWithType() findRenderedComponentWithType( tree, componentClass ) scryRenderedComponentsWithType() と同様。 このメソッドは結…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ scryRenderedComponentsWithType() scryRenderedComponentsWithType( tree, componentClass ) 型がcomponentClassと同じコンポーネントのインスタンスを全…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ findRenderedDOMComponentWithTag() findRenderedDOMComponentWithTag( tree, tagName ) scryRenderedDOMComponentsWithTag() と同様のメソッド。 このメソ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ scryRenderedDOMComponentsWithTag() scryRenderedDOMComponentsWithTag( tree, tagName ) レンダリングされたツリー内に存在するタグ名に一致するDOMコン…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ findRenderedDOMComponentWithClass() findRenderedDOMComponentWithClass( tree, className ) 昨日のscryRenderedDOMComponentsWithClass() と同様だが、…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストユーティリティ scryRenderedDOMComponentsWithClass() レンダーされたツリー内に存在するクラス名が一致するDOMコンポーネントから すべてのDOM要素を探し、結果を返す。 …