Difference between revisions of "Modern JavaScript"
From Jon's Wiki
(→React) |
|||
Line 64: | Line 64: | ||
document.getElementById("container") | document.getElementById("container") | ||
); </nowiki> | ); </nowiki> | ||
+ | |||
+ | Redux: for propagating "state" around. | ||
+ | |||
+ | React has one-way data binding, like Angular 2 and unlike Angular 1.x (two-way). |
Revision as of 02:49, 20 June 2016
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 <div onClick={this.addCounter}> {this.state.counter} </div>; } addCounter(e){ this.setState({ counter: this.state.counter + 1 }) } } ReactDOM.render( <MyPage/>, document.getElementById("container") );
Redux: for propagating "state" around.
React has one-way data binding, like Angular 2 and unlike Angular 1.x (two-way).