Станьте лучше в использовании библиотеки React и непрерывном развертывании

React — одна из самых популярных библиотек в мире фронтенда.

Будучи backend-разработчиком более 10 лет, я согласен. Я начал с React 4 года назад и нашел его потрясающим 😅. И нет причин меняться.

Разработчики, вы можете купить несколько платных онлайн-курсов Стивена Грайдера ([react] (https://www.udemy.com/course/react-redux/)) и Андрея Неагои ([zeroToMastery.io] (https:// academy.zerotomastery.io/p/complete-react-developer-redux-hooks-graphql-zero-to-mastery?affcode=441520_uzodzrlr)).

НО... почему нельзя учиться на практике?

Для начала, на домашней странице React, ReactJS, есть четыре примера кода, которые помогут вам разобраться с основами. Этой единственной документации достаточно, чтобы вы могли запустить свое приложение для реагирования, начиная с простой печати чего-либо в браузере/консоли и заканчивая созданием полнофункционального приложения.

Начните что-нибудь писать, ничего не выйдет... читайте документацию reactjs, это лучший сайт, который дает представление о каждой строке кода, который вы пишете.

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

Совет

Для начала изучите основы, этого достаточно, не углубляйтесь...

• Сначала загрузите реагирующее приложение с помощью CRA npx create-react-app my-application или любого шаблонного кода.

• Я бы рекомендовал использовать функциональные компоненты с хуками, MaterialUI, React Hook Form для данных формы, React Query для запросов и т. д.

Пользовательский интерфейс материалов

Форма React Hook

Реагировать на запрос

• Теперь подумайте об идее или приложении, которое вы хотите реализовать. Я рекомендую вам создать приложение, представляющее ваше резюме (больше похожее на сайт-портфолио). Вы можете продемонстрировать это рекрутерам, когда оно будет готово к развертыванию 🤩.

• Не создавайте повторно используемые компоненты сразу.

• Начните с простого, зайдите на StackOverflow и почерпните идеи по созданию Appbar, Sidebar, Navbar или найдите идеи для их реализации.

• Теперь напишите код и запустите приложение.

• Данные жесткого кода, на данный момент не нужно спешить с получением данных из API, и не путайте код сразу с API, базами данных и т. д.

• Когда вы думаете, что ваше приложение готово с жестко закодированными данными, я бы рекомендовал Firebase в качестве вашей базы данных, все JSON, и вам это понравится 😍.

• Подключите Firebase к вашему приложению. Получите некоторые данные и рефакторинг жестко закодированных данных с полезными нагрузками API.

• Теперь везде, где вы чувствуете дублирование кода, сделайте его повторно используемым компонентом. Например, «Карта», «ЧипВвод», «Модал», «Кнопка», «Текстовое поле», «Уведомление», «Выбор», «Изображение», c «Загрузка файла», «Подсказка», «Автозаполнение текстового поля» и многое другое, и т.п.

• Теперь, когда все готово и работает... установите избыточность и накачайте состояние. Подключите магазин и подготовьте его.

• К этому времени ваши руки грязные, и вы знаете, что происходит в приложении.

• Теперь вы являетесь разработчиком React среднего уровня --------------

Хотите стать экспертом?

• Иметь оболочку API, которая принимает запрос и предоставляет вам данные API. Это будет шаблон, которому следуют все ваши запросы XHR.

• Каждый компонент должен служить одной цели, если вы считаете, что добавляемая функция должна быть отделена, не стесняйтесь... Просто отделите ее, а позже вы сможете очистить код и убедиться, что он читаем.

• Проверяйте качество кода, ваш код не должен заливать состояние.

• Теперь проверьте, сколько раз рендерится каждый из ваших отдельных компонентов. Вы должны использовать useCallback или useMemo, чтобы уменьшить количество повторных рендеров, это снизит нагрузку на DOM.

Разверните приложение с помощью Netlify

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

Мы будем использовать Github + Netlify для непрерывного развертывания. Таким образом, всякий раз, когда в репозиторий вносятся новые изменения, Netlify отслеживает изменения и развертывает последние «артефакты» на сервере.

1. Сначала вам нужно собрать приложение, выполнив команду «npm run build». Это уменьшит приложение до папки сборки в корневом каталоге проекта.

1. Войдите в свою учетную запись GitHub или зарегистрируйтесь, если у вас ее нет.

1. Создайте репозиторий (общедоступный или частный репозиторий) и поместите весь свой код реагирующего приложения в этот новый репозиторий.

1. Перейдите на Netlify и зарегистрируйтесь.

1. После регистрации вы будете перенаправлены на экран сайтов, нажмите Новый сайт из Git и подключитесь, выберите свою учетную запись Github.

1. Не выбирайте Все репозитории, выберите Только выбранные репозитории, чтобы выбрать последний созданный репозиторий, и нажмите «Установить».

1. Не меняйте настройки Netlify по умолчанию, нажмите Развернуть сайт. Это начнет развертывание вашего сайта, и для запуска сборок потребуется некоторое время.

1. После успешного развертывания вы увидите сообщение Site is Live в Netlify Журнал развертывания.

1. Вы можете настроить свой собственный домен или Netlify предоставит вам URL-адрес, чтобы вы могли поделиться им.

Примечание. Рассмотрите возможность использования NextJS, чтобы вывести свое приложение на новый уровень.

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

Я люблю интерфейс React ❤️, он дает мне некую эстетическую атмосферу!!!

Впервые опубликовано здесь: https://dev.to/ggorantala/advice-to-react-developers-how-to-master-react-development-1l1h