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 App = () => (
	<div>
	  <p>Hello World</p>
	</div>
);

const WithBackground = ({ children, color }) => (
	<div style={{ backgroundColor: color }}>
	  {children}
	</div>
)

ReactDOM.render(
	(
  	<WithBackground color="yellow">
	    <App />
	  </WithBackground>
  ),
  document.getElementById('app')
);