0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React+Redux学習への道のり。~Reactを知る~

Last updated at Posted at 2020-04-24

はじめに・・・

React + Reduxを学ぼうとしましたが、Reactが謎すぎて環境の構築すらできませんでした。
なので、40%でもいいのでReactを理解するための私的なメモです。

※タイトルに「Redux」って書いていますが、今回はReactのみです。

#自分のスペック

  • なーんちゃってJavaプログラマー(バージョンは1.5.フレームワークはStruts1系しか知らない)
  • javaScript(jQuery)・HTML・CSSはボチボチ触ってた。
  • Dockerを独学で勉強中。

Reactって何なん?!ってかNode.jsって何なん?!

まずReactを学ぶのだからコードを書きたい気持ちになります。
そこで「React 入門」でググりますが、でてくる記事全てにNode.jsというキーワード。
まずNode.jsすら知らなかったのでそこから調べます。

Node.jsとは?

完全に理解はできてないです。現在は・・・
「サーバーサイドで動くJavaScriptの環境」
で落ち着いています。

Reactとは?

これまた完全に理解はできてませんが、javaScriptのライブラリーらしい。
javaScriptのライブラリーってことは、ただのjavaScriptじゃない?ってなりました。
**それじゃNode.jsいらなくない?**ってなりました。

けれども必要となるわけ。1

「Reactで開発するにはBabelでコンパイルしないとダメだからNode.jsが必要となる!」
・・・私の中ではこれで胸落ちしてます。

経緯としては・・・
Reactの公式チュートリアルもNode.js使ってて???

公式を読んでいくとReactはJSXというjavaScript拡張言語で記述する様子。

JSX ≠ javaScriptなのでJSXをjavaScriptに変換する必要がある。
この変換をするのがNode.js製のツールBabelに行き着くって感じです。

余談

コンパイルする前のコードをローカル上で起動してみましたが画面は真っ白。
コンパイルしたソースを手直しすると画面が表示されました。

参考資料

以下のスライドが私的にはわかりやすい説明で理解しやすかったです。
おっさんES6/ES2015,React.jsを学ぶ

けれども必要となるわけ。2

「Reactアプリをnpm(npX)で作るから。」

Reactアプリを作成するにはかなりの量のモジュールが必要となる。
これらのモジュールをどっから取ってくるよ?問題 と バージョン管理問題がある。
それを解決してくれるのがnpm
mavenみたいなもんと認識してる。

#おわりに・・・
javaScriptの進歩半端なくてビビってます。
無法地帯だったjavaScriptが進化してES6?とかなってるので、これについても勉強がいるなぁと実感。
そもそもラムダ式にも慣れていないのに、基本ラムダ式オンパレードで泣きそう。

もし認識に誤りがあれば訂正お願いします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?