Главная » React & Redux » Введение в React: первое знакомство с популярной библиотекой.

Введение в React: первое знакомство с популярной библиотекой.


25.08.2021, 23:53
Современные приложения, в отличие от устаревшего принципа многостраничного дизайна, используют одностраничную модель SPA (Single-Page Applications).

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

React - это библиотека JavaScript для построения пользовательских интерфейсов, созданная совместными усилиями Facebook и Instagram.

Работа с React подразумевает использование виртуальной модели DOM, вместо работы непосредственно с DOM, что ускоряет манипулирование с DOM-деревом.

Виртуальная DOM составлена из элементов React, они похожи на элементы HTML, но фактически являются объектами JavaScript.
Мы работаем с виртуальной DOM, вносим изменения в объект JavaScript, а React за нас отображает эти изменения, максимально эффективно используя API DOM.

Элементы React представляют собой инструкции того, как должна быть создана DOM браузера

При разработке пользовательских интерфейсов, React позволяет применить идею разбиения элементов на более мелкие компоненты (работать необходимо с модульными, компактными и автономными элементами), из которых затем, путём объединения, можно создавать более крупные и сложные визуальные компоненты.

В библиотеке React используется HTML-подобный синтаксис JSX, наряду с JavaScript. При создании приложений на React, требуется преобразование (транспиляция) JSX в JavaScript, понятный браузеру.

Здесь есть два пути решения:

1. Настройка программной среды разработки с Node и инструментами для сборки приложений (современный способ веб-разработки).

2. Автоматическое преобразование JSX в JavaScript самим браузером (задаём код JSX как любой другой JavaScript-код, браузер сам производит преобразование).
Годится для изучения React, но не для реального использования приложений (снижается производительность браузера).

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

В шапку страницы подключаем библиотеку и всё, что ей нужно для работы с DOM:

Код

  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

Подключаем также компилятор Babel (для перевода JSX в JavaScript)

Код

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

Так выглядит код начальной пустой страницы:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Начало работы с React</title>

  <!-- подключаем библиотеку React и всё нужное ей для работы с DOM -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

  <!-- подключаем компилятор Babel для перевода JSX в JavaScript -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>
<body>
  <script>
   
  </script>
</body>
</html>

Так можно вывести на страницу какой-нибудь заголовок (код вставляем в теги script, для которых добавляем атрибут type со значением "text/babel"):

Код

  <script type="text/babel">
  ReactDOM.render(
  <h1> Добро пожаловать в React! </h1>,
  document.body
  );
  </script>

Метод ReactDOM.render() принимает аргументы:

1. HTML-подобные (JSX) элементы, которые нам нужно вывести на странице

2. Целевое место в DOM, где нужно разместить элемент (в примере выше заголовок помещается в элемент body)

Если в коде страницы добавить какой-нибудь блок div с идентификатором id = "container", то чтобы добавить заголовок h1 в него, находим этот блок и добавляем в него заголовок:

Код

  <script type="text/babel">
  ReactDOM.render(
  <h1> Добро пожаловать в React! </h1>,
  document.querySelector('#container')
  );
  </script>

Другой вариант - вынести найденный элемент в переменную (userBlock), и уже её использовать в методе render()

Код

  <script type="text/babel">
  let userBlock = document.querySelector('#container');
  ReactDOM.render(
  <h1> Добро пожаловать в React! </h1>,
  userBlock
  );
  </script>

Компоненты React

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

Компонент - это автономный модуль, содержащий часть визуальных элементов приложения.

Концептуально компоненты имеют много общего с функциями.

Компоненты React - это многократно используемые фрагменты JavaScript-кода, которые выводят HTML-элементы (благодаря JSX)

Как создавать компоненты?

Например, нужно создать компонент, который будет выводить наш заголовок на страницу.

Ранее это делалось так:

Код

   ReactDOM.render(
       <h1> Добро пожаловать в React! </h1>,
         document.querySelector('#container')
   );

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

Код

class Welcome extends React.Component {
              
}

Вот что в итоге получим:

Код

<script type="text/babel">

         class Welcome extends React.Component {
              
         }

         ReactDOM.render(
         <h1> Добро пожаловать в React! </h1>,
          document.querySelector('#container')
         );
</script>

Мы создали компонент Welcome, который расширяет класс React.Component. Мы можем теперь добавить метод render() внутри компонента, результатом работы которого будет возвращаемое значение (JSX-код с текстом) :

Код

         class Welcome extends React.Component {
             render() {
                 return <p>Мы создали компонент React!</p>
             }
         }

Чтобы использовать этот компонент, вызовем его из метода ReactDOM.render, заменив первый аргумент таким:

Код

         ReactDOM.render(
         <Welcome/>,  /* вызываем компонент  */
          document.querySelector('#container')
         );

Можно поместить вызов компонента в элемент div, при этом продублировав вызов несколько раз:

Код

         ReactDOM.render(
             <div>
                 <Welcome/>
                 <Welcome/>
                 <Welcome/>
                 <Welcome/>
                 <Welcome/>
             </div>,
          document.querySelector('#container')
         );

Всё прекрасно отработает и на странице сайта мы увидим пять раз фразу "Мы создали компонент React!"

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

Аргументы для компонентов называются свойствами.

Сделаем так, чтобы инструкция return возвращала значение, передаваемое свойством, для этого дадим свойству имя propertyName и используем его:

Код

         class Welcome extends React.Component {
             render() {
                 return <p>Мы создали компонент {this.props.propertyName}!</p>
             }
         }

С помощью свойства this.props мы получаем доступ к свойству propertyName. Теперь нам нужно лишь передавать значение свойства как часть кода вызова компонента, для этого добавляем атрибут с именем свойства и значением, которое нужно передать:

Код

     <script type="text/babel">

         class Welcome extends React.Component {
             render() {
                 return <p>Мы создали компонент {this.props.propertyName}!</p>
             }
         }

         ReactDOM.render(
             <div>
                 <Welcome propertyName = "Welcome"/>
             </div>,
          document.querySelector('#container')
         );
     </script>

И теперь уже на странице сайта мы увидим фразу "Мы создали компонент Welcome!"

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

Работа с дочерними элементами

Так как у компонентов JSX много похожего с HTML-элементами, они также могут иметь дочерние элементы.

Доступ к дочерним элементам из компонента можно получить с помощью свойства children, доступ к которому, в свою очередь, получаем через this.props.children.

Пример: рассмотрим компонент, который помещает дочерние элементы в элемент button:

Код

     <script type="text/babel">
         class ButtonAdd extends React.Component {
             render() {
                 return(
                     <div>
                         <button type = {this.props.buttonType}>{this.props.children}</button>     
                     </div>
                 );
             }
         }
     </script>

С помощью свойства buttonType мы передаём атрибуту type значение submit, передавая его при вызове компонента:

Код

         ReactDOM.render(
             <div>
                 <ButtonAdd buttonType = "submit">Отправить</ButtonAdd>
             </div>,
             document.querySelector('#container')
         );

В итоге на странице сайта мы увидим кнопку с текстом "Отправить".

Стилизация контента React с помощью CSS

Определяем на странице блок-контейнер:

Код

let container = document.querySelector('#container');

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

Код

     <div id="container"></div>

     <script type="text/babel">
         let container = document.querySelector('#container');

         class Letter extends React.Component {
             render() {
                 return(
                     <div>
                          {this.props.children}   
                     </div>
                 );
             }
         }
     </script>

Многократно вызываем наш компонент, каждый раз меняя его дочерний элемент:

Код

         ReactDOM.render(
             <div>
                 <Letter>R</Letter>
                 <Letter>E</Letter>
                 <Letter>A</Letter>
                 <Letter>C</Letter>
                 <Letter>T</Letter>     
             </div>,
             container
         );


Полученный результат на странице сайта

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

По-сути, сейчас структура такова:

Код

<div id="container">
     <div>
         <div>R</div>
         <div>E</div>
         <div>A</div>
         <div>C</div>
         <div>T</div>
     </div>
</div>

Чтобы назначить и применить стили для блоков div, содержащих буквы, делаем так (добавляем в теги style или в файл CSS-стилей):

Код

div div div {
      /*  А здесь CSS-стили  */
}

Например:

Код

div div div {
     padding: 10px;
     margin: 10px;
     background-color: #FFDE00;
     color: #333333;
     display: inline-block;
     font-family: monospace;
     text-align: center;
}


Мы выполнили задачу!

Другим вариантом решения нашей задачи может быть назначение класса для внутренних элементов div, делается это так (обратите внимание, что для назначения класса используется атрибут className, но не class):

Код

         class Letter extends React.Component {
             render() {
                 return(
                     <div className = "letter">
                          {this.props.children}
                     </div>
                 );
             }
         }

Теперь остаётся лишь прописать класс .letter с его свойствами и значениями в CSS-стилях:

Код

.letter {
     padding: 10px;
     margin: 10px;
     background-color: #FFDE00;
     color: #333333;
     display: inline-block;
     font-family: monospace;
     text-align: center;
}

КОММЕНТАРИИ (0)