Vue→React移行の個人的メモ #1

Vueを使っていたのですが、諸事情によりReactに移行する必要がありました。
React+JavaScript, React+TypeScriptなどのソースを見て気づいたことを
なるべくVueと対比して書いていきます。何回かの記事分けて書きます。

変数の埋め込み、関数の埋め込み

Vueでの{{}}と違って、Reactで値を埋め込むcurly braces{}はそれぞれ一つずつ。
Vueで""を使っていたのとは違い、Reactでクリック時に実行する関数はcurly braces{}で渡せる。
些細なことだが、HTMLのonclickと違い、onClickであることが違う。

関数コンポーネントの例

import {useState} from 'react'

const Component=()=>{
  const [value, setValue] = useState('default value')
  const sayClicked = ()=>{
    setValue('Clicked!')
  }

  return (
    <button onClick={sayClicked}>{value}</button>
  )
}

ReactDOM.render

これは、Electronを扱うプロジェクトで見かけました。
DOMに直接Reactを書き込むようだ。

２つめの要素は挿入先のことだそう。この例ではindex.htmlの#barにReact要素を挿入するらしい。

なお、公式ドキュメントによると、最近のバージョンでは.renderはcreateRootに置き換わったらしい。

ReactDOM.renderについてのメモ

import ReactDOM from 'react-dom'
ReactDOM.render({
  <Component/>,
  document.getElementById('bar')
})

TSで関数コンポーネントを使うときの型の表記

TSでの関数コンポーネントは以下のようになっている。
React.FCの部分が型定義に使われている。
React.FCは関数コンポーネントの型らしい。

const Component: React.FC = () => {
  // ...
}

C++の継承、というアナロジーで腑に落ちる

C++の継承の概念に似ているので、わかりやすい。
interfaceで定義された型ををベースクラスと考えたときに、そのクラスを継承している、というような考え方ができる。
（あくまでC++とのアナロジーなので、正確さは保証できないが）

C++での継承

class B : public A { };

JSX/TSXでのコンポーネント

以下のように<></>でラップされていることが多い。
複数のタグがある場合、Vueではルートエレメントを一つのタグで囲ってネストする必要があった。
これに同じように、Reactでも<></>で囲っているようだ。

<>
  <Bar/>
  <Foo/>
</>

次回は#2について書いていきます。