Udemy React Course - Section 1.4

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="Pete" age="26"/>
    <Person name="Sannie" age="16"/>
  </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;
}

udemy-react-course-section-1-4.markdown

Udemy React Course - Section 1.4

Doing the practical...

A Pen by Nico Coetzee on CodePen.

License.