Joey Baker joeybaker

A Weekend With React

I spent Saturday doing another dive into React 0.12 and ES6. I just wanted to share some of the experience since it's a stack that we're strongly considering adopting (for at least some) of our future work.

Once you get past the weirdness of writing HTML in your JS, it's actually really nice to control your template so directly. Part of it maybe that I'm learning ES6 syntax at the same time, but I'm no longer weirded out by JSX. I'm using the 6to5ify browserify transform, so nearly the full spectrum of ES6 is available, and it feels great. Highlights are destructing and the class syntax (I was surprised!). This is legit code:

  // named fuction for free! Don't even need to use the function keyword!
  , getInitialState(){
 var deadline = moment([2015, 8, 6])

React Primer

A massive list of anything I might have missed

UI

React is really two things: a way to abstract DOM creation and a way of building UI that removes a lot of boilerplate.

Creating components

React can feel very old school sometimes, in a good way—First get server-side rendering working, much later add client JS as an optimisation via https://twitter.com/markdalgleish/status/580098832043655168

ES6 classes

Flux research

desires

es6 friendly – this means no mixins
immutable friendly
no promises, because debugging them sucks

fluxible

http://fluxible.io/faq.html

es6 friendly

On npm

Three "types" of modules

cli modules

"bin" in package.json
keeping index.js and bin/module separate. You want both programmatic and cli access
use yargs to parse options from the CLI. You can do this manually, but it's painful and error prone. yargs also helps you build a good UI.
make sure to set the "main" field

	On Thu, Jan 29, 2015 at 9:45 AM, <[email protected]> wrote:
	Hello–

	I recently updated to your new snippet, but it violates the Content Security Protocol settings I have in place because it uses `eval`. It there anyway to opt-out of a script that uses `eval`?



	On 29 January, 2015 at 12:08:25 PM, John Clover ([email protected]) wrote:

	Hey Joey

	import setupCSS from './load-css-require.js'

	setupCSS(__dirname, (err) => {
	if (err) throw err
	require('my-front-end-components-that-require-css-files.js')
	})

	"note6": "cirlce ci gives us the ability to run set-npm-token before npm i, heroku does not, so we have to detect the heroku env and manually run npm install because changing .npmrc from an npm hook isn't pick up until the next run of npm",
	"set-npm-token": "if [ -n \"${NPM_TOKEN-}\" ]; then echo \"//registry.npmjs.org/:_authToken=$NPM_TOKEN\" >> .npmrc; fi",
	"preinstall": "npm run set-npm-token && if [ -n \"${DEPLOY_ENV-}\" ]; then echo installing; npm install --unsafe-perm --userconfig .npmrc --ignore-scripts; fi",
	"postinstall": "if [ -n \"${DEPLOY_ENV-}\" ]; then npm run build; fi"

	curl -o ~/Library/LaunchAgents/restart_systemuiserver.plist https://gist.githubusercontent.com/joeybaker/1d32226d928d05a95860/raw/483d41b06427f524b5df0c4d224fb0e2e8ba14e9/restart_systemuiserver.plist \
	&& launchctl load ~/Library/LaunchAgents/restart_systemuiserver.plist