初学者のためのReactを習得するためのロードマップ

コリスさんの記事で
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか
というのがありました。

こういう知識が必要でこういう用語が登場するっていうのが知れてとても嬉しいですね。CSSはstyled-componentsだとかRouterはreact-routerだとか初学者は割と時間をかけて調べてたどり着く部分だと思います。

Railsとかでもほしいです。

用語はまとまっていて嬉しいのですが、初学者にとって流れはちょっとわかりにくいので文章で説明することにしました。Reactの場合の説明になります。

HTML, CSS, JSの基礎

まずどのライブラリでもHTML, CSS, JSの基礎は必要です。
jQueryがOptionalとありますが、加えてUnderscore or lodashも頭に入れておくといいかも知れません。

開発の基礎知識

Gitは覚えておくといいです。Httpやデータ構造はやりながら覚える、教えてもらいながら覚える、好きならより詳しく学ぶ形がいいのかなと。ググる力と英語でも怖がらずに読む力は必要です。

何かをReactで作ろうと思った時ここまでの前提知識は必要となります。

ビルドツール

さていざReact書こうとするとつまづくのがBuild Toolsです。
NPMまたはYarnを使って必要なモジュールを入れていきます。
CSSやJSをまとめたり圧縮したりトランスパイルしたりしたくなります。
Webpackで設定していくことになると思うのですが、心が折れます。
開発する前に心が折れてしまうと辛いので、create-react-appを使いましょう。

state管理

状態や値を一元管理するほうが楽です。ただReduxどうせ使うんだから最初からというのは、コード量が増えて混乱しますので、親コンポーネントのstateを使ってバケツリレーで作っていきます。

スタイル

コンポーネントのタグの名前の付け方はBEMに従うことになります。チュートリアルを見たりしながらJSXと格闘しながら画面を作っていきます。そうするとCSSでスタイルを当てたくなります。外部CSSを普通に使うこともできますが、コンポーネントという一つの塊で完結するものを実現するためにCSS in JSを使うことになります。Styled Componentを使ってください。ドキュメントもある程度しっかりしているので、苦労はしますが、なんとか進んでボタン等々スタイルを当てていきます。

ルーティング

ページ遷移はreact-router一択のようです。

APIとの通信

APIとの通信は必ず出てくるので、fetchの知識が必要になります。となるとサーバーサイドの知識も必要。PHP? Rails? MySQL?そこまで行ければ素晴らしいですが、firebaseなど便利なものがあります。

Typescript, Reduxは必要に応じてと言いたいところですが、実務で使う、転職するとなるとほぼ必須になってきます。覚えることたくさんありますが、React使っていると困る部分を解決してくれるものなので、覚えて損はありません。

テスト大事。

頑張っていくとReact Nativeも書けて、アプリだって作れちゃいます。
Never Stop Learning!!