反応が始まる前に

❓what is library
簡略化:プログラムの作成に必要な機能
例:自動車の車輪、ヘッドライト、エアバッグ
❓what is framework
簡略化:プログラム基本構造(スケルトン)
例:カーフレーム
❓what is architecture
簡単な説明:プログラムの主な構造の概略図
例:自動車設計図
❓what is platform
簡略化:プログラム実行環境
例:自動車走行環境(一般高速道路、砂漠専用、レーシングカー)
👌React.jsはJavaScriptのライブラリです.

JSX

❓ what is JSX

const element = <h1> Hello yeongjae!</h1>;

上のコードタグ構文は文字列でもhtmlでもありません.
JavaScript(JSXと呼ばれる)の構文を拡張します.
html構文をjavascriptコードの内部に書き込むとjsxになります.

JSX element

次のコードでJSX elementの感じを見つけます

const yeongJae = {
  dream: <li>frontend-developer</li>
  hobby: <li>computer programming</li>
  food: <li>pizza</li>

JSX attribute

tagにattribute(プロパティ)をあげたい場合は、「」を包まなければなりません.
classをあげたい場合はhtmlではclassですが、JSXではclassNameを使う必要があります

const yeongJae = {
  dream: <li>frontend-developer</li>
  hobby: <li>computer programming</li>
  food: <li className="love-item">pizza</li>

JSXではhtmlとは異なり、使用終了が可能です.
これをself-clostingtagと呼ぶ.