Reactメモ

Reactの個人的なメモです。

Reactとは？

・Facebookが開発したJSライブラリ（≠フレームワーク）

・WebのUI（ユーザーインターフェイス）
　１.見た目（View）
　２.機能（Controller）

・仮想DOMを操作できる

通常DOM

 document.getElementById('hoge').innerText = 'fuga' 

仮想DOM

 render(
<div id = 'hoge'>fuga</div>
)

JSX

React内で使うHTMLの様なJSの拡張言語(仮想DOMで使う言語)

通常DOM

const fuga = "<h1>Hello,World!</h1>"
const foo = "<h2>React Commentary</h2>"
const bar = "Hi, I'm Taro"
document.getElementById('hoge').innerHTML = fuga
document.getElementById('foo').innerHTML = foo
document.getElementById('bar').innerText = bar

JSX

return(
  <React.fragment>
   <div id = "hoge">
    <h1>Hello,World!</h1>
   </div>
   <div id = "bar">
    <h2>React Commentary</h2>
   </div>
   <p id = "foo">Hi,I'm Taro</p>
  </React.fragment>
);

JSXの基礎文法

１
Reactパッケージのインストール
.JSXファイルの先頭で宣言

import React from "react"

２
変数名はキャメルケースで書く
classNameなど文字を繋ぐときは大文字で

３
classはclassNameに変える

const App = () =>{
  return(
    <div id = "hoge" className = "fuga">
      <h1>Hello, World!</h1>
    </div>
  );
};

４
{}内に変数や関数を埋め込める

const foo = "<h1>Hello, World!</h1>"
const App = () =>{
  return(
    <div id = "hoge" className = "fuga">
      {foo} 
    </div>
  );
};

5
空要素は必ず閉じる

const App = () =>{
  return(
    <div id = "hoge" className = "fuga">
      <input type="text" id = "blankElement"/> #閉じる
      <img src="/assets/icon/foo.png"/> #閉じる
    </div> 
  );
};