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

Вы слышали о ReactJS, но не знаете, с чего начать? Вы начали играть с ReactJS, но не знаете, как использовать его в повседневной жизни? Эта статья станет вашим руководством по изучению и освоению библиотеки React JavaScript, самой популярной библиотеки, используемой сегодня разработчиками. Я покажу вам, как именно начать работу с ReactJS и как интегрировать его в ваш рабочий процесс, чтобы вы могли создавать более динамичные пользовательские интерфейсы, не прибегая к ненужному обходному пути через другой фреймворк или библиотеку. Давайте начнем!

Что такое ReactJS?

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

На самом деле, как только вы создадите несколько компонентов, другим разработчикам в вашей команде будет относительно легко подключиться и внести свой код, не имея никакого опыта (или знания) React вообще!

Рекомендуется для вас: 5 полезных советов по оптимизации производительности приложения React Native.

Зачем использовать ReactJS?

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

Для разработчиков, которые до сих пор работали только с jQuery или Vanilla JavaScript, изучение работы с новыми технологиями может быть разочаровывающим. В некоторых случаях разработчикам могут потребоваться сотни строк кода только для создания простого модального окна или панели навигации. Поскольку React использует виртуальный DOM вместо записи и перезаписи реальных элементов DOM каждый раз, когда происходит изменение состояния (как это часто делается в Angular), использование React может сэкономить драгоценное время, разрешив меньше строк кода, а также делая ваши приложения быстрее, чем они были. до.

Установка в браузере

Прежде чем вы сможете использовать React в браузере, вам необходимо его установить. К счастью, благодаря npm и Browserify это простой процесс. Используете Node или другую серверную среду? Вы также можете использовать для этого npm и Browserify. После того, как вы все установили, создайте HTML-файл в своем любимом текстовом редакторе. В противном случае используйте шаблонный генератор, такой как Create-React-App, который создает для вас базовый начальный проект, в котором уже настроены все эти вещи.

Преобразование App.js для использования ReactJS

Весь наш код в настоящее время находится в одном файле с именем App.js. Но это затрудняет тестирование. Итак, давайте разобьем его на несколько файлов. Мы начнем с преобразования одного компонента из написанного на ES6 в JSX. Проще всего хранить все наши компоненты React в одном каталоге (что и следует делать вам). Итак, давайте создадим пустой каталог src/components и переместим в него App.js: mv app/App.js src/components/app-react.js. Затем переименуйте его в app-react.js.

Чтобы использовать React вместо ES6, измените use strict; вверху вашего файла, чтобы использовать babel; Вам также потребуется установить Babel с помощью npm install –save babel-CLI babel-preset-es2015 babel-preset-react, что заставит Babel скомпилировать ваш новый синтаксис JSX.

Начните строить с нашим образцом приложения

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

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

Базовый пример использования компонентов

Если вы посмотрите на любое веб-приложение, первое, что вы заметите, это то, что каждый элемент является отдельным. На типичной странице есть разные верхние и нижние колонтитулы, логотипы и кнопки. Однако при работе с React.js вместо использования нескольких элементов HTML для каждого компонента на странице вы можете использовать один элемент HTML для представления всех компонентов. Это может показаться нелогичным; в конце концов, разве не этим мы занимались годами?

Вам может понравиться: Facebook JavaScript Engine (Hermes) повышает React Native на Android.

Введение в синтаксис JSX

JSX — это не язык программирования, как JavaScript или TypeScript, а синтаксис, который был разработан как расширение JavaScript. Из-за этого для новых разработчиков важно понимать, как это работает и где вы можете его использовать. Код JSX написан таким образом, что он очень похож на HTML, что делает код JSX отличным первым шагом для новых разработчиков, изучающих оба языка одновременно. Для получения дополнительной информации о том, что делает JSX уникальным и как вы можете легко освоить его, прочитайте наш полный учебник по ReactJS!

Чтобы начать создавать свой первый проект React, создайте новый каталог, набрав mkdir react_tutorial в своем терминале. Как только это завершится, перейдите в только что созданный каталог, набрав cd react_tutorial. Затем откройте свой терминал и запустите Node.js, набрав node -v.

Вы должны увидеть v10.x в списке рядом с Node, если Node успешно установлен. Если нет, попробуйте использовать nvm install 10, если вы используете macOS или Linux. Если и это не сработает, то Google должен помочь выяснить, что там происходит! После правильной установки Node версии 10+ мы готовы приступить к созданию нашего проекта с нуля!

Статический против динамического против PureComponent

При создании веб-приложений с использованием современного JavaScript у вас есть три основных варианта создания компонентов пользовательского интерфейса. К ним относятся статический HTML (разметка реакции), динамические запросы AJAX (данные реакции) и повторное использование существующих элементов DOM (чистая реакция). Каждый метод имеет свои достоинства и может применяться по-разному в зависимости от конкретного случая использования.

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

Методы жизненного цикла в компонентах ReactJS

Существует несколько методов жизненного цикла, которые вы можете использовать в своих компонентах для управления различными частями их жизненного цикла. Метод componentWillMount() вызывается непосредственно перед первой отрисовкой компонента. В нем вы можете добавить любые инициализации, которые вам нужны для вашего компонента, такие как сохранение информации с помощью localStorage. Метод componentDidMount() также вызывается сразу после монтирования и рендеринга компонента. Здесь вы можете добавить код, который должен выполняться после полной инициализации компонента (например, при создании новых сетевых запросов).

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

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

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

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

Передача данных из родительского компонента в дочерний компонент

Существует два способа передачи данных из родительского компонента в дочерний: через реквизиты или состояние. Передача данных через свойства может быть полезна для определения переменных для ваших компонентов, например, для определения количества элементов в массиве. С другой стороны, передача данных через состояние может быть полезна, если вы хотите передать большие объекты (которые потенциально могут замедлить работу вашего приложения) или определить функции, которые вы хотите вызывать из дочернего компонента. Давайте рассмотрим оба подхода и посмотрим, когда их можно использовать в нашем коде!

Вам также может понравиться: Какие улучшения предлагает React JS в Headless WordPress?

Заключение

Когда вы нанимаете разработчика ReactJS, убедитесь, что вы выбрали фрилансера, который имеет опыт работы с JavaScript, CSS, HTML и Node.js более 5 лет. Важно, чтобы ваш разработчик мог продемонстрировать свой опыт, предоставив примеры проектов и разработав проекты, соответствующие вашим конкретным требованиям. Это поможет им легко понять ваши бизнес-цели и задачи.

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

 Эта статья написана Рахулом Калсария из ТОО Tagline Infotech.