JavaScript
ES6, React, Redux
ES6
ECMAScript 6
Block Scope
ES5:
function bar(foo) {
if (foo) {
var test = "hello world";
}
// "hello world"
console.log(test);
}
ES6:
function bar(foo) {
if (foo) {
let test = "hello world";
}
// throws exception
console.log(test);
}
Const
function bar(foo) {
const test = "hello world";
if (foo) {
// Uncaught TypeError: Assignment to constant variable.
test = "hi world";
}
}
Arrow Functions
ES5:
numbers.map(function(number) {
return number * 2;
});
ES6:
numbers.map(number => number * 2);
Arrow Functions
ES5:
numbers.map(function(number) {
return number * 2;
}.bind(this));
ES6:
numbers.map(number => number * 2);
Template Strings
ES5:
function getHTML(className) {
return '<div class="' + className + '">Hello World</div>';
}
ES6:
function getHTML(className) {
return `<div class="${className}">Hello World</div>`;
}
Spread Operator
Math.max(1, 8, 2, 5); // 8
ES5
const numbers = [1, 8, 2, 5];
Math.max(numbers[0], numbers[1], numbers[2], numbers[3]); // 8
ES5
const numbers = [1, 8, 2, 5];
Math.max.apply(Math, numbers); // 8
ES6
const numbers = [1, 8, 2, 5];
Math.max(...numbers); // 8
Destructuring
var myObject = {
a: 'foo',
b: 'bar',
c: 'hello'
};
ES5:
var a = myObject.a;
var b = myObject.b;
var c = myObject.c;
ES6:
const { a, b, c} = myObject;
But wait...there's more!
- Default params
- Property shorthand
- Computed property names
- Array matching
- Import/export modules
- Classes
- Symbols
- Promises
- ... and more!
Refactoring code like...
React
React is a declarative, efficient, and flexible JavaScript library for building user interfaces
HTML Input
<input placeholder="Enter your name" />
Custom Input?
0
<inputCount placeholder="Enter your name" />
React Component
class InputCount extends React.Component {
render() {
return (
<input placeholder="Enter your name" />
);
}
}
<InputCount />
React Component
class InputCount extends React.Component {
constructor() {
}
render() {
return (
<input placeholder="Enter your name" />
);
}
}
React Component
class InputCount extends React.Component {
constructor() {
this.state = { count: 0 };
}
render() {
return (
<input placeholder="Enter your name" />
);
}
}
React Component
class InputCount extends React.Component {
constructor() {
this.state = { count: 0 };
this.handleKey = this.handleKey.bind(this);
}
handleKey(event) {
}
render() {
return (
<input
placeholder="Enter your name"
onkeyup={this.handleKey}
/>
);
}
}
React Component
class InputCount extends React.Component {
constructor() {
this.state = { count: 0 };
this.handleKey = this.handleKey.bind(this);
}
handleKey(event) {
this.setState({ count: event.target.value.length });
}
render() {
return (
<input
placeholder="Enter your name"
onkeyup={this.handleKey}
/>
);
}
}
React Component
render() {
return (
<div>
<input
placeholder="Enter your name"
onkeyup={this.handleKey}
/>
<span>{this.state.count}</span>
</div>
);
}
React Component
<InputCount />
0
React Component
render() {
return (
<div>
<input
placeholder="Enter your name"
onkeyup={this.handleKey}
/>
<span>{this.state.count}</span>
</div>
);
}
React Component
render() {
return (
<div>
<input
placeholder={this.props.defaultText}
onkeyup={this.handleKey}
/>
<span>{this.state.count}</span>
</div>
);
}
React Component
<InputCount defaultText="Enter your phone number" />
0
Reusable Component
<InputCount defaultText="Enter your name" />
0
<InputCount defaultText="Enter your phone number" />
0
<InputCount defaultText="Enter your address" />
0
Redux
Redux is a predictable state container for JavaScript apps
Dispatch Action
function selectColor(color) {
return {
type: "SELECT_COLOR",
color: color
};
}
this.props.dispatch(selectColor(color));
Reducer
function colorReducer(state, action) {
switch (action.type) {
case "SELECT_COLOR":
return Object.assign({}, state, {
color: action.color
});
default:
return state;
}
}
Redux Example
Component 1
Component 2
Component 3
Redux Core Concepts
- Single source of truth
- Read only state
- Changes are made with pure functions
Getting Started
Extremely easy to set up
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
npm run build