Brief History of
Block-scoped binding constructs
var x = 1
if (true) {
var x = 2
console.log(x)
// 2
}
console.log(x) // 2
let x = 1
if (true) {
let x = 2
console.log(x)
// 2
}
console.log(x) // 1
Single-assignment
const foo = 'bar'
foo = 'baz' // throws an TypeError
const animal = { name: 'dog' }
animal.name = 'cat' // 'cat'
Shorter functions
const arr = [ 1, 2, 3 ]
arr.map(function (e) {
return e + 1
})
arr.map((e) => {
return e + 1
})
arr.map(e => e + 1)
No binding of this
this.name = 'robin'
const somebody = {
name: 'ben',
arrowGetName: () => this.name,
regularGetName: function() { return this.name }
}
console.log(somebody.arrowGetName()) // 'robin'
console.log(somebody.regularGetName()) // 'ben'
function Animal (name) {
this.name = name
}
Animal.prototype.speak = function () {
console.log(this.name + ' makes some noise')
}
Animal.prototype.jump = function () {
console.log(this.name + ' jumps')
}
function Cat (name) {
Animal.call(this, name)
}
Cat.prototype = Object.create(Animal.prototype)
Cat.prototype.speak = function () {
console.log(this.name + ' meows')
}
var cat = new Cat('Tigger')
cat.speak() // 'Tigger meows'
cat.jump() // 'Tigger jumps'
class Animal {
constructor(name) {
this.name = name
}
speak () {
console.log(this.name + ' makes some noise')
}
jump () {
console.log(this.name + ' jumps')
}
}
class Cat extends Animal {
speak () {
console.log(this.name + ' meows')
}
}
const cat = new Cat('Tigger')
cat.speak() // 'Tigger meows'
cat.jump() // 'Tigger jumps'
// foobar.js
const foo = 'foo'
export default foo
export const bar = 'bar'
// main.js
import foo, { bar } from 'foobar.js'
React.createElement(
'a',
{
href: 'https://google.com/'
},
'GOOGLE'
)
<a href='https://google.com/'>GOOGLE</a>
class MyComponent extends React.Component {
render() {
return (
<h1>Please click the button</h1>
// render button
<button>Click Me</button>
);
}
}
constructor(props) {
super(props);
this.state.name = '123'
}
render() {
return (
<div>
<h1>{`Hello! ${this.state.name}`}</h1>
</div>
);
}
constructor(props) {
super(props);
this.setState({
value: 'Foo'
})
}
componentDidMount() {
this.setState({
value: 'Foo'
})
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { greeting: 'Hello World!' }
}
render() {
<MyCustomComponent
id='custom_component'
class='components'
>
<h1>greeting</h1>
</MyCustomComponent>
}
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { greeting: 'Hello <br/> World!' }
}
render() {
<MyCustomComponent>
<h1>{ this.state.greeting }</h1>
</MyCustomComponent>
}
}
class Demo extends React.Component {
handleChange(event) {
this.setState({ foo: 'foo' })
}
render() {
return (
<input onChange={this.handleChange} />
);
}
}
class Demo extends React.Component {
render() {
this.setState({ name: 'Poan' });
return (
<div>`Miss ${name} so much...`</div>
);
}
}
componentDidMount() {
console.log(this.state.count) // count == 0
this.setState({ count: ++count });
console.log(this.state.count)
}
Single source of truth
State is read-only
Changes are made with pure functions
Refs
A module bundler for modern JavaScript applications
Builds a dependency graph of modules, then packages them into a small number of bundles
Webpack vs Browserify
Guaranteed immutability
Performance (Structural sharing)
Issues
Difficult to interoperate with (e.g. get(), getIn())
toJS() API might degrade app performance if not using properly
React Component Testing
Redux-related Testing
Action Creator Testing
Reducer Testing
Helpers/Libraries Testing