[React] jsx

2823 ワード
n/a.理論 React テキストリンク
jsxとは?
jsxはjavascriptとxmlの組合せ語で、javascriptを拡張する文法です
jsxコードはjsにxml形式で寸法コードを入れることができます
jsxはreactで別名を作成するために使用されます.
const name = 'Josh Perez';

const element = <h1>Hello, {name}</h1>;

// 출력값 > Hello, Josh Perez
jsxの使用規則
jsxはbabelを介してjsファイルに変換されるため、jsxコードを記述する際にいくつかのルールを遵守する必要があります.

  • ラベルは必ず閉じます.<div></div>必ずこのように閉じたラベルを書いてください.
    Input、brのような単一のタグは、以下に示すようにself-closureを行う必要があります.
    <br />

  • 2つ以上のアクセサリーは1つのアクセサリーで包まなければなりません.
    単純なラップ用途としてdivのみを用いる場合,構造的に複雑すぎる場合にはfragmentを用いてラップを行う.
    (fragmentはdom nodeを追加する必要がなく子供をグループ化できます)

  • jsxでjavascript変数または構文を使用する場合は、{}に書きます.

  • タグのattributeのclassとforの代わりにclassNameとhtmlForを使用する必要があります.classはJavaScriptでキーワードなので.
    • なぜjsxを使うのですか?
    Reactから要素を作成します.
  • React.createElement 
    • // 형태
// React.createElement(element, props, ...children)

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)
    React.createElementを使用する場合の欠点
  • セグメントを作成するたびに呼び出す必要があるため、コードが
    • 長くなる可能性があります.
  • 単位構造を一目で見るのは難しいので毒性は低い.
  • jsx 
    • <MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
    jsxは、jsコードの内部に寸法コードを記述することができるので、別名構造を直感的に理解することができる.
    さらに、他のメソッドを呼び出す必要がなく、エンティティを作成できます.
    jsxでコードを記述しても、jsxはbabelで復元されます.ファイルをcreateElement形式で変換します.
    jsxの長所と短所
    長所
  • コードの可読性を向上させ、xml構文と同様に、オーバーラップした構造をよりよく表すことができる.
  • JavaScriptの拡張構文なので、JavaScriptのすべての機能と構文を使用できます.
    • 短所
  • jsxは、構築環境で変換ファイルを設定する必要があります.ただし、CRAでファイルを作成すると、babelやwebpackなどのbuildツールが設定されていなくても、build時に私が作成したアプリケーションの最適化buildファイルが生成されます.
    • JavaWeb学習day 10(基礎強化)
    コンテキストメニューContext Menu