More than 5 years have passed since last update.

React 学習メモ_20190408

Posted at 2019-04-08

最近Reactの勉強を始めたので、Note takingがてら学んだことをoutputしていきます(　･∀･)ﾉ
トンチンカンなことも書いてるのでご容赦下さい＼(^O^)／
Webエンジニアの諸先輩方からアドバイス頂けたら泣いて喜びます( ；∀；)

現在勉強しているところ

React公式チュートリアルの
見出し: イミュータビリティは何故重要なのか

コンポーネント(部品)単位でWebアプリを作れちゃう
超イケてるJavaScriptフレームワークだ٩( 'ω' )و

JavaScriptとHTMLが合体したような、Reactを記述するための言語だ。

class Hoge extends React.Component{
  render(){
    return(
      <div>
        <h1>Hello World!</h1>
      </div>
    );
  }
}

こんなかんじでJavaScriptの中にHTMLを融合させたような書き方をする。
ベテランのWebプログラマーにとってはキモいらしい(´・ω・`)
私にはどの部品がどんな見栄え、機能を担当するかがわかりやすい書き方だと感じた( ˘ω˘ )

Reactアプリを構成する一個一個の部品。
JSX中で<Hogehoge /> と書かれているもの。という認識で良いのだろうか？(´・ω・`)

ユーザーの動きに合わせて変わる部分のこと。状態(state)を保持する部分。
stateはprivateである(そのオブジェクト内部からしかアクセス出来ない = 外からいじれない)

this.setStateメソッドが実行されると、コンポーネントが受け取ったstateをマージした上で、再レンダリング(ブラウザに表示する)する。

stateを保持するのははより下のコンポーネント(子コンポーネント)にさせる
(何か処理をする必要があるときは、子が親に状態を渡して処理してもらうとよいらしい)

内部データを書き換えるときは、直接そのデータにアクセスするのではなく
コピーを作成してからそいつをいじるようにすると、履歴を保持することができて便利

~~渡すものである~~ ←ちがう
コンポーネントが持っている属性のこと？
HTMLタグの属性と何かしらの関係があるのだろうか(・ω・)


    <Hoge 
      props1 = 'foo'
      props2 = 'baa'
    />

上記コードのprops1 ,props2 がpropsだ。