technical

Training TOC proposal

a. Basic concepts

• ES6
  • map.
  • assign prop var.
  • Destructuring.
  • Spread operator.
  • Currying.
• Immutability
  • Definition
  • Why
  • Sample
• Redux
  • Diagram
  • Why
  • Progressive approach
  • Basic Rules
  • Async actions

b. Samples

• Track one
  • 00 React ES6 Basic
  • 01 Redux ES6 Lobby
  • 02 Redux ES6 Chat
  • 03 Reux ES6 Selector (filter list)
  • 04 Redux ES6 Unit testing
• Track two (typescript plus progressive approach), just only lobby
  • Project pure page + viewModel
  • Then go for API (plus model api)
  • Finally go for Redux

Sample list

00 ES6-basic

01 Redux-inf

02 action

03 async-actions

04 socket

05 setup-jest

06 test-reducer

07 test-action

08 test-async-action

09 test-saga

10 test-container

11 refactor-structure

12 redux-actions

13 typescript

Project structure

A. Simple React Application

Open points:

• If we go for ES6, how do we create ViewModels?

.
├── ./config
│   ├── ./config/webpack.config.base.js
│   ├── ./config/webpack.config.dev.js
│   └── ./config/webpack.config.prod.js
├── ./package.json
└── ./src
    ├── ./src/api
    │   ├── ./src/api/chat.js
    │   ├── ./src/api/index.js
    │   └── ./src/api/lobby.js
    ├── ./src/common
    ├── ./src/pages
    │   ├── ./src/pages/chat
    │   │   ├── ./src/pages/chat/chat.component.jsx
    │   │   ├── ./src/pages/chat/chat.container.jsx
    │   │   └── ./src/pages/chat/index.js
    │   └── ./src/pages/lobby
    │       ├── ./src/pages/lobby/index.js
    │       ├── ./src/pages/lobby/lobby.component.jsx
    │       └── ./src/pages/lobby/lobby.container.jsx

B. Tutorial Redux structure (comment advantages drawbacks)

This can be ok to get started on tutorial mode but comment drawbacks

.
├── ./config
│   ├── ./config/webpack.config.base.js
│   ├── ./config/webpack.config.dev.js
│   └── ./config/webpack.config.prod.js
├── ./package.json
└── ./src
    ├── ./src/actions
    │   └── ./src/actions/index.js
    ├── ./src/api
    │   ├── ./src/api/chat.js
    │   ├── ./src/api/index.js
    │   └── ./src/api/lobby.js
    ├── ./src/common
    ├── ./src/pages
    │   ├── ./src/pages/chat
    │   │   ├── ./src/pages/chat/chat.component.jsx
    │   │   ├── ./src/pages/chat/chat.container.jsx
    │   │   └── ./src/pages/chat/index.js
    │   └── ./src/pages/lobby
    │       ├── ./src/pages/lobby/index.js
    │       ├── ./src/pages/lobby/lobby.component.jsx
    │       └── ./src/pages/lobby/lobby.container.jsx
    └── ./src/reducers
        └── ./src/reducers/index.js

Move to redux actions

Here we will show the solution already implemented time permitting we will go for it coding it.

D. Pods evolution