Reactの勉強をしているのですが、仕組みの基礎理解が曖昧なので一度自分なりに最低限必要なところを整理したいと思います。

御三家

とにかく覚えておかなければいけない三つ。

component
state
props

これがわからないとコード書いてても何が何だかって感じでした。逆に言えばここさえわかれば大まかな流れは理解しやすいという印象です。

component

ものすごくざっくり言えばページの各パーツです。

「メニュー」「テキスト入力フォーム」「ナビゲーション」みたいにそれぞれ役割が決まっているところをcomponentとして分けて設定していくといった感じでしょうか。

大抵は「components」というファイルを作成してそこに「menu.js」「navigation.js」「main.js」といった具合にページの各パーツのjsファイルを突っ込んでいきます。

これを組み合わせてindex.jsで表示させると言う流れです。

state

「初期値」と認識するのがわかりやすいと思います。

例えば「＋ボタンを押すと表示されている数字が増える」といった機能を作りたいときは、カウントの最初の数値、つまり0をstateで設定します。

class Countor extends Component{
    constroctor(props){
        super(props);
        this.state={count:0};
    }

constroctorやsuperはstate作るときの定型文なんでとりあえずこのまま頭に入れてればおk。

このcountを0から増やしたい時には、stateの状態を変化させるsetStateを使います。


   handlePlusButton{
       this.setState({count:this.state.count+1})
   }

これで準備できたので、表示させるためにrenderとreturnでこいつらを設置してやります。

   render(){

      return(

         <div>

             <div>count:{this.state.count}</div>　　//初期値の0

             <button onClick={this.handlePlusButton}>   //ボタンを押すごとに1追加されていく

         </div>

      )

   }

}   //Countorの閉じ括弧

ざっくりですが、stateとsetStateの役割が理解できればなんとなく中身の完成イメージを想像しやすくなるので大事だと思いました。

props

propsは「それぞれのデータを渡すもの」という認識です。

「props名=値」として使います。例えばメニューごとに表示内容を変えたい場合など、その表示データをpropsの値として設定すれば、違ったデータを表示することができます。

class Menu extends Component {
   render() {
       return (
          <div>
             <div>{this.props.name}</div>
          </div>
       );
   }
}



class App extends Component {
   render() {
      const menus=[
         {name:"pasta"},
         {name:"pizza"},
         {name:"juice"},
         {name:"coffee"}
      ]
      {menus.map((menu) => { 
         return (
            <Menu
               name={menu.name}
            />
          )

       })}
   }
}

この場合だとnameがprops名でpizzaやpastaといったものが値になります。

Menuコンポーネントにこれらのデータを渡してAppで表示しています。

正直propsの理解はまだだいぶ怪しいのですが、色々コードを打ってなれていきたいと思います。

まとめ

とりあえずこの三つを押さえておけば、何をしているのか全体の流れはある程度理解できるのかなと思います。

まだまだReactには慣れないのですが、もう少し色々んあコードを打って理解を深めたいと思います。

お付き合いいただき有り難うございました。

React最低限の基礎メモ

御三家

component

state

props

まとめ