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

// This is a stateless component. Something unique
const Welcome = ({ name }) => (
	<div>
	  <p>Hello, {name}</p>
	</div>
);

// This is a React component class
class Welcome2 extends React.Component {
  render() {
  	// Here you are accessing the React component instance via this.
    const { name } = this.props;
    return (
    	<div>Hello Again, {name}</div>
    );
  }
}

ReactDOM.render(
  /* This is a react element */
	<Welcome name="Arunoda Susiripala" />,
  document.getElementById('app')
);