Test23

index.html

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

script.babel

function Contacts() {
  return <div className="Contacts" />;
}

function Chat() {
  return <div className="Chat" />;  
}

function SplitPane(props) {
  return(
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return(
    <SplitPane left={<Contacts />} right={<Chat />} />
  );
}

ReactDOM.render(
  <App />,
  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>

style.css

html, body, #root {
  width: 100%;
  height: 100%;
}

.SplitPane {
  width: 100%;
  height: 100%;
}

.SplitPane-left {
  float: left;
  width: 30%;
  height: 100%;
}

.SplitPane-right {
  float: left;
  width: 70%;
  height: 100%;
}

.Contacts {
  width: 100%;
  height: 100%; 
  background: lightblue;
}

.Chat {
  width: 100%;
  height: 100%; 
  background: pink;
}

test23.markdown

Test23

Learn the fundamentals of React, including simple and class components, state, props, and submitting form data.

Containment

A Pen by 你银子掉了 on CodePen.