React備忘録#1「簡単な最低限の知識」

React基礎知識の見直し

・今まで上っ面だけ理解した気になってReactを使用していたので、見直しを兼ねて記事を残します。

1. そもそもReactって何？

概念の見直しからします。
従来のReactなどのFrameWorkを用いないでwebサイトを制作すると、DOMやStyleをJavaScriptで変更した場合画面構成の際にレンダリングがかかります。
一方Reactを用いて作成した場合条件にもよりますが、DOMやStyleの変更をした場合にレンダリングは起こりますが効率よくレンダリングしてくれます。

さらにReactの基本構文はパッと見だと既存のものと違い分かりにくいと感じるかもしれませんが、実はHTMLでの作成の方法をそのまま使用すると簡単なwebサイトなら作れます！！
例：

function Sample() {
  return (
    <div>
      <p>hello world</p>
    </div>
  );
}

export default Sample;

上記のようにreturn()の中にHTML構文があると思います、Reactではこの部分が描画されるコードになります。
作成の際には、基本的にHTML構文を従来通り記述すればOKです！！
じゃあreturn()以外はというと、Reactでは上記全体をまとめてこれはコンポーネントと呼ばれています。
コンポーネントは簡単にいうと、web作成のためのパーツと覚えておいてください。
Reactではこのコンポーネントを色々と作っていき画面を構成していきます。
コンポーネントの作成構文はJSX構文と呼ばれ、記述しているファイルの拡張子はjsxとなります。

2.今回最低限覚えたいこと

• コンポーネント
• state

以上二つは今回最低限覚えておきたい知識になります。
・コンポーネント
項目1で触れた通りで、web作成のためのパーツと覚えてください。
作成構文はJSX、記述されたファイルの拡張子はjsxとなります。

・state
stateとは、Reactで値の保持などで使用されるものです。　
例：

import './App.css';
import { useState } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  return (
    <div className="App">
      <p>{number}</p>
      <button onClick={() => setNumber(number + 1)}>加算</button>
    </div>
  );
}

export default App;

例の中でuseStateメソッドを使用して作成されているものがありますが、このnumberとなっているものがStateになります。
実際に上記例をsrc/App.jsに記載して、npm startでローカルサーバーを立ち上げてもらえると確認できますが、加算ボタンを押すと数値が増えていくと思います。
これは何故かというと、State作成時にnumberと同時にできたsetNumberのおかげになります。
実は、Stateの作成時には値が保存される変数と変数に値を保存させるメソッドが同時に作成されます。
const [stete名, set+頭文字大文字のstate名] = useState(stateの初期値 or 初期値無しなら空) の形でStateは基本作成します。
ここでできたset~がメソッドになっていてset~(stateに保存したい値) の形で使用します。
例ではボタンが押された時に動く様にしてnumber+1の値を保存する様にしています。
すると
<p>{number}</p>
で出力される値が増加していくことが確認できると思います。
この様にStateの値が変化すると内部的には再レンダリングが走るのでDOMが再構築されます。

3.まとめ

今回の簡単な仕組みだけでもバニラJavaScriptで書くとちょっとめんどくさいですが、Reactで作るとこれだけの量ですみます。