##Reactの最大の利点はコンポーネントの使いまわしが可能なこと！！

基礎学習をしていて思ったのは編集の際に修正点が少ない。
CSSのSass(Scss)で変数にしたような感じに近いものを感じる。
はっきり理解できとらんが、備忘録として

##create-react-app内のディレクトリー
１．src:コンポーネントを作るJSファイル
２．public:htmlファイルや設定ファイル
３．build:本番環境用のファイル
※他のディレクトリ(node_modulesなど)は割愛

##実行コマンド
npm run build
srcとpublic内のファイルをバンドル(まとめて)buildディレクトリに出力

npm start
ローカルサーバーを起動してReactアプリを確認できる

npm run eject
babelやwebpackの設定を変更したい時に使用

##Atomicデザイン
※これは余談
パーツコンポーネント単位で定義していくUIデザイン手法で、端的にはパーツの最小単位からデザインしていくこと

##用語
state
・コンポーネントの"状態"を指す。Reactのコンポーネント内だけで使うものを「ローカルステート」と呼ぶ
※Reduxでは「グローバルステート」
・コンポーネント内で管理する変数
・propsを使用して親→子コンポーネントに渡せる

props
コンポーネント間でデータを受け渡すためのオブジェクト

##コンポーネントの種類
###Class Component

ClassComponent.jsx

import React from 'react';

class Hoge extends Rect.component {
    construtor(props) {
        super(props);
    }
    render() {
        return(
            <div>
                <h2>{this.props.hoge}</h2>
            </div>
        );
    }
}

クラスによって定義されたコンポーネント(見た目：複雑-記述量は増える)
(最近のReactではあまり使わないように記述する流れが多いらしい)
・関数ではないのでクラスとして宣言する
・React.Componentってやつを継承する
・stateってやつとライフサイクルをもつ
・propsってやつにはthisってやつが必要
・JSXはrenderメソッド内でreturnする

###Functional Component

FunctionalComponent.jsx

import React from 'react';

const Hoge = (props) => {
    return (
        <div>
            <h2>{props.hoge}</h2>
        </div>
    );
};

関数型で定義されたコンポーネント(見た目：シンプル-記述量は少ない)
・JSX(HTMLっぽい書き方のやつ)をreturnする
・ES６のアロー関数で記述
・stateってやつを持たない(stateless)
・propsってやつを引数に受け取る

##React.Fragment
JSX上でコンポーネントをラップする為だけに使われる
コンソールで確認した時にhtml上で無駄に<div></div>タグが多いときにつけるタグ
省略形として、ただの<>>でも良い

##props
Functional Componentでは
propsを引数に受け取り、受け取った引数をprops.hogeというように呼び出せる
Class Componentでは
１．"constructor"で初期化しなければならない
２．{this.props.hoge}のように記述する必要がある

###propsで受け渡せるデータ型
１．{}内に記述　※文字列のみ{}なしでも良い
２．文字列、数値、真偽、配列、オブジェクト変数

例文.

   title="HogeHoge"
   order={7}
   ispublished={true or false}
   builder={builderName}

##state
stateが必要なわけ
１．render内では値変更は禁止の為
２．setState()メソッドで値変更の管理をする為
３．レンダー内でのstate変更は再レンダー（無限ループ）のきっかけになる為
→だからsetStateを使いなさいよ

##stateの設定、取得、変更
###設定
・Classコンポーネントの使用が前提
・constructor()内で宣言
・オブジェクト型で記述

###取得
１．stateの取得は同一コンポーネント内で{this.state.hogeHoge}
で取得可能
２．子コンポーネントで参照したい場合はpropsとして渡す

###変更
１．関数にラップする
２．setState()内に記述されたstateのみを変更する為、他のstateに変更を与える心配はない

state例文.jsx

class Blog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPublished: false
    }
  }

  //公開状態の反転
  togglePublished = () => {
    this.setState({
      isPublished: !this.state.isPublished
    })
  };

  render() {
    return (
      <>
        <Article title={"React基礎"} isPublished={this.state.isPublished} toggle={() => this.togglePublished()}/>
      </>
    )
  }
}

export default Hoge

続きは②