Redux: Intellitrace for Javascript

Tutorial: https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree

Alternate: https://channel9.msdn.com/blogs/Marron/Time-Travel-Debugging-for-JavaScriptHTML

Angular Support: https://github.com/wbuchwalter/ng2-redux

Advertisements

Azure Site Tips

  1. Jump from site to Online Code Editing
    1. For this, simply add .scm before .azurewebsite in the site URL and then /dev at the end
    2. note that the changes you make to the site are auto saved and get deployed automagically. In case you have non static assets, you can connect to VSTO (Visual Studio Team Svc) for free and setup automatic build and deployment
  2. Jump to Kudu Tools for your site, simply add .scm before .azurewebsite in the site URL

PS: Get a free azure site by signing up on : aka.ms/devessentials

Egghead – React Lessons

REACT Egghead Notes

  • A react component JSX has to have only 1 top level tag, so wrap multiple tags in div etc.
  • in JSX, use className instead of class attribute
  • Every component can be given a ref attribute to identify it
  • Props are for unchanging values, but if a value is expected to change, use state, and methods like initialState to set it
  • Components have owner ownee relationship whereby the parent component can access child
  • Datatypes can be assigned to properties and then if a prop is expecting int, pass it value from JSX using {} eg. intVal={8}
    this.props is like $scope in JSX
  • React Mixins are classes that contain common functionality to be shared by components and then these components inherit the Mixin. It’s like inheritance
  • For custom attributes in JSX, use the data-customAttr syntax
  • Can’t do if else in JSX so use the ?: operator instead
  • JSX precompiler comes in npm install -g react-tools
    in console, say: jsx dev build –no-cache-dir –watch
  • React comes with AddOns in form of Mixins that we can use. For this, change script src from react to react-with-addOns.
  • Use react’s inbuild mixins for things like 2 way binding, called ReactLink, using valueLink={this.linkState(‘twoWayBoundProp’)}.
  • Then use at another place in JSX as this.state.twoWayBoundProp
  • React is all about rendering stuff to the DOM, using react.render(‘<h1>’, document.body). But to reuse this html, we can extract it in a component : react.createClass(({render: <h1>})
  • You can inject initial state in a component using ‘getInitialState’ and then use it in html like so : this.state. But is the value is coming from the parent component, use this.props
  • To update the self and child components anytime state changes, call this.setState() everytime you change this.props
  • New in react 0.12:
    • transferPropsTo is used to automatically apply any props from the user of component to the component without the component asking for it explicitly
      • Eg. in <Child> component’s render method if we say:
      • render: function(){return this.transferPropsTo(<h1>Test</h1>)}
      • Then in parent, say <Child className=”red”>
      • Then this className is applied to child automatically
      • The syntax for this is now changed to the “JSX Spread Operator”: function(){return <h1 {…this.props}>Test</h1>}
    • React components are now called Elements
    • Can’t call react element directly like react.render(APP), so use Factory instead: react.render(react.createFactory(APP)()