TIL#7

4662 ワード
TIL テキストリンク

2021/12/01


React


フロントエンド開発用JavaScriptオープンソースライブラリ.
応答には、宣言、構成部品ベース、汎用の3つの特徴があります.
  • 宣言式(Declarative):JSXを使用して宣言プログラミングを行う場合、応答プログラムは、1つのファイルではなくHTML、CSS、およびJSを使用してページを表示するために明示的に作成されます.
  • は、要素に基づいている.反応器は、1つの機能を実現するために複数のコードを結合した要素に基づいて開発される.素子に分離すると,互いに独立し,再利用可能→機能そのものを集中的に開発できる.
  • 汎用性:応答はJavaScriptプロジェクトの任意の場所に柔軟に適用できます.反応本で携帯電話を開発することもできます.

    • コンポーネント?

  • 構造および動作コードセット
  • すべての応答アプリケーションには、少なくとも1つのコンポーネントがあります.(root)
  • 最上位要素は、他のサブ要素を有することができる.

    • JSX


    JavaScript XMLの略.(文字列でもHTMLでもない)
    拡張JavaScriptのレスポンスでUIを構成するときに使用する構文.
  • JSXをJavaScriptコードに変換→Babel
  • BaelはJSXをJavaScriptにコンパイルします.
  • React DOMは通常のDOMとは異なり、CSSとJSX構文のみを使用してWebアプリケーションを開発します.

    • JSXルール

  • 以上のイラストを記入する場合は、開始マークと終了マークで包む必要があります.
    • // 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다.
<div> // 이 div가 안의 2개의 div를 포함함.
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h2>World</h2>
  </div>
</div>

  • ReactでCSS classプロパティを指定するには、classではなくclassNameとしてマークする必要があります.<div className="abc">Hello</div>

  • JSXにJavaScriptを書き込む場合は、括弧を使用する必要があります.無効にすると、純粋なテキストとして認識されます.
    • function App() {
  const name = 'kim';
  return (
    <div>
      Hello, {name}! 
      // 중괄호를 이용한다면 Hello, kim!을 정상적으로 출력해주지만
      // 중괄호를 사용하지 않는다면 Hello, name!을 출력하게 됨.
    </div>
   );
}

  • JSXを使用してreactエイリアスを作成した場合は、大文字で始まる必要があります.小文字で始まると、通常のHTML段落として扱われます.(大文字で作成したJSXコンポーネント→ユーザ定義のコンポーネント)

  • 条件付きレンダリングでは、3つの演算子を使用する必要があります.
    -JSX内部のJavaScript式ではif文は使用できません.
    -したがって、JSX以外でif文を使用して事前に値を設定するか、{}内で3つの演算子を使用する必要があります.
    {条件?true時に実行される文:false時に実行される文}
    ex){name==kim?console.log(「正しい」):console.log(「いいえ」)}

  • Reactに複数のHTMLセグメントを表示する場合はmap()関数を使用します.JSXプロパティ「key」を入れる必要があります.そうしないと、リスト内の各アイテムにキーを入れる必要があるという警告が表示されます.
  • キー属性値は、データが提供するIDをできるだけ割り当てるべきである.key属性値はidと同じように変わらず、予想可能で一意でなければならないからです.インデックスの配列(最後の手段)は、一意のidがない場合にのみ使用されます.
    • BOJ 13913:鬼ごっこ4
    nagios coreのインストールと構成