読者です 読者をやめる 読者になる 読者になる

north-memo

数学できない方の数学科のブログ、一応デザイナー…なのか…?

Reactを勉強した1日目

結論:何がなんだかさっぱり分からない

今日やったこと

learnyoureact

NodeSchoolに行った際、そこではlearnyounodeをやった。これもこれでわからない所がたくさんあった(特に、callback関数周り)が、一日で10問目まで進むことが出来た。
しかし、今回のlearnyoureactは、僕の頭がついていけずに1問目、2問目、3問目、とよくわからないまま、ただ言われたとおりに入力してなんとか出来たが、5問目でさっぱり分からなくなった。
Twitterでも反応を調べてみたが、みんなわかってる感じで、わからないのは僕の知識不足や頭の悪さのせいだろう、作者の方には本当に申し訳無さ…。
後から解消するにも、ここにわからなかったことをメモしておく。

1問目 HELLO_REACT

  • npm installでたくさんインストールするが、何が何をインストールしてその結果何がしたいのかさっぱり分からなくなった。次をインストールしたようだ。
    • react
    • react-dom
    • express
    • body-perser
    • express-react-views@0.9.0
    • babel@5.8.23
  • program.jsに以下を書いたプログラムが、何をしているのかわからなかった
    • expressってなんだ
    • babelってなんだ
    • jsxってなんだ
  • viewディレクトリにindex.jsxを作ったが
    • export default class ToolBox extend React.Component ってなんだ
    • render() ってなんだ
  • Reactのドキュメントの案内があるが、このどこを参照すればいいのだ
  • JSXシンタックスのリファレンスの案内があるが、これもどこを参照すればいいのか
  • とりあえず入力して下さいと言われたとおりにやってクリア

2問目 COMPONENT

  • Componentを組み合わせて作るとあるが、そもそもComponentが分からない
  • HTMLのタグとJSXを組み合わせることも出来るらしいが、JSXがわからないので、何が組み合わさってどうなるのかわからなかった
  • Reactのコンポーネントは大文字の変数で始め、HTMLのタグを記述する際には小文字の変数ではじめるらしいが、なにがなにやら…
  • ローカルのコンポーネントのクラスとはなんだ
  • JSXってHTMLも入れるんじゃなかったっけな感じで、何と何を識別しているか大混乱…
  • 問題は上のサンプルを見よう見まねで書いてクリア
  • 結局コンポネントはclass ~~で始まっているものだと言う認識だが、それでいいのか?

3問目 PROPS

  • propsってそもそもなんだろうか…
  • {this.props.title}のthisは何を指しているんだ?
  • とりあえず{this.props.title}と{this.props.children}で目的のものがとれることだけ文章から読み取れたのでそれを書いてクリア
  • コンポーネントと子コンポーネントはわからないまま…

4問目 PROPTYPES

  • 型がチェックできるとバグが少なくなって良いと言う話は分かった
  • 型.isRequiredと書けばとりあえず型一致を確かめてくれるのは理解したが、キー名のとりかたがよくわからなかった
  • 再利用可能なコンポーネント??
  • とりあえず文字列で確かめたければReact.PropTypes.stringを書けばいいということは分かったので書き換えてクリア

5問目 STATE

  • とりあえず、変更可能なのがstateで変更不可能なものがpropsなのぐらいは分かった
  • 書き換えはしたが、初期値を設定する方法が全く分からない
    • ドキュメントを見ればわかるかと思ったが、コッチがclass〜〜と書いている中、ドキュメントは var = 〜〜と書いているし、何が何を対応しているのか、本当にこうして良いのかさっぱり分からなくなった
  • 突然コンストラクタが出来たが、中のsuperが何か全くわからない
  • handleChange関数も何を引数に取れば良いのかとか、this.setStateの使い方も、公式ドキュメントやQiitaを探したが、全く理解できなかった
  • 手も足も出なくなり終了

これからどうしていくか

  • とりあえず、出来そうだと思えるまでは learnyoureactはおいておく
  • Reactの公式ドキュメントを見て勉強してみる。
  • Reactはそもそも何を解決しようとしているのかもわからない、事前知識がないのか。(事前知識が何なのか、事前知識が必要なのかどうかさえ分からない)
    • 大規模開発をスムーズに進めるらしいが、その手段として上げられているものの意味がよく分からない
    • TypeScript(名前だけ知っている)のお話も知っていないといけないのかなぁ、良く分からない。

じゃあなんで勉強してんの?

最近頻繁に話を聞く、知って置かなければなぁという焦りがある。多分使う。