Введение в React JS

Всем привет!

В этой статье я постараюсь разложить основы создания приложения на 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

Идем на сайт https://nodejs.org/en/

Скачиваем дистрибутив

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

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

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

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

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

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

D:\#NodeJS#\react_app

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

Для этого в консоли запустим команду npm i -g create-react-app

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

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

npx create-react-app hello_react

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

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

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

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

npm start

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

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

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

Если мы перейдем в директорию нашего приложения React D:\#NodeJS#\react_app\hello_react, то мы увидим следующую структуру:

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

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

• Каталог node_modules предназначен для инструментов сборки. Файл package.json в корне приложения определяет, какие библиотеки будут установлены в node_modules при запуске npm install. После сборки приложения (финальная стадия разработки) этот каталог не публикуется в продуктив. Этот каталог добавляется в .gitignore
• Все динамические компоненты будут расположены в каталоге src. В этой директории содержится код проекта (вся логика вашего приложения). Именно с ней вам придется большую часть времени работать. Рассмотрим файлы в каталоге src:
  • App.js — основной JS-компонент. Каждый компонент, который вы создаете в своем проекте, будет потомком этого компонента.
  • App.css — это таблица стилей для css правил. Приложение create-react-app предварительно настроено для использования css таблиц стилей. Также можно использовать scss файлы, просто установив node-sass модуль.
  • index.js — точка входа для нашего приложения. Этот файл импортирует код приложения из App.js компонента и делает его в root DIV, расположенном в index.html в public папке.
  • index.css — это вторичный css файл с общими данными шрифтов, которые можно удалить или использовать для глобального кода CSS.
  • App.test.js и setupTests.js — сборка исходного прилоежния поставляется с предварительно сконфигурированными jest и react-testing-library. В этот setupTest.js файл вы можете включить свои тестовые конфигурации, и App.test.js является основным тестовым файлом. Вы также можете безопасно удалить оба этих файла, если у вас нет опыта в тестировании.
• Директория public содержит базовые файлы HTML, JSON и изображений. Это корневые ресурсы вашего проекта:
  • manifest.json — этот файл используется для описания нашего приложения.
  • favicon.ico — это файл изображения значка, используемый в нашем проекте. Он также связан внутри index.html и manifest.json.
  • index.html — базовая HTML страница, является корневой для вашего проекта. Ее практически не придется исправлять, но она является также ключевой частью проекта.

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

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

Результат работы команды:

В результате у нас появится директория build:

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

Деплой/Deploy проекта на Heroku (развертывание приложения React)

Для того, чтобы задеплоить весь проект с автоматическим развертыванием приложения React без учета собранного проекта, необходимо скачать Heroku CLI:

Инсталлируем скаченный дистрибутив. Далее в консоли запускаем команду:

Откроется сайт, где нужно нажать кнопку Login (Enter your Heroku credentials)

Также у вас должен быть инсталлирован git, если нет, то скачайте на сайте https://git-scm.com/ и установите.

Далее последовательно запускаем команды:

Откроется сайт (проект вашего приложения на React JS). Я свой пример переделал и у меня выводится сообщение текстовое:

Далее можете внести на своей машине изменения в код App.js, например,

И повторить команды:

В таком виде проект соберется на стороне heroku.

Что такое JSX?

JSX — синтаксический сахар для функции React.createElement(component, props, ...children).

JSX — это расширение React, которое позволяет нам писать JavaScript, который выглядит как HTML.

JSX позволяет нам писать элементы HTML на JavaScript и размещать их в DOM без вызова методов createElement(), либо appendChild(). JSX преобразует HTML-теги в элементы React. Не обязательно использовать JSX при разработке React, но рекомендуется.

С JSX вы можете писать выражения внутри фигурных скобок { }.

JSX — это, по сути, компромисс . Вместо того, чтобы писать компоненты React с использованием React.createElement синтаксиса, мы используем синтаксис, очень похожий на HTML, а затем используем компилятор для преобразования его в React.createElement вызовы. Компилятор, переводящий одну форму синтаксиса в другую, известен как «транспилятор».

Важно помнить при создании компонентов React, что Вы не пишете HTML. Вы используете расширение JavaScript для возврата вызовов функций, которые создают элементы React (которые по сути являются объектами JavaScript).

Быстрый курс 2020 React JS от Владилена Минина

Жизненный цикл React-компонента

Диаграмму жизненного цикла React-компонента можно посмотреть на сайте:

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods Diagram на русском:

или на английском:

Ссылка на github: https://github.com/wojtekmaj/react-lifecycle-methods-diagram

Есть еще такая картинка:

Краткое описание жизненного цикла

Все, что вы видите в приложении React, является компонентом или частью компонента. В React компоненты созданы так, чтобы следовать естественному жизненному циклу. Они создаются (creation), развиваются (updating) и, наконец, умирают (deletion). Это называется жизненным циклом компонента.

Компоненты React — это независимые и повторно используемые блоки кода. Они служат той же цели, что и функции JavaScript, но работают изолированно и возвращают HTML через функцию render(). Компоненты бывают двух типов: компоненты класса и компоненты функции. Их я опишу потом.

Для каждого этапа жизненного цикла компонента, React предоставляет доступ к определенным встроенным событиям / методам, называемым перехватчиками жизненного цикла (lifecycle hooks) или методами жизненного цикла (lifecycle methods). Эти методы дают вам возможность контролировать и управлять тем, как компонент реагирует на изменения в приложении.

Рассмотрим три фазы жизненного цикла компонента React: Mounting, Updating иUnmounting.

Важно помнить, что render() это единственный метод, который требуется в компонентах React.

Что такое Mounting?

Mounting (монтирование) — означает размещение элементов в DOM.

В React есть четыре встроенных метода, которые вызываются в указанном порядке при монтировании компонента:

1. constructor()
2. getDerivedStateFromProps() — вызывается прямо перед рендерингом элементаов в DOM.
3. render() — выводит HTML в DOM.
4. componentDidMount() — вызывается после рендеринга компонента. Вы можете использовать этот метод для настройки любых длительно выполняющихся процессов или асинхронных процессов, таких как выборка и обновление данных.

Метод render() является обязательным и будет вызываться всегда, остальные необязательны и будут вызываться, если вы их определите.

Метод constructor

Метод constructor() вызывается раньше всего, когда компонент запускается, и это естественное место для установки initial state и других начальных значений.

Метод constructor() вызывается с props, в качестве аргументов, и вы всегда должны начинать с вызова super(props) перед любым другим, это инициирует родительский метод конструктора и позволяет компоненту наследовать методы от своего родителя (React.Component).

Пример:

Компонент — это JS-класс. Как и любой класс, у него есть метод constructor, который вызывается React каждый раз, когда вы создаете компонент. Обычно он устанавливает состояние и свойства.

Что такое Updating?

Следующим этапом жизненного цикла является обновление компонента (Updating).

Компонент обновляется всякий раз, когда происходит изменение состояния или свойств компонента.

В React есть пять встроенных методов, которые вызываются в следующем порядке при обновлении компонента:

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

Метод render() является обязательным и будет вызываться всегда, остальные необязательны и будут вызываться, если вы их определите.

Что такое Unmounting?

Следующая фаза в жизненном цикле — это когда компонент удаляется из DOM или размонтируется (unmounting).

В React есть только один встроенный метод, который вызывается при размонтировании компонента:

• componentWillUnmount()

state

Компоненты React имеют встроенный state объект.

В state объекте хранятся значения свойств, принадлежащих компоненту.

Когда state объект изменяется, компонент перерисовывается.

Объект state инициализируется в конструкторе:

componentWillMount — этот метод устарел

ComponentWillMount() раньше был методом жизненного цикла и вызывался непосредственно перед методом render(). React отказался от его использования из-за того, что он часто используется небезопасно.

componentDidMount

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

componentDidUpdate

Если у вас есть состояние, основанное на props, вам может потребоваться использовать componentDidUpdate() метод, который вызывается сразу после обновления. Используйте его для обновления модели DOM, сравнивая предыдущие свойства с текущими, см. Пример ниже:

props и propTypes

Props — это список атрибутов, передаваемые в компоненты React. Свойства передаются компонентам через атрибуты HTML.

Компонент функции React получает этот список в качестве своего первого аргумента. Список передается как объект с ключами, представляющими имена атрибутов, и значениями, представляющими присвоенные им значения.

Чтобы отправить props в компонент, используйте тот же синтаксис, что и атрибуты HTML:

Добавьте атрибут «brand» к элементу Car:

React — это все о компонентах

В React мы описываем пользовательские интерфейсы с помощью компонентов, которые можно использовать повторно, компоновать и сохранять состояние.

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

Вы можете думать о компонентах как о простых функциях (на любом языке программирования). Мы вызываем функции с некоторым input, и они дают нам некоторый output. Мы можем повторно использовать функции по мере необходимости и составлять более крупные функции из более мелких.

Компоненты React точно такие же:

• их входные данные — это набор «свойств»,
• а их выходные данные — это описание пользовательского интерфейса.

Компонент React — это шаблон. План. Глобальное определение. Это может быть функция или класс (с методом рендеринга).

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

Некоторые компоненты React чистые, но вы также можете добавить в компонент побочные эффекты. Например, компонент может изменить HTML-заголовок веб-страницы, когда он монтируется в браузере, или он может прокручивать представление браузера в определенное положение.

Что наиболее важно, компонент React может иметь private state для хранения данных, которые могут изменяться в течение жизненного цикла компонента. Это private state является неявной частью ввода, которая управляет выводом компонента, и именно это и дало React название!

Почему React вообще называется «React»?

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

Что такое hook?

Hook (или хук) в компоненте React — это вызов специальной функции. Все функции хуков начинаются со слова «use». Некоторые из них могут использоваться для обеспечения функционального компонента с элементами с отслеживанием состояния (например, useState), другие могут использоваться для управляемых побочных эффектов (например, useEffect) или для кэширования / запоминания функций и объектов (например, useCallback). Hooks очень мощные, и когда дело доходит до вещей, которые вы можете с ними делать, нет предела.

Функции hook React могут использоваться только в функциональных компонентах. Вы не можете использовать их в компонентах класса.

Чтобы увидеть пример базовой useState hook, давайте заставим Button компонент реагировать на событие щелчка. Давайте сохраним количество нажатий на нее в переменной «count» и отобразим значение этой переменной как метку кнопки, которую она отображает.

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

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

Прежде чем мы сможем изменить значение count состояния, нам нужно узнать о событиях.

Реагирование на пользовательские события

Вы можете добавить обработчик событий со свойством onEvent ( button в данном случае к элементу). Это может быть onClick, onMouseOver, onScroll, onSubmit и т.д.

Здесь нам нужно onClick событие, и мы просто определяем его как атрибут в целевом элементе. Например, чтобы программа выводила сообщение на консоль каждый раз при нажатии кнопки, мы можем сделать что-то вроде:

В отличие от версии onClick атрибута DOM (которая использует строку), onClick атрибут React использует ссылку на функцию. Вы указываете это в фигурных скобках.

Обратите внимание, как мы передали func ссылку (имя) в качестве onClick обработчика. Мы не призывали func там. React будет вызываться func при нажатии кнопки.

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

Обратите внимание, что название события написано camel-case. Все атрибуты, связанные с DOM (которые обрабатываются React), должны быть верблюжьими (и React отобразит ошибку, если это не так). React также поддерживает использование настраиваемых атрибутов HTML, которые должны быть в строчном формате.

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

Названия некоторых атрибутов в React отличаются от их эквивалентов в HTML. Примером этого является className атрибут в React, который эквивалентен использованию class атрибута в HTML. Полный список различий между атрибутами React и атрибутами DOM см. На jscomplete.com/react-attributes.

React JS на практике / Создание веб приложения — Гоша Дударь

Материалы для курса можно скачать на сайте https://itproger.com/course/react-js-app

Уроки React JS на практике / #1 — Создание приложения с погодой

Уроки React JS на практике / #2 — Работа с компонентами

Уроки React JS на практике / #3 — Работа с API (получение данных про погоду)

Уроки React JS на практике / #4 — Создание формы и работа со свойствами

Уроки React JS на практике / #5 — Вывод погодной информации в компоненте

Уроки React JS на практике / #6 — Вывод ошибки и оптимизация кода

Уроки React JS на практике / #7 — Добавление стилей и завершение

React Hooks — Полный Курс (Про Все Хуки!) от Владилена Минина

Полный курс по React Hooks. Внутри рассказывает про: useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer.