React

by ken3desu

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.card,.card-content,.card-header,.card-footer {
  border: solid;
  margin: .5em;
  padding: .25em;
}

React

// Card としての構造を定義するコンポーネント
function MyCard(props) {
  return (
    <div className={'card'}>
      <div className={'card-header'}>
        {props.header}
      </div>
      <div className={'card-content'}>
        {props.children}
      </div>
      <div className={'card-footer'}>{props.footer}</div>
    </div>
  );
}
// 具体部のみで記述が少ない
function HogeCard(props){
  return <MyCard header={'Hoge'}>
    <div>
      <p>define in Hoge</p>
      <p>define in Hoge</p>
    </div>
  </MyCard>
}

// 具体部のみで記述が少ない
function FugaCard(props){
  return <MyCard header={(<h1>これはJSX</h1>)} footer={(<h1>これもJSX</h1>)}>
    <p>define in Fuga</p>
  </MyCard>
}

function App(props){
  return <div>
    <HogeCard/>
    <FugaCard/>
  </div>
}
ReactDOM.render(<App />, document.querySelector("#app"))