ES6

  • Arrow function

Arrow function finishes 2 jobs: simplify the function syntax and pass the this to inside the function.

// They are equivalent.
function (a, b) { return a * b; }
(a, b) => { return a * b; }
(a, b) => a * b

// No bind or alias is needed for getting this.
$('.current-time').each(function () {
  setInterval(() => $(this).text(Date.now()), 1000);
});

When we need to use that in class, we need to turn on the stage1 option/ plugin.

  • Destructing Assignment
// Get the assignment from this.props with the same name variables.
const {variable1, variable2} = this.props
  • Template literal
// Using back-tick you can enclose a string with expressions.
let template = `This is the template for ${appName}`;

  • Classes We will use class extends keyword instead of React.createClass in ES6 flavor. And we also need the constructor to initialise the value.

  • Modualzie

import and export is the reserved keyword in ES6, it help you modularise javascript.

  • Transpile Babel Use Babel to convert your ES6 features to help the unsupported browsers understand it.

  • let, const, var

    • let is block scoped, the life cycle is with {}
    • const is block scoped, cannot be changed.
    • var is scoped to the close of the function.
    • check this Codepen

React

  • JSX is a simplified syntax to define the html markup and data-binding, but it’s optional to use React. We could use browserify to compile that to JS for production.
// This is a simple sample from official website.
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
// JSX: custom html tag and props.
ReactDOM.render(<HelloMessage name="John" />, mountNode);
  • lifecycle
    • componentInitial
    • componentWillMount: Good entry point to set the initial variable.
    • componentDidMount: Run once after the component mount(e.g start the timer, fetch data using ajax)
    • componentWillUpdate
    • componentDidUpdate Don’t add setState() here, otherwise it will cause the infinite loop.
    • componentWillUnmount Run once before the he component unmount (e.g. delete the timer)
    • componentDidUnmount The object will be rendered again only when we use setState() function.
  • Reference to component Basically react will keep the component instance updated using the data flow. But it also provide a reference to the instance using ref.

Reference call back happen when the elements mount.

P.S. ref string attribute is going to deprecated at some point of future, reference callback is recommended.

  // We could use string as reference and refer to that later in the `componentDidMount()` function. 
  render() {
  return (<React3>
  <group ref='group' />
  </React3>)
  }
  
  componentDidMount() {
    this.refs.group.add(myMesh);
  }

  • uncontrolled components

  • special attributes:

Flux and Redux

The only parent component have the state, and pass state to children component via property.

Browserify

Check it in Gulp Setup

Babel

It’s the transpile helping convert the ES6 syntax to normal javascript, so make the browser understand ES6 generated scripts.

Webpack

Just a helpful packaging (bundler) tool to minify and chunk our JS along with Babel. Webpack config file is webpack.config.js