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

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ハンドブック


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