210,318開発ログ(101日目)-ReactのコンポーネントとPropsは?

Component

反応器では、素子は関数素子とクラス素子に分けることができる.
文字通り、関数とクラスで素子をそれぞれ表す.
構成部品の名前は常に大文字で始まる必要があります.
理由は以下の通り.(出典:反応公式ページ)

Function Component

静的コンポーネントの管理性(16.8から応答時間を使用して動的に管理可能)
※Classは難しいのでFunctionでReact Hook(Classと同じ機能)を導入

Class Component

state、renderを使用して静的および動的コンポーネントを管理する

Props

propsは不変のデータであり、不変のデータである.通常、親(親)構成部品から子(子)構成部品にデータを渡すために使用されます.
たとえばindexです.js → app.jsx → welcome.jsxフローによれば,親と子の関係と考えられる.
次のコードは、この画面を表示します.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// app.jsx
import Welcome from './components/welcome';

function App() {
  return  (
  <div>
    <Welcome name ="gojae" />
  </div>
  );
}

export default App;

//welcome.jsx
import React, { Component } from 'react';
class Welcome extends Component {
    render() {
        return (
            <div>
                <h1>Hello, {this.props.name}</h1>
            </div>
        );
    }
}

export default Welcome;