Ben Smithett bensmithett

The app's library of UI components.

Designer owns this! Everything here is rendered in a living style guide. CSS for each component will probably live alongside here when we inevitably go down that road...

components/
  __tests__/
  button.js
  form.js

Make server calls from action creator, but don't dispatch an action. When the promise resolves, call another function that actually dispatches an action.

dispy is cool, abstracts a bit of boilerplate

Store.subscribe/unsubscribe
Stores register individual callbacks for each action rather than a big switch.
Simple mixin to get initial state & update it with one function (in controller view) mixins: [subscribe(state, store)]

orodio/melbjs-feb-2015


	$ awk '/Jade/ && !/English/' ./students.csv
	5553,Jade,Mathematics,100,,,

	$ awk '/Jade/' ./students.csv
	5553,Jade,English,73,,,
	5553,Jade,Mathematics,100,,,

	$ awk '/Jade/ {print "****"}' ./students.csv
	****

	// 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',

	// ----
	// libsass (v3.2.5)
	// ----

	.my-module
	color: red

	&.-bar
	color: blue

	<div class="grid">
	<div class="grid__col"><div class="content">foo</div></div>
	<div class="grid__col"><div class="content">foo</div></div>
	<div class="grid__col"><div class="content">foo</div></div>
	</div>

	<div class="grid -gutters">
	<div class="grid__col"><div class="content">foo</div></div>
	<div class="grid__col"><div class="content">foo</div></div>
	<div class="grid__col"><div class="content">foo</div></div>

	// ----
	// Sass (v3.4.7)
	// Compass (v1.0.1)
	// ----

	.foo
	color: red

	@media screen and (min-width: 1024px)
	color: blue

	React = require("react")
	VideoPlayerComponent = require("components/VideoPlayerComponent")

	AppComponent = React.createClass
	# Need to add this manually if you want it to show up in React Chrome Dev Tools
	# See https://github.com/jsdf/coffee-react-transform/issues/16
	displayName: "AppComponent"

	render: ->
	<div>