0
Help us understand the problem. What are the problem?

posted at

updated at

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を書き込むようだ。

2つめの要素は挿入先のことだそう。この例では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について書いていきます。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?