「Complete React Tutorial (with Redux)」はReactの基礎を学ぶのに良いかもしれない

React

フロントエンドの技術を学ぶのに私がよく利用している The Net Ninja （動画学習サイト）ですが、知りたいことはまず動画で学び、深掘りしたくなったら書籍などで学ぶというスタイルが効率的な学習方法なのかなと最近感じています。

さて、今回はそんな The Net Ninjaの「Complete React Tutorial (with Redux)」でReactを学んでみました。

Complete React Tutorial (with Redux)

こちらはYouTubeで公開されている学習コースになります。

www.youtube.com

動画の総数は44本で、1本あたりの長さは短いもので3、4分程度、長いものだと10分程度なので、空いた時間に少しずつ進められます。

学習コースの内容

本学習コースは大きく5つに分かれていて、以降はそれぞれでどんな内容を学べるのかを書いていきたいと思います。 （ちなみに「基本編」「応用編」とかは便宜上私が付けました。）

基本編1

スライドを見たりコードを書いたりしながら以下の内容を学びます。

  • Reactの概要とセットアップ
  • Component、State、Event、JSX

（動画の#1から#9に相当）

基本編2

シンプルな画面を作りながら次のような内容を学びます。

  • create-react-appでReactアプリを作成
  • React Dev Toolのインストールと使い方
  • Virtual DOM
  • Nested Component、Props
  • Container Component vs UI Component
  • Conditional Output
  • cssファイルの扱い方
  • Componentのライフサイクル
    • componentDidMount、componentDidUpdate

（動画の#10から#22に相当）

応用編

これまでの応用編としてTODOアプリを作ります。

f:id:shinharad:20181110225957p:plain

（動画の#23、#24に相当）

React Router

Poke'Timesというシングルページアプリケーションを作りながら次のような内容を学びます。

  • React Routerのインストールと使い方
    • Links & NavLinks
    • Route Parameters
    • Redirect
    • Switch Tag
  • Higher Order Components
  • Axiosを使用し外部APIより取得したデータを画面に出力

f:id:shinharad:20181110225753p:plain

（動画の#25から#33に相当）

Redux

Reduxの解説から始まり、Poke'TimesにReduxを組み込んでいきます。

（動画の#34から#43に相当。#44は総まとめの回）

終わりに

Reactは前々から気になっていたのでこの学習コースを通じて理解を深めることができました。Vue.jsと比較するとフレームワークが隠蔽している部分がReactの方が少ないので、個人的にはReactの方が好きだったりします。今後は更に深掘りしつつ趣味のやつを作っていきたいと思います！