目次
正直、最近フロントエンド周りの開発を全然しておらず、フロントエンド開発の一線から取り残されてしまってる感があり、今回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を使ったら更新していきたいと思います。