By: @BTroncone
Also check out my lesson @ngrx/store in 10 minutes on egghead.io!
Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!
Table of Contents
@Component({ | |
selector: 'add-story-form', | |
template: ` | |
<div class="container"> | |
<h1>New Story</h1> | |
<form [formGroup]="newStory" | |
(submit)="submit($event)" | |
(success)="onSuccess()" | |
(error)="onError($event)" | |
connectForm="newStory"> |
import React, {Component, PropTypes} from 'react'; | |
class $NAME extends Component { | |
constructor(props, context){ | |
super(props, context); | |
} | |
render(){ | |
return ( | |
<div> | |
</div> |
// https://medium.com/@rdsubhas/es6-from-callbacks-to-promises-to-generators-87f1c0cd8f2e#.q7boouq4o | |
/* Step 1: Callback hell — N levels deep */ | |
var request = require('request'); | |
var url1='http://httpbin.org/', url2=url1, url3=url1, url4=url1; | |
function foo(finalCallback) { | |
request.get(url1, function(err1, res1) { | |
if (err1) { return finalCallback(err1); } |
By: @BTroncone
Also check out my lesson @ngrx/store in 10 minutes on egghead.io!
Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!
Table of Contents
var normalize = System.normalize; | |
System.normalize = function (name, parentName, parentAddress) { | |
console.log("normalize: " + JSON.stringify({ | |
name: name, | |
parentName: parentName, | |
parentAddress: parentAddress | |
})); | |
return normalize.call(this, name, parentName, parentAddress); | |
}; |
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
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
.wrap { | |
width: 100%; | |
border: 1px brown solid; | |
font-size: 30px; | |
} | |
.resizable { | |
width: 50%; | |
height: 120px; | |
padding: 0px; | |
background-color: coral; |