はじめに
インターン先でプログラミングを勉強中の文系学生。
「フロントエンドとバックエンドのどっちやりたい?」
「フロントエンドですかね」
「じゃあ、ReactとReduxやろうか」とのこと。
早速、勉強してみよう!!
ReactとReduxとは
そもそも、ReactやRedux自体初耳。
まずはReactから見ていくか。
初心者がReactのことについて知りたいなら、このサイトがよさそう。
これからReactを勉強する人が最初に見るべきスライド７選
色々用語とか出されてもわからないしね。
スライドのほうが感覚的に親しみやすいし。
今からでも遅くない! React事始めは見ておくべきだと思う。
いや、可愛いキャラが居るからじゃないですからね?
大体のスライドを見て、わかったことは次のこと。
JavaScriptのライブラリ
Facebookが作り、そこで実際に使われている
AtomもReactで作られている
MVC(Model view Controller)におけるViewの役割を担う
できることに限りがある分、覚えやすい
JavaScriptとHTMLが併用できるJSXという書き方できる
サーバと端末のやり取りの間に、VirtualDOMがあることで、高速表示が実現できる
つまり、ユーザーとエンジニアの2人のストレスを軽減するライブラリか。
そりゃあ使いたくなりますわな。
続いて、Redux。
Reduxのことを教えてくれたのはこのサイト。
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説
このサイトでの学びを要約すると、
Reactとかのフレームワークには、Fluxという流れがある。
Action→Dispatcher→Store→View(React)という一方向にのみ流れる構造。
Reduxと組み合わせることで、Action→Reducers→Storeという流れになる。
それによってReactがもたらす効果をより高める。
こんな感じかな?
実際に使ってみないとわからんよね。
React環境構築
さてさて、インストールしていきますか。
環境の構築方法を教えてくれるサイトはたくさんあるけれど、ここが一番良さそう。
WindowsにWebpackをいれてReactの環境を構築してみる
サイトのやり方と変えたのは以下の箇所。
nodeのLTS.
6.x(サイト)→9.9.0
nodist 9.9.0
それに応じて、package.jsonを作成する際のnodist local 6.9.2を'nodist local 9.9.0'に
このくらいかな?
あとは何事もなくできたし。
Reactでコンポーネント作成
動かすとどうなるか試してみたいから、このサイトを参考にやってみよう。
今からはじめるReact.js〜初めてのコンポーネント〜
公式にもサンプルあるけど、時間ある時にやっておこうっと。
ほとんどはスムーズにできたけど、glup、browserify、vinyl-source-stream、reactifyはグローバルとローカルの両方に必要みたい。
まぁ、忘れていたらやっておいたほうがよさそうだね。
Redux環境開発
Reduxはこのサイトを参考に進めていこう。
ReactとReduxを使ったアプリを試すための環境作る
さっきとやることはそこまで変わってないから、すぐできた。
でも、ちゃんと動いているのかどうかってどうやって確かめるのかね?
どうしようもない気が…
まとめ
今回はReactとReduxの勉強をしました!!
まだ不慣れなところがあるから、復習して使いこなせるようにしないと…
参考資料
これからReactを勉強する人が最初に見るべきスライド７選
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説
今からはじめるReact.js〜初めてのコンポーネント〜