これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX における props 属性の展開 propsオブジェクトがあらかじめ存在していて、JSXに渡したい場合...をスプレッド演算子として使用する。 こうすることでpropsオブジェクトそのも…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX における props 文字列リテラル ここでの説明はそれほど重要ではないが、包括的な解説の一環として記載されている。 文字列リテラルをpropsとして渡すことができるため、 以…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX を深く理解する 実行時に型を選択する 一般的な式をReactの要素の型として使用したい場合、その式を大文字から始まる変数に代入してから利用する。(といっても一般的には使用…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX を深く理解する JSX 型にドット記法を使用する JSXの中にはドット記法を使うことによってReactコンポーネントを参照することもできる。単一モジュールがたくさんのReactコン…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX を深く理解する React 要素の型を指定する JSXのタグの先頭部分はReact要素の型を決定している。 大文字で始まる型はReactコンポーネントを参照していることを示している。 …

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JSX を深く理解する ReactにおけるJSXとはつまるところReact.createElement(component, props, ...children)の糖衣構文に過ぎない。 例えば <MyButton color="blue" shadowSize={2}> Click Me </MyButton> といったコードがあった場…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 他のライブラリとのインテグレーション Model 層とのインテグレーション 一般的にReactのstate、Flux、Reduxのような一方向のデータフローの使用が推奨されるが、Reactコンポーネ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 他のライブラリとのインテグレーション Model 層とのインテグレーション 一般的にReactのstate、Flux、Reduxのような一方向のデータフローの使用が推奨されるが、Reactコンポーネ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 他のライブラリとのインテグレーション 他のビューライブラリとのインテグレーション Backbone View に React を組み込む Backbone ViewはHTML文字列を生成するテンプレート用関…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 他のライブラリとのインテグレーション 他のビューライブラリとのインテグレーション ReactはReactDOM.render()の柔軟性のおかげでほかのアプリケーションに組み込むことができる…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 他のライブラリとのインテグレーション DOM 操作プラグインとのインテグレーション jQuery Chosen プラグインとのインテグレーション jQuery Chosenって？ harvesthq.github.io …

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 他のライブラリとのインテグレーション Reactはどんなアプリケーションにも適用できるし、ほかのアプリケーションにも組みことが可能。 Docsの例では一般的なjQueryとBackboneを…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 高階 (Higher-Order) コンポーネント 規則：組み立てやすさを最大限保つこと HOCの使い方はある程度決まっているものの、すべて一致するわけではない。 引数としてラップされるコ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 高階 (Higher-Order) コンポーネント 元のコンポーネントを変更するのではなく、コンポジションを使うこと HOCの中でコンポーネントの変更をしたくなってもしない事。 コンポーネ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 高階 (Higher-Order) コンポーネント 横断的関心事に HOC を適用する コンポーネントの利用についてこれまで通りできないパターンも起こりうる。 HOC は入力のコンポーネントを改…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 高階 (Higher-Order) コンポーネント refの時にも少しでてきたHigh-OrderComponentです。 コンポートネントロジックを再利用するためのReactでの応用テクニック。 APIの一部では…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フラグメント コンポーネントが複数要素を返すといったケースがReactでは多いらしい。 fragmentを使うとDOMに余分なノードを追加することなく子要素をまとめることができるように…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ref のフォワーディング 高階コンポーネントにおける ref のフォワーディング refのフォワーディングは高階コンポーネントにおいても便利。 HOCはコンポーネントに対してよく使う…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ref のフォワーディング refのフォワーディングとはコンポーネントを通して子コンポーネントのひとつにrefを自動的に渡すテクニック。 基本的には必要ないが、再利用可能なコンポ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org Error Boundary コンポーネントのスタックトレース React16からレンダー中に起こった全エラーをコンソールに出力する。 エラーメッセージとJavaScriptのスタックに加えて、コンポ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org Error Boundary error boundary を配置すべき場所 配置場所は要件次第で、使う側が必要と思う場所に配置して良い。 (error boundaryは子コンポーネントで発生したエラーをハンド…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org Error Boundary error boundary とは React 16で追加された概念でUIの一部にJavaScriptのエラーがあってもアプリ全体が壊れないようにするために使う。 error boundaryは子コンポ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コンテクスト 昨日の続き 例 動的なコンテクスト テーマに動的な値を使用したより複雑な例をあげている。 import {ThemeContext, themes} from './theme-context'; import Themed…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コンテクスト 昨日の続き API React.createContext その名の通りコンテクストオブジェクトを作成する。 Reactがコンテクストオブジェクトが登録されているコンポーネントをレンダ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コンテクスト 昨日の続き コンテクストを使用する前に コンテクストは何らかのデータがネストレベルの異なる多くのコンポーネントからアクセスできる必要があるときに使用される…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コンテクスト コンポーネントツリー内でデータを渡す方法 典型的なReactアプリケーションはpropsを通してトップダウンでデータが渡されるが、ロケール設定やUIテーマなどはトップ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コード分割 React.lazy 動的インポートを通常のコンポーネントとしてレンダリングすることができる。 qiita.com Suspense Suspense内で遅延コンポーネントはレンダーされる。 遅…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コード分割 import() コード分割の導入に最も良い手段は動的なimport()構文を使用すること Webpack がこの構文を見つけると、自動的にアプリのコードを分割します。 Create React…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コード分割 バンドル ReactアプリはWebpack、Rollup や Browserifyを利用してバンドルしています。 バンドルされたファイルをページ内に置くことで一度にアプリ全体を読むことが…

これは ただの感想です。 AirPods Proを買いました。 10/30には到着していたので今日の時点で約2日使っています。 その間通勤、カフェ、オープン初日の商業施設と言った場所へ出入りしています。 使い始め もともとAirPods使っていたので違和感なく。 これま…