#Phoenix 1.1.x to 1.2.0 Upgrade Instructions
To generate new projects as 1.2.0, install the new mix archive:
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
/* Was looking for a way to delegate global keyboard shortcuts in an app to small | |
* Preact components in a way that didn't require any of: | |
* • Binding and unbinding events on ancestor nodes by a component's render function | |
* • Calling a function from a render function to try to manage/track that event-binding state for me | |
* • Require me to adopt class-ey components for only this feature (binding and unbinding an out-of-scope event using lifecycle hooks) | |
*/ | |
const FORWARDING_RULES = [ | |
{node: document, event: 'keydown', test: e => e.keyCode === 13, delegate: '.handle-enter'} | |
] |
The 0.13.0
improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13
is that React Components are no longer special objects that need to be created using a specific method (createClass()
). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!
Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component
for setState()
, but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props
and context
to the component instance otherwise the component will be static. The reason is
* { | |
font-size: 12pt; | |
font-family: monospace; | |
font-weight: normal; | |
font-style: normal; | |
text-decoration: none; | |
color: black; | |
cursor: default; | |
} |
var Dinosaurs = { | |
model: function() { | |
// return a firebase reference to our database | |
return new Firebase('https://dinosaur-facts.firebaseio.com'); | |
}, | |
controller: function() { | |
var ref = Dinosaurs.model(); | |
this.facts = mithrilFire(ref.orderByChild('height')); | |
}, | |
view: function(ctrl) { |
var AWS = require('aws-sdk'); | |
AWS.config.update({ | |
accessKeyId: '{AWS_KEY}', | |
secretAccessKey: '{AWS_SECRET}', | |
region: '{SNS_REGION}' | |
}); | |
var sns = new AWS.SNS(); |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title></title> | |
<meta charset="utf-8" /> | |
<script src="templating.js" type="text/javascript" charset="utf-8"></script> | |
</head> | |
<body> | |
<template id=t> |
/** @jsx React.DOM */ | |
'use strict'; | |
var React = require('react'); | |
var ContentEditableLabel = React.createClass({ | |
propTypes: { | |
tag: React.PropTypes.func, |