React.js Basics

Let's dive into React.js

by smax

HTML

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

<div id="app">
</div>

Babel + JSX

let name = 'Max';

let outputEl = (
	<div>
	  <p>{name}</p>
    <button onClick={changeName}>Change Name</button>
	</div>
);

function changeName() {
	name = 'Anna';
  outputEl = (
    <div>
      <p>{name}</p>
      <button onClick={changeName}>Change Name</button>
    </div>
	);
  ReactDOM.render( outputEl, document.querySelector('#app'));
}

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