How to use reflex - 10 common examples

const viewContainer = (styles, ...children) =>
    // Set the width of the previews element to match the width of each card
    // plus padding.
    html.div({
      key: 'preview-container',
      style: styles
    }, [
      html.div({
        key: 'preview-content',
        style: Style(style.previews, style.shrinkable)
      }, children)
    ]);

return html.div({
      key: 'dashboard',
      className: 'dashboard',
      style: theme && {
        backgroundColor: theme.wallpaper.background,
        color: theme.wallpaper.foreground,
        backgroundImage: theme.wallpaper.posterImage &&
                         `url(${theme.wallpaper.posterImage})`
      }
    }, [
      html.meta({
        name: 'theme-color',
        content: themeColors
      }),
      html.div({
        key: 'dashboard-tiles',
        className: 'dashboard-tiles'
      }, pages.map(page => render(page.url, viewPage, page, address))),
      html.div({
        key: 'wallpaper-swatches',
        className: 'wallpaper-swatches',
      }, themes.entries.map(theme => render(theme.id, viewTheme, theme, address)))
    ]);
  };
  // Exports:

(model:Model, address:Address, context:Context):DOM =>
  html.div(settings,
   model
    .index
    .map(id =>
      Tab.view(model.cards[id],
       forward(address, ByID(id)),
       context
      )
    )
  )

export const view = (model/*:Model*/, address/*:Address*/)/*:VirtualElement*/ =>
  html.div({key: "gif-viewer", style: style.viewer}, [
    html.h2({key: "header", style: style.header}, [model.topic]),
    html.div({key: "image", style: style.image(model.uri)}),
    html.button({key: "button", onClick: forward(address, RequestMoreAction)}, [
      "More please!"
    ])
  ])

const viewEntry = ({id, model}/*:Entry*/, address/*:Address*/)/*:VirtualElement*/ =>
  html.div({key: id}, [
    Counter.view(model, forward(address, by(id)))
  ])

const viewEntry = ({id, model}/*:Entry*/, address/*:Address*/)/*:VirtualElement*/ =>
  html.div({key: id}, [
    Counter.view(model, forward(address, CounterList.by(id))),
    html.button({
      key: 'remove',
      onClick: forward(address, removeForID(id))
    }, 'x')
  ])

(model:Model, address:Address):DOM => (
    html.div({
      className: 'wallpaper-choice',
      onClick: forward(address, always(Choose)),
      style: Style.mix(
        styleSheet.base,
        { backgroundColor: model.color }
      )
    })
  )

model.order.map(id =>
      thunk(
        String(id),
        Wallpaper.view,
        model.entries[id],
        forward(address, ByID(String(id)))
      )
    ))

model.order.map(id =>
    thunk(
      String(id),
      Tile.view,
      model.entries[String(id)],
      forward(address, TileAction),
      isDark
    )
  )

(model:Model, address:Address):DOM => {
    if (!Runtime.useNativeTitlebar()) {
      return Controls.view(model.controls, forward(address, ControlsAction))
    } else {
      return html.noscript()
    }
  }