Reactを基本からまとめてみた【16】【超基礎JSXの記法】

##JSXとは

• JavaScriptの拡張言語　≠　テンプレート言語
• HTMLライクな記述　+ JavaScriptの構文が使える
• jsxは最終的にReact要素を生成する

##なぜJSXを使うか

• React.createElementはReact要素を生成する式
• ２つの構文は等価 = 同じ結果となる

sample.js

React.createElement(
  'button',
{className: 'btn-blue'},
  'click me!'
)

//jsxを使うとHTMLライクに書ける
<button className={'btn-blue'}>Click me!</button>

##JSXは何をしているのか

• コンパイル時

　　1.JSX ⇨ React.createElementの式に変換
　　2.React要素を生成

• React.createElementを使った構文は直感的ではない　
  ⇨ jsxを使うことで楽に記述ができる

sample.js

<button className={'btn-blue'}>Click me!</button>
　　　　　　　⬇︎ 
　　　　　コンパイラ
　　　　　　　⬇︎ 
React.createElement(
  'button',
{className: 'btn-blue'},
  'click me!'
)

####コンパイルとは
コンパイルとは、プログラミング言語で記述されたソフトウェアの設計図（ソースコード）を、コンピュータが実行可能な形式（オブジェクトコード）に変換する作業のこと。

##JSXの基礎文法①
1.Reactライブラリをimportする
2.return分の中がjsxの構文

sample.js

import React from 'react';

const BlueButton = () => {
  return (
   <button className={'btn-blue'}>
    Click me!
   </button>
  )
}
export defalut BlueButton;

##JSXの基礎文法②

1.キャメルケースで記述する
2.{}内で変数を扱える
3.閉じタグが必要

sample.js

import React from 'react';

const Thumbnail = () => {
　　const caption = '写真'
   const caption = '/img/sample.png'
  
　return (
   <div>
     <p>{caption}</p>
     <img src={imagePath} alt={'写真'}
   </div>
  )
}
export defalut Thumbnail;

##特殊なJSXの構文

1.jsxは必ず改装構造　　最上位コンポーネントは並列にできない
2.React.Fragmentで囲む　HTMLタグとして出力されない
3.React.Fragmentで囲は省略形で書ける

error.js

return (
  <p>React入門</p>
  <p>jsxの基礎文法</p>
)

ok.js

return (
　<>
  <p>React入門</p>
  <p>jsxの基礎文法</p>
  </>
)

##ReactでのイベントやStyleの扱い

App.jsx

import React from 'react';

const App = () => {
//ボタンをクリックした時の関数を書く
  const onClickButton = () => alert();
  const contentStyle = {
    color: 'blue',
    fontSize: '18px'
 };
  return (
    <>
     <h1 style={{color:'red'}}>こんにちは</h1>
     <p style={contentStyle}>お元気ですか?<p>
//波カッコの中に関数名を書く
     <button onClick={onClickButton}>ボタン</button>
    </>
  );
};
export default App;

##参考サイト
[モダンJavaScriptの基礎から始める挫折しないためのReact入門]
(https://www.udemy.com/course/modern_javascipt_react_beginner/learn/lecture/22332614#overview)
[#02 新・日本一わかりやすいReact入門【基礎編】JSXの記法]
(https://www.youtube.com/watch?v=gLbTluYSb_U&t=539s)