React(JSXの基礎知識) とらゼミ02 メモ

#JSX

• javascriptの拡張言語である。
• Facebookが開発。
• Reactの業界標準である。

何故使うのか？

const fuga = "<h1>Hello world</h1>";
const start ="こんにちは";
const foo = "<p>世界</p>"
document.getElementById("hoge").innerHTML = huga;
document.getElementById("point").innerText = start;
document.getElementById("wd").innerHTML = foo; 

このように量が増えるととても見にくい = 可読性が落ちる。
可読性を下げないためにもHTMLのように記述出来た方が良い。

トランスパイラ

JSXはjsではないのでブラウザは理解できない、なのでJSXの記述を「変換」する必要がある、
これをトランスパイラと呼ぶ。TypeScriptなどもトランスパイラしてjsに置き換えている。
JSXではなくReactのまま書こうとすると、

React.createElement(
    "h1",
    null, //引数
    "Hello World"
)

スコシ分かりにくくなるが実際はこう書かれている。

jsの基礎文法

①

Reactパッケージのインストールが必要(方法はとらゼミ03で記述)。

// jsx内ファイルの先頭
import React from "react"

②

HTMLとほぼ同じ記述方法だが、classはclassNameと記述する。

let hoge = "hoge"
const App = () => { //Appはコンポーネント。
    return(
        <div className = {hoge} >
            <h1>Hello World!!</h1>
        </div>
    )
}

③

{}内に変数や関数を埋め込める、{}内はJSの世界。

let hoge = "hoge"
const hello = "<h1>Hello World!!</h1>"
const App = () => { //Appはコンポーネント。
    return(
        <div className = {hoge} >
            {hello}
        </div>
    )
}

④

変数名は全てキャメルケースで書く、ケバブケースはNG。

• キャメルケース : ラクダのコブ、単語の小文字と大文字の組み合わせ(fooBar等)。
• ケバブケース : ハイフン繋ぎのやつ(foo-bar等)。