example.js

// "counter.react"

import {format} from 'externalLib';

state {
  // acts like default state
  counter = 0;
}

props {
  // acts like default props
  maxCounter = 10;
}

view {
  <div className="container">
    <button onClick={increment}>{format(state.counter)}</button>
  </div>
}

function increment(e) {
  setState(state => {
    if (state.counter < props.maxCounter) {
      return {
        counter: state.counter + 1
      };
    }
    return null;
  });
}

example2.js

// "counter.react"

import {format} from 'externalLib';

state {
  // acts like default state
  counter = 0;
}

props {
  // acts like default props
  maxCounter = 10;
}

export function render() {
  return (
    <div className="container">
      <button onClick={increment}>{format(state.counter)}</button>
    </div>
  );
}

function increment(e) {
  setState(state => {
    if (state.counter < props.maxCounter) {
      return {
        counter: state.counter + 1
      };
    }
    return null;
  });
}

example3.js

// "counter.react"

import {format} from 'externalLib';

state {
  // acts like default state
  counter = 0;
}

props {
  // acts like default props
  maxCounter = 10;
}

events {
  function increment(e) {
    setState(state => {
      if (state.counter < props.maxCounter) {
        return {
          counter: state.counter + 1
        };
      }
      return null;
    });
  }
}

<style>
  .container {
    color: red;
    background: {props.backgroundColor}
  }
</style>

<view>
  <div className="container">
    <button onClick={increment}>{format(state.counter)}</button>
  </div>
</view>

example4.js

// "counter.react"

import {format} from 'externalLib';

state {
  // acts like default state
  counter = 0;
}

props {
  // acts like default props
  maxCounter = 10;
}

reducer {
 increment: state => ({
   counter: state.counter + 1,
 })
}

view {
  <div className="container">
    <button onClick={increment}>{format(state.counter)}</button>
  </div>
}

example5.js

// "counter.react"

import {format} from 'externalLib';
import {setState} from "react";

let counter = 0;

function increment(props, e) {
  setState(() => {
    if (counter < props.maxCounter) {
      counter++
    }
  });
}

export function render(props) {
  return (
    <div className="container">
      <button onClick={increment}>{format(counter)}</button>
    </div>
  );
}

export const defaultProps = {
  maxCounter: 10,
};

example6.js

// "counter.react"

import {format} from 'externalLib';
import {setState} from 'react';

component {
  let counter = 0;

  function increment(props, e) {
    setState(() => {
      if (counter < props.maxCounter) {
        counter++
      }
    });
  }

  export function render(props) {
    return (
      <div className="container">
        <button onClick={increment}>{format(counter)}</button>
      </div>
    );
  }

  export const defaultProps = {
    maxCounter: 10,
  };
}

example7.js

// "counter.js"

import {format} from 'externalLib';
import {createStatefulComponent} from 'react';

export defaut createStatefulComponent(({render, defaultProps, setState}) => {
  let counter = 0;

  function increment(props, e) {
    setState(() => {
      if (counter < props.maxCounter) {
        counter++
      }
    });
  }

  render((props) => {
    return (
      <div className="container">
        <button onClick={increment}>{format(counter)}</button>
      </div>
    );
  });

  defaultProps({
    maxCounter: 10,
  });
});