Как запустить реакт приложение в браузере

Обновлено: 07.07.2024

В этой статье вы познакомитесь с React — библиотекой для создания пользовательских интерфейсов. React появился в 2013 году и достаточно быстро стал популярным среди разработчиков. Сегодня в работе над веб-приложениями его используют Facebook, Instagram, Trello, AirBnb, PayPal. С помощью этой статьи мы сможем написать приложение прогноза погоды: от установки с помощью create-react-app (проект на GitHub) до подключения API и стилей bootswatch.

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

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

Создайте ваше первое приложение

Прежде всего вам понадобится node.js и редактор кода, например, Atom.

Откроем терминал и установим create-react-app :

Примечание: Пользователям Linux или MacOS, возможно, потребуется дополнительно ввести команду sudo перед npm install -g .

Начнем создавать наше приложение прогноза погоды:

Данной командой мы установим набор инструментов, которые помогут создать наше React-приложение. По завершении установки мы сможем запустить приложение командами:

Новое приложение автоматически откроется в браузере!

Свойства и компоненты

Давайте взглянем на приложение, которое create-react-app создал автоматически. В редакторе кода откроем weather/src/App.js :

Наше приложение состоит из одного компонента, где функция render() является его главной составляющей. Напишите какой-нибудь текст, сохраните изменения и посмотрите, как приложение автоматически применит их!

Cube Dev , Удалённо , От 3000 $

Теперь создадим новый компонент WeatherDisplay . Так как функция render() — это «сердце» компонента, то именно она определяет, что будет отображено. Для начала создадим тег с каким-нибудь текстом внутри:

Изменим компонент App , чтобы отобразить наш WeatherDisplay :

Как видите, мы передали данные, которые обозначили переменной zip , в компонент WeatherDisplay . Они называются свойствами (props). Мы можем модифицировать наш компонент для отображения передаваемых данных:

Где-нибудь в начале файла добавим несколько городов, для которых мы хотели бы отобразить погоду:

Обновим render() в компоненте App , в котором, перебирая массив PLACES , создадим тег button для каждого города:

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

На этом этапе файл App.js должен выглядеть так.

Состояние

Мы хотим, чтобы в приложении была возможность переключаться между местами, поэтому мы можем использовать состояние ( state ) для хранения данных в компоненте App .

Сначала давайте добавим функцию-конструктор, в которой будет использоваться super() , а затем установим начальное состояние this.state :

Функция render() может брать данные из this.state при составлении пользовательского интерфейса. Для этого мы можем использовать метод setState компонента React, который меняет состояние и перезапускает функцию render() , чтобы изменить пользовательский интерфейс.

Применим this.state и this.setState в нашем компоненте App :

На этом этапе файл App.js должен выглядеть так.

Жизненный цикл компонентов и выборка данных

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

В этом примере мы хотим вызвать API, когда компонент загрузится на экране, для этого добавим код в componentDidMount . Обновим компонент WeatherDisplay :

Улучшим вывод render() для красивого вывода данных:

На этом этапе файл App.js должен выглядеть так.

Установка компонентов

Bootstrap — популярный набор инструментов для стилизации пользовательского интерфейса в HTML и CSS. Установим его вместе с react-bootstrap , который предоставляет компоненты React для bootstrap :

Импортируем стили из bootstrap в начале файла:

Далее импортируем из react-bootstrap компоненты, которые мы хотим использовать. Их можно найти на сайте react-bootstrap:

Заменим теги в компоненте App , чтобы вывести компоненты bootstrap :

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

Выберите подходящее оформление на сайте bootswatch и установите его, заменив bootstrap . В нашем примере мы используем тему journal:

Окончательный вид нашего приложения:

Развертывание (дополнительный материал)

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

Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.

Разобравшись с этим материалом, вы освоите следующее:

Компоненты React.
Рендеринг ReactDOM.
Классы компонентов и функциональных компоненты.
JSX.
Состояние (state).
Обработка событий.
Асинхронный метод setState.
Свойства (props).
Ссылки (refs).

Предварительная подготовка

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

Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.

Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).

Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.

Что такое React?

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

Вот пример разбивки страницы на компоненты:

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

Что такое компонент React?

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

Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.

Напишем компонент внутри тега <script> файла index.html с type , установленным в "text/babel" :

Когда мы вызываем функцию OurFirstComponent() , в ответ приходит фрагмент страницы.

Функции можно писать и так:

React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.

Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:

Когда мы вызываем функцию OurFirstComponent() , она возвращает фрагмент JSX-кода. Мы можем использовать так называемый ReactDOM для вывода того, что представляет этот код, на страницу:

Теперь тег <h1> окажется внутри элемента с ID hook . Когда вы обновите страницу браузера, она должна выглядеть так:

Можно и написать собственный компонент на JSX. Делается это так:

Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.

Сборка компонентов

Компоненты React можно помещать в другие компоненты.

Вот что выведет вышеприведённый код:

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

Классы компонентов

До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.

Классы компонентов должны содержать функцию, называемую render() . Эта функция возвращает JSX-код компонента. Их можно использовать так же, как функциональные компоненты, например, обращаясь к ним с помощью конструкции:

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

JavaScript в JSX

В JSX-код можно помещать переменные JavaScript. Выглядит это так:

Теперь текст «I am a string» окажется внутри тега <h1> .

Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:

Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:

Подводные камни JSX

Переименуйте OurFirstComponent() в PlayButton . Нам надо, чтобы этот компонент возвращал следующее:

Однако, тут мы сталкиваемся с проблемой: class — это ключевое слово JavaScript, поэтому использовать его мы не можем. Как же назначить класс play элементу <a> ?

Для того, чтобы этого добиться, нужно воспользоваться свойством className :

Особенности создаваемого компонента

Компоненты, основанные на классах, могут хранить информацию о текущей ситуации. Эта информация называется состоянием (state), она хранится в JS-объекте. В нижеприведённом коде показан объект, представляющий состояние нашего компонента. Его ключ — это isMusicPlaying , с ним связано значение false . Этот объект назначен this.state в методе constructor , который вызывается при первом использовании класса.

Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?

Изменение компонента React на основе его состояния

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

Вот с чего мы начнём. Узнаем состояние компонента с помощью конструкции this.state . В следующем коде мы проверяем состояние и используем его для принятия решения о том, какой текст показать пользователю.

В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.

Всё это не особенно полезно, если у нас нет способа изменять this.state.isMusicPlaying .

Как компонент реагирует на события?

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

Когда пользователь щёлкает по тексту, представленному тегом <h1> , компонент вызывает функцию handleClick . Функция получает объект события в качестве аргумента, а это значит, что она может, при необходимости, им пользоваться.

Мы используем метод .bind функции handleClick для того, чтобы ключевое слово this ссылалось на весь компонент, а не только на <h1> .

Как должен работать компонент

Когда меняется состояние компонента, он снова вызовет функцию render . Мы можем изменить состояние с помощью this.setState() , если передадим этой функции объект, представляющий новое состояние. Компонент на странице всегда будет представлять своё текущее состояние. React самостоятельно обеспечивать такое поведение компонентов.

Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.

Обмен данными между компонентами

Компоненты могут «общаться» друг с другом. Посмотрим, как это работает. Мы можем сообщить PlayButton , проигрывается музыка или нет, используя так называемые свойства (props). Свойства — это информация, коллективно используемая родительским компонентом и компонентами-потомками.

Свойств в JSX выглядят так же, как HTML-свойства. Мы назначаем PlayButton свойство, называемое isMusicPlaying , которое является тем же самым, что и isMusicPlaying в this.state .

Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.

Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:

Если мы поменяем состояние на this.state = < isMusicPlaying: true >; и перезагрузим страницу, на ней должна появиться кнопка паузы:

События как свойства

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

Теперь, когда мы щёлкаем по кнопке PlayButton , она меняет состояние Container , которое изменит props PlayButton , что приведёт к обновлению кнопки на странице.

Неприятная особенность setState

При вызове setState изменение состояния не производится мгновенно. React ждёт немного для того, чтобы увидеть, не нужно ли внести ещё какие-то изменения, и только потом производит изменение состояния. Это означает, что нельзя точно знать, каким будет состояние компонента после вызова setState .

Поэтому вот так поступать не следует:

Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.

Выглядит это так:

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

Что такое ссылки?

Пришло время включить музыку. Для начала добавим тег <audio> :

Нам нужен способ обратиться к тегу <audio> и вызвать либо его метод play() , либо pause() . Сделать это можно с помощью конструкции document.getElementById('audio').play() , но React предлагает кое-что получше.

Мы назначаем элементу атрибут, называемый ref , который принимает функцию. Эта функция, в качестве первого аргумента, принимает элемент <audio> , и присваивает его this.audio .

<audio ref= < this.audio = audioTag >> />
Эта функция будет вызываться каждый раз, когда выводится Container , то есть, this.audio всегда будет в актуальном состоянии и будет указывать на тег <audio> .
Теперь мы можем запускать и приостанавливать воспроизведение музыки:

Выгрузим на страницу музыкальный файл (лучше — в формате .mp3) с использованием кнопки Choose files , нажмём на кнопку запуска воспроизведения и послушаем музыку.

React за пределами index.html

Как вы, возможно, догадались, React-код не должен «жить» исключительно внутри тега <script> . React поддерживает множество конфигураций сборки. К счастью, с помощью инструментов вроде Create React App всю рутинную работу по формированию каркаса приложения можно автоматизировать. Установите create-react-app , создайте новый проект, посмотрите руководство и приступайте к работе с JS-файлами в папке проекта src , применяя все те знания по React, которые вы сегодня получили.

Итоги

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

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

Вы получите аналогичное приложение после выполнения этих действий:

локальная установка ReactJS при помощи шаблона;
настройка «корзины» AWS (Amazon Web Services) S3;
создание учетных данных пользователя AWS для загрузки файлов на S3;
развертывание шаблона на AWS;
проверка работоспособности.

Аккаунт AWS (бесплатного будет достаточно). Для интересующихся у нас есть шпаргалка по веб-сервисам Amazon.

1. Установка ReactJS

Клонируем шаблон (запустите команду в терминале), заменив «NameOfApp» на имя своего приложения:

Устанавливаем все библиотеки:

2. Настройка корзины AWS S3

Нажимаем «Create bucket» и вводим имя (например: onederful-quickstart). Нажимаем «Далее» на всех остальных шагах и создаем корзину (bucket, в русскоязычных источниках также можно встретить термин «бакет»):

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

После появления всплывающего окна нажимаем на «Properties»:

Нажимаем на «Static website hosting» и вводим «index.html» в каждом из полей «Index document» и «Error document». Теперь у нас есть общедоступный URL:

Переходим на вкладку «Permissions», вместо [YOUR BUCKET NAME] вписываем свое название проекта:

3. Создаем учетные данные пользователя AWS для загрузки файлов на S3

В консоли управления AWS нажимаем на «IAM» (Identity Access Manager):

Переходим на вкладку «Users», находящуюся на боковой панели, и добавляем пользователя с именем «s3-admin»:

Прикрепляем «AmazonS3FullAccess policy»:

После создания пользователя сохраняем идентификатор доступа и секретный ключ (например, в блокноте) — они будут использоваться на последнем этапе этого руководства:

4. Публикуем шаблон на AWS

Замените следующие данные в файле tools/s3-upload.js :

YOUR_BUCKET_NAME — на название корзины (со второго шага);
YOUR_AWS_ACCESS_KEY — на свой идентификатор доступа (с третьего шага);
YOUR_AWS_SECRET_KEY — на свой секретный ключ (с третьего шага).

5. Проверяем работоспособность и начинаем создавать приложение

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

Настройка AWS должна выполняться только один раз, поэтому после внесения каких-либо изменений в ваше приложение можно просто запустить команду deploy , и в течение нескольких секунд изменения вступят в силу.

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

Что такое React JS?

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

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

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

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

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

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

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

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

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

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

Далее в консоли перейдем в эту папку и запустим команду для инсталляции 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое JSX?

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое Mounting?

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

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

Метод constructor

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

Пример:

ReactDOM . render ( < Header / > , document . getElementById ( 'root' ) ) ;

Что такое Updating?

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

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

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

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

Что такое Unmounting?

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

state

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

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

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

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

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

componentDidMount

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

componentDidUpdate

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

props и propTypes

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

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

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

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

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

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

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

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

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

Что такое hook?

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

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

Читайте также: