https://github.com/claudiopro/react-starter-hmr

bare-bones react starter for hot module replacement using browserify-hmr
https://github.com/claudiopro/react-starter-hmr

Last synced: 3 days ago
JSON representation

bare-bones react starter for hot module replacement using browserify-hmr

• Host: GitHub
• URL: https://github.com/claudiopro/react-starter-hmr
• Owner: claudiopro
• Created: 2015-11-28T18:05:40.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-28T18:43:36.000Z (about 9 years ago)
• Last Synced: 2024-11-12T07:39:48.464Z (2 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 0
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.markdown

Awesome Lists containing this project

README

        
# react-starter-hmr

bare-bones [react](https://facebook.github.io/react/) starter

using [babelify](https://npmjs.com/package/babelify) for es6 and jsx

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

with hot module replacement from [browserify-hmr](https://npmjs.com/package/browserify-hmr)

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

# quick start

```

$ npm install

$ npm start

```

# commands

* `npm start` - start a web server and recompile code for development

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

* `npm run build` - build for production

* `npm run watch` - automatically recompile during development

# starter code

## main.js

`main.js` is the entry point that sets up the rendering loop. It uses the `ud`

module to replace the `` reference at runtime when any of the files

change.

``` js

var React = require('react')

var ReactDOM = require('react-dom')

var ud = require('ud')

import App from './lib/app.js'

ReactDOM.render(

  React.createElement(ud.defn(module, App), null),

  document.querySelector('#content')

)

```

## lib/app.js

Track a counter `n` as state and increment it when the user clicks a button.

``` js

var React = require('react')

import Times from './times.js'

class App extends React.Component {

  constructor (props) {

    super(props)

    this.state = { n: 0 }

  }

  render () {

    return 


      

      click me!

    

  }

  handleClick () {

    this.setState({ n: this.state.n + 1 })

  }

}


export default App

```

## lib/times.js

Display the number of clicks.

``` js

var React = require('react')

class Times extends React.Component {

  render () {

    return 
clicked {this.props.n} times

  }

}

export default Times

```


# contributing

If you like what you see, but want to add something more, fork this repo and add

your additional feature to the name of the fork. Try to be specific with the

name of your fork, listing the technologies used plus what features the fork

adds.

# variations

Check out the [list of react-starter-hmr forks](https://github.com/substack/react-starter-hmr/network/members)

and the [list of react-starter forks](https://github.com/substack/react-starter/network/members)

to see how other people have customized this starter repo.

# license

This software is released into the public domain.