как запустить react приложение

React: Установка и настройка

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

В настоящее время React является самой популярной библиотекой JavaScript для создания пользовательских интерфейсов, и в обозримом будущем эта тенденция сохранится. В этой статье мы рассмотрим способы быстрой и безболезненной настройки React. Так что мы можем погрузиться прямо в программирование!

Почему React?

Установка и настройка

Есть несколько способов начать работу с React. Во-первых, мы взглянем на CodeSandbox и CodePen. Если вы хотите сразу начать играть с кодом, это хороший способ!

React в CodeSandbox

Перейдите на https://codesandbox.io/s и нажмите «React».

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Мгновенно вы окажетесь в среде React, которая была настроена с помощью create-react-app. Мы рассмотрим этот метод далее в статье! Если вы хотите начать программирование без настройки локальной установки, это отличный способ! Такие задачи, как сборка, преобразование и управление зависимостями, все автоматизированы, и вы можете легко поделиться ссылкой на все, над чем вы работали!

React в CodePen

Создаем приложение React

Установка с помощью Create React App

Все, что нам нужно сделать, это открыть наш терминал и запустить следующую команду:

Запустите указанную выше команду, чтобы начать установку! Дайте ему любое имя, которое вам нравится..

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

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

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Успех! Теперь вы можете открыть папку вашего проекта и проверить созданную файловую структуру.

Несколько команд были добавлены в файл package.json :

Запуск вашего приложения

Теперь давайте запустим наш локальный сервер! Из папки вашего приложения запустите:

Ваше приложение запустится в браузере на localhost:3000

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Каждый раз, когда вы начинаете новый проект с помощью create-react-app, вы будете иметь последнюю версию React, React-DOM и React-Scripts. Теперь давайте кратко рассмотрим некоторые функции create-react-app.

Возможности Create-React-App

Прод сборка

Сама команда build преобразует ваш код React в код, который понимает браузер (используя Babel). Он также оптимизирует ваши файлы для лучшей производительности, объединяя все ваши файлы JavaScript в один файл, который будет минимизирован для сокращения времени загрузки.

Тестирование вашего приложения

Ejecting

Сообщения об ошибках

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

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Заключение

Источник

1.2 Установка

1.2.1 Попробовать React

1.2.1.1 Онлайн

1.2.1.2 Минимальный HTML-шаблон

Если вы хотите использовать React для полноценного приложения, то переходите к изучению следующих разделов «Создание приложения на React» и «Добавление React в существующее приложение».

1.2.2 Следующие шаги

1.2.2.1 Быстрый старт

1.2.2.2 Полноценная среда разработки

Более легкие решения выше подходят, если вы новичок в React или просто экспериментируете.

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

1.2.3 Добавить React в новое приложение

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

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

1.2.3.1 Создание React-приложения

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

1.2.3.2 Создание React-приложения

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

1.2.4 Добавление React в существующее приложение

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

React рекомендуется использовать вместе с инфраструктурой сборки проекта для повышения продуктивности разработки. Типичная современная инфраструктура сборки включает:

1.2.4.1 Установка React

Установив React, рекомендуется выставить production режим построения проекта. Это гарантирует использование быстрой версии React в production-версии проекта.

Для того, чтобы установить React с помощью Yarn, необходимо выполнить следующие команды в командной строке:

Для того, чтобы установить React с помощью npm, необходимо выполнить:

1.2.4.2 Возможность использования ES6 и JSX

Чтобы иметь возможность использовать в JS коде JSX и ES6, рекомендуется использовать Babel. ES6 содержит в себе множество современных JavaScript возможностей, которые упрощают разработку. В свою очередь JSX – это расширение языка JavaScript, которое работает с React и также упрощает разработку на нём.

1.2.4.3 Hello World с ES6 и JSX

Рекомендуется использовать бандлер, такой как webpack или Browserify, чтобы вы могли писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.

Наименьший пример кода на ReactJS выглядит примерно так:

Таким же образом вы можете отрисовывать React-компонент внутри DOM-элемента где-нибудь внутри существующего приложения, написанного с помощью какой-либо другой JavaScript UI библиотеки.

1.2.4.4 Development и Production версии проекта

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

Тем не менее, они делают development-версию React-проекта больше и медленнее. Поэтому для развертывания приложения на сервере следует использовать production-версию проекта.

Изучите как узнать использует ли ваше приложение правильную версию React и как сконфигурировать production-сборку наиболее эффективно:

1.2.4.5 Использование CDN

Версии выше подходят только для разработки, но не для production-версии проекта. Минифицированные и оптимизированные production-версии React находятся здесь:

1.2.4.5.1 Что такое crossorigin атрибут?

Если вы подключаете React из CDN, разработчики рекомендуют установить значение атрибута crossorigin :

Также рекомендовано проверить, что используемый вами CDN устанавливает HTTP заголовок Access-Control-Allow-Origin: * :

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Источник

Как создать React js App? Tutorial: Router, Component, Props, Render и др.

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Build & Deploy Custom Superset Viz Plugin

Введение в React JS

В этой статье я постараюсь разложить основы создания приложения на React.JS на составляющие. Начнем с рассмотрения как создать приложение React JS.

Что такое React JS?

React — это библиотека JavaScript для создания пользовательских интерфейсов. React следует философии Unix, потому что это небольшая библиотека, которая фокусируется только на одном деле и делает это очень хорошо (т.е. на создании пользовательских интерфейсов).

Пользовательский интерфейс (UI) — это все, что мы помещаем перед пользователями, чтобы они могли взаимодействовать с машиной.

React декларативен, т.е. мы описываем UI с помощью React и говорим ему, что мы хотим (а не как это сделать). React позаботится о том «как сделать» и переведет наши декларативные описания (которые мы пишем на языке React) в реальные пользовательские интерфейсы в браузере. React разделяет эту простую декларативную силу с самим HTML, но с React мы получаем декларативность для пользовательских интерфейсов HTML, которые представляют динамические данные, а не только статические данные.

DOM — это «объектная модель документа». Это программный интерфейс браузеров для документов HTML (и XML), который обрабатывает их как древовидные структуры. DOM API можно использовать для изменения структуры, стиля и содержимого документа.

React изменил правила игры, потому что он создал общий язык между разработчиками и браузерами, который позволяет разработчикам декларативно описывать пользовательские интерфейсы и управлять действиями с их состоянием вместо действий с элементами DOM. Это просто язык «результатов» пользовательского интерфейса. Вместо того, чтобы придумывать шаги для описания действий в интерфейсах, разработчики просто описывают интерфейсы в терминах «конечного» состояния (например, функции). Когда в этом состоянии происходят действия, React заботится об обновлении пользовательских интерфейсов в DOM на основе этого (и делает это эффективно).

Создание приложения React JS App

Для начинающих разработчиков не нужно арендовать хостинг, либо платить за сервисы по развертыванию среды для разработки react js. Достаточно на своем компьютере или ноутбуке установать node.js. Делается это в три клика.

Установка Node.js

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Далее запускаем инсталлятор, все шаги стандартные, жмем next-next-next. Вот этот пункт можете оставить по умолчанию неактивным:

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

После завершения установки у Вас в пункте меню появятся программки:

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Также в директории C:\Program Files\nodejs\ лежат файлы

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Создаем приложение React JS App

Для установки react js нам понадобится консоль. Вы можете запустить Node.js command prompt. Я предпочитаю использовать far manager. Тут кто где привык работать.

Итак, создадим директорию нашего проекта — приложения React JS, например:

Далее в консоли перейдем в эту папку и запустим команду для инсталляции create-react-app

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Теперь нам необходимо создать приложение с помощью установленного на предыдущем шаге инструмента create-react-app. Инструмент create-react-app был создан Facebook и является рекомендуемым способом создания нового проекта.

Наше первое приложение будет называться hello_react. Для его создания запустим команду:

npx create-react-app hello_react

Запустится инсталляция приложения. Идет она примерно 5 минут (зависит на самом деле от скорости интернета, т.к. все зависимости скачиваются из интернета). Итак, в конце установки у вас должна появиться запись:

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Т.к. вы только учитесь, то можете пока не использовать git. В итоге приложение весит довольно много (в текущей версии почти 250МБ):

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Запускаем приложение React

Для того, чтобы запустить приложение, необходимо перейти в директорию D:\#NodeJS#\react_app\hello_react\ и запустить команду:

После того, как приложение запустится, вы получите сообщение в консоли:

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

И откроется в браузере страница http://localhost:3000/:

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Краткое описание файлов в приложении React JS

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Общая конфигурация проекта React описана в package.json. Вот как это выглядит:

В файле находятся следующие атрибуты:

Рассмотрим структуру каталога приложения:

Сборка проекта React JS APP

Забегая немножко вперед, опишем как создается сборка проекта. После изменения приложения React и его отладки запускается команда:

Источник

React.js: понятное руководство для начинающих

Автор статьи, перевод которой мы публикуем, считает, что, к несчастью, в большинстве из существующих руководств по React не уделяется должного внимания ценным практическим приёмам разработки. Такие руководства не всегда дают тому, кто по ним занимается, понимание того, что такое «правильный подход» к работе с React.

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

В этом руководстве, которое рассчитано на начинающих разработчиков, имеющих знания в области HTML, JavaScript и CSS, будут рассмотрены основы React и самые распространённые ошибки, с которыми может столкнуться программист, пользующийся данной библиотекой.

Почему веб-разработчики выбирают React?

Прежде чем мы приступим к делу, скажем пару слов о том, почему React можно считать наилучшей альтернативой среди средств для разработки веб-интерфейсов. Существует множество UI-фреймворков. Почему стоит выбрать именно React? Для того чтобы ответить на этот вопрос — сравним два самых популярных инструмента для разработки интерфейсов — React и Angular. Надо отметить, что в это сравнение можно было бы включить и набирающий популярность фреймворк Vue.js, но мы ограничимся React и Angular.

▍Декларативный подход к описанию интерфейсов

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

В составе Angular, с другой стороны, есть средства командной строки, которые генерируют шаблонный код компонентов. Не кажется ли это немного не тем, чего можно ждать от современных инструментов разработки интерфейсов? Фактически, речь идёт о том, что в Angular так много шаблонного кода, что для того, чтобы его генерировать, даже создано специальное средство.

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

▍Чёткий синтаксис

▍Правильная кривая обучения

Кривая обучения — это важный фактор, который нужно учитывать при выборе UI-фреймворка. В этой связи надо отметить, что в React имеется меньше абстракций, чем в Angular. Если вы знаете JavaScript, то, вероятно, вы сможете научиться писать React-приложения буквально за день. Конечно, для того, чтобы научиться делать это правильно, потребуется некоторое время, но приступить к работе можно очень и очень быстро.

Если же проанализировать Angular, то окажется, что если вы решите освоить этот фреймворк, вам придётся изучить новый язык (Angular использует TypeScript), а также научиться использовать средства командной строки Angular и привыкнуть к работе с директивами.

▍Особенности механизма привязки данных

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

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

▍Функциональный подход к разработке

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

В React все компоненты пользовательского интерфейса могут быть выражены в виде наборов чистых функций. Использование чистых функций для формирования UI можно сравнить с глотком чистого воздуха.

Теперь, когда мы рассмотрели причины популярности React, которые, вполне возможно, склонят вас в сторону именно этой библиотеки при выборе инструментов для разработки пользовательских интерфейсов, перейдём к практике.

Практика разработки React-приложений

▍Node.js

Node.js — это серверная платформа, поддерживающая выполнение JavaScript-кода, возможности которой пригодятся нам для React-разработки. Если эта платформа ещё у вас не установлена — сейчас самое время это исправить.

▍Подготовка проекта

Здесь мы, для создания основы React-приложения, будем использовать пакет create-react-app от Facebook. Вероятно, это самый популярный подход к настройке рабочего окружения, которое позволяет приступить к разработке. Благодаря create-react-app программист получает в своё распоряжение множество нужных инструментов, что избавляет его от необходимости самостоятельно их подбирать.

Затем, для создания шаблона приложения, выполните такую команду:

На этом предварительная подготовка закончена. Для запуска приложения выполните следующие команды:

Тут мы переходим в папку проекта и запускаем сервер разработки, который позволяет открыть новое React-приложение, перейдя в браузере по адресу http://localhost:3000/.

▍Структура проекта

Разберёмся теперь с тем, как устроено React-приложение. Для этого откройте только что созданный проект с помощью вашей IDE (я рекомендую Visual Studio Code).

Файл index.html

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Здесь нас особенно интересует строка

. Именно тут будет находиться наше React-приложение. Весь этот элемент будет заменён на код приложения, а всё остальное останется неизменным.

Файл index.js

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Вот строка кода, которая ответственна за вывод того, что мы называем «React-приложением», на страницу:

Файл App.js

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Обратите внимание на то, что атрибут className — это эквивалент атрибута class в HTML. Он используется для назначения элементам CSS-классов в целях их стилизации. Ключевое слово class в JavaScript является зарезервированным, его нельзя использовать в качестве имени атрибута.

Повторим то, что мы только что выяснили о компонентах:

▍Рекомендация №1: не нужно везде использовать классы компонентов

Компоненты в React можно создавать, применяя два подхода. Первый заключается в использовании классов компонентов (Class Component), второй — в использовании функциональных компонентов (Functional Component). Как вы, возможно, заметили, в вышеприведённом примере используются классы. К сожалению, большинство руководств по React для начинающих предлагают использовать именно их.

Что плохого в описании компонентов с использованием механизма классов? Дело в том, что такие компоненты тяжело тестировать и они имеют свойство чрезмерно разрастаться. Эти компоненты подвержены проблеме некачественного разделения ответственности, смешиванию логики и визуального представления (а это усложняет отладку и тестирование приложений). В целом, использование классов компонентов ведёт к тому, что программист, фигурально выражаясь, «стреляет себе в ногу». Поэтому, особенно если речь идёт о начинающих программистах, я порекомендовал бы им совсем не пользоваться классами компонентов.

Видите, что мы тут сделали? А именно, мы убрали класс и заменили метод render конструкцией вида function App() <. >. Если же тут воспользоваться синтаксисом стрелочных функций ES6, то наш код будет выглядеть ещё лучше:

Мы превратили класс в функцию, возвращающую разметку, которую надо вывести на страницу.

Поразмыслите над этим. В функции, которая возвращает разметку, нет шаблонного кода. Это — практически чистая разметка. Разве это не прекрасно?

Код функциональных компонентов гораздо легче читать, работая с ними, приходится гораздо меньше отвлекаться на стандартные конструкции.

Тут надо отметить, что хотя только что мы сказали о том, что функциональные компоненты предпочтительнее классов компонентов, в этом материале мы будем пользоваться, в основном, классами, так как код классов компонентов оказывается понятнее для новичков, он полагается на меньшее количество абстракций, с его помощью легче демонстрировать ключевые концепции React. Но когда вы в достаточной мере освоитесь в деле разработки React-приложений, настоятельно рекомендуется учитывать, при разработке реальных проектов, то, что было сказано выше. Для того чтобы лучше разобраться с функциональными компонентами — взгляните на этот материал.

▍Знакомство со свойствами

Свойства (props) — это одна из центральных концепций React. Что такое «свойства»? Для того чтобы это понять, вспомните о параметрах, которые передают функциям. В сущности, свойства — это и есть параметры, которые передаются компонентам. Рассмотрим следующий код:

Код можно упростить, воспользовавшись возможностями ES6 по деструктурированию объектов:

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

▍Принцип единственной ответственности

Принцип единственной ответственности (Single Responsibility Principle, SRP) — это один из важнейших принципов программирования, которого следует придерживаться. Он говорит нам о том, что модуль должен решать только одну задачу и должен делать это качественно. Если разрабатывать проект, не следуя только одному этому принципу, код такого проекта может превратиться в кошмарную конструкцию, которую невозможно поддерживать.

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

Новички обычно размещают в одном файле множество компонентов. Например, у нас код компонентов Greetings и App находится в одном файле. На практике так поступать не следует, так как это нарушает SRP.

Даже очень маленькие компоненты (вроде нашего компонента Greetings ) нужно размещать в отдельных файлах.

Поместим код компонента Greetings в отдельный файл:

Затем воспользуемся этим компонентом в компоненте App :

▍Знакомство с состоянием приложения

Состояние (state) — это ещё одна из центральных концепций React. Именно здесь хранятся данные приложения — то есть то, что может меняться. Нужно сохранить что-то, введённое в поле формы? Используйте состояние. Нужно сохранить очки, набранные игроком в браузерной игре? Для этого тоже надо использовать состояние приложения.

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

Как использовать значение, введённое в поле? В React не полагается обращаться к элементам DOM напрямую. Решить эту задачу нам помогут обработчики событий и состояние приложения.

В данном случае event.target.value — это то, что пользователь ввёл в поле формы, а именно — его имя.

Обратите внимание на то, что мы не объявили onFirstNameChange в виде метода. Очень важно, чтобы подобные вещи объявлялись бы в виде свойств класса, содержащих стрелочные функции, а не в виде методов. Если объявить подобную функцию в виде метода, тогда this будет привязано к элементу формы, который вызывает этот метод, а не к классу, как мы могли бы ожидать. Эта мелочь часто сбивает с толку новичков. Это — одна из причин рекомендации по использованию функциональных компонентов, а не классов компонентов.

▍Проверка данных, введённых в форму

Реализуем простую систему проверки данных, введённых в форму, используя регулярные выражения. Давайте решим, что имя должно состоять как минимум из трёх символов и может содержать лишь буквы.

Состояние приложения

Разрабатывая систему проверки ввода, мы, для начала, добавили в состояние новое свойство: firstNameError :

Функция проверки данных

Если проверка не удалась — мы возвращаем из функции сообщение об ошибке. Если имя прошло проверку — возвращаем пустую строку, которая указывает на то, что ошибок при проверке имени не найдено. Тут мы, ради краткости кода, пользуемся тернарным оператором JavaScript.

Обработчик события onBlur

Метод render

Рассмотрим метод компонента render() :

Тут мы снова пользуемся деструктурирующим присваиванием для извлечения данных из состояния.

▍Стилизация

Если вы воспроизводили у себя то, о чём мы тут говорили, то вы могли заметить, что наша форма выглядит не слишком симпатично. Давайте это исправим, воспользовавшись встроенными стилями:

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

как запустить react приложение. Смотреть фото как запустить react приложение. Смотреть картинку как запустить react приложение. Картинка про как запустить react приложение. Фото как запустить react приложение

Стилизованная форма с сообщением об ошибке

▍Рекомендация №2: избегайте использования стилей внутри компонентов

После того, как этот файл создан, подключим его в компоненте SimpleComponent :

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

▍Добавление полей формы

Сделаем нашу форму немного интереснее, добавив в неё поле для ввода фамилии пользователя:

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

Неужто это я написал слово «скопировали»? Копирование кода — это то, чего стоит всеми силами избегать.

▍Рекомендация №3: разделяйте код на небольшие фрагменты

Монолитный код, не разделённый на части, это проблема, которая, как и многие другие, нарушает принцип единственной ответственности. Хорошо написанный код должен читаться как поэма, а я готов поспорить, что код метода render нашего компонента выглядит куда хуже. Займёмся решением этой проблемы.

Я, создавая этот компонент, просто извлёк код одного из полей ввода из метода render и оформил его в виде функционального компонента. То, что в разных экземплярах подобного компонента может меняться, передано ему в виде свойств.

Вот как можно использовать этот новый компонент в компоненте SimpleForm :

Такой код читать легче, чем прежний. Мы можем пойти ещё дальше, создав отдельные компоненты TextField для имени и фамилии. Вот код компонента FirstNameField :

Похожим образом устроен и компонент LastNameField :
Вот каким теперь будет код формы:

Теперь код компонента выглядит гораздо лучше.

▍О классах компонентов

Перечислим причины, по которым не рекомендуется использовать компоненты, основанные на классах, отдавая предпочтение функциональным компонентам:

Итоги

Хотя этот материал и получился достаточно длинным, о создании React-приложений можно говорить ещё очень долго. В частности, о том, как правильно организовывать код, и о том, какие приёмы разработки рекомендуется и не рекомендуется использовать. Несмотря на то, что это руководство не является всеобъемлющим, мы полагаем, что если благодаря ему состоялось ваше первое знакомство с React, то вы, пользуясь тем, что сегодня узнали, сможете эффективно осваивать эту UI-библиотеку.

→ Исходный код примеров, рассмотренных в этом материале, можно найти здесь

Уважаемые читатели! Если сегодня, в ходе прочтения этой статьи, вы написали свои первые строки React-кода, просим поделиться впечатлениями.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *