JSXとは何ですか.

22310 ワード
React JSX テキストリンク

1. JSX


1.1 JSX定義

  • JavascriptにXMLを追加する拡張構文です.
  • HTMLコードをJavaScriptとして受信します.
  • Babyのようなツールを使用して、ブラウザでJSXコードをコンパイルします.
    • これは
  • の正式なJavascript文法ではありません.

    • 変数宣言の例

    const element = <h1>Hello, world!</h1>;

    🤔 コンパイル方法


    開発者ツール>Sourceタブ>static/jsフォルダにアクセスします.
    反応ライブラリ全体のソースコードと反応ドーム全体のソースコードが含まれます.


    1.2 JSXのメリット

  • HTMLコードの作成と同様に、読みやすさが高く、書きやすい.
  • HTMLタグを使用してもよいし、Javascriptなどを使用してコンポーネントを記述してもよい.

    • 1.3 JSX特性

  • を庇う親の要素が必要だ.
    • 機能しない例
    import React from 'react;

function App() {
  return (
    <h1>Hi</h1>
    <h2>There?</h2>
  );
}

export default App;
    作業例
    1)
    import React from 'react;

function App() {
  return (
    <div>
      <h1>Hi</h1>
      <h2>There?</h2>
    </div>
  );
}

export default App;
    2)div要素ではなく分割を使用する例
    import React from 'react;

function App() {
  return (
    <>
      <h1>Hi</h1>
      <h2>There?</h2>
    </>
  );
}

export default App;
  • Javascript表現を使用できます.
    • Javascript式を記述するには、JSX内部でコードを括弧{}で囲むだけです.
    import React from 'react';

function App() {
  const name = 'Sue'
  return (
    <>
      <div>{name}'s Velog</div>
      <div>everything's okay?</div>
    </>
  );
}

export default App;
  • if文の代わりに条件演算子を使用すればよい.
    • import React from 'react';

function App() {
  const name = 'Sue'
  return (
    <div>
      {name === 'Sue' ? (
        <div>반가워요, Sue!</div>
      ) : (
        <div>누구신가요?</div>
      )}
    </div>
  );
}

export default App;
    条件レンダリングには、
  • AND演算子(&)を使用します.
    • 特定の条件を満たすときにコンテンツを表示できます.そうしないと、レンダリングする必要がないときに使用できます.
    AND演算子(&)を使用する前のコード
    import React from 'react';

function App() {
  const name = 'Sue!!'
  return (
    <div>
      {name === 'Sue' ? <div>반가워요, Sue!</div> : null}
    </div>
  );
}

export default App;
    AND演算子(&&)を使用したコード
    import React from 'react';

function App() {
  const name = 'Sue!!'
  return (
    <div>
      {name === 'Sue' && <div>반가워요, Sue!</div>}
    </div>
  );
}

export default App;

    🤔 JSXはいつ括弧で囲まれますか?


    主にJSXの複数行を書くときは括弧で囲み、1行で表すことができるJSXは括弧で囲みません.JSXを括弧で囲む必要はありません.
  • 線図生成が可能である.
    • スタイルを適用する場合は、オブジェクトとして適用し、スタイル名はキャメルボックスとして記入します.
    import React from 'react';

function App () {

  return (
    <div
      style={{
        backgroundColor : 'lightblue',
        fontWeight : 'bold'
      }}
    >
      반가워요, Sue!
    </div>

export default App;
  • classではなくclassNameです.
    • HTMLと異なり、JSXはCSSクラスを使用する場合はclassNameを使用します.
    CSSファイル
    .title {
  padding: 5px;
  background: lightblue;
  color: grey;
  font-size: 8px;
  font-weight: bold;
}
    JSXファイル
    import React from 'react';

function App() {
  const name = 'Sue'
  return (
    <>
      <div className="title">{name}'s Velog</div>
      <div>everything's okay?</div>
    </>
  );
}

export default App;
  • Self Closing Tagがあります.
    • 空のマークが付いている場合は、XMLのように/>を使用して直接閉じることができます.
    import React from 'react';

function App() {
  const name = 'Sue'
  return (
    <>
      <div>{name}'s Velog</div>
      <div>everything's okay?</div>
      <input />
      <image alt="profile" src="https://www.###.com" />
    </>
  );
}

export default App;
    React公式文書
    MDN
    <反応技術、金ミンジュン、p.60~61>
    の対話ダイアログを追加する
    RailsでTailwind CSSを使用する