React奮闘記~初めましてReact編~

普段Javaプログラマーだけど、ちょっとWebアプリケーションを普段のSpring以外でつくってみようかなと

たぶん色々はまるんだろうなーっていう思いから、もし自分みたいな初心者がなにかのきっかけでこのページを見つけてくれたときの
なんとなくの道しるべみたいになるといいなーって思いと、
自分の備忘を兼ねて色々作業していることを記載していきます。

ReactとAngularがどうやら結構人気があるらしい。
どちらかをつかってやってみよう
ReactはライブラリでAngularはフレームワークという概念

なんとなくAngularJSは全部入り
ReactはViewのDOM操作のライブラリ
Ajaxとかは別でやってとかそんな感じがする

そのため、Reactを使う場合
React (本体)
Redux (Fluxアーキテクチャ構築)
ReactRouter (ルーティング)
JSX、ES2015( + Babelやそのほかコーディング補助ツールなど)
が基本形になるっぽい

ちょっとしたアプリケーションを作ってみたいって思っていて、
情報量が多くて、
って場合はReactのほうがよさそうかな
あとなんとなくロジック部分は普段書いているJavaのほうが楽にかけそうなので、ViewはJSに任せて
ロジックはJavaで処理して、、、
ってことも考えられる

Reactはフレームワークではなさそうなので、他にも色々ひっぱってこないといけなそうだけど、
これだけこなれたものなら情報いっぱいあるでしょうという目論見
つーかReactはライブラリなんだし、極端AngularのV領域をReactにするとかも出来るんでね?感

まず[React 入門]で出てきたページを2ページ目くらいまで濫読する

https://mae.chab.in/archives/2943
Reactのチュートリアル

小さいアプリケーションを高速に開発する場合はVue.jsのほうがいいっぽい

環境構築としえては
ReactJS(コンポーネント、JSX、差分レンダリング)
React-Router(ページ遷移)
Redux(状態管理)
MaterialUI(UIコンポーネント)
babel(トランスパイラ)
webpack(リソースファイルを1つにコンパイル)

まず開発用のエディタをインストールする。今まで脳死でEclipseだったし。。。
Visual Studio Code
ってのがどうやら結構デファクトスタンダードっぽい。Windowsだし。
インストールして日本語化しようとしてうまくいかない、、、なぜ、、?
https://code.visualstudio.com/docs/getstarted/locales
ここに書いてある通りにやってるぞ、、、
再起動してもかわらないけど、みてみるとなんか下線ひかれてて「jaつかえないよ」みたいなのが出てる
Ctrl+スペースで候補だしてからjaを選択して再起動

たぶん拡張パックが必要なんだな。。。
ビンゴ
日本語化が完了。
さてエディタを手に入れた。お勉強開始

今からでも遅くない! React事始め

WebアプリケーションのUIを構築するためのJavaScriptライブラリ
Reactの役割はView
そのため、既存MVCのViewだけReactにすることもできるっちゃ出来るとのこと
仮想DOMという単語
DOMの更新に仮想DOMというものを利用していて、無駄な再描画を抑えている
コンポーネントという単位でUIパーツを作成する
パーツごとに作成するので、再利用しやすい状況になる
JSXというものをつかっていく模様
といってもJSXをつかわないでも書ける

https://hogehuga.com/post-1095/
ReactとFluxとReduxについて順を追って整理する
どうやらFluxというものを一緒に利用するらしい
というかReact+Reduxの組み合わせで活用する感じ

Reduxって何、、、?
Reactの状態を扱うフレームワーク。結局ReactはView部分のライブラリでしかないので。
この組み合わせでいくのがいいっぽい
★なんでフレームワークのAngularJSとライブラリのReactが比較されるのはまだ不明
React+fluxとAngularJSの比較ってこと?

http://okakacacao.wpblog.jp/technology/what-is-redux

さて、なんとなくReactとReduxをつかって作っていくことはきまったけど、どうやって開発環境を作るか。。。
Ruby on Railsはコマンドたたいて色々展開したけど。。。

というかいままではフレームワーク上での実装しかしてこなかったので、ロジック部分も
「こうやったらパラメータをRequestから取得できて、、、」みたいな部分しかしらんのよね。

なんか他の人もこういったことに詰まっていたらしく、結構簡単にReactプロジェクトの作成が出来るようになった模様
https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614
npm install -g create-react-app
をぶったくとフォルダとか色々インストールとかしてくれる。
create-react-app hello-world
とかでappプロジェクトに必要なものをもりもり作成してくれる
ちょっと時間がかかる
このあたりで思ったこととして、英語を普通に読めないとしんどいわ、これ。
ドキュメントとかコンテンツが英語は結構多い。。。というか公式サイトが英語だし。

コメント

タイトルとURLをコピーしました