Reactを触ってみた。
React+TypeScriptでゴリゴリ開発していけるように、Reactを改めて学習しだした。
前にReactを学習したときは、Vueを案件で使っておらず、Vueの学習を深くしていた訳でもなかった為、純粋にReactと向き合えたのだが、
今回は案件でガッツリVueを使用した後のReactの再学習ということで、
Vueと比較しながらの学習になっている。
今の所思うことは、Reactつらい。
Vueはeasy、Reactはsimpleとはよく言ったものだと思った。
Reactことはじめ
まずは、create-react-appでreact環境を作っていく。
create-react-appは、vueでいうvue-cliのようなもの。
「create-react-app ディレクトリ名」でプロジェクトの作成可。
落としていないときは、「npm i -g create-react-app」
↓create-react-appで作成した時のディレクトリ構成
初期状態では、ディレクトリ構成とかは一切ないので、
コンポーネントの区切り方は考えないといけない。
reduxを導入する場合は、特にそう。
vue-cliとcreate-react-appは目的が違うのだろうけど、
ここは圧倒的に、vue-cliのほうが使いやすい。
ターミナル上で、作成したプロジェクトに移動し、
yarn start または、npm run startのコマンドを実行すると、
下記のような画面が表示されます。
最近、バージョンが変わったのか、以前と比べ、初期の画面表示も変わった感じ。
Hello World
無事に環境が構築できたということで、定番のHello Worldを表示する。
環境を構築したばかりだと不必要なファイルが多い為、
srcディレクトリ内を下記のように整理してみる。
test用のファイル、logo.svg、ServiceWorker等のファイルを削除。
componentsディレクトリを作成し、その中にコンポーネントのHelloWolrd.jsを置く。
Reactの起点となるsrc/index.jsは、この様な感じ。
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
ReactDOM.render(<HelloWorld />, document.getElementById('root'));
importでreact, react-domをそれぞれ読み込み、必要に応じて、cssやコンポーネントを読み込む。
ReactDOM.renderで表示するコンポーネントと、public/index.htmlの置き換えるdomを指定する。
src/components/HelloWorld.jsは、この様な感じ
import React, { Component } from 'react';
class HelloWorld extends Component {
render() {
return (
<div>HelloWorld</div>
);
}
}
export default HelloWorld;
importでreactを読み込み、JSXを記述するために、React、
Class Componentを利用するため、Componentのメンバーを指定する。
これで、同様にプロジェクト直下でyarn startすれば、表示された。
コンポーネントについて
Reactのコンポーネントには、Class ComponentとFunctional Componentがある。
Class Componentは上記のHelloWorldの時の記述になる。
Functional Componentは、関数で書かれたコンポーネントのこと。
先程のHelloWorldのコンポーネントをFunctional Componentで書くと
import React from 'react';
const HelloWorld = () => (
<div>HelloWorld</div>
);
export default HelloWorld;
これだけになり、非常にシンプル。
複雑なロジックを含まないコンポーネントは、基本Functionalの書き方でok。
ただ、こちらにも大きなデメリットがあり、、、
Vueでは当たり前のように持てていたstateがFunctional Componentでは持てない。
それを解決するためにReact Hooks（旧Recompose）があるのだけれど、
まあ、stateを持ちたいなら、Class Component
複雑なロジックを持たず、デザインのみのコンポーネントならFunctional Componentとなる。
疲れたからこれくらい。
stateやprops等は次くらいにブログにまとめていこうと思う。
現在、Reduxの学習中なのだけど、Vuexと比べて学習コストが高いように思う。
Reactと比較した時に、色々な場面でVueの親切さを垣間見る。
まだまだ、Reactの本質にはたどり着けていないので、引き続き触っていこうと思う。
