こんにちは夏隣です！
↓前回のreact入門第1回の続きです。
前回はReactの概要についてまとめましたが今回はReact特有のJSXを中心にまとめます。
開発環境はMacとなります。
前回同様個人メモ程度の内容です。
環境構築についてはこちらの動画を参考にしました。
非常に分かりやすく助かります。
『【React入門】#2 Reactの環境構築』
目次
・JSXとは
・従来のJsとの記述の違い
・実際に書いてみる
・まとめ
JSXとは
Facebookが開発したJavascript拡張構文です。
jsファイルでhtml構文やXMLと同じマークアップ言語に近い形で記述できるものです。
従来のJsとの記述の違い
こちらの動画が非常に参考になりましたので、その内容を元に作成していきます。
『日本一わかりやすいReact入門#2...Reactに欠かせないJSXの解説』
従来の書き方では
const fuga ="<h1>1番目</h1>"
const bar="<h2>2番目</h2>"
getEkementById('hoge').innerHTML=fuga
getEkementById('bar').innerHTML=barですので、量が増えれば増えるほど、管理しづらいコードになります。
JSXを使うと
return (
<React.Fragment>
<div id = "hoge">
<h1>1番目</h1>
</div>
<div id = "bar">
<h1>2番目</h1>
</div>
</React.Fragment>
);Htmlっぽく書けるので、管理しやすく可読性は上がりますと説明されています。
私もこっちのほうが見やすかったですね。
ここで勘違いしやすいところですが、JSX≠Javascriptであることも覚えておく必要があります。
JSXがエンジニアにとって見やすい形なのは、上のコードからも分かるかと思いますが、
ブラウザはJSXを理解できません。理解できる形(js)に翻訳する必要があります。
その機能がトランスパイラと呼ばれるものです。
例.
JSX→Javascript(EC6)
Javascript(EC6)→Javascript(EC5)
有名なトランスパイラは、BabelやTypescritです。
実際に書いてみる
//Reactパッケージのインポートが必要
import React from 'react';
//{}内に変数や関数を埋め込める
const foo = "<h1>Hello</h1>"
const App =()=>{
return(
<div id = "hoge" className="fuga">
{foo} //変数fooを埋め込める
</div>
);
};変数の注意点
キャメルケース(推奨)・・・変数の定義方法のひとつでclassNameのように最初は小文字で書くが単語の区切りを大文字で書く方法。ラクダのこぶのような形。
ケバブケース(非推奨)・・・単語の区切りをclass_Nameのように"_"で書く方法。
JSXでは使うことは避ける。
まとめ
JSXはいいぞ
↓前回：react入門第1回
↓次回：react入門第3回
未定
Comments