Web Design Leaves

{
  type: 'button',  //タイプ（小文字から始まるのでタグ名 → <button>）
  props: {  //プロパティ
    className: 'button button-blue',
    children: {  //子要素（React 要素）
      type: 'b',  //タイプ <b>
      props: {  //プロパティ
        children: 'OK!'  //子要素（テキスト）
      }
    }
  }
}
//上記オブジェクトの記述は一部のプロパティを省略してあり、実際のオブジェクトとは異なります

<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>

{
  type: 'button',  
  props: {  
    className: 'button button-blue',
    children: {  
      type: 'b',  
      props: { 
        children: 'OK!'  
      }
    }
  }
}

const Button = () => ({
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {  
      type: 'b', 
      props: {  
        children: 'OK!' 
      },
      key: null,
      ref: null,
      $$typeof: Symbol.for('react.element')
    }
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element')
});

{
  type: Button,  //タイプ（ユーザ定義コンポーネント）
  props: {
    color: 'blue',
    children: 'OK!'
  }
}
//コンポーネントを表す React 要素の例（実際のオブジェクトとは異なります）

const DangerButton = ({ children }) => ({
  type: Button,
  props: {
    color: 'red',
    children: children
  }
});
//実際のオブジェクトとは異なり、このままでは動作しません。

const DeleteAccount = () => ({
  type: 'div',
  props: {
    children: [  //配列
    {
      type: 'p',  //DOM
      props: {
        children: 'Are you sure?'
      }
    }, 
    {
      type: DangerButton,  //コンポーネント
      props: {
        children: 'Yep'
      }
    }, 
    {
      type: Button,  //コンポーネント
      props: {
        color: 'blue',
        children: 'Cancel'
      }
   }]
});

import React from 'react';
import ReactDOM from 'react-dom';

const DeleteAccount = () => (
  <div>
    <p>Are you sure?</p>
    <DangerButton>Yep</DangerButton>
    <Button color='blue'>Cancel</Button>
  </div>
);
 
const Button = ({color, children}) => {
  return (
    <button className={`button button-${color}`}>
      <b>
        {children}
      </b>
    </button>
  )
}

const DangerButton = ({children}) => {
  return <Button color="red" children={children}/>;
}

ReactDOM.render(
  <DeleteAccount />,
  document.getElementById('root')
);

<div>
  <p>Are you sure?</p>
  <button class="button button-red"><b>Yep</b></button>
  <button class="button button-blue"><b>Cancel</b></button>
</div>

{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

//Button コンポーネント（要素ツリーがカプセル化されている）
{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

const Form = ({ isSubmitted, buttonText }) => {
  if (isSubmitted) {
    // フォームが送信されたら Message 要素を返す
    return {
      type: Message,  // Message コンポーネント
      props: {
        text: 'Success!'
      }
    };
  }

  // フォームが送信されていない場合は Button 要素を返す
  return {
    type: Button,  // Button コンポーネント
    props: {
      children: buttonText,
      color: 'blue'
    }
  };
};
//実際のオブジェクトとは異なり、一部のフィールドを省略しています

// 1) 関数コンポーネント
const Button = ({ children, color }) => ({
  type: 'button',
  props: {
    className: 'button button-' + color,
    children: {
      type: 'b',
      props: {
        children: children
      }
    }
  }
});

// 2) クラスコンポーネント
class Button extends React.Component {
  render() {
    const { children, color } = this.props;
    return {
      type: 'button',
      props: {
        className: 'button button-' + color,
        children: {
          type: 'b',
          props: {
            children: children
          }
        }
      }
    };
  }
}

ReactDOM.render({
  type: Form,
  props: {
    isSubmitted: false,
    buttonText: 'OK!'
  }
}, document.getElementById('root'));

// React: You told me this...
{
  type: Form,
  props: {
    isSubmitted: false,
    buttonText: 'OK!'
  }
}

// React: ...And Form told me this...
{
  type: Button,
  props: {
    children: 'OK!',
    color: 'blue'
  }
}

// React: ...and Button told me this! I guess I'm done.
{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

// React 要素（オブジェクト）
{
  type: 'button',
  props: { 
    className: 'green',
    children: 'submit'
  }
}

// JSX は React 要素オブジェクトのシンタックスシュガーです
// <button className="green" children="submit"/>

{
  type: 'button',
  props: { 
    className: 'green',
    children: 'submit'
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element')
}

// ツリーを形成する React 要素（オブジェクト）
{
  type: 'div',
  props: {
    children: [{
      type: 'button',
      props: { className: 'green' }
    }, {
      type: 'button',
      props: { className: 'orange' }
    }]
  }
}

/* JSX で記述した場合
<div>
  <button className="green" />
  <button className="orange" />
</div>
*/

ReactDOM.render(
  <button className="green" />,
  document.getElementById('root')
);

// 以下は React 要素を直接指定した場合の例（通常このような書き方はしません）
ReactDOM.render({
  type: 'button',
  props: { 
    className: 'green'
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element')}, 
  document.getElementById('root')
);

// ReactDOM renderer の内部のどこかのコード(単純化した擬似コード)
function createHostInstance(reactElement) {
  let domNode = document.createElement(reactElement.type);
  domNode.className = reactElement.props.className;
  return domNode;
}

// 内部での処理(単純化した擬似コード)
let domContainer = document.getElementById('root');
        
let domNode = document.createElement('button');
domNode.className = 'green';

domContainer.appendChild(domNode);

ReactDOM.render(
  <button className="green" />,
  document.getElementById('root')
);

// その後、再度 ReactDOM.render() を呼び出す 

ReactDOM.render(
  <button className="red" />,
  document.getElementById('root')
);

// 内部での処理(単純化した擬似コード)
let domContainer = document.getElementById('root');
// ツリーをクリア（空にする）
domContainer.innerHTML = '';
// ホストインスタンスツリーを新規作成
let domNode = document.createElement('button');
domNode.className = 'red';
domContainer.appendChild(domNode);

// 既存のホストインスタンスを取得
let domNode = domContainer.firstChild;
// 必要な部分のみを更新
domNode.className = 'red';

// クラス属性が green の button 要素をレンダリング
// let domContainer = document.getElementById('root');
// let domNode = document.createElement('button');
// domNode.className = 'green';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <button className="green" />,
  document.getElementById('root')
);

// ホストインスタンスを再利用できるかを判断 (button → button なので OK)
// 既存のホストインスタンスを更新
// domNode.className = 'red';
ReactDOM.render(
  <button className="red" />,
  document.getElementById('root')
);

// ホストインスタンスを再利用できるかを判断  (button → p なので NG)
// 既存のインスタンスを破棄して新たにインスタンスを作成してレンダリング
// domContainer.removeChild(domNode);
// domNode = document.createElement('p');
// domNode.textContent = 'Hello';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <p>Hello</p>,
  document.getElementById('root')
);

// ホストインスタンスを再利用できるかを判断  (p → p なので OK)
// 既存のホストインスタンスを更新
// domNode.textContent = 'Goodbye';
ReactDOM.render(
  <p>Goodbye</p>,
  document.getElementById('root')
);

// 初回のレンダリング
ReactDOM.render(
  <dialog>
    <input />
  </dialog>,
  domContainer
);

// 次のレンダリング
ReactDOM.render(
  <dialog>
    <p>I was just added here!</p>
    <input />
  </dialog>,
  domContainer
);

//前のレンダリングの input 要素を削除
let oldInputNode = dialogNode.firstChild;
dialogNode.removeChild(oldInputNode);

//新たに p 要素を作成
let pNode = document.createElement('p');
//テキストを設定
pNode.textContent = 'I was just added here!';
// p 要素をツリーに追加
dialogNode.appendChild(pNode);

//新たに input 要素を作成してツリーに加
let newInputNode = document.createElement('input');
dialogNode.appendChild(newInputNode);

function Form({ showMessage }) {
  let message = null;
  if (showMessage) {
    message = <p>I was just added here!</p>;
  }
  return (
    <dialog>
      {message}
      <input />
    </dialog>
  );
}

function Form({ showMessage }) {
  let message = null;
  if (showMessage) {
    message = {
      type: 'p',
      props: { children: 'I was just added here!' }
    };
  }
  return {
    type: 'dialog',
    props: {
      children: [
        message,
        { type: 'input', props: {} }
      ]
    }
  };
}

let inputNode = dialogNode.firstChild;
//新たに p 要素を作成
let pNode = document.createElement('p');
//テキストを設定
pNode.textContent = 'I was just added here!';
//p 要素を input 要素の前に挿入
dialogNode.insertBefore(pNode, inputNode);