Clever Geek Handbook

Reactチュートリアルパート2：機能コンポーネント

以前の記事の1つで、 この Reactコースに基づいて一連の従来の出版物を作成することをお勧めします。 あなたは私たちのアイデアを支持しました。 したがって、本日はコースの継続をご紹介します。 ここでは、機能コンポーネントについて説明します。



画像





→ パート1：コースの概要、React、ReactDOM、JSXの人気の理由

→ パート2：機能コンポーネント

→ パート3：コンポーネントファイル、プロジェクト構造

→ パート4：親コンポーネントと子コンポーネント

→ パート5：TODOアプリケーションの作業の開始、スタイリングの基本

→ パート6：コースの一部の機能、JSXおよびJavaScriptについて

→ パート7：インラインスタイル

→ パート8：TODOアプリケーションの継続的な作業、コンポーネントのプロパティに精通

→ パート9：コンポーネントのプロパティ

→ パート10：コンポーネントのプロパティとスタイルの操作に関するワークショップ

→ パート11：動的マークアップ生成およびマップ配列メソッド

→ パート12：ワークショップ、TODOアプリケーションの作業の第3段階

→ パート13：クラスベースのコンポーネント

→ パート14：クラスベースのコンポーネント、コンポーネントのステータスに関するワークショップ

→ パート15：コンポーネントヘルスワークショップ

→ パート16：TODOアプリケーションの作業の第4段階、イベント処理

→ パート17：TODOアプリケーションの作業の第5段階、コンポーネントの状態の変更

→ パート18：TODOアプリケーションの作業の6番目の段階

→ パート19：コンポーネントのライフサイクルメソッド

パート20：条件付きレンダリングの最初のレッスン

→ パート21：条件付きレンダリングに関する2番目のレッスンとワークショップ

→ パート22：TODOアプリケーションの作業の第7段階、外部ソースからのデータのダウンロード

→ パート23：フォームの操作に関する最初のレッスン

→ パート24：2番目のフォームレッスン

→ パート25：フォームの操作に関するワークショップ

→ パート26：アプリケーションアーキテクチャ、コンテナ/コンポーネントパターン

→ パート27：コースプロジェクト



レッスン6.機能コンポーネント



→ オリジナル



前の実践的なレッスンで、 ReactDOM.render()



メソッドの引数にHTML要素を形成するすべてのJSXコードを配置する必要はないという事実について話しました。 私たちの場合、以下に説明するような箇条書きリストについて話します。 



 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )


同じアプローチを使用して、何百もの要素があるWebページ全体を表示するために必要なものを想像してください。 これが行われた場合、そのようなコードを通常どおりに維持することは事実上不可能になります。 Reactの人気の理由について話したとき、その1つはこのライブラリの再利用可能なコンポーネントのサポートでした。 次に、機能的なReactコンポーネントを作成する方法について説明します。



これらのコンポーネントは、特別な機能を構築して作成するため、「機能的」と呼ばれます。



新しい関数を作成し、 MyApp



という名前を付けMyApp



： 



 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )


関数名は、コンストラクター関数の命名スキームがここで使用されているため、正確に作成されます。 それらの名前（実際には、コンポーネントの名前）はラクダスタイルで書かれています-それらを構成する単語の最初の文字は、最初の単語の最初の文字を含む大文字で作られています。 このような関数の命名規則に厳密に従う必要があります。



機能コンポーネントは非常に簡単に配置されます。 つまり、関数の本体には、対応するコンポーネントを表すJSXコードを返すコマンドが必要です。



この例では、箇条書きコードを取得し、機能コンポーネントからこのコードの戻り値を整理するだけで十分です。 これは次のようなものです。 



 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> }


この場合、すべてが期待どおりに機能しますが、 return



コマンドはこのコードをすべて返しますが、このような構造を括弧で囲み、プログラムコードをフォーマットするときにReactで採用されている別の規則を適用することをお勧めします。 それは、個々の要素を別々の行に配置し、それに応じて配置することにあります。 上記のアイデアを適用した結果、機能コンポーネントのコードは次のようになります。 



 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) }


このアプローチでは、コンポーネントから返されるマークアップは、通常のHTMLコードと非常によく似ています。



これで、 ReactDOM.render()



メソッドで、このメソッドに最初の引数として渡し、JSXタグで囲むことにより、機能コンポーネントのインスタンスを作成できます。 



 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") )


ここでは、自己終了タグが使用されていることに気付くかもしれません。 場合によっては、より複雑な構造を持つコンポーネントを作成する必要がある場合、同様のデザインは異なる方法で構築されますが、ここでは、このような自己終了タグのみを使用します。



上記のコードによって生成されたページを更新すると、その外観は、箇条書きリストのマークアップが機能コンポーネントに取り出される前と同じになります。



機能コンポーネントによって返されるマークアップは、 ReactDOM.render()



メソッドを最初のパラメーターに適用する際に考慮したのと同じルールに従います。 つまり、次々に続くJSX要素を含むことは不可能です。 前の例の<ul>



要素の後に他の要素、たとえば- <ol>



を配置しようとすると、エラーが発生します。 たとえば、機能コンポーネントを返すものをすべて<div>



要素にラップするだけで、この問題を回避できます。



おそらく、機能コンポーネントを使用することでどんな強力な可能性がもたらされるのかをすでに感じ始めているのではないでしょうか。 特に、JSXコードのフラグメントを含む独自のコンポーネントの作成について話します。JSXコードは、Webページに表示されるHTMLマークアップの説明です。 このようなコンポーネントは一緒に配置できます。



この例では、単純なHTMLリストを表示するコンポーネントがありますが、より複雑なアプリケーションを作成するにつれて、作成した他のコンポーネントを表示するコンポーネントを開発します。 その結果、これらはすべて通常のHTML要素に変わりますが、これらの要素を形成するために、独自のコンポーネントが数十個必要になる場合があります。



その結果、ますます多くのコンポーネントを作成するとき、それらを別々のファイルに配置しますが、今のところ、機能コンポーネントに慣れて、今説明したことをマスターすることが重要です。 コースでは、ますます複雑なファイル構造を作成します。



このレッスンでは、機能コンポーネントの基本を検証し、次に、取得した知識を実際に適用します。



レッスン7.ワークショップ。 機能部品



→ オリジナル



▍ジョブ



  1. 基本的なReactプロジェクトを準備します。
  2. 次のHTML要素を形成する機能コンポーネントMyInfo



    を作成します。



    1. あなたの名前の要素<h1>



      。
    2. あなた自身に関するあなたの短編小説を含むテキスト段落（ <p>



      要素）。
    3. 訪問したい3つの場所のリストを含む、マーク（ <ul>



      ）または番号（ <ol>



      ）のリスト。
  3. WebページにMyInfo



    コンポーネントのインスタンスをリストします。


追加のタスク



自分で行う方法を学習して、ページ要素のスタイルを整えます（Googleで検索）。 このコースでは、コンポーネントのスタイリングについて詳しく説明します。



注：折りたたみ可能なブロック



ソリューション



ここでは、以前使用したのと同じHTMLページに満足しています。 Reactコードを含むファイルも非常に標準的な外観になります。 つまり、ライブラリをインポートし、 MyInfo



機能コンポーネントのスケルトンを作成し、 ReactDOM



オブジェクトのrender()



メソッドを呼び出して、ページに表示されるコンポーネントと、このコンポーネントが表示されるページ要素へのリンクを渡します。 この段階で、コードは次のようになります。 



 import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root"))


次に、タスクに従ってHTMLマークアップを生成するMyInfo



からJSXコードを返す必要があります。 完全なソリューションコードを次に示します。 



 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") )


MyInfo



から返されたMyInfo



は括弧で囲まれ、表示される要素は補助<div>



要素内にあることに注意してください。



まとめ



この記事では、Reactの機能コンポーネントを紹介しました。 次回はコンポーネントファイルとReactプロジェクトの構造について説明します。



親愛なる読者！ このコースを受講している場合は、演習を実施する環境について教えてください。





More articles:


All Articles