yesmeck/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="root"></div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import React from 'react'
import ReactDOM from 'react-dom'
import feeble from 'feeble'
import { connect } from 'feeble/redux'
import { Router, Route } from 'feeble/router'

// 1. Create a app
const app = feeble()

// 2.1 Create model
const counter = feeble.model({
  namespace: 'count',
  state: 0,
})

// 2.2 Create action creator
counter.action('increament')
counter.action('decreament')

// 2.3 Create reducer
counter.reducer(on => {
  on(counter.increament, state => state + 1)
  on(counter.decreament, state => state - 1)
})

// 2.4 Attach model to app
app.model(counter)

// 3. Create view
const App = connect(({ count }) => ({
  count
}))(function({ dispatch, count }) {
  return (
    <div>
      <h2>{ count }</h2>
      <button key="inc" onClick={() => { dispatch(counter.increament()}}>+</button>
      <button key="dec" onClick={() => { dispatch(counter.decreament()}}>-</button>
    </div>
  )
})

// 4. Create router
app.router(({ history }) =>
  <Router history={history}>
    <Route path="/" component={App} />
  </Router>
)

// 5. Start app
const tree = app.start()

// 6. Render to DOM
ReactDOM.render(tree, document.getElementById('root'))

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "babel-polyfill": "6.9.1",
    "feeble": "0.0.1-alpha3",
    "react": "15.2.1",
    "react-dom": "15.2.1"
  }
}

## transpiled.js
/*
unknown: Unexpected token (38:70)
  36 |     <div>
  37 |       <h2>{ count }</h2>
> 38 |       <button key="inc" onClick={() => { dispatch(counter.increament()}}>+</button>
     |                                                                       ^
  39 |       <button key="dec" onClick={() => { dispatch(counter.decreament()}}>-</button>
  40 |     </div>
  41 |   )
*/
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="root"></div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	import React from 'react'
	import ReactDOM from 'react-dom'
	import feeble from 'feeble'
	import { connect } from 'feeble/redux'
	import { Router, Route } from 'feeble/router'

	// 1. Create a app
	const app = feeble()

	// 2.1 Create model
	const counter = feeble.model({
	namespace: 'count',
	state: 0,
	})

	// 2.2 Create action creator
	counter.action('increament')
	counter.action('decreament')

	// 2.3 Create reducer
	counter.reducer(on => {
	on(counter.increament, state => state + 1)
	on(counter.decreament, state => state - 1)
	})

	// 2.4 Attach model to app
	app.model(counter)

	// 3. Create view
	const App = connect(({ count }) => ({
	count
	}))(function({ dispatch, count }) {
	return (
	<div>
	<h2>{ count }</h2>
	<button key="inc" onClick={() => { dispatch(counter.increament()}}>+</button>
	<button key="dec" onClick={() => { dispatch(counter.decreament()}}>-</button>
	</div>
	)
	})

	// 4. Create router
	app.router(({ history }) =>
	<Router history={history}>
	<Route path="/" component={App} />
	</Router>
	)

	// 5. Start app
	const tree = app.start()

	// 6. Render to DOM
	ReactDOM.render(tree, document.getElementById('root'))
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"babel-polyfill": "6.9.1",
	"feeble": "0.0.1-alpha3",
	"react": "15.2.1",
	"react-dom": "15.2.1"
	}
	}
	/*
	unknown: Unexpected token (38:70)
	36 \| <div>
	37 \| <h2>{ count }</h2>
	> 38 \| <button key="inc" onClick={() => { dispatch(counter.increament()}}>+</button>
	\| ^
	39 \| <button key="dec" onClick={() => { dispatch(counter.decreament()}}>-</button>
	40 \| </div>
	41 \| )
	*/