Автор Как разработчик, имеющий опыт работы с фреймворком Vue.js, не мог игнорировать славу React и решил попробовать что из себя представляет экосистема этой библиотеки. Стал искать путь получить необходимую и наиболее актуальную информацию по работе с React. В настоящее время есть различные способы получить новые знания в области разработки программного обеспечения. Создание web-приложений на React, конечно же, – не исключение.
Содержание статьи
- Как лучше изучать React
- Первая часть книги. Основы
- Вторая часть. Работа со стилями
- Вторая часть. React Router
- Вторая часть. Работа с формами
- Третья часть. Управление состоянием
- Третья часть. Взаимодействие с API сервера
- Четвертая часть. Другие интересные темы
- Выводы. И что можно почерпнуть имея опыт использования Vue
Как лучше изучать React
Можно читать статьи, пройти курсы или заниматься по книге. Статьи, особенно на солидных сайтах, могут помочь на старте. Но обычно в них не погружаются в тему достаточно глубоко. Конечно, есть целые серии статей и довольно хорошие. Но все же статьи – это то, что не доросло до книги.
Есть множество курсов. В том числе и в формате (как это не удивительно) видео. Но пока что у меня остается ощущение, что курсы – лишь красивая обертка, которая маркетинговыми усилиями вытягивает из вас ваши финансы. Читать код, который вы не можете прокрутить и отобразить как вам удобно – способ изучения с сомнительной эффективностью. Зато легко можно привлечь людей с клиповым мышлением. “Вот сейчас видосик посмотрю – и стану разработчиком”.
Гораздо более глубокое погружение в изучаемый предмет происходит при занятиях по книге. Информация там лучше структурирована, лучше сформулирована и удобно представлена. При всех своих преимуществах книги (даже самые качественные) стоят заметно дешевле курсов.
Как понимаете, я считаю, что лучшим способом получения информации по-прежнему являются книги. Да, ранее их критиковали за то, что пока книгу напечатают она устареет, что весьма критично при изучении информационных технологий. Но в последнее время все больше книг можно купить в электронном виде. Информация в них достаточно свежая.
Конечно же, прочитав книгу и разобрав ее примеры, толку будет все еще мало. Нужно начать применять на практике прочитанное. То есть разрабатывать приложение самостоятельно и конечно читать документацию. Без документации никак. Даже самая подробная книга не включает в себя документацию. Разрабатывая даже самое небольшое приложение (хоть тот же блог или список дел), как правило, приходится решать достаточно много типовых задач. Так что после этого и более серьезные приложения на новых технологиях будут по плечу. Но хорошая база знаний берется из книг. А книги можно найти и купить в сети.
Так я нашел замечательный труд автора Carl Rippon под названием “Learn React with TypeScript”. Далее в статье будет рассказываться какие темы рассматривались в книге, как они были раскрыты и какие выводы я сделал как разработчик с опытом Vue.
Первая часть книги. Основы
Начинается книга с описания самых основ React – JSX, свойств компонентов (props), состояния (states) и работы с событиями (events). То есть читать книгу можно будучи совсем незнакомым с этой библиотекой.
Затем описывается язык TypeScript. Его выгоды. Обработка ошибок, встроенные типы и создание собственных типов данных. Использование дженериков (generics) – более сложное понятие, поэтому вводится в книге постепенно, используя примеры (и описывается детально уже в самом конце книги).
Далее описываются простые и самые распространенные хуки (hooks): useState, useEffect, useRef, useMemo, useCallback. На примерах становится понятно когда они могу пригодиться и какую выгоду дают.
Вторая часть. Работа со стилями
Вторая часть книги начинается описанием подходов стилизации (оформления компонентов).
Рассматривается использование обычного CSS (plain CSS). Это традиционный способ работы со стилями. Как правильно работать с ними разбирается подробно в отдельной литературе. По этой теме рекомендую книгу Кита Гранта “CSS для профи”.
Также разбирается подход CSS modules – некоторый способ хранить правила CSS в js объектах с возможностью использовать что-то типа пространств имен; подключать файлы с этими объектами используя JS import.
Далее автор рассказывает о CSS-in-JS – способе описания стилей прямо в JSX. Это может быть полезно для применения каких-то стилей по условию. Но, наверное, если злоупотреблять этим, то код быстро превратится в кашу.
Приводится описание работы с utility-first CSS фреймворком Tailwind.
Все же, я думаю, классический CSS в с применением какой-либо методологии (БЭМ) и, возможно, препроцессора, или постпроцессора выглядит более внушающим доверия инструментом, чем другие описанные. Но вернемся к книге.
Вторая часть. React Router
Продолжается вторая часть книги описанием работы с маршрутизацией на стороне клиента. Описывается использование React Router, создание ссылок навигации, работа с search-параметрами (useSearchParams), добавление страниц с ошибками и поддержка ленивой загрузки (lazy loading).
Вторая часть. Работа с формами
Описание работы формами начинается с использования состояния компонента для работы с полями формы, встроенной валидации браузера и работе с интерфейсом FormData. Затем рассказывается о преимуществах развитой валидации и работе с данными через React Hook Form (useForm).
Третья часть. Управление состоянием
Проблема получения доступа к состоянию разными компонентами начинается с разбора useState и useReducer. Озвучивается проблема передачи данных (prop drilling) по дереву компонентов от одного к другому.
Рассказывается, что состояние может быть предоставлено компонентам в дереве с помощью компонента Provider (нужного контекста и хука useContext).
Далее идет повествование о Redux, который похож на контекст React. Разница в том, что может быть только одно хранилище Redux, доступное для всех. Хотя его обычно делят на слои (области).
Третья часть. Взаимодействие с API сервера.
Завершается третья часть книги разбором темы обращений к серверу. Данные на страницу при открытии можно грузить используя useEffect. Но также для этого может применяться React Router (свойство loader конкретного маршрута). Следующим шагом показывается работа связки React Router и React Query. С помощью React Router происходит загрузка данных с сервера и помещение их в кэш
React Query. При повторном обращении к маршруту (без перезагрузки страницы) данные будут сначала запрошены из кэша, и, если их там не окажется, произойдет обращение к серверу.
Подход с кэшем позволяет делать меньше запросов к серверу, что благоприятно сказывается
на производительности. Страница, данные которой уже загружены, не будет делать запроса к
серверу и получит их из кэша, то есть корректно отработает даже при отсутствии в этот
момент связи с интернетом.
Конечно тут могут быть и свои подводные камни. Но описанные инструменты и их иллюстрация интересны и, вероятно, найдут применение в работе.
Отдельной главой выделена работа с GraphQL API, что делает данную книгу еще актуальнее.
Четвертая часть. Другие интересные темы
В конце книг рассмотрен еще ряд замечательных возможностей:
- Custom Hooks – написание собственных хуков на базе имеющихся
- Render Props – свойства компонента, в которые можно передавать шаблоны для него
- Тесты с инструментами Jest и React Testing Library для реализации автоматического тестирования
Выводы. И что можно почерпнуть имея опыт использования Vue
Книга оказалась довольно полезной и содержала описание ряда продвинутых инструментов и практик. Вначале кажется, что React какой-то слишком многословный по сравнению с Vue, но затем начинаешь понимать откуда эта многословность берется, какие принципы лежат в основе. Лучше понимаешь разворот Vue от Option API к Composition API.
Книга заставляет задуматься и о подходах, которые вы применяете в повседневной работе с frontend. Теперь, попробовав в деле React Query, я думаю о том, где можно применить Vue Query. Посмотрев на React Hook Form, пожалуй, попробую Vue Hooks Form или VeeValidate. Рассмотрю загрузку данных при открытии маршрута через Vue Router.
И конечно, время от времени, буду возвращаться к примерам из книги, чтобы напомнить себе о интересных идеях. Книга на какое-то время станет настольной.