e-schultz

export enum SomeActions {
    AGE_ACTION = 'AGE_ACTION',
    NAME_ACTION = 'NAME_ACTION',
    LASTNAME_ACTION = 'LASTNAME_ACTION'
}
interface Age extends Action {
    type: SomeActions.AGE_ACTION;
    payload: {
        age: number;
    }

e-schultz

e-schultz

• https://www.learnrxjs.io/ - This is one of my more frequently used resources, links to jsbin/jsfiddle with examples = handy to play around with ideas
• http://reactive.how/ - haven't used this as much yet (recently came across it) - nice animations / explinations of RxJS concepts
• https://twitter.com/BenLesh - follow BenLesh on twitter
• https://medium.com/@benlesh/latest - and on medium
• https://github.com/redux-observable/redux-observable - read the source code, and unit tests - I learned quite a bit digging through this
• Updated

e-schultz

Another way we can approach passing data down into Vue, is instead of passing in an object like

<SomeComponent :contact="contact"/>

and in SomeComponent needing to do

{{contact.firstName}}

e-schultz

// Source code licensed under Apache License 2.0. 
// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)

window.demoDescription = "A retro-style dazzling effect created by a grid whose cells change color and size based on their distances to the pointer.";

Pts.quickStart( "#pt", "#123" );

//// Demo code starts (anonymous function wrapper is optional) ---

(function() {

e-schultz

JavaScript does not allow you to overload a function

function add(a: number[], b: number[]): number {
    let sum = (acc,val)=>acc+val;
    return a.reduce(sum,0) + b.reduce(sum,0)
}
function add(a: string, b: string) : string{
    return a + b;
}

e-schultz

When teaching React, should you cover Hooks first or classes?

I've been running a 3-4 day course covering fundamental JavaScript and React. The first day or so is focused on JavaScript fundamentals and new features of ES2015.

• let, var, const
• destructuring
• functions, arrow functions, scope, context
• arrays / array methods - map, filter, reduce

Basically, the material covered in JavaScript - The React Parts

e-schultz

let divJoyExport = {
  data: [
    {
      type: "instance",
      subtype: "app-instance",
      componentId: "app",
      id: 4010090
    }
  ],
  components: [

e-schultz

export default SearchComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: []
    }
  }
  componentDidMount() {
    this.query(this.props.id)

e-schultz

export default SomeComponent = ({id}) => {
  let [results, setResults] = useState([]);
  useEffect(()=>{
    fetch(`/some/url/${id}`)
      .then(r=>r.json())
      .then(r=>setResults(r))
  },[id])
}