import {DOM} from 'react-elem';
const {div, p, h1, ul, li, a} = DOM;
 
export default () => {
  return div(
    h1('Welcome!'),
    p("to react-elem"),
    ul(
      li(a({href:"https://github.com/algesten/react-elem"}, "github.com/algesten/react-elem")),
      li(a({href:"https://github.com/algesten/refnux"}, "another cool project"))
    ),
    div({className:'mycl'}, () => {
        p("I like functions for nesting")
        p("Makes things cleaner. At least in coffeescript...")
    }),
    ul(arraysAreGood.map((txt) => {
        return li(txt)
    }))
  );
}

div({className:"mydiv"}, {key:"special1"}) // equivalent to
div({className:"mydiv", key:"special1"})   // this

div({id:"mydiv"}, "Hello!") // equivalent to
div("Hello!", {id:"mydiv"}) // this

ul(li("One"), li("Two"), li("Three"))

ul(myArrayOfStrings.map((txt) => {
    return li(txt)
}))

ul(() => {
    li("One")
    li("Two")
    li("Three")
})

import wrap from 'react-elem';           // wrapping function
import MyComponent from './MyComponent'; // a standard react component
 
myComponentFn = wrap(createFactory(MyComponent)); // make wrapped factory function
 
export default () => {
    myComponentFn('Works!');
}

import {wrapall} from 'react-elem';      // mega-function
 
import {DOM} from 'react-dom';           // standard react factory functions
 
myDOM = wrapall(DOM); // this is exactly what {DOM} is in react-elem

import {newroot} from 'react-elem';
 
div(() => {
    span("One")
    span("Two")
    span("Three")
    newroot(() => {
        div(() => {
            span("One again") // not captured in outer div
        })
    })
})