【JavaScript修行】初めてのReact覚書き

Posted at 2019-07-25

Reactってなんか凄いらしい。
そして難しいらしい。
概念だけでも掴みたく今日もお勉強です。
さらっと覚書きで行きます。

##Reactって？
Facebookが作ったjsのライブラリ。

始めるにはNode.jsが必須。
https://qiita.com/kuniken/items/19fccc27b8bfa8068d22
この辺を参考に。

npm install react --save

これをターミナルに打ち込みインストール！

React,HTML風にかけるらしい。
→JSXっていう名称の書き方（Javascript XML)

<h1>{hello}<h1>

{}で書かれた部分はJavascirptとして扱われる！

HTMLと違う属性名注意！！

🐳< どれがどのDOM！？って混乱しなくてみやすい気がする。凄い

例としてリストを作ってみましょう。

const happySet = ['ハンバーガー','ジュース','ポテト','おもちゃ']

<ul className="happySet">
   {happySet.map(item => <li>(item)</li>)}
</ul>

これによって以下が生み出されますね。

[
  <li>{'ハンバーガー'}<li>, 
  <li>{'ジュース'}</li>, 
  <li>{'ポテト'}</li>, 
  <li>{'おもちゃ'}</li>, 
];

##コンポーネントの作り方

コンポーネントの作り方は二種類！

絶対必要なrender
~>DOMをレンダリングするとこ（HTMLを描写するとこ）

コンポーネント作成(ES6)

class greeting extends React.Component{
  render(){
    return (<div>Hello</div>);
  }
}

HelloをinnerHTMLにもつdivを作る部品です！

大事な概念:props,state

##出力はどうやるの？

ReactDOM.render(
  <div>hello</div>,
  document.querySelector('body')
)

ReactDOM.renderを使って、
出力するDOM,出力先の順で指定します。
これでhtml内にhelloを出力できました！

続きはまた今度。