著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

このチュートリアルでは、Reactでカスタムコンポーネントを作成する方法を学習します。 コンポーネントは、アプリケーションで再利用できる独立した機能であり、すべてのReactアプリケーションの構成要素です。 多くの場合、これらは単純な JavaScript関数およびクラスですが、カスタマイズされたHTML要素であるかのように使用します。 ボタン、メニュー、およびその他のフロントエンドページのコンテンツはすべてコンポーネントとして作成できます。 コンポーネントには、状態情報と表示マークダウンを含めることもできます。

Reactでコンポーネントを作成する方法を学んだ後は、複雑なアプリケーションを、構築と保守が容易な小さな部分に分割できるようになります。

このチュートリアルでは、クリックすると名前が表示される絵文字のリストを作成します。 絵文字はカスタムコンポーネントを使用して作成され、別のカスタムコンポーネント内から呼び出されます。 このチュートリアルの終わりまでに、JavaScriptクラスとJavaScript関数の両方を使用してカスタムコンポーネントを作成し、既存のコードを再利用可能な部分に分離する方法と、コンポーネントを読み取り可能なファイル構造に格納する方法を理解します。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04