Reactガイドを読んでいくその131
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
リファレンス
前回までは概要でした。
今回から詳細を見ていきます。
React.Component
ES6クラスを用いて定義されていた場合React.Componentが基底クラスになる。
-例-
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
今日はここまで
Reactガイドを読んでいくその130
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
概要
サスペンス
サスペンスを使用するとコンポーネントはレンダー前に何かを待機できる。
サスペンスがサポートしているユースケースはReact.lazyを使ってコンポーネントを動的に読み込むのみだが、今後はサポートも増えていく見込み。
・React.lazy ・React.Suspense
フック
フックはReact16.8で追加された新機能。(現在の最新は16.12.0)
stateなどのReactの機能を、クラスを書かずに使えるようになる。
フックには専用のセクションと別のAPIリファレンスがある。
基本
・useState
・useEffect
・useContext
追加
・useReducer
・useCallback
・useMemo
・useRef
・useImperativeHandle
・useLayoutEffect
・useDebugValue
今日はここまで
Reactガイドを読んでいくその129
Reactガイドを読んでいくその128
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
概要
React 要素を作成する
UIがどのように見えるべきかを記述するためにJSXの使用が推奨されている。
ずいぶん昔にやったやつですね。
ja.reactjs.org
JSXのそれぞれの要素は React.createElement()を呼ぶための糖衣構文というのは上のリンクの時にも触れた記憶。
以下の二つのようなメソッドを直接呼び出すようなことは通常無い。
・createElement()
・createFactory()
明日は要素を変換するです。
今日はここまで
Reactガイドを読んでいくその127
Reactガイドを読んでいくその126
Reactガイドを読んでいくその125
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
Web Components で React を使用する
参考コード
class XSearch extends HTMLElement {
connectedCallback() {
const mountPoint = document.createElement('span');
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
const name = this.getAttribute('name');
const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
// ここでReactDOMをつかってる
ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
}
}
customElements.define('x-search', XSearch);
WebComponentとReactを使っている参考
組み合わせたときにどうデメリットがでるのかなぁというのは気になるところ。
今日はここまで
- もっと読む
コメントを書く