React | コンポーネントについて

コンポーネント間でデータの受け渡しをする

■コンポーネントとは
■コンポーネントを使う理由
■コンポーネントの種類
■ファンクショナルコンポーネント
■クラスコンポーネント
React.Fragment

■コンポーネントとは

1,見た目(View)
2,機能(Controller)

コンポーネント=見た目＋機能

■コンポーネントを使う理由

・再利用するため
・分割統治するため
・変更に強くするため

■コンポーネントの種類

・ファンクショナルコンポーネント(推奨)
・クラスコンポーネント

■ファンクショナルコンポーネント

・stateを持たない
・propsを引数に取る
・Jsxをリターンする
・アロー関数で記述

const Article = (props) => {
    return (
        <div>
            <h2>{props.title}</h2>
        </div>
    );
};

const Article = (props) => {

return (

<div>

<h2>{props.title}</h2>

</div>

);

};

■クラスコンポーネント

・React.componentを継承
・ライフサイクルやstateを持つ
・propsにthisが必要
・render内でJSXをリターンする

class Article extends React.Component{
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h2>{this.props.title}</h2>
            </div>
        );
    }
}

class Article extends React.Component{

constructor(props) {

super(props);

}

render() {

return (

<div>

<h2>{this.props.title}</h2>

</div>

);

}

React.Fragment

reactでは要素をラップする必要があるのでdivが多くなりがちです。
React.Fragmentならエラー回避しながらラップできます。

 <React.Fragment>
                <Article title={"React"} />
 </React.Fragment>

<React.Fragment>

</React.Fragment>

・省略形　
React.Fragment →　<>