dashawebb / react-roadmap

План развития React-разработчика

План изучения

Ресурсы

1. Основы
   1. HTML
      • Изучить основы HTML
      • Сделать несколько страниц в качестве упражнения
   2. CSS
      • Изучить основы CSS
      • Стилизовать страницы, созданные в предыдущем шаге
      • Создать страницу с использованием сеток и флексбокса
   3. Основы JS
      • Познакомиться с синтаксисом
      • Изучить основные операции на DOM
      • Изучить механизмы, специфичные для JS (Поднятие, всплытие событий, прототипное наследование)
      • Выполнить некоторые AJAX-вызовы (XHR)
      • Изучить новые возможности (ECMAScript 6+)
2. Общие навыки для разработки
   1. Изучить Git, создать несколько репозиториев на GitHub, поделиться своим кодом с другими
   2. Узнать о протоколе HTTP(S), методами запроса (GET, POST, PUT, PATCH, DELETE, OPTIONS)
   3. Не бояться использовать Google, посмотреть курс по продвинутому использованию Google
   4. Познакомиться с терминалом, настроить оболочку (bash, zsh, fish)
   5. Прочитать несколько книг про алгоритмы и структуры данных
   6. Прочитать несколько книг по паттернам проектирования
3. Изучить официальный сайт React
4. Познакомиться с инструментами, которые вы будете использовать
   1. Менеджеры пакетов
      • npm
      • yarn
      • pnpm
   2. Выполнение задач
      • npm-скрипты
      • gulp
   • Webpack
   • Rollup
   • Parcel
5. Стилизация
   1. CSS-препроцессоры
      • Sass/CSS
      • PostCSS
      • Less
      • Stylus
   2. CSS-фреймворки
      • Bootstrap
      • Materialize, Material UI, Material Design Lite
      • Bulma
      • Semantic UI
   3. Архитектура CSS
      • BEM
      • CSS Modules
      • Atomic
      • OOCSS
      • SMACSS
      • SUITCSS
   4. CSS в JS
      • Styled Components
      • Radium
      • Emotion
      • JSS
      • Aphrodite
6. Управление состоянием
   1. Состояние компонента/Context API
   2. Redux
      1. Асинхронные действия (побочные эффекты)
         • Redux Thunk
         • Redux Better Promise
         • Redux Saga
         • Redux Observable
      2. Библиотеки-помощники
         • Rematch
         • Reselect
      3. Постоянное хранение данных
         • Redux Persist
         • Redux Phoenix
      4. Redux Form
   3. MobX
7. Проверка типов
   • PropTypes
   • TypeScript
   • Flow
8. Вспомогательные библиотеки для форм
   • Final Form
   • Redux Form
   • Formik
   • Formsy
9. Маршрутизация
   • React-Router
   • Router5
   • Redux-First Router
   • Reach Router
10. REST
    • Fetch
    • SuperAgent
    • axios
11. Визуализация
    • D3
12. Утилитарные библиотеки
    • Lodash
    • Moment
    • classnames
    • Numeral
    • RxJS
    • ImmutableJS
    • Ramda
13. Тестирование
    1. Модульное тестирование
       • Jest
       • Enzyme
       • Sinon
       • Mocha
       • Chai
       • AVA
       • Tape
    2. Сквозное (end-to-end) тестирование
       • Selenium, Webdriver
       • Cypress
       • Puppeteer
       • Cucumber.js
       • Nightwatch.js
    3. Интеграционное тестирование
       • Karma
14. Локализация
    • React Intl
    • React i18next
15. Отрисовка на стороне сервера
    • Express
    • Next.js
    • After.js
    • Rogue