ようこそボイラープレートの基礎に戻る!今日、私は反応でコンポーネント創造に飛び込むつもりです.
反応して、我々のページは構成要素でできています.これらは、我々のアプリケーション全体に含めることができるコードの自己完結型の再利用可能な作品です.
これは、コンポーネントを定義するための構文の例です.

class App extends Component {
  constructor(props) {
    super(props)
  }
  render() { `
    return (
      <h1>My fun post!</h1>
    )
  }
}

ES 6とクラス

開始するには、反応は常にクラスの概念を使用して動作していることを知ることが重要です.ES 6の前に、ECMAScript標準がクラスの概念を支持しなかったので、これは面白いです.

If you're not familiar with the relationship between ECMAScript, JavaScript and Frameworks check out this post.

JavaScriptのレイヤー

ローリー・ 月26日・ 3分読む

#javascript #learning #react

その時、反応はクラスを定義するために回避策を使用しました.このようなこと.

const MyComponent = React.createClass({
  render() {
    return <p>I am a component!</p>;
  }
});

しかしながら、ES 6がそれに沿って来たとき、それはJavaScriptに固有であるクラス概念を導入しました.現在、コンポーネントはそれの上に構築することによって定義することができます.

import {Component} from "react"

class App extends Component {
    ....
}

このコードが何をしているのかclass ES 6の概念とそれを反応ライブラリで定義された別のクラスを使って拡張します.Component . The Component クラスはトップクラスです.

If you want more information about this import syntax you can find it here.

輸出と輸入とデフォルト、ああ私！

ローリー・ 4月29日・ 3分読む

#javascript #react #webdev #beginners

手放す

それがわかるように、反応クラスのコンポーネントが含める必要がある唯一のものはrender メソッド.これは、このコンポーネントが実際にスクリーン上に表示されるものであることをアプリケーションに伝えるメソッドです.他のコンポーネントで定義されているすべてが余分です.
しかし、多くのコンポーネントでは、単にレンダリング機能は、開発者が求めている機能のレベルをサポートしていません.それはコンストラクタ(および追加のユーザー定義関数)が入っているところです.

コンストラクタ?小道具？

コンポーネントの内部にコンストラクタを書くことができます.

  constructor(props) {
    super(props)
  }

このコードスニペットは、Replyチュートリアルでは、CLI自体で生成されません.

constructor このコンポーネントの作成時に何が起こるかを定義する関数です.詳細には、これはES 6クラスによって私たちに与えられる特別な機能です、そして、クラスが初期化されるとき、それはコードの最初の部分であるでしょう.

props コンストラクタに渡され、その内容をクラス内で参照できます.反応では、これはどのようにコンポーネントが情報を渡すことができるです.

このスーパーものは少し怪しいです

OK、コンストラクタの内部では、このコード行を持っています.

super(props)

ここで起こっていることはいくつかあります.第一は、我々がconstructor 関数呼び出しますsuper . これは、constructor 関数Component 我々が拡張しているクラス!
さて、もし我々がパスprops into super() 我々は、使用することができますthis 参照するprops インサイドconstructor 関数.反応は、デフォルトのベストプラクティスとしてこれを行うことをお勧めします.技術的には、決して参照しないthis.props コンストラクタでは必要ありません.しかし、それは推薦です.

構成要素！

そして、それはすべてです.我々は新しい反応成分を定義し、それが正しく初期化するために必要なボイラープレートコードを提供しています.今では、プロップを渡すことができますレンダリングコードを書くなど.
私が言うのが好きであるように、あまりにも頻繁に、我々は我々が理解する時間がないフレームワークとプロジェクトの中にコードの使い捨ての線を見ます.私は好奇心をあなたが見てすべてを探索することをお勧め!それはあなたのより良いプログラマになります.
今後のボイラープレートの基本的なポストの目を離さない!