Skip to content

Instantly share code, notes, and snippets.

@bensmithett
Last active March 28, 2016 23:30
Show Gist options
  • Save bensmithett/8b2b0ba538c3f27e0c7c to your computer and use it in GitHub Desktop.
Save bensmithett/8b2b0ba538c3f27e0c7c to your computer and use it in GitHub Desktop.
React for templates
// 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>
)
}
// 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>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment