React 2. Component
コンポーネントの作成

このブロックがテンプレートだと思ってください.
このコードはreactコンポーネントを作成するコードです.
👉 説明すると、
reactが所有するComponentというクラスを継承することで、Appという新しいクラスを作成します.このクラスにはrenderというメソッドがあります.
<html>
<boyd>
<header>
<h1>WEB</h1>
world wide web
</header>
<nav>
<ul>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ul>
</nav>
<article>
<h2>HTML</h2>
Html IS hyperText Markup Language.
</article>
</boyd>
</html>
上のhtml構造では、各意味tagの内容が数千行あると、非常に複雑になります!この問題を解決するためにreactでcomponentを作成し、カスタムタグを作成しようとします.
1.基本フレーム

classに属するrenderという関数は「function」を省略できます.
100コンポーネントを作成するには、トップレベルのコードで開始する必要があります。
上部のタイトルラベルをSubjectというラベルに変更するコンポーネントが作成されました.

次に、className="App"に

Webブラウザで見ると、タイトルの効果が非常によく見えます.

👉 開発者ツールでは、#root>です.appにヘッダーラベルが表示されます.
👀 reactで処理されたコードは明らかに
App.jsが作成したコードは「類似のJavaScriptコード」です.
つまり、JavaScriptじゃない!!!
Facebookで作成したコンピュータ言語jsxでコードを記述すると、create-act-appはJavaScriptコードに変換します.
残りのSemantic TagもすべてComponentに変えましょう!

→複雑さを大幅に低減する利点がある.
Reference
この問題について(React 2. Component), 我々は、より多くの情報をここで見つけました https://velog.io/@bori9412/React-2.-Componentテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol