React for templates

button.js

// Low level component
// I can see the HTML, classnames, etc that make it up
// You need to at this point

import React from 'react'
import classnames from 'classnames'

const Button = ({children, type, disabled}) => {
  const classes = classnames('button', {
    '-primary': type === 'primary',
    '-disabled': disabled
  })
  
  return (
    <button className={classes} disabled={disabled}>
      {children}
    </button>
  )
}

sign_in_page.js

// Higher level component
// I don't get a detailed look at the underlying HTML any more,
// but it doesn't matter as much at this level.
// On the other hand, being able to compose prebuilt components like this
// without even thinking about the underlying HTML is suuuper nice
// See also: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.xjq5xghow

import React from 'react'
import Container from 'components/container'
import Form from 'components/form'
import LabelledField from 'components/labelled_field'
import Input from 'components/input'
import Button from 'components/button'

const SignInPage = () => (
  <Container>
    <Form action='/blah'>
      <LabelledField for='username' label='Username'>
        <Input name='username' />
      </LabelledField>
      
      <LabelledField for='password' label='Password'>
        <Input name='password' type='password' />
      </LabelledField>
      
      <Button type='primary'>Sign In</Button>
    </Form>
  </Container>
)