React

by Vlad Rasenko

HTML

<div id="app"></div>

React

const Button = ({children}) => (
	<button>
    <strong>{children}</strong>
  </button>
)

function (a, b, ...rest) {
return <React.Template>
        <div>a</div>
  			<div>b</div>
      </React.Template>
}

const Div = ({style, children, ...restProps}) => {
	const background = children.length > 100 ? 'red' : 'green'
  
  return <div style={{background, ...style}} {...restProps}>{children}</div>
}

const App = () => {
	const params = {foo : 'bar', baz: 'foo'}
	// return <div {...params}>
	return <div foo="bar" baz="foo">
	  {'hello'.toUpperCase()} world {1} {2 * 2}
    <Button>foo</Button>
    <Div>text</Div>
    <Div style={{fontWeight: 'bold'}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quod fuga esse beatae est corporis a, placeat, ipsum soluta nesciunt aliquam aliquid. Aut recusandae molestiae dolorum quis aliquam vitae ullam.</Div>
	</div>
}

/* {
  style: {
    background
  },
  ...props,
  ...otherObject,
  foo: 'ber',
  ...otherObject2
} */

ReactDOM.render(<App />, document.querySelector("#app"))