README-RU.md

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

README in English

README in Chinese

План, чтобы стать React-разработчиком в 2018 году:

Ниже вы можете найти схему, показывающую пути, которые могут привести, а также библиотеки, которые вам нужно изучить, чтобы стать разработчиком React. Я сделал эту схему в качестве подсказки для всех, кто спрашивает меня: «Что мне стоит изучить ещё в качестве React-разработчика?»

Предупреждение

Цель этого плана — дать вам общее представление о том, как стать React-разработчиком. Этот план поможет вам, если вы запутались, что изучать дальше, вместо того, чтобы поощрять вас выбирать что-то модное и популярное. Вам стоит постепенно понимать, почему один инструмент лучше подходит для определённых ситуаций, чем другой, и не забывать, что модный и популярный инструмент не всегда означает, что он лучше всего подходит для работы.

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

Ресурсы

1. Основы
   1. HTML
      • Изучить основы HTML
      • Сделать несколько страниц в качестве упражнения
   2. CSS
      • Изучить основы CSS
      • Стилизовать страницы, созданные в предыдущем шаге
      • Создать страницу с использованием сеток и флексбокса
   3. Основы JS
      • Познакомиться с синтаксисом
      • Изучить основные операции на DOM
      • Изучить механизмы, специфичные для JS (Поднятие, всплытие событий, прототипное наследование)
      • Выполнить некоторые AJAX-вызовы (XHR)
      • Изучить новые возможности (ECMAScript 6+)
      • Дополнительно познакомиться с библиотекой jQuery
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. Вспомогательные библиотеки для форм
   • Redux Form
   • Formik
   • Formsy
   • Final Form
9. Маршрутизация
   • React-Router
   • Router5
   • Redux-First Router
   • Reach Router
10. API-клиенты
    1. REST
       • Fetch
       • SuperAgent
       • axios
    2. GraphQL
       • Apollo
       • Relay
       • urql
11. Утилитарные библиотеки
    • Lodash
    • Moment
    • classnames
    • Numeral
    • RxJS
    • ImmutableJS
    • Ramda
12. Тестирование
    1. Модульное тестирование
       • Jest
       • Enzyme
       • Sinon
       • Mocha
       • Chai
       • AVA
       • Tape
    2. Сквозное (end-to-end) тестирование
       • Selenium, Webdriver
       • Cypress
       • Puppeteer
       • Cucumber.js
       • Nightwatch.js
    3. Интеграционное тестирование
       • Karma
13. Локализация
    • React Intl
    • React i18next
14. Отрисовка на стороне сервера
    • Next.js
    • After.js
    • Rogue
15. Генератор статических сайтов
    • Gatsby
16. Интеграция с бэкенд-фреймворками
    • React on Rails
17. Разработка мобильных приложений
    • React Native
    • Cordova/Phonegap
18. Разработка десктопных приложений
    • Proton Native
    • Electron
    • React Native Windows
19. Виртуальная реальность
    • React 360

Резюме

Если вы считаете, что план может быть улучшен, пожалуйста, создайте пулреквест с любыми обновлениями и отправляйте любые ишью, если есть вопросы и предложения. Кроме того, я продолжу улучшать его, так что, возможно, стоит отслеживать изменения, происходящие в этом репозитории, либо заглянуть в него спустя некоторое время.

Участие в проекте

План создан с помощью онлайн-инструмента Draw.io. Файл проекта можно найти в каталоге /src. Чтобы изменить его, откройте draw.io, нажмите Open Existing Diagram и выберите файл xml с проектом. Он откроет схему, обновите её, загрузите и обновите изображения в readme и создайте PR (экспортируйте как png).

• Открыть пулреквест с улучшениями
• Обсуждайте новые идеи в ишью
• Расскажите об этом другим

Лицензия