React 101

by arunoda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script>
<div id="app"/>

Babel + JSX

const FriendsLister = ({ friends }) => (
	<div>
	  <p>Here's a list of my friends:</p>
    <ul>
      {friends.map((friend) => (
      	<li>{friend}</li>
      ))}
    </ul>
	</div>
);

ReactDOM.render(
	<FriendsLister friends={["Kamal", "Supun", "Angi"]} />,
  document.getElementById('app')
);