ES6 + React + Redux = ❤️
ES6 Features
Modules
Classes
Constants
Block Scoping
Arrow Functions
Template Strings
Destructuring Assignment
Enhanced Object Properties
Number + String + Object Methods
Default + Rest + Spread
Promises
Generators
Iterators
For...Of
Typed Arrays
Map + Set
Symbols
Math Methods
Extended Literals
Enhanced RegExp
Internationalization
Proxies
Reflect
Tail Calls
Modules
Classes
Constants
Block Scoping
Arrow Functions
Template Strings
Destructuring Assignment
Enhanced Object Properties
Number + String + Object Methods
Default + Rest + Spread
Promises
Generators
React + JSX
<h1>Hello React!</h1>
React.createElement("h1", null, "Hello React!");
React + JSX
<div className="container">
<p>This is <strong>React</strong>!</p>
</div>React.createElement(
"div",
{ className: "container" },
React.createElement(
"p",
null,
"This is ",
React.createElement(
"strong",
null,
"React"
),
"!"
)
);Redux
a predictable state container
Redux Architecture
Redux Architecture
Redux Form
- A Redux reducer
- A React component decorator
- A <Field /> component
- Action Creators
Redux Saga
- Manages side-effects
- Uses ES6 generators
- Complex flow control
- Easily tested