connecting...
Google translation for articles :
2 NEMBER donated to you!!

react最低限の基礎メモ

nem1.70xem (2) 66 2 0

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

 

○御三家

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

 

  1. component
  2. state
  3. props

 

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

 

1.component

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

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

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

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

 

2.state

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

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

 

ex)

class Countor extends Component{

    constroctor(props){

        super(props);

        this.state={count:0};

    }

 

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

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

 

ex)

   handlePlusButton{

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

   }

 

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

 

ex)

   render(){

      return(

         <div>

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

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

         </div>

      )

   }

}   //Countorの閉じ括弧

 

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

 

 

3.props

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

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

 

ex)

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には慣れないのですが、もう少し色々んあコードを打って理解を深めたいと思います。

 

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

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber
Yonnsann
2019-10-09 23:17:43ID:152480

>>YUTO::さん
ReactはJavaScriptのライブラリなんでview開発に良いみたいです(^^)
参考になれたら嬉しいです!

YUTO
2019-10-09 20:30:52ID:152459

Reactってどこで使うのかはわからないけど、今後使う時に参考にできたらいいなと思っています。

NEMber who posted this article

ネムログ気になったのでライブドアブログからいくつか移行します。

趣味は読書(特に太宰治)、アニメ鑑賞(特に幾原作品)、京都観光。
京都には足繁く通っているので色んな情報を提供できたらと思います。

また、教育実習、学校教員(少しですが)を経験して思ったことも少し書けたら良いと思います。

現在はwebデザインを勉強中。
32838
0