https://facebook.github.io/react/docs/introducing-jsx.html

Object

• JSX represents object
• The following declarations are the same because Babel compiles JSX down to React.createElement() calls[js]const element = (
  

  Hello, world!

  );[/js]
  [js]
  const element = React.createElement(
  ‘h1’,
  {className: ‘greeting’},
  ‘Hello, world!’
  );
  [/js]

Create element

Specify attribute

• JS and Rect[js]
  var element = document.getElementById(‘abcd’);
  var elementReact = ReactDOM.findDOMNode(element);
  elementReact.setAttribute(‘type’, ‘hidden’);
  [/js]
• or jQuery and React[js]var elements = $(‘input[id^=”prefix”][id$=”sufix”]’);
  elements .each( function(index) {
  var elementReact = ReactDOM.findDOMNode(this);
  elementReact.setAttribute(‘type’, ‘hidden’);
  });[/js]
• JSX only[js]const element = <div tabIndex=”0″></div>;[/js]
• JSX & JS[js]const element = <img src={user.avatarUrl}></img>;[/js]

Specify children

How to use Javascript in JSX

• Put Javascript code inside the braces
• Example
  [js]
  class Square extends React.Component {
  render() {
  return (
  <button className=”square” onClick={() => alert(‘click’)}>;
  {this.props.value}
  </button>
  );
  }
  }[/js]
  If onClick={alert(‘click’)} is set, immediately alert instead of when button is clicked

Render element

Speed