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

class FriendsLister extends React.Component {
	renderFriend(friend) {
  	return (<li>{friend}</li>);
  }

	render() {
  	const { friends } = this.props;
    
  	return (
    	<div>
        <p>Here's a list of my friends:</p>
        <ul>
      	  {friends.map((f) => this.renderFriend(f))}
        </ul>
    	</div>
    );
  }
}

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