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で処理されたコードは明らかにであり,Webブラウザで聞こえるコードはheaderというタグである.
App.jsが作成したコードは「類似のJavaScriptコード」です.

つまり、JavaScriptじゃない!!!


Facebookで作成したコンピュータ言語jsxでコードを記述すると、create-act-appはJavaScriptコードに変換します.
残りのSemantic TagもすべてComponentに変えましょう!

→複雑さを大幅に低減する利点がある.