Specialization of Components in ReactJS.

index.html

<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

script.babel

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function HowdyDialog() {
  return (
    <Dialog
      title="Howdy!"
      message="Thank you for tasting specialized components with me!" />
  );
}

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

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

specialization.markdown

Specialization.

A Pen by John K. Speck on CodePen.

License.

style.css

.FancyBorder {
  padding: 10px 10px;
  border: 10px solid;
  border-radius:10%;
}

.FancyBorder-blue {
  border-color: purple;
}

.Dialog-title {
  margin: 10;
  font-family: sans-serif;
}

.Dialog-message {
  margin: 10px;
  font-size: larger;
}