Simple ReactJS code

index.html

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

script.babel

function Person(props){
  return (
    <div className="person">
      <h1>{props.name}</h1>
      <p>Your Age: {props.age}</p>
    </div>
  );
}

var app = (
  <div>
    <Person name="Dika" age="31" />
    <Person name="Tari" age="32" />
  </div>  
);

ReactDOM.render(app, document.querySelector('#app'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

style.css

.person {
  display: inline-block;
  margin: 10px;
  border: 1px solid #eee;
  box-shadow: 0 2px 2px #ccc;
  width: 200px;
  padding: 20px;
}

zyorarw.markdown

zYORarw

A Pen by Meidika Wardana on CodePen.

License.