React presentation source code examples

example1.jsx

// From reactjs.org tutorial
class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: null };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        <span style={{ color: 'red' }}>{this.props.value}</span>
      </button>
    );
  }
}

example10.jsx

<Menu
  onClick={() => {
    this.setState({ hide: !this.state.hide })
  }
>
  <nav id='global-nav'>
    <ul>
      <li><a href='/foo'>Foo</a></li>
      <li><a href='/bar'>Bar</a></li>
      <li><a href='/baz'>Baz</a></li>
    </ul>
  </nav>
</Menu>

example2.jsx

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

example3.jsx

<div>
  <ul>
    <li>
      <Square />
    </li>
    <li>
      <Square />
    </li>
  </ul>
  <p>
    Lorem ipsum
  </p>
</div>

example4.html.erb

<ol>
  <% %w(One Two).each do |n| %>
    <li><%= n %></li>
  <% end %>
</ol>

example5.html

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

example6.jsx

<ol>
  {
    ['One', 'Two']
      .map((str, i) => <li key={i}>{ str }</li>)
  }
</ol>

example7.js

React.createElement(
  'ol',
  null,
  ['One', 'Two'].map((str, i) => React.createElement(
    'li',
    { key: i },
    str
  ))
);

example8.js

class Square extends React.Component {
  render() {
    return React.createElement(
      "button",
      { className: "square" },
      this.props.value
    );
  }
}

example9.js

document.createElement('button');