Modern JavaScript

Package managers

Why do we need a package manager? Atomicity, repeatability, compartmentalisation. There are a options: npm, bower; but they're often conflated into apt-get, composer (PHP projects), pip, gems. Bower devs are planning to EOL it and replac it with npm.

mkdir new-project
cd new-project
npm init
npm install left-pad
ls
ls node_modules
npm install left-pad --save  # adds deps to package.json
rm node_modules -rf
npm install  # installs dependencies locally.

ES6

ECMAScript 6. ECMA = European Computer Manufacturers' Association. Microsoft used ECMA to rubber-stamp their "standards", since ISO and IETF actually required some standardisation and collaboration effort.

History

Sep 1995: Netscape releases Mocha/LiveScript/JavaScript
Jun 1997: ECMA Script 1
Jun 1998: ECMA Script 2
Dec 1999: ECMA Script 3
Oct 2008: ECMA Script 4 never published. Microsoft not interested in advancing ECMA Script, due to Silverlight.
Dec 2009: ECMA Script 5: Microsoft finally gives up after 10+ years of resisting advances to JavaScript. Adds map, filter, reduce. Browsers today (Q2 2016)
Jun 2015: ECMA Script 6: Not yet implemented, but can use babeljs to "compile" it into ES5 code.

React

JSX - markup in the Javascript, e.g.

import ReactDOM from 'react-dom';
ReactDOM.render(
  <h1>Hello world!</h1>,
  document.getElementById("container")
);

More interesting:

import React from 'react';
import ReactDOM from 'react-dom';

class MyPage extends React.Component {
  constructor(props){
    super(props);
    this.addCounter = this.addCounter.bind(this);
    this.state = {counter:1};
  }
  render(){

return

             {this.state.counter}

;

  }
  addCounter(e){
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

ReactDOM.render(
  <MyPage/>,
  document.getElementById("container")
);