react

初めての人にオススメしたいReactの勉強法【初心者向け】

React(リアクト)とは、Facebookが開発しているJavaScriptのライブラリでありフロントエンドの開発に大きな影響を与えています。

一般的には学習コストが高いと言われているReactですが、順序よく勉強すれば意外とすんなり理解できるのではないかと思ったため、自分がやってきて良かったなと思うReactの勉強方法をまとめてみようと思います。

ちなみに自分もReact関連の記事をいくつか書いているのでよろしければご覧いただけたらと思います。

Reactの基礎知識【初心者向け】

基本的には上から順に学習していくと効率が良いと思います。

ちなみに書籍は「React開発 現場の教科書」がとてもわかりやすかったです。

React開発 現場の教科書

 

JavaScript

Reactを勉強すると言っても結局はJavaScriptで記述するので、基本的なところは押さえておいたほうが学習を進めやすいです。

初めての方はやはり「Progate」がオススメです。

後々使うことになるので、「class構文」や「アロー関数」、「スプレッド構文」などはここで理解しておくとスムーズです。

余裕のある人は「Promise」や「async/await」と言った非同期処理についても勉強しておくと良いです。人によっては後述のReduxやmiddlewareでめちゃくちゃ使うことになります。

Reactの記述難しいな…と思っても、実はただのJavaScriptの構文だったということがよくあるので、急ぎでない限りはJavaScriptは先にやっておきましょう。

【=>って何?】アロー関数 (arrow function)【JavaScript】

【(3点リーダ)…propsって何?】スプレッド構文(Spread syntax)【JavaScript】

非同期処理を簡単に書ける async/await とは?【JavaScript】

 

React

いよいよReactを学習して行きます。React周りは公式のチュートリアルがしっかりしており、また公式のため情報も正確であるため迷ったら公式サイトを覗いてみるのがオススメです。

公式チュートリアルは三目並べゲームを作るものなのですが、日本語訳されている方がいるのでこちらをみるとわかりやすいと思います。英語が読める人は公式サイトで読むのをオススメします。

React チュートリアル 日本語翻訳

公式チュートリアル

チュートリアルの中にも出てきますが、create-react-appというコマンドラインツールを利用することで簡単にReactを始めることができるので慣れるまではこちらを使うと良いです。

もっと楽に始めたい方は、CodeSandboxがオススメです、開くだけでいきなり書き始めることができます。

Firebaseと合わせることでチャットアプリなどを楽に実装できるので、こう言ったものを作ってみるのも楽しくてモチベーションが上がります

React & Firebaseで簡単なChatアプリを作ってみた

 

npm

Reactを書いていく上で必ず使うことになるだろうパッケージマネージャがnpmです。Reactの開発は実装したいことがあれば基本的にnpmなどでパッケージを追加していくので、できるだけ早めに慣れておきたい技術です。

知っておいて損はなし!新人Webデザイナーのための「npm」入門

 

styled-components

チュートリアルを終えたあたりだと、簡単なものは作れるようになってきていると思うので見た目をいじりたくなってきた頃だと思います。CSSをjsファイルの中に記述しスタイルを整えるものです。

ReactでCSSを整える方法はいくつかありますが、styled-componentsは人気も高く、個人的にも使いやすいためオススメです。

こちらも公式ドキュメントがわかりやすいです。Basicsのコードを見ていると大体どんなものかわかってくると思います。

 

react-router

Reactでルーティングを行うものです。こちらを使うことで、ページの再読み込みをすることなく画面を切り替えることができるので、React特有のパフォーマンスの良いサイトを作ることができて楽しいです。

後々はNext.jsなどでルーティングすることもあると思いますが、まずはこちらを触っておくと良いかと思います。

こちらも公式ドキュメントがわかりやすいです。Examplesを見ていると概要は把握できると思います。

公式のサンプルコードをコピペして動かしてみるとよくわかります。

 

Redux

この辺りまで来ると、stateの管理をうまくやったりしたいという考えが出て来るかもしれません。そうしたらReduxを勉強して見ましょう。

Reactが難しいと言われる所以はこのReduxにあると思うので、これさえ乗り越えてしまえばReactがずっと楽しくなります。

最初にFluxアーキテクチャなどのデータの流れをイラストなどでイメージしておくと理解しやすいです。

こちらも公式ドキュメントが良いのですが、とてもわかりやすく解説してくださっている記事があるので、英語が読める方でもこちらを先にやってから公式ドキュメントを読むとより理解が深まって良いと思います。

Redux ExampleのTodo Listをはじめからていねいに

 

Reduxまで勉強したら、Reactでどんなことができるのか、何を作りたいかなどがはっきりして来ると思うので、この後は非同期処理や複雑な処理を扱いたかったらredux-sagaなどのmiddleware、サーバーサイドレンダリングをしたければNext.js、またはアニメーションを実装したかったらreact-animeなど、自分の興味のあるところを勉強してみましょう。

やりたいことがあれば、react-◯◯で検索すると大体のものはすでに環境が整っています。

これまでにもしつこく言っていますが、React関連はまずは公式ドキュメントを読んでみるのがオススメです。

 

最後に、自分の書いたReact関連の記事を載せて終わりとさせていただきます。

Reactは書いていてとても楽しいライブラリなので是非使ってみてください!

Reduxの基礎知識① Action,Reducers,Store【初心者向け】

Reduxの基礎知識② Reactへの実装まで

Next.jsを使ってSSRを始めよう【初心者向け】

Reactのstyled-componentsでaddClassを行う

Docker + Webpack4でReactの環境構築をする

ReactとPHPで簡単なメールフォームを自作する

Docker上のReactとRails APIでFetchをする