ES 5機能のみを使用して反応コンポーネントを作成する

このポストは、ちょうど「JavaScriptである」と反応する親しみやすいリマインダーです.ビルドステップなしで使うのも大丈夫です.小さなインタラクティブなコンポーネントを作成するのは大丈夫です.そして、あなたがしたくない場合は、ES 6 +を使用する必要はありません.

createElement関数のクイックリープ

反応はすべてのコンポーネントのパンとバターであるCreateElementという関数を公開します.JSXは実際にはReact.createElement 呼び出し.このように見えます.

React.createElement(
    'tagName',       // HTML tag name or a custom component 
    props,           // HTML attributes, custom properties, events, etc...
    children         // a string or a list of components or almost anything
);

ステートレスコンポーネント

このタイプのコンポーネントのみを取るprops を返します.彼らは自分の状態を管理し、ライフサイクルの方法を持っていない.彼らは他の情報源から来るデータを提示するのに最適です.ビルドステップなしでは以下のようになります.

function Welcome(props) {
    return React.createElement('div', null, 'Hello, ' + props.name);
}

ReactDOM.render(Welcome({ name: 'world' }), container);

クラスコンポーネント

これらのコンポーネントは、自分自身の内部状態を管理し、ライフサイクルメソッドを持つことができます.ここでは、ES 5で我々は使用できませんclass 代わりに、コンポーネントを作成するキーワードは、その動作を模倣する必要があります.
我々が世話をする必要がある最初のものは、遺産です.通常使用するclass MyComponent extends React.Component それをする.我々は別の道を取るつもりです、私たちはprototype からのコンポーネントのオブジェクトReact.Component , 以下のように:

function MyComponent(props) {
    React.Component.constructor.call(this);

    // ... code
}

MyComponent.prototype = Object.create(React.Component.prototype);

私たちのstatelessなコンポーネントからここで異なっていることは、我々が呼ぶということですReact.Component カスタムコンポーネントのコンテキストを持つコンストラクタで、プロトタイプがReact.Component . これにより、コンポーネントはLifeCycleメソッドとSetStateメソッドを使用できます.

コード例

今私たちの新しい発見知識を使用すると、ビルドステップを設定せずにいくつかのコンポーネントを作成したり、ブラウザのサポートについてあまり心配しています.簡単なタイマーを行います.

var container   = document.getElementById('app');

// h is short for hyperscript and it makes everything a little bit easier
var h           = React.createElement;

// This is how we inherit methods like setState from React.Component
Timer.prototype = Object.create(React.Component.prototype);

function Timer(props) {
  React.Component.constructor.call(this);
  var self = this;

  self.state = { seconds: 0 };

  self.tick = function() {
    self.setState(function(prevState) {
      return { seconds: prevState.seconds + 1 };
    });
  };

  self.componentDidMount = function() {
    self.interval = setInterval(self.tick, 1000);
  };

  self.componentWillUnmount = function() {
     clearInterval(self.interval);
  };

  self.render = function() {
    return h('div', null, 'seconds: ', self.state.seconds);
  }
}

ReactDOM.render(h(Timer), container);

ここに私が割り当てていることに注意してくださいthis 文脈self 使用を避ける変数bind 機能プロトタイプの方法.そして、私は一貫した酒のためにちょうどどこでもそれを使っていますself.tick ここで私は失うthis コンテキストを使用する際のコンテキストsetInterval .

最後のこと

人が最初に気がつかない1つのものは、要素の子供たちもパラメタであるということです.コンポーネント、文字列、オブジェクトまたは関数を渡すことができます.日の終わりにchildren は支柱です.
何かお見せしましょう.

結論

これはうまくいきません.これは、任意のサイトに埋め込むために良い古いスクリプトのタグと反応を使用できることを示しています.もう1つは、反応コンポーネントが関数呼び出しであることを示します.本当に、あなたは慎重に注意して足で自分の撮影を含む何かを行うことができます.

その他の資源

Todo List example
Timer example
React without a build step
React is just JavaScript
お読みありがとうございます.あなたがこの記事を役に立つならば、私の努力を支持したいです.buy me a coffee ☕ .