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

  1. A Redux reducer
  2. A React component decorator
  3. A <Field /> component
  4. Action Creators

Redux Saga

  1. Manages side-effects
  2. Uses ES6 generators
  3. Complex flow control
  4. Easily tested

Rock on! 🤘🏻

ES6 + React + Redux

By webguyian

ES6 + React + Redux

  • 772