React - JSX, map, component

Reactの3つの特徴

宣言

命令型とは逆です.以前学習・記述したコードのように,上から下まで論理的に逐条表示・解釈され,「AすなわちA」,「BすなわちB」など論理的に理解される命令型と逆の特徴を持つ.
コードを見るだけで直感的に理解できるので、時間の無駄を防止し、生産性を向上させ、効率的なサービスを提供できます.
つまり、宣言型は「何が起こっているのか」に注目し、命令型は「どのように」発生するのかに注目する.

構成部品ベース

機能別に管理し、構成部品間の依存性を低減し、独立して使用します.
これにより、ユニットテストが可能になり、今後のメンテナンスが非常に容易になります.小さな単位で使用しているので、リサイクル性が増しています.

汎用性

JSライブラリは、既存のコードを覆すことなく、既存のコードを柔軟に適用できる非フレームワークライブラリです.

JSX

: Javascript XML
JSXは反応の利点を最大化できる.
レスポンスポイントは、UIがどのように表示されるべきかを機能単位で定義する関数コンポーネントです.
HTMLを構造化するためには,JSを分離してユーザインタフェースを生成するよりも,この2つの技術自体が統合されており,逆に機能単位でユニットが割り当てられている.
JSXはすぐには実行できません.Babelを中間コンパイルする必要があります.

JSX rules

以上のセリフを書くには、必ず彼を縛ってください.

CSSクラス属性をclassNameに指定します.

JS関連内容は{중괄호}に分類され、合計

カスタム構成部品は、大文字で始まる

でなければなりません.

条件文if文ではなく3つの演算子を使用
:if文は割り当て可能な式ではないためです.

実習例題を復習しましょう。

let langs = ["JavaScript", "HTML", "Python"];
  let viewLangs = () =>
    langs.map((it) => {
      return <p>{it}</p>;
    });

  return (
    <div>
      {viewLangs}
    </div>
  );

viewLangs関数では、map法を用いてlangs配列の要素をpタグの内容にマッピングする.
このときviewLangsの結果は配列内の要素である.

[<p>Javascript</p>, <p>HTML</p>, <p>Python</p>]

mapのコールバック関数が文pラベルに括弧で囲まれたitを返すことを覚えておいてください.カッコがない場合は、langs要素を指すパラメータitではなく、テキストitになります.