YOBR

DEMO (если не видно данных, то нужно выполнить reset-запрос к API)

Статус

В мастере Альфа-версия, релиз тут.

TL;DR

Тут можно оценить, как я применяю следующие инструменты: react, typescript, prettier, styled-jsx, ant-design, react-router, redux, redux-thunk, redux-saga, ducks-pattern + redux-act, reselect, feathers, axios, css-анимацию, загрузку данных через API, доменную организацию компонентов, функциональные компоненты, промисы, генераторы, мемоизацию, спреды, оператор расширения, деструкцию, стрелочные функции, шаблонные строки, декораторы, динамический импорт, настройки VSCode и WebStorm.

Setup

• Установить: nodejs, yarn, git.

• Установить typescript:

$ npm install -g typescript

• Клонировать репозиторий:

$ git clone [email protected]:comerc/yobr.git

• Опционально, для управления версиями node, удобно использовать nvm:

$ cd ~/yobr
$ nvm use

• Запустить:

$ cd ~/yobr
$ yarn install
$ yarn build
$ yarn start:server

Development

$ cd ~/yobr
$ yarn start

Абсолютные пути в импорте

Работают относительно папки src:

import MyComponent from 'components/MyComponent'

WebStorm

Для папки src в контекстом меню выполнить: Mark Directory as > Resource Root.

VSCode

Дополнительные настройки не требуются (установлено расширение Path-Intellisense).

Форматирование кода

Выполняется автоматически при коммите в git, благодаря Prettier - все настройки в package.json:

{
  "devDependencies": {
    "husky": "^0.13.3",
    "lint-staged": "^3.4.1",
    "prettier": "^1.3.1",
  },
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --print-width 120 --single-quote --trailing-comma all --no-semi --write",
      "git add"
    ]
  }
}

VSCode Emmet Helper

$ npm install vscode-emmet-helper -g

Шрифт Fira Code

Установить для применения лигатур.

Общие настройки IDE

WebStorm

Выполнить 'Import Settings...' из ./webstorm.jar

VSCode

Чтобы выполнить импорт настроек редактора, нужно установить Settings Sync, потом [Shift]+[Alt]+[D] и ввести ключ: 5166716632eec0d75a90942631a1360e

Публикации

• 10 шагов настройки Create React App + TypeScript + Ant-Design
• Redux Business Logic
• Интеграция React и DataTables (jQuery)
• Быстрый старт на React Native
• Загрузка данных из REST API
• Способы отладки JS на клиенте
• Функциональные компоненты
• Flow + tcomb = типизированный JS
• Организация компонентов в проекте
• Блог а-ля Хабр, выбор платформы
• React Native — одного JS мало

Литература

• Введение в JavaScript итераторы на ES6
• Редакс в реальной жизни
• Understanding Redux Middleware
• SSR with Create React App v2

Визуализация изменений в git

gource \
--path ./ \
--seconds-per-day 0.15 \
--title "YOBR" \
-1280x720 \
--file-idle-time 0 \
--auto-skip-seconds 0.75 \
--multi-sampling \
--stop-at-end \
--highlight-users \
--hide filenames,mouse,progress \
--max-files 0 \
--background-colour 000000 \
--disable-bloom \
--font-size 24 \
--output-ppm-stream - \
--output-framerate 30 \
-o - \
| ffmpeg \
-y \
-r 60 \
-f image2pipe \
-vcodec ppm \
-i - \
-vcodec libx264 \
-preset ultrafast \
-pix_fmt yuv420p \
-crf 1 \
-threads 0 \
-bf 0 \
./output.mp4

Модификация tsconfig.json из CRA-TS

{
  "compilerOptions": {
+   "allowSyntheticDefaultImports": true,
+   "baseUrl": "src",
-   "jsx": "react",
+   "jsx": "preserve",
  },
  "exclude": [
+   "config-overrides.js",
  ]
}

Модификация tslint.json из CRA-TS

-   "no-any": true,
+   "no-any": false,
-   "no-console": [true, "log", "error", "debug", "info", "time", "timeEnd", "trace"],
+   "no-console": [false],
-   "semicolon": [true, "always"],
+   "semicolon": [false],