React 基本的な事項を記録

npm, yarn

javascript パッケージ管理ツール

npm : node package manager
　ーnode.js
　ーreact.js
　で使用する大半のパッケージをインストールできる。

yarn :
　Facebookで作ったパッケージ管理ツール
　npmよりもキャッシング、保安、信頼性が改善された。
　npm install -g yarn : yarn install できる。

＊node.js download install
https://nodejs.org/en/download/releases

駆動方法

node -v : node.js version 確認
npm -v : npm version 確認
yarn -v : yarn version 確認

＊プロジェクトフォルダの中で
npm i -g create-react-app

＊プロジェクトフォルダ abc を作って
npx create-react-app abc

yarn start : react サーバーを実行
ブラウザ localhost:3000 で画面確認
src/index.js : タグを削除し、生命周期関数を何回も実行する原因を除去する。

react の場合
　npm i
　npm start

react, node プロジェクトの場合、両方の経路にてそれぞれ
　npm i　（or yarn i） : package.json ファイルにあるパッケージリストがinstallされる。
　yarn dev : react, node サーバーを同時に駆動する。

jsx
　ジェイエスエックス。
　HTMLと似たような記述をすることができる「Javascriptの拡張構文」。

生命周期

以下だと
1 : 1回だけ
2 : constructor の後
3 : -
4 : 最後に実行される
5 : state 変更時、実行される

順
1 => 2 => 3 => 4 => 2 => 5 => 3

class Lifecycle extends Component {
    // 1
	constructor(props) {
        ...
	}

    // 2
    static getDerivedStateFromProps(props, state) {
        ...
	}

    // 3
	render() {
        ...
	}

    // 4
	componentDidMount() {
		// setStateで stateを設定
		this.setState({
            ...
		});
		// これで shouldComponentUpdate が実行される
	}

    // 5
	shouldComponentUpdate(props, state) {
        ...
		return true;
		// return がtrueであるため、 render がもう一度実行される
	}
}

jquery 使用

npm i jquery

...
import $ from 'jquery';
...