【React】jQueryのサンプルコードをReactに書き直す際の考え方について

Question

React初心者です。

関数コンポーネントでstateやライフサイクルを使えるReact hookについて最近学びました。

一通り使い方を勉強しjQueryの簡単なサンプルプログラムをReactに書き換えてみたいのですが、何をstateにしてどこでライフサイクルを使うべきかがわかりません。
（シンプルな設計にしたいのでなるべくクラスではなくhookを使ってみたいです）

例えば以下のようなjQueryのプログラムはReact hookを使ってどのように書き換えることができるのでしょうか。
https://codepen.io/nenadkaevik/pen/odyrGm
※ 選定したサンプルプログラムはテキトーです

Reactで書き換える上でのヒントや考え方等をご教示いただきたいです。

Comments

[hoshi-takanori]

考え方というか、考える対象 (レイヤー) が違う気がします。jQuery はアニメーションとかの細かいことを扱うのが得意で、React は現在選択されているタブがどれで、選択が変更されたらどうするかを扱うためのものという感じ…。

[Jake5]

確かにおっしゃる通りですね。
ということは今回のケースではstateやライフサイクルを特段扱う必要はないという理解で正しいですか？

[hoshi-takanori]

タブの例で言えば、
<ElasticTabs
　tabs={['Avengers', 'Hunl', 'Thor', 'Marvel']}
　selectedIndex={selectedIndex}
　onChange={e => { ... }}
/>
のように使えるコンポーネントを定義して、アニメーションの内部実装はごりごり頑張って書くことになるけど、使う側は細かいことを気にせずに使える、というのが React の目指す姿かと。

[Jake5]

確かにコンポーネント化すると直感的にどういった処理をしているのかがわかりにくいですね。。
ではこういったアニメーションの実装には別のアニメーション用のライブラリを併用したり、なるべくCSSのみで対応するといったところが現実的な実装方法といった感じでしょうか？
(Reactにはそういった弱点もあったのですね。。確かにReact製のアプリでリッチなアニメーションを使っているサービスをあまりみかけないような笑)

[hoshi-takanori]

React では生の DOM 要素へのアクセスには制約があるので、React に対応してないアニメーションライブラリは基本的に使えないと思います。また、偏見かもしれませんが、React を使う人は、あまりアニメーションを求めてないような…。

[Jake5]

承知しました！ありがとうございました。

Answer 1

アニメーション系の動作をReactで再現するのはハードモードですので、勉強し始めで取り掛かるのは荷が重いかと思います。

もっとわかりやすいものから進めることをおすすめします。