どんな記事？
自分用備忘録です。まとめながらやってこうと思います。
マークダウン慣れてないので大目に見て。
今回は公式のReactチュートリアル
https://ja.reactjs.org/tutorial/tutorial.html
やった感想とか書いていきます。
なぜReactを勉強しようと思ったか。
React勉強しようと思ったのは一昨日。
授業で使ったjspが気に入らなくて、
見た目の再利用しやすいものなにかないかと思って
現在主流っぽいjsのフレームワークのようなものの中から
tomcatとかともワンチャン併用できそうなやつを選んだ。
結局できなさそうなら、まあその時はその時。
目標
死ぬほど使いやすいToDoアプリ作る。
1日目 Reactチュートリアル
昨日から今日にかけて勉強したことふわっとまとめていく。
チュートリアルはローカル環境ではなくブラウザ上で進めた。
最終結果までやって追加課題はやってない。
-
Reactはコンポーネントベース。
コンポーネントというものを組み合わせて見た目作っていくらしい。 -
render()の中でHTMLっぽいもの書く。
コンポーネントはrender()を実装しないといけない。
render()の中で他のコンポーネントをタグみたいな書き方で呼べる。 -
stateとprops
- stateはそのコンポーネントの中で扱う変化していく値。
- propsは親のコンポーネントから渡される値。propsで足りるならそれで済ます方が丸そう。一元管理したいのと、再利用性の為？
- どっちもオブジェクト。keyとvalueで個々のパラメータ持ってる
-
props渡し方
コンポーネント呼ぶときのタグに属性みたいな感じにkey="value"とか書く -
state入れ方
コンストラクタで作るのと、setState({key:value}); -
state,props呼び方
this.state.keyとかthis.props.keyとかでvalue返ってくる。
this以外のstate,propsはチュートリアルでは呼んでなかった。 -
ミューテートとイミューテート
オブジェクトの中身を書き換えちゃうのがミューテート。変更を検知しにくいから避けた方がいいらしい。コピーして一部書き換えたオブジェクトを新しく作るといいんだって -
イベントの伝え方
onClick={this.props.onClick}
onClickとしてイベントが起こったのを知りたいメソッド渡しとく
次やること
ローカルで作る。ファイル分けて作る。それがブラウザで動くとこ確認する。
続いてやること
react-router-domを知る
読んでくれてありがと
初心者の備忘録やぞ？読むの大変だったろありがと