【REACT】JSXを理解しよう！！

JSXを理解しよう！！

最近、Reactの勉強を始めました。
まだ、わからないことがいっぱいありますが、頑張ります。
今日は、reactでよく使う【JSX】について、勉強しようと思います。

JSX(Javascript XML)？

JSXは、JavaScriptの文法の拡張版と理解するのが良いです。
Reactには、elementという変数があります。
elementの中には、HTMLタグが含まれており、文字列も含まれています。
これをJSXと覚えましょう。

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

JSXを使ってみよう！

さすがに、説明するのは、難しいので、
実際、簡単なコードを見ながら説明します。

人の名前と年齢を表示します！
まず、functionを作りましょう！

Componentを作り方法は、
**【Class】を利用する、【function】**を利用する、２つのやり方があります。
今回は、functionで作ってみます。

/*memberというパラメータを貰って、名前と年齢を出力できるようにする。*/
function memberInfo(member) {　
  return member.name + "["+ member.age + "]";
}

人の情報を定義します。

/*人のデータを表示するため、const変数でデータを定義する。*/
const member = {
  name : "Tanaka",
  age : "28",
}

次は、どんなふうに形で、表示するのか定義します。
上で、定義したmemberInfoを使います。

/*elementにHTMLの要素を作ります。*/
const element = (
  <h3>
    {memberInfo(member)}
  </h3>
)

最後に、

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

全体のコードです。

const member = {
  name : "Tanaka",
  age : "28",
}

const element = (
  <h3 class>
    {memberInfo(member)}
  </h3>
)

function memberInfo(member) {
  return member.name + "["+ member.age + "]";
}

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

理解できましたか？
ReactDOMで【element】というcomponentや変数をrenderingして、
画面で内容を表示します。

elementでは、【h3】タグを使って、人の名前と年齢を出力します。
elementをみると【{memberInfo(member)}】という形で、なっていますが、
何で【{}】を使っていますかね？
これが、JSXです！！

Reactは、HTMLとJavascriptを一緒に使う時が多いです。
HTMLコードの中で、どこがJavascriptコードなのか、教えるため、**{}を使います。
もし、{}**がないと【memberInfo(member)】をHTMLコードに認識して、
文字列として、画面に表示されます。

また、JSXは**"camel case"**を使います！

#まとめ

簡単でしたが、JSXがどんなものなのか、
少しは理解できましたか？
そんなに、難しい内容じゃないので、もっと難しいこともできるようになりましょう！