React入門する時にやった事 ~Todoアプリも作ってみた~

はじめに

1週間前くらいに、Reactに入門しました。
普段はJavaで開発しているんですが、フロントエンドの技術もつけていきたい！
なんかかっこええ画面を開発したい！
という不純な動機と、SNSとか見てても「Reactやってる人多いなっ」と感じて学習し始めた流れです。

まぁ、仕事でもReact使った案件に携われたらなと思ってます。

入門する時にやった事

入門するうえで技術書やハンズオンで開発できるブログ記事を参考に学習しようかと考えましたが、、、

技術書は 「金が掛かる」

ブログ記事は「最適な記事を探すのがちと面倒くさい」

技術書にお金がかかるのはもちろんの事、Amazonでも値段は大体3,000 ～ 4,000円くらいしますよね。
ましてや、React自体現場で使うかも分からない完全 趣味 みたいな感じで始めるのでお金を掛けるのも..

じゃあ、ブログ記事はどうか？
お金もかからないしましてや、ハンズオンで始められる入門記事などもある！

けど、「探すのが面倒くさい…」
有名な記事とかちゃんとメンテナンスされている記事を見つけて取り掛かればいいけど、
探そうと思って探すものでもなく、探す時間も少し勿体ない気もする

そんな、わがままな人にピッタリなのが公式ドキュメント

まずは、公式ドキュメントから

なんやかんやで公式ドキュメントのチュートリアルから始めるのが一番手っ取り早いですね。
Reactの公式ドキュメントは最近新しくなったらしく、日本語に翻訳されたサイトもあるのがいいですね。
本当におすすめなの？気になる人もいると思うので、
実際に 公式ドキュメントで学習してみていい所を3つ 紹介したいと思います。

関数コンポーネントで書かれている

Reactには構文を記述する手法として、
「クラスコンポーネント」と「関数コンポーネント」というものがあります。

関数コンポーネント

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

クラスコンポーネント

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

現在のReactでは関数コンポーネントで記述することが推奨されています。
古い公式ドキュメントではクラスコンポーネントのまま紹介されており、
何か調べるにもクラスコンポーネント→関数コンポーネントに変換しなければならなかったようです。

ですが、新しい公式ドキュメントでは関数コンポーネントで紹介されており

「せっかく勉強したのに書き方が古かったみたい…」

みたいなちょっと損した気分もなくなります。

インプットした情報をその場でアウトプット

公式ドキュメントはブログ記事などに比べて正しい情報が書かれています。
メンテナンスもされていると思いますので、古い情報を捕まされる事はないはずですが、
やはり文字とちょっとした例だけだと飽きてきてしまいます。

要はインプットでしか知識を定着させることができません。
ですが、Reactの公式ドキュメントではインプットした知識を
その場でアウトプットとして実際にReactを動かすことができます。

解説文や例の後にReactを直接触って動かすことができる！

まだそれだけではありません...

チャレンジ問題といってだいたい章の最後に行う問題も用意されています。
ここでこの章で学んだ1つ1つの知識を組み合わせてより理解を深めていくことができます。

ちゃんと回答・解説もしっかりしているので安心です

難しそうな概念もわかりやすく解説

Reactでは入門者が最初の時点ではあまり気にならない
Reactの裏側の挙動や仕組みをイラストでわかりやすく解説しています。

コンポーネントの変化やイベントが発生して、ブラウザにコミットされるまで
Reactはどういった動きをしているのか、またその時のデータはどうなっているのかなど
読み手を飽きさせないように書かれています。(こういった概念的なのはどうしても文字が多く眠い…)

なので、とりあえず
「React興味あるけど、技術書かって難しくて挫折したらどうしよう」 とか
「手っ取り早くどんな言語なのか知りたい」 場合は結局のところ公式ドキュメントがおすすめです。

お金もかからないしブログ記事を探す手間も省けて一石二鳥？です。

公式ドキュメントで大体基礎的な知識や技術を身に着けてから、
技術書やハンズオン開発ができるブログ記事を探してみてください。

とりあえず何か作ってみる

自分も公式ドキュメントをある程度読み終えた後は、
ハンズオンで開発できるブログ記事を探して知識を定着させました。

以下の参考サイトにてuseStateというフックを使用してTodoアプリを作ってみました。

参考サイト

詳細な解説などは省きますが、さらに + αで技術を身に着けるなら改造を施すことです。

自分の場合は一から改造するのではなく、他のブログ記事で紹介していたモーダルを表示させる技術を
Todoアプリに埋め込めないかなということで改造してみました。

さいごに

今回は僕が最近入門したReactにて入門するときにやった事を紹介しました。
普段はJavaで仕事しているのでとても楽しかったです。

主はフロントエンドの人でもないのでこの入門の仕方が良いか悪いかはわかりません....
多分もっといい入門の仕方があるかもしれませんが、
Reactの公式ドキュメントが自分にとってはとても分かりやすく入門に最適だなと感じたので紹介させていただきました。