Zenn
📘

Reactの基本

2023/06/14に公開
JavaScript
React
tech

学習メモみたいなものです

JSX記法について

命名規則

パスカル記法で書く
-先頭が大文字、かつ単語の区切りが大文字

例 App,PlayStation

スタイルやイベントを当てる書き方

オブジェクトの中身のキーはパスカル記法で書く。

例

style横の{}はJavascriptを書くもので中にオブジェクトをいれる。

const cssSample = {
  color : 'red',
  fontSize: '50px'
};
return (
    <h1 style={cssSample}>こんにちは</h1>
)

イベントに関しても同様

const onClickButton = () =>alert()
  return (
    <button onClick={onClickButton}>ボタン</button>
  )
};

一つのタグで囲ってあげないといけないよ

const App = () => {
  return (
    <h1>こんにちは</h1>
    <p>テストp</p>
  );
};

こんな感じでかくとエラーが吐かれます。

どうやらタグで囲んでねーと言われています。

const App = () => {
  return (
    <>
      <h1>こんにちは</h1>
      <p>テストp</p>
    </>
  );
};

こんな感じに直すと通りました。

React.Fragmentについて

※同じようなものにReact.Fragmentがある。
特徴としてはkeyが利用できるというところ!!

const fruits = [
  {id: 1, name: 'apple'},
  {id: 2, name: 'banana'},
  {id: 3, name: 'orange'}
];

function FruitList() {
  const listItems = fruits.map((f) =>
    <li key={f.id}>{f.name}</li>
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

拡張子について

reactのファイルについてわかりやすく見るために.jsxという拡張子でも大丈夫とのこと。
公式のチュートリアルだと.jsを使用していたがわかりやすくするためにComponentを使用していたら.jsxを使用するのもおすすめみたい。

VScodeだとロゴも変わる

stateの使い方

各componentが持つ状態のことをいう

下記のような書き方をするとボタンを押すことでnumの値が加算されて、ボタンを押すたびに再レンダリングされる。
useState(初期値)

const App = () => {
  const onClickButton = () =>{
    setNum(num+1)
  }
  const [num,setのNum] = useState(0)

  return (
    <>
      <button onClick={onClickButton}>+1ボタン</button>
      <p>{num}</p>
    </>
  )
};

Effectの使い方

変数が増えてきたりstateが増えたりすると再レンダリングされた時に処理同士が邪魔してしまい、うまく動かない時がある。

その時、追いたい変数が変化した時だけその処理を実行するみたいなことができる。

「3の倍数の時にonOffがfalseならtrueにする
それ以外の時にonOffがtrueならfalseにする」
この中の処理がnumの値が変更された時だけ処理される。

第二引数には配列を持つことができる。からの配列を渡した場合一度だけ処理されて、それ以降処理が動かない。

 useEffect(()=>{
    if(num > 0){
      if(num % 3 === 0){
        onOff || setOnOff(true)
      }else{
        onOff && setOnOff(false)
      }
    }
  },[num]);

リストなどを使用するときのkeyについて

設定しないと以下のように怒られる。

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.
    at li
    at App (http://localhost:3000/static/js/bundle.js:30:104)

以下のようになにかしら目印となるかしらkeyを設定してあげるとエラーも解消されるし、実装する時に必要とされることが多いものでもある。

return(
              <li key={todo}>
                <div className="li-wrapper">
                  <p>{todo}</p>
                  <button onClick = {()=>onClickComplete(index)}>完了</button>
                  <button onClick = {()=>onClickDelete(index)}>削除</button>
                </div>
              </li>
            )

onClickイベントなどに関数を渡す時の注意

こちらの記述は特に何も問題は起こらない
　<button onClick = {onClickDelete}>削除</button>

こっちの記述はループ見たくなってしまう。
　<button onClick = {onClickDelete(index)}>削除</button>

引数を渡さない 引数を渡す
動き ページを読み込んだ時点で関数が実行されず、ボタンがクリックされた時に関数が実行されるようになる。 クリック関係なく処理が走ってしまう。
対処 アロー関数を使い、クリックされたらアロー関数が実行されるようにし、その中の関数が実行されように書く。

修正すると次のような感じ
　<button onClick = {()=>onClickDelete(index)}>削除</button>

クライアントサイドで動く、HTML,CSS,JavaScriptのうちのJavaScriptのフレームワークの一つ。
(HTML,CSSはマークアップ言語)

Meta社が開発

コンポーネントという仕組みになっており、メンテナンスがしやすくなっている

SPA(Single Page Application)対応

TypeScriptに対応

2023年現在最もポピュラーなフロントエンドフレームワークの一つ

ReactHooksが非常に便利ということで爆発的な人気

jsx
JavaScript XML
以前はHTML,CSS,JSは分離していたが、component化した中にひとまとめにした方がわかりやすいという考え方もある。

XMLでHTMLを扱う場合、renderなど書き記述されているscriptタグに
<script type="text/babel">
のように書く必要がある
下記URLのtry it outで変換の内容を見ることができる。
https://babeljs.io/

クラスの名前の書き方はclassNameという書き方になる。

cssを当てる際style={cssText}のようにキャメルケースで書き、
定数の指定の仕方はオブジェクト形式で書く。

const cssText ={
fontSize:'16px',
color:'red'
}

フラグメント
JSXは親要素を一つしか持てない
下記のような書きたたはNG

const element = <p className="font-color-red">hogehge</p>
		<p className="font-color-red">hogehge</p>;

下記のように一つのタグで囲むこと解決できる。

const element = <div>
                  <p>hogehoge</p>
		  <p>hogehoge</p>
		</div>

しかし、不要なdivタグが増えてしまうので下記のように空タグでも大丈夫。

const element = <>
                  <p>hogehoge</p>
		  <p>hogehoge</p>
		</>

正式には空タグは<React.Fragment>の略でkeyなどの属性をつけたい場合には省略せずに書く。

if文は基本書けない。
三項演算子なら対応できる。
たとえば以下のような形

// trueかfalseによって表示を変える
      const isShow = true;
      const element = (
        <>
          <p style={{ display: isShow ? "initial" : "none" }}>属性テスト</p>
        </>
      );

{{}}の外側は、
JavaScriptの式を埋め込むためにReactが用意している特殊な記法。
中身の{}はJavaScriptのオブジェクトを作っている。

if文は書けない。では条件を満たすときにはどう書くのか。
以下のような書き方ができる。
偽の場合は||。

const fruit1 = "apple";
      const fruit2 = "apple";
      const element = <>{fruit1 == fruit2 && <p>果物は同じ{fruit1}</p>}</>;

配列などを繰り返し処理で表示したい時。
mapメソッドの中にコールバック関数を入れる。

const fruits = [
        {
          name: `ぶどう`,
          eName: `grape`,
        },
        {
          name: `りんご`,
          eName: "apple",
        },
      ];
      const element = (
        <>
          <ul>
            {fruits.map((fruit) => {
              return (
                <li>
                  英語は{fruit.eName}日本語は{fruit.name}
                </li>
              );
            })}
          </ul>
        </>
      );

イベントハンドラーについて引数を与えて処理を実行するときの注意
アロー関数を使わないと正常な動作にならない。

const clickArgumentTest = (num1, num2) => console.log(num1 * num2);

const element = (
        <>
          {/* この書き方だと正常に作動しない
          <button onClick={clickArgumentTest(2, 4)}>引数テスト</button>
        */}
          <button onClick={() => clickArgumentTest(2, 4)}>引数テスト</button>
        </>

React Developer Toolsは便利(chromeの拡張機能)

propsについて
プロパティの略
基本的にはcompnentの情報の受け渡しはできないんだけど、propsを使うことで情報の受け渡しができるようになる。

ReactHooks
Reactの機能を関数componentで利用できるようにしたもの
関数componentごとに独自の変数を持たせて、管理する仕組み

useと先頭につけるのがお約束になっている。

componentの再レンダリング
・stateが更新された時
・propsが更新された時
・親componentが再レンダリング更新された時

usestateで更新するための関数ないでの現在の値を取得したい場合。
コールバック関数を用いて、コールバック関数の引数にステート変数を入れる。

Discussion