コンポーネントを反応させる

Reactコンポーネントの簡単な紹介

コンポーネントは、1つの分離されたインターフェイスです。たとえば、一般的なブログホームページには、サイドバーコンポーネントとブログ投稿リストコンポーネントがあります。これらはコンポーネント自体で構成されているため、ブログ投稿コンポーネントごとに、それぞれに固有のプロパティを持つブログ投稿コンポーネントのリストを作成できます。

A react component

Reactはそれを非常にシンプルにします：すべてがコンポーネントです。

プレーンなHTMLタグでさえ、それ自体がコンポーネントであり、デフォルトで追加されます。

次の2行は同等で、同じことをします。と1つJSX、注入することによって、なしの1つ<h1>Hello World!</h1>idを持つ要素にapp。

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById(‘app’))
ReactDOM.render(
React.createElement(‘h1’, null, ‘Hello World!’),
document.getElementById(‘app’)
)

見る、React.createElementを作成するためのAPIを公開しましたh1成分。そのメソッドの最初のパラメーターを変更すると、さまざまなタグを作成できます。 2番目のパラメータは小道具のオブジェクトです。この場合は何も必要ないので、渡します。null。

これが、Reactを使用して組み込みのHTMLコンポーネントを操作する方法ですが、すぐに大きくなります。 Reactが優れているのは、カスタムコンポーネントを作成してUIを作成できることです。

カスタムコンポーネント

Reactでコンポーネントを定義する方法は2つあります。

機能コンポーネント：

const BlogPostExcerpt = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  )
}

クラスコンポーネント：

import React, { Component } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}

最近まで、クラスコンポーネントは、独自の状態を持つコンポーネントを定義する唯一の方法であり、ライフサイクルメソッドにアクセスできるため、コンポーネントが最初にレンダリング、更新、または削除されたときに処理を実行できました。

React Hooksがこれを変更したので、関数コンポーネントはこれまで以上に強力になり、コンポーネントを作成するための完全に有効な方法ですが、将来的にはクラスコンポーネントが少なくなると思います。

を使用する3番目の構文もありますES5クラスなしの構文：

import React from 'react'
React.createClass({
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
})

あなたはこれを現代ではめったに見ないでしょう、> ES6コードベース。

私の無料ダウンロードReactハンドブック

コンポーネントを反応させる

Reactコンポーネントの簡単な紹介

カスタムコンポーネント

その他の反応チュートリアル：