Playground-React App

index.html

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

<div class="person">
  <h1>Max Verstappen</h1>
  <p>Your Age: 30</p>
</div>

<div class="person">
  <h1>Lewis Hamilton</h1>
  <p>Your Age: 35</p>
</div>

<div class="person">
  <h1>Valteri Bottas</h1>
  <p>Your Age: 30</p>
</div>
<!-- We're always reusing the same HTML code here -->
<a href="https://unpkg.com/react/umd/react.development.js"></a>
<a href="https://unpkg.com/react-dom/umd/react-dom.development.js"></a>

playground-react-app.markdown

Playground-React App

A Pen by Gökhan on CodePen.

License.

script.babel

function Person(props) {
 // React component is just a JavaScript function.
  return ( 
    // JSX syntactical sugar, behind the scence compiled JS     code
    // JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
      <div className="person">
        <h1>{props.name}</h1>
        <p>Your Age: {props.age}</p>
      </div>
  );
}

var app = (
  <div> 
    <Person name="Max" age="28"/>
    <Person name="Manu" age="29"/>
    <Person name="Senna" age="30"/>
  </div>
)
ReactDOM.render(app, document.getElementById('root'));

// this method allows us to render a JS function as a component to the real DOM

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

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