Framework7 v6 JSX Component

page.f7.jsx

export default (props, { $f7, $on, $update }) => {
  let foo = 'bar';
  const items = [
    {
      title: 'Item 1'
    },
    {
      title: 'Item 2'
    },
  ];

  const changeValue = () => {
    foo = 'bar 2';
    $update();
  }

  $on('pageInit', () => {
    $f7.dialog.alert('page init')
  })

  return () => (
    <div class="page">
      <p>Value is: {foo}</p>
      <p>
        <a href="#" onClick={changeValue}>Change value</a>
      </p>
      <ul>
        {items.map((item) => (
          <li>{item.title}</li>
        ))}
      </ul>
    </div>
  )
}