React初心者が躓いたこと色々

正直、最近フロントエンド周りの開発を全然しておらず、フロントエンド開発の一線から取り残されてしまってる感があり、今回Reactを使う機会を得たので、頑張って習得しようと使っています。

しかし、なかなか躓きところが多いので、新たに勉強する方の一助になればくらいに、ここにどんどんメモっていきたいと思います。

とりあえずはドキュメントを読もう

何はともあれ、ドキュメントを読み飛ばすと後々大変なので、ドキュメントは軽くでも読むようにしましょう。
https://reactjs.org/docs/getting-started.html

typescriptは使うべきか？

typescriptはMicrosoft製なので、VSCodeを使っているのなら、使って損はないと思います。
型定義があったりとちょっと面倒ではありますが、typescriptを使うことが現在のjs界隈の主流となっているので、開発者ならば使うことが必須かと思われます。

babelって何？

babelを使っていない例もあったりして、自分のブラウザでもbabelを入れずに動いていたので、babelって何の為に要るの？と思っていました。

そこで調べるとJavaScriptのコードを新しい書き方から、古い書き方へと変換するツールとのことで、最近のブラウザでは問題ないので、自分のブラウザでも大丈夫だったのでした。他も9割以上は、既に問題なく動くものの、対応されていない数%をカバーする為に一応入れておいた方が良さそうです。

Functional ComponentとClass Componentとは？

色々なサンプルを見ているとFunctional Componentを使っているものもあれば、Class Componentを使っているものもあり、どっち使えば良いんだと迷いました。

これについてはどちらでも良い、というのが答えらしいです。

componentDidMountなどのライフサイクルを使いたいのであれば、Class Componentを使うしかない。昔はFunctional ComponentではStateが使えなかったらしいけど、今はFunctional Componentでも使うことが出来るので、そんなに違いはなく、殆どの場合はFunctional Componentで済むよという話のようです。

Functional Component

interface Props {}
const Sample = ({}: Props) => {
  return (
    <div>sample</div>
  );
};

export default Sample;

Class Component

import * as React from "react";

class Sample extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>sample</div>
    );
  }
}

export default Sample;

setStateした後もstateに値が入っていない？

最初はsetStateをしたら、即stateに値がセットされるものだと思っていました。

しかし、setStateはasyncのfunctionなので、以下のような感じでcallbackを見ないと値はセットされていないのでした。

this.setState({
    key: val
}, () => {
    console.log(this.state);
});

画面遷移時に値の受け渡し方が分からない

画面遷移時に値を受け渡す方法の前に、まず画面遷移の方法を理解しないといけないです。

まず画面の遷移時には、Routerというのが必須になってきます。
Routerにcomponentを指定して、そのcomponentの中で値をセットして受け渡すというのが、やり方のようです。

Routerの記載方法は以下のとおり。

import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

import Top from './Features/Top';
import Page from './Features/Page';

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact={true} path="/" component={Top} />
        <Route path="/page" component={Page} />
        {/* Not Found */}
        <Route component={() => <Redirect to="/" />} />
      </Switch>
    </BrowserRouter>
  );
};

export default Router;

そして、TopからPageに値を受け渡すのが、history.pushという関数になります。

history.push("/page", {key: val});

受け取る側のPageでは、location.stateにデータが入ってきます。

console.log(location.state);

ちみなに、これはfunctional componentでの書き方です。class componentだと、これだけでは済まないので、ちょっと面倒なことが色々と。。

最後に

まだ、分からないポイントが分からない状態ですが、この後、storeあたりまで使えるようになれば、もう少し便利になるかなといったところです。
今後も、この記事はReactを使ったら更新していきたいと思います。