| const morphdom = require('morphdom') | |
| const h = require('hyperscript') | |
| const {createStore, bindActionCreators, applyMiddleware} = require('redux') | |
| const xtend = require('xtend') | |
| const thunk = require('redux-thunk').default | |
| const domify = require('domify') | |
| const reducer = (state, action) => ( | |
| action.type === 'increment' ? { count: state.count + 1} : | |
| action.type === 'decrement' ? { count: state.count + 1} : |
| const morphdom = require('morphdom') | |
| const h = require('hyperscript') | |
| const {createStore, bindActionCreators, applyMiddleware} = require('redux') | |
| const xtend = require('xtend') | |
| const thunk = require('redux-thunk').default | |
| const reducer = (state, action) => ( | |
| action.type === 'increment' ? { count: state.count + 1} : | |
| action.type === 'decrement' ? { count: state.count + 1} : | |
| state |
| const morphdom = require('morphdom') | |
| const h = require('hyperscript') | |
| const sendAction = require('send-action') | |
| const xtend = require('xtend') | |
| const createMorphdomUpdater = ($el) => (thing1, thing2) => morphdom(thing1, thing2) | |
| let send; | |
| const $root = document.getElementById('root') |
| const yo = require('yo-yo') | |
| const createStore = require('store-emitter') | |
| const xtend = require('xtend') | |
| function modifier (action, state) { | |
| if (action.type === 'change_name') { | |
| return { name: action.payload } | |
| } | |
| } |
| var p = require('preact'); | |
| var h = p.h; | |
| var App = function(props) { | |
| function onclick() { | |
| alert(props.message); | |
| } | |
| return h('header', null, |
| { | |
| "44085caf-1479-41c6-bb27-a7c33cf43917": { | |
| "id": "44085caf-1479-41c6-bb27-a7c33cf43917", | |
| "name": "Ann Cook", | |
| "birthday": "6/14/2015", | |
| "size": "XL", | |
| "procedure": [ | |
| "4990f95f-e7f3-456b-9137-05cd3089b06a" | |
| ], | |
| "car": "df448beb-4780-4cee-b2f7-2c99ca5a20a1", |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Develop the Webz!</title> | |
| <style type="text/css"> | |
| body { | |
| background: purple; | |
| color: orange; | |
| } | |
| </style> |
| var extend = require('xtend') | |
| var vdom = require('virtual-dom') | |
| var createApp = require('virtual-app') | |
| /* | |
| * create the app passing the container element and virtual-dom | |
| */ | |
| const app = createApp(document.body, vdom) | |
| const h = app.h | |
| /* |
Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.
Instead, with this approch, your app's current pathname is just another piece of state, just like anything else.
This also means that when doing server-side rendering of a redux app, you can just do:
var app = require('your/redux/app')
var React = require('react')
| 'use strict' | |
| var h = require('hyperscript') | |
| // String -> String | |
| const button = option => { | |
| var base = 'button.btn' | |
| return typeof option === 'string' ? | |
| `${base}.btn-${option}` : | |
| base | |
| } |