ReactJS: быстрый старт

    Совсем скоро стартует курс «React.js разработчик», поэтому в стенах OTUS состоялся очередной открытый урок. На нем рассмотрели следующие вопросы:

    • что входит в стандартный набор возможностей React.js;
    • можно ли с помощью этого построить сложное приложение;
    • композиция против наследования;
    • функциональное программирование — это легко или сложно?
    • что такое Redux, и зачем он нужен.



    В конце урока разработали небольшое веб-приложение на ReactJS. Вебинар провел Никита Овчинников, инженер-программист с более чем 8-летним опытом коммерческой разработки.

    Что такое React?


    Ответ на этот вопрос вы увидите, открыв официальный сайт, где написано, что React — это JavaScript-библиотека для построения юзер-интерфейсов.



    Здесь же вы найдёте замечательный туториал, изучив который, вы сможете использовать этот фреймворк сразу после прочтения. При желании посмотрите туториал и на русском языке, но делать этого не рекомендуется. Если уж совсем плохо с английским, всё равно открывайте оригинальную английскую версию и используйте Google-переводчик. Дело в том, что официальные русскоязычные источники иногда отстают в плане перевода (бывает, что документация обновилась, а перевод ещё нет).

    Почему React такой популярный?


    О популярности React говорит, например, статистика за последние 6 месяцев, если не считать характерного проседания в зимние праздники:



    Неплохие результаты показывает и следующая статистика:



    Конечно, статистика — это ещё далеко не всё, но тем не менее по выборке мы видим, что популярность высока, и она только увеличивается.

    Почему же React завоевал такую популярность? На это есть ряд причин:

    • он действительно очень хорошо документирован:
      — вот туториал;
      — вот руководство для начинающих.
      Впрочем, сегодня фреймворк не станет популярен, если он плохо документирован;
    • React можно использовать на любом устройстве. Однако здесь тоже следует заметить, что сегодня практически любой фреймворк можно использовать на любом устройстве. Но более реальные преимущества у нас пойдут ниже;
    • фреймворк работает декларативно, его главные фишки — композиция и компонентный подход к разработке. Достаточно вспомнить тот же JSX, который в своё время очень хорошо зашёл, да и сейчас он весьма популярен;
    • работу с фреймворком легко начать. Так-то оно так, но тут следует добавить, что начать, может, и легко, но развиваться сложно, то есть добиться серьёзных успехов в освоении не так уж и просто, что надо учитывать;
    • вы получаете полную свободу действий. Фреймворк очень демократичен и не диктует вам никаких правил. Вы можете использовать любую библиотеку, вы вправе выбирать тот инструмент, который вам ближе, вы можете использовать что угодно и когда угодно. Этим React выгодно отличается от того же Angular;
    • в вашем распоряжении продвинутые инструменты отладки (react-developer-tools, redux-dev-tools);
    • мир React чрезвычайно многообразен, в нем много готовых примеров и библиотек, что не может не радовать.

    Просто ли выучить React?


    Итак, знакомьтесь — слабость №1: React выучить совсем непросто. И вот почему:

    1. React — это совершенно другой образ мышления. Если вы с ним работаете, вам действительно нужно перестроиться. В React, в отличие от других фреймворков, есть только понятие композиции. Ребята из Facebook спроектировали свой фреймворк таким образом, что в нём нет никакого наследования. И эти же ребята из Facebook вполне логично объяснили такое положение вещей:

    «At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies».

    Собственно говоря, это заявление небезосновательно, ведь в ООП есть, разумеется, много известных проблем, например, избыточное количество абстракций. К тому же, не все разработчики являются сторонниками построения невероятных цепочек наследования и вот этого всего, хотя, конечно, где-то наследование и нужно, и полезно.

    2. Второй момент, усложняющий изучение React, связан с тем, что в нем есть только рекомендации, и нет жесткого набора правил. Мало того, при изучении фреймворка это ещё терпимо, но когда вы попадете на реальный проект, вы очень сильно удивитесь. Дело в том, что нет двух одинаковых проектов в React, и в каждой компании проект с React абсолютно индивидуален. Вы привыкаете к одной ситуации, а потом переходите в другую команду и видите, что там всё по-другому: другие библиотеки, другие правила… И снова надо подстраиваться и адаптироваться. Как говорится, за гибкость надо платить.

    3. Третья сложность изучения — для успешного освоения React разработчику нужно иметь высокий уровень. Нет, сам по себе React простой и писать на нём просто. Но для того, чтобы сделать на нём что-то более-менее сложное, нужно иметь хорошие скиллы программирования. При наличии пробелов в фундаментальных знаниях JS и TS, вам будет довольно сложно, и вы не всё будете понимать.

    Проблема выбора


    Теперь поговорим про слабость № 2 — проблему выбора. Речь идёт о многообразии, в котором легко потеряться. Тут действительно очень много всего. Появились недавно хуки — начался разговор про то, что классы больше не нужны, начались батлы React Hooks vs React Class… Все кинулись использовать хуки, а потом, сказали, что не всё понятно и вернулись к использованию классов и т. д. и т. п…

    Собственно говоря, правильного ответа на вопрос «React Hooks или React Class» не существует. Или, если быть точнее, правильный ответ зависит от условий, в которых вы этот вопрос задаете.

    Возникает другой вопрос: «Чем проверять типы»? Смотрите у нас есть:


    И тут у нас снова проблема выбора, которая, если честно, иногда выбивает из колеи. Разумеется, всё очень вариативно, и в процессе работы с какими-то решениями вы встретитесь, а с какими-то не «увидитесь» никогда. Всё зависит от ситуации.

    Опять же, есть Create React App, Webpack.js и Babel, поэтому, как только вы начнете, у вас и здесь возникнет вопрос, а что использовать?

    Следующие муки выбора связаны со State. Есть Redux и есть MobX, а внутри Redux есть ещё redux-saga и redux-thunk. И тяжело, не попробовав, осознать, что же лучше использовать в конкретной ситуации.

    Кроме того:

    1. Router. Существует порядка пяти, вот самые популярные:


    2. CSS-IN-JS. В рамках этого, весьма хорошего, кстати, подхода, тоже есть выбор:


    Если подвести краткий итог, то можно перечислить следующие минусы React:

    1. Высокий порог вхождения. Без притворства скажем, что изучить React, всё же, тяжеловато. В том числе и из-за очень большой инфраструктуры.
    2. Много времени на изучение. Раз изучить непросто, будьте готовы потратить на это время — иначе никак. Нужно же понять, что к чему.
    3. Очень большое разнообразие, в котором легко потеряться. Тут и добавить нечего.

    Что значит «много времени на изучение»? На самом деле, если вы берёте какую-нибудь технологию, то, как бы вам мягко не стелили с точки зрения маркетинга, не верьте словам в стиле «Вы научитесь всего за два коротких урока» — это всё ерунда, и не работает в реальном мире. Банально, но факт: для того чтобы стать в чём-то по-настоящему хорошим специалистом, надо потратить много времени. А для того, чтобы просто начать что-то делать, времени много не надо.

    В чём сила, брат?


    Несмотря на всё вышесказанное, React — очень сильная технология. Во-первых, если вы профессионал, работу будет найти очень легко. Скорее, будет сложно от нее отказаться, потому что предложений на рынке сейчас очень много:



    Следующий плюс — множество готовых библиотек и решений. Об этом говорит тот же скриншот из GitHub (существует более миллиона репозиториев):



    Стоит вам только подумать, что неплохо было бы «запилить эту штуку», как окажется, что она уже кем-то сделана. Технология действительно очень популярна.

    Кроме того:

    1. Многообразие — это проблема для новичков, а для профи это плюс!
    2. React содержит огромное количество хороших решений.
    3. Можно разрабатывать приложения любого уровня сложности.
    4. Можно писать в любом стиле.

    Поддержка Typescript


    В React есть просто замечательная поддержка Typescript. Этот язык хорош хотя бы потому, что с его помощью можно писать типы, которые реально работают и реально помогают. И с Typescript вы сможете написать действительно сильную систему типов. По сути, сейчас Typescript — это стандарт, и этот стандарт есть в React. Безусловно, вы можете его не использовать, отдав предпочтение JavaScript. Однако без Typescript сделать что-то вменяемо сложное очень тяжело, ведь без строгих типов очень сложно работать. Так же тяжело предсказать, как будет вести себя ваше решение без строгих типов. Это сложно сделать даже с типами, а без них уж совсем грустно…

    В общем, обязательно поработайте с Typescript, т. к. это очень нужная технология:

    https://www.typescriptlang.org/docs/handbook/react-&-webpack.html.



    Парочка советов


    Напоследок, хотелось бы дать несколько рекомендаций. Сегодня много говорят про ООП, и вы без труда найдёте огромное количество информации на эту тему. И везде вам в миллионный раз напишут про базовый класс Animal, а от него — про Cat и Dog. Или про базовый класс Car, а от него — Ferrari и BMW. И вот это вот всё вам будут показывать из раза в раз и из одного учебника в другой, в то время как ваш уровень разработчика при этом будет расти со скоростью улитки.

    В то же самое время явно недостаточно внимания уделяется именно функциональному программированию, понимание которого реально прокачает ваши скиллы. Если вы действительно научитесь правильно и грамотно его использовать. Одна из самых адекватных книг на сегодняшний день находится в свободном доступе здесь и настойчиво рекомендуется к прочтению:



    Почему сложно изучить функциональное программирование? Потому что очень часто книги перегружены математикой, академической сложностью и т. п. После этой же книги у вас всё получится, т. к. она просто замечательная.

    Почему ещё функциональное программирование важно? Потому что, такая штука, как Redux, строится на базовых основах функционального программирования. И освоив хотя бы базовое функциональное программирование, вы действительно начнете писать код намного лучше. Главное — правильно всё понять.

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

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



    Итог


    1. Кто бы что не говорил, React имеет высокий порог входа. Даже имея несколько лет опыта JavaScript-программирования, готовьтесь к тому, что будет сложно, и появится много вопросов.
    2. React предоставляет очень большие возможности. Но о плюсах уже говорили много, поэтому повторяться не будем.
    3. Если интересуетесь историей развития React, вот вполне годный Roadmap.

    На этом всё. Если интересует практическая часть урока, смотрите вебинар с этого момента. Будет разработано небольшое тестовое веб-приложение на ReactJS, код которого доступен на GitHub.
    OTUS. Онлайн-образование
    Цифровые навыки от ведущих экспертов

    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое