日本学術振興会

JSXはJavaScript拡張構文です.それは簡単に一緒にマークアップとJavaScriptを書くために反応で使用されます.今日、このブログで私はあなたが知っておくべきすべてのJSXをカバーしようとします.
JSXの前に、任意の反応要素を作成する必要があるときにReact.createElement() .

// Syntax: React.createElement(component, props, ...children);

var RootElement = React.createElement(
"div", null, 
React.createElement("h1", { style: { color: red } }, "The world is yours"), 
React.createElement("p", null, "Say hello to my little friend")
);

上の例ではReact.createElement() . それはコンテナdivを持っていますh1 and p . h1 要素は色を赤に設定し、両方の要素が内部にテキストを持っています.
これはHTMLタイプのマークアップを書く方法ではありません.このことを容易にするために、フェイスブックはJSXと共に来ました.
JSXを使用すると、HTMLのようなマークアップを書くことによって反応要素を作成できます.場面の後で、JSXはパッケージを使用しているプレーンJavaScriptに変えられますBabel . JSXで、上記の要素をこのように作成することができます.

const RootElement = (
  <div>
    <h1 style={{color: red}}>The world is yours</h1>
    <p>Say hello to my little friend</p>
  </div>
)

コードを貼り付けることができますhere と右側の出力を参照してください、それは我々が使用しているほとんど同じですReact.createElement() .

JSXの表現
JSXでJavaScriptの式を書くことができます.あなたがJSXの中に入れたどんな表現でも.巻き毛で包まれなければならない{} .

const language = 'JavaScript';

const element = <h1>Hello there, I am learning {language}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

ここでh 1要素内の変数' language 'の値を注入します.

If your expression inside JSX returns an object. It will throw an error.

JSX内の任意の有効なJS式を使用できます.使えないif else コンディション.むしろ、3項演算子を使用して決定を行うことができます.

const App = () =>{
  const [isDisabled, setIsDisabled] = useState(false);

  return (
       <button disabled={isDisabled ? true : false}>Simple Button</button>
  );

}

見て、我々は3 D演算子を使用してボタンを無効にするか、有効にします.あなたが使用しようとするならif else ここでの声明.私は働かない.

JSXのクラス
JSXはHTMLとほぼ似ていますが.しかし、若干の変化があります.
JSXでCSSクラスを使用する場合は、class="" . しかし、それはJSXでその理想的な方法でありません.あなたはclassName="" 代わりに.

の空のタグ
JSXに空のタグがあるならimg タグ.あなたはそれを閉じる必要があります/> XMLのように.

const image = <img src={url} />;

JSXにおける複数の要素

const App = () =>{

  return (
       <>
         <h1>Hey there, This is Arafat.</h1>
         <img src={url} />
       </>
  );

}

JSXに複数の要素がある場合.すべての要素をルート要素でラップする必要があります.それは<div> 要素または使用React.Fragment 要素.使えます<></> 反応に代わるものとして.フラグメント.

JSXにおける小道具
JavaScript式をJSXの小道具として渡すことができます.

return (
       <Component foo={ 1 + 2 + 3 + 4 } >
         <h1>Hey there, This is Arafat.</h1>
         <img src={url} />
       </Component>
  );

デフォルト値
値を小文字に渡しなければ、デフォルトはtrueです.

const App = () =>{

  return (
       <button disabled></button>
  );

}

上の例では、button要素に属性がありますdisabled . しかし、我々はこれのためにどんな価値も通過しませんでした.だからこそ、その値はtrue .

その他のリソースJSX Basics JSX in depth
すべてを言われて、私は非常にあなたが学習を続けることをお勧めします.
私のブログを読んでくれてありがとう.お気軽に接続して