Введение в React

Что такое React. Первое приложение

Последнее обновление: 01.04.2022

React - это библиотека JavaScript, которая используется для создания пользовательского интерфейса. Первый релиз библиотеки увидел свет в марте 2013 года. Текущей версий на данный момент (март 2022 года) является версия React v18.0.

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

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

React относительно прост в освоении, имеет понятный и лаконичный синтаксис.

Виртуальный DOM

Вся структура веб-страницы может быть представлена с помощью DOM (Document Object Model)- организация элементов html, которыми мы можем манипулировать, изменять, удалять или добавлять новые. Для взаимодействия с DOM применяется язык JavaScript. Однако когда мы пытаемся манипулировать html-элементами с помощью JavaScript, то мы можем столкнуться со снижением производительности, особенно при изменении большого количества элементов. А операции над элементами могут занять некоторое время, что неизбежно скажется на пользовательском опыте. Однако если бы мы работали из кода js с объектами JavaScript, то операции производились бы быстрее.

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

Виртуальный DOM представляет легковесную копию обычного DOM. И отличительной особенностью React является то, что данная библиотека работает именно с виртуальным DOM, а не обычным.

Если приложению нужно узнать информацию о состоянии элементов, то происходит обращение к виртуальному DOM.

Если необходимо изменить элементы веб-страницы, то изменения вначале вносятся в виртуальный DOM. Потом новое состояние виртуального DOM сравнивается с текущим состоянием. И если эти состояния различаются, то React находит минимальное количество манипуляций, которые необходимы до обновления реального DOM до нового состояния и производит их.

В итоге такая схема взаимодействия с элементами веб-страницы работает гораздо быстрее и эффективнее, чем если бы мы работали из JavaScript с DOM напрямую.

Другие особенности React

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

Еще одна особенность React - использование JSX. JSX представляет комбинацию кода JavaScript и XML и предоставляет простой и интуитивно понятный способ для определения кода визуального интерфейса.

React развивается как открытый проект, и все сайты библиотеки доступны на репозитории на github. Кроме того, при изучении Reacta также будет полезен официальный сайт с документацией - https://reactjs.org/, где можно найти всю информацию по библиотеке.

Начало работы с React

Создадим простейшее приложение. Для этого определим на жестком диске для проекта новую папку, к примеру, я создал каталог C:\react\helloapp, и добавим в эту папку новый файл index.html со следующим кодом:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello React</title>
</head>
<body>
    <div id="app"> </div>
      
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     
   <script type="text/babel">
    const rootNode = document.getElementById("app");    // элемент для рендеринга приложения React
    // получаем корневой элемент 
    const root = ReactDOM.createRoot(rootNode);
    // рендеринг в корневой элемент
    root.render(
        <h1>Hello React</h1>  // элемент, который мы хотим создать
     );
   </script>
</body>
</html>

Рендеринг элемента на веб-странице разбивается на два этапа. Вначале нам надо установить элемент веб-страницы, в который будет производиться рендеринг приложения React. Для этого применяется метод ReactDOM.createRoot(). В него передается элемент веб-страницы, в котором будет производиться рендеринг. В данном случае это элемент <div id="app">

const rootNode = document.getElementById("app");    // элемент для рендеринга приложения React
// получаем корневой элемент 
const root = ReactDOM.createRoot(rootNode);

На втором этапе в полученный элемент веб-страницы собственно производится рендеринг. Для этого вызывается метод render(). В этот метод передается компонент, который мы хотим оторазить на веб-странице. В данном случае это обычный заголовок.

root.render(
        <h1>Hello React</h1>,  // элемент, который мы хотим создать
     )

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

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

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

Также для компиляции кода нам необходим компилятор Babel, который позволяет скомпилировать приложение при запуске в браузере.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Также стоит отметить, что для следующего элемента script, который содержит основной код приложения, определен атрибут type="text/babel". Этот атрибут и указывает, что данный код должен обрабатываться выше подключенным компилятором Babel.

Перетащим страницу в браузер и увидим заголовок:

Начало работы с React

СодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850