[リアクション]コンポーネント

7881 ワード
TIL はんのう テキストリンク
これまでの反応の最大の特徴の一つは리액트는 컴포넌트 기반 라이브러리であった.
コンポーネントが何であるか、どのように使用されるかを理解します.

Component


React document - components & props
構成部品はjavascriptの関数と同様に、propsを入力して画面上のreact要素を返します.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
通常、上記のコンポーネントを定義し、propsオブジェクトパラメータの戻りを受け入れます.

コンポーネントレンダリング(props)


react要素はユーザーによって定義できます.
const element = <Welcome name="Sara" />;
このようにして、ユーザ定義要素は、propsの名称で対応する要素(ここではWelcome)に渡される.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
  • <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출합니다.
  • React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
  • Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
  • React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.
    • また、同一の素子を繰り返し使用することができる.
    function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

    練習する。

    import React from 'react';

function Food({fav}) {
  return <h1>I love {fav}</h1>
}

function App() {
  return (
    <div className="App">
      HELLO!
      <Food fav="kimchi" />
      <Food fav="chicken" />
      <Food fav="pizza" />
    </div>
  );
}

export default App;
    favをFood Componentに送信します.
    Food Componentはpropsを介して{fav}を直接使用する.
    結果は以下の通りです.
    Day2 Dockerfile
    認証