反応するときに最も核心的な概念があります
コンポーネントです.簡単に片付けて
まずはReactが楽高になればいいのに
そして素子は中のブロックです.
複数のコンポーネントでWebサイトを構成します.
つまり,コンポーネント単位でサイトを分割することができる.

構成部品の構成

state / props

state:構成部品が持つデータ.
props:他の構成部品から取得したデータ.

データはstate時にのみ変更できます。つまり、自分が持っているデータを修正するしかありません。

例:

<container> 
	<imagebanner/> 
    	<contents1/>
</container>

こんなコードがあると思います
container素子は2つのサブ素子を有する.
コンテナ素子がimagebannerにstateとして必要な画像を有すると仮定する.
imagebannerエレメントは、親コンポーネントcontainerエレメントから画像パスを渡すことによって使用されます.
containerが所有する画像パスをimagebannerに渡すと、その画像パスはimagebannerの支柱になります.
このときimagebannerはpropsで受信したデータを変更できません.
できない理由のプロセスは、ライフサイクルで詳細に説明できます.

構成部品タイプ

構成部品は2種類あります。

関数構成部品

既知の関数形式で構成部品を作成する場合は、関数形式で構成部品を作成することもできます.

import React from 'react';

function App() {
	return (
    	<div className='App'>
        	<import할 컴포넌트 이름/>
        </div>
	);
}

export default App;

ゼロピーク関数構成部品

impport React from 'react'

const 컴포넌트 이름 = (props) => {
	const 변수명 = props.[부모컴포넌트에서 정의해준 변수명]
	console.log(props);
    
    return (
    	<div>
        
        </div>
    );
}

export default 컴포넌트 이름;

クラス構成部品

import React from 'react'

class App extends React.Component {
	
    constructor(props) {
    	super(props);
        // 부모 컴포넌트의 props를 가져오는 것
        this.state = {};
    }
    
    render () {
    	return (
        	<div>
            	<불러올 컴포넌트 이름/>
            </div>
        );
    }
}

export default App;

コンポーネントを作成するときに必要なことがあります.
1.構成部品を他の構成部品で使用するためにエクスポートするには、最下部にexport default 컨포넌트 이름 を配置する必要があります.

親構成部品から子構成部品を読み込む場合は、最初にインポートする必要があります.import 컴포넌트 이름 from '경로'

importの後、入れたいところに<컴포넌트 이름 />を入れます.

クラスの構成部品からサブ構成部品にデータを転送するには、

を実行します.

<자식컴포넌트 변수명={this.state이름.변수명} />

関数型構成部品がAPPである場合.jsの場合はreact hookを使用してuserStateにデータを生成し、ユーザーに渡す必要があります.

<자식컴포넌트 변수명={state이름}>