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
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
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に変更を与える心配はない
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
続きは②