React Developer и путь его развития в 2019 году

Направление «React Developer» в прошлом году достигло пика популярности и не намерено снижать темпы. Так давайте же рассмотрим путь React-развития.

Самыми популярными JS-фреймворками на сегодняшний день являются React, Angular и Vue. По данным, собранным сайтом StackOverflow React выбирают 67%, а Angular 42% пользователей. У каждого продукта есть слабые и сильные стороны, но React – действительно более правильный выбор:

• имеет низкий порог вхождения;
• простой переход с другого фреймворка;
• элементарное обновление, обратная совместимость и переход на другую версию (в Angular, например, «напрямую» не получится перейти с 2.0 на 3.0);
• идеальный выбор для крупных проектов.

React – JavaScript-библиотека, используемая в Facebook и Instagram. Эти два гиганта активно участвуют в улучшении библиотеки, поэтому интерес к ней еще долго не угаснет. Высокая производительность продуктов, написанных на React, достигается с использованием Virtual DOM, удобство использования гарантируется изоморфностью, ну и про повторное использование кода в различных проектах не стоит забывать.

React Developer начинает движение

Отправные точки в развитии

А теперь подробнее разберем ключевые элементы схемы, и что необходимо изучить на каждом из этапов.

I. Основы

1. HTML

• изучить основы HTML;
• сделать несколько страниц в качестве упражнения.

2. CSS

• создать страницу с использованием сеток и флексбокса;
• стилизовать страницы.

3. Основы JS

• познакомиться с синтаксисом;
• изучить основные DOM-операции;
• изучить JS-механизмы (Hoisting, Event Bubbling, Prototyping);
• потренировать AJAX-вызовы (XHR);
• изучить новые возможности ECMAScript 6+;
• вспомнить / познакомиться с jQuery.

II. Общие навыки для разработки

• создать несколько репозиториев, расшарить свой код;
• изучить HTTP(S) и методы (GET, POST, PUT, PATCH, DELETE, OPTIONS);
• научиться пользоваться поиском Google;
• поюзать терминал и изучить оболочку (bash, zsh, fish);
• почитать про алгоритмы, структуры данных и паттерны проектирования;

III. Изучить официальный сайт React
IV. Стиль

1. Архитектура CSS

• SMACSS
• OOCSS
• Atomic
• CSS Modules
• BEM
• SUITCSS

2. CSS-фреймворки

• Semantic UI
• Bulma
• Materialize, Material UI
• Bootstrap

3. CSS-препроцессоры

• Less
• PostCSS
• Sass/CSS
• Stylus

4. CSS в JS

• Styled Components
• Radium
• Emotion
• JSS
• Aphrodite

V. Познакомиться с популярными инструментами разработки для React Developer

1. Выполнение задач

• npm-скрипты
• gulp
• Parcel
• Webpack
• Rollup

2. Менеджеры пакетов

• pnpm
• npm
• yarn

VI. Управление состоянием

1. Состояние компонента / Context API
2. Redux

3. Асинхронность
   • Redux Thunk
   • Redux Better Promise
   • Redux Saga
   • Redux Observable

4. Библиотеки-помощники
   • Rematch
   • Reselect

5. Хранение данных
   • Redux Persist
   • Redux Phoenix
   • Redux Form

6. MobX

VII. Маршрутизация

• React-Router
• Router5
• Redux-First Router
• Reach Router

VIII. Типизация

• PropTypes
• TypeScript
• Flow

IX. Наборы полезных функций

• Lodash
• Moment
• classnames
• Numeral
• RxJS
• ImmutableJS
• Ramda

X. Формы

• Formsy
• Redux Form
• Final Form
• Formik

XI. Интернационализация

• React i18next
• React Intl

XII. API-клиенты

• Fetch
• Relay
• axios
• urql
• Apollo
• SuperAgent

XIII. Разработка десктопных приложений

• React Native Windows
• Proton Native
• Electron

XIV. Разработка мобильных приложений

• React Native
• Cordova / Phonegap

XV. Серверная часть

• Next.js
• After.js
• Rogue

XVI. Тестирование

1. Модульное тестирование
   • Sinon
   • Jest
   • Enzyme
   • Tape
   • Mocha
   • AVA
   • Chai

2. End-to-end тестирование
   • Selenium, Webdriver
   • Puppeteer
   • Cypress
   • Nightwatch.js
   • Cucumber.js

XVII. Виртуальная реальность

1. React 360

XVIII. Бэкенд-фреймворки

1. React on Rails

XIX. Генераторы

1. Gatsby для React Developer

Другие материалы по теме:

• Как кодить на JavaScript в 2019? Тренды, тенденции, предсказания
• Объектная модель документа: что такое DOM и чем не является?
• Основы функционального программирования в JavaScript