React

by Kondal Durgam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<div id="app"></div>

CSS

body {
    padding: 20px;
  font-family: Helvetica;
}
.person{
  padding:20px;
  display:inline-block;
  border:1px solid #eee;
  width:200px;
  box-shadow: 0 2px 2px #ccc;
  margin:10px;
  
}
.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function Person(pros) {
  return (
    <div className="person">
      <h1>{pros.name}</h1>
      <p>{pros.age}</p>
    </div>  
  )
} 

	var app = (
  	<div>
        <Person name= "Gowtham" age="35"/>,
        <Person name= "Gowtham" age="35"/>,
  	</div>
  ) 

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