https://github.com/jakeburden/example-react-styles

https://github.com/jakeburden/example-react-styles

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/jakeburden/example-react-styles
• Owner: jakeburden
• Created: 2015-08-31T01:27:19.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-31T01:40:09.000Z (over 9 years ago)
• Last Synced: 2024-04-16T00:30:50.609Z (9 months ago)
• Language: JavaScript
• Size: 109 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.markdown

Awesome Lists containing this project

README

        
# example-react-styles

Minimal [react](https://facebook.github.io/react/) starter with [radium](http://projects.formidablelabs.com/radium/) for styles.

Using [reactify](https://npmjs.com/package/reactify) for jsx

under [browserify](http://browserify.org)/[watchify](https://npmjs.com/package/watchify)

with [npm run scripts](http://substack.net/task_automation_with_npm_run)

# quick start

```

$ npm install

$ npm run watch &

$ npm start

```

# commands

* `npm run build` - build for production

* `npm run watch` - automatically recompile during development

* `npm start` - start a static development web server

# styles.js

``` js

module.exports = {

  even: {

    color: 'blue'

  },

  odd: {

    color: 'red'

  },

  flex: {

    display: 'flex'

  },

  button: {

    ':hover': {

      cursor: 'pointer'

    }

  }

}

```

# index.js

``` js

var React = require('react')

var Radium = require('radium')

var styles = require('./styles')

var App = React.createClass({

  getInitialState: function () {

    return {

      n: 0

    }

  },

  handleClick: function () {

    this.setState({

      n: this.state.n + 1

    })

  },

  render: function () {

    return (

      


        
clicked

          {this.state.n} times

        

        click me!

      

    )

  }

})

App = Radium(App)

React.render(, document.querySelector('#content'))


```