【入門編】VueからReactへ入門してみた【その①】

17554 ワード
React Vue.js JavaScript CompositionAPI react-hooks JavaScript テキストリンク

仕事でVue使ってます。
いくつかのブログや記事で「React→Vueは苦労しないが、Vue→Reactは苦労する。」と言われているのを見かけました。
そこで
①ハンズオンで体験してみる
②なぜ苦労するのか
という2点をまとめてみました。
（Reactはビギナーレベルなので誤りがあれば指摘してください）

①ハンズオンで体験してみる

・アプリの導入
・コンポーネントの用意、呼び出し

node.jsがインストールされている必要があります。
その辺りの環境作りは割愛します。
ちなみに私は node -v12.17.0 です。

アプリを作成
npx create-react-app sample-pj(sample-pjはアプリケーション名なので任意）

しばらく時間が掛かります。
中身はこんな感じ。

アプリを起動
cd sample-pj　（アプリの階層に入る）
npm start　（アプリケーションをローカルでスタート。3000番で立ち上がります。）

こんな画面が出たら導入はできています。

コンポーネント
srcフォルダ配下にcomponentsフォルダを作成。
コンポーネントはここに作っていく。
こんな感じ。

Sample.jsを以下のように編集。

Sample.js
import React from 'react';

// "hello world!!"を返す関数ということ
const Sample = () => {
  return (
    <div>
      <h1>hello world!!</h1>
    </div>
  );
};

export default Sample;

App.jsを編集してSample.jsを呼ぶ。

App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
// Sampleコンポーネントをインポート
import Sample from './components/Sample';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        //Sampleコンポーネントを呼び出す
        <Sample />
      </header>
    </div>
  );
}

export default App;

Sampleコンポーネントを呼び出せています。

コンポーネントを増やしてみる。
App.jsを編集してButton.jsを呼ぶ。
Button.jsは後で作る。

App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Sample from './components/Sample';
// Buttonコンポーネントをインポート
import Button from './components/Button';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Sample />
        // Buttonコンポーネントを呼び出す。ButtonNameというプロパティを引数に渡す。
        <Button ButtonName="Click Button" />
      </header>
    </div>
  );
}

export default App;

Button.jsを作る。

Button.js
import React from 'react';

const Button = (props) => {
　// イベント処理を定義する。
  const clickEvent = () => {
    // プロパティのButtonNameを受け取って、alertの中身として表示する。
    alert(props.ButtonName);
  };

  return (
    <div>
      // Clickイベントを持たせる。
      <button onClick={clickEvent}>Click</button>
    </div>
  );
};

export default Button;

もういっちょコンポーネントを追加する。
CalculateButton.jsを作る。

CalculateButton.js
// useStateはReactのHooksという割と新しめな機能の一部で状態管理が以前よりも容易になった
// 今までとどう変わったかは　https://ja.reactjs.org/docs/hooks-state.html を参照
import React, { useState } from 'react';

const CalculateButton = (props) => {
  const [count, setCount] = useState(2);

  return (
    <div>
      <button onClick={() => setCount(count * 2)}>Click</button>
      {count}
    </div>
  );
};

export default CalculateButton;

App.jsを編集してCalculateButton.jsを呼ぶ。

App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Sample from './components/Sample';
import Button from './components/Button';
// CalculateButtonコンポーネントをインポート
import CalculateButton from './components/CalculateButton';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Sample />
        <Button ButtonName="Click Button" />
        // CalculateButtonコンポーネントを呼び出す。
        <CalculateButton />
      </header>
    </div>
  );
}

export default App;

クリックする度に2倍されていく。

本記事ではhooksに関する説明は行いませんが、以下の機能があります。
・基本のフック
useState => ステートフルな値と、それを更新するための関数を返す。
useEffect => useEffectに渡された関数はレンダーの結果が画面に反映されたのちに動作する。デフォルトでは副作用関数はレンダーが終了したのちに毎回動作するが、特定の値が変化したときのみ動作させるようにすることもできる。
useContext => 登場するまではコンポーネントを跨いだデータ渡しにはバケツリレー方式で行っていたが（親→子→子の場合、毎回データを渡していた）、そうではなくグローバル変数のように扱えるようにしてくれる優秀なやつ。
・追加のフック
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
※上記はReactの公式から引用したり咀嚼したメモ。詳細は公式ドキュメントを参照願います。
別記事でHooksについても説明できれば。。。

②なぜ苦労するのか

現時点で言えることは、JSXの存在なのかもしれない。
vue-routerやcomposition apiなど、Vue.jsをある程度理解していれば、Reactへの移行はそこまでストレスじゃないないのでは、と考える。


まだまだReactを触ってみたいので、
今後さらに深堀してみて感想をまとめてみたいと思う。
今回はここまで！