요컨대

문턱을 최소화하는 전략을 취해라.

React on CodePen - React Patterns & Templates

보기 좋은 교재를 고르다.

Codepen

자신에게 적합한 물건.
A Pen by yumainaura

주안점

박스라는 유니버설 모듈을 만들었어요.

App Component에서 3개의 Box Component 호출

colorMode 변경

CSS에서 colorMode 정의

colorMode는'가짜일 때 아무것도 쓰지 않는다'는 동작을 할 수 있을 것 같다.
(#루비의 외로운 계산과도 닮은 듯)

js

// This is how a function component takes props.
const Box = props => (
  <div className={`box ${props.colorMode}`}>
    <h1 className="title">{props.title}</h1>
  </div>
);

// This Class component also can have props
class App extends React.Component {

  render() {

    return <div>
      <h1 class="subtitle">
        {this.props.header}
      </h1>
      <Box
        colorMode="false"
        title="Light"
      />
      <Box
        colorMode="dark-mode"
        title="Dark"
      />
      <Box
        colorMode="orange-mode"
        title="Orange"
      />
    </div>;
  }

}


ReactDOM.render(<App header="Hello, Colors!"/>, document.getElementById("root"));

css

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  max-width: 250px;
  margin: 0 auto;
}
.box {
  width: 300px;
  &.dark-mode {
    background: black;
    color: #bbb;
    h1 {
      color: white;
    }
    .checkbox:hover {
      color: white;
    }
  }
  &.orange-mode {
    background: orange;
    color: red;
    h1 {
      color: red;
    }
    .checkbox:hover {
      color: red;
    }
  }
}

HTML

<div id="root"></div>