Что такое ReactJS, и для чего его можно использовать?

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

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

React – это клиентская библиотека JavaScript, что означает, что она работает на машине клиента/пользователя в браузере, а не на сервере

Она была создана в 2011 году технологическим гигантом Facebook. Библиотека React используется для создания динамических пользовательских интерфейсов и работает путем разделения аспектов пользовательского интерфейса на так называемые ‘компоненты’

В этой обучающей статье вы узнаете все, что вам нужно знать о React и его компонентах

Что такое ReactJS?

React (также известный как ReactJS) – это библиотека JavaScript с открытым исходным кодом, которую часто ошибочно называют фреймворком. Это связано с тем, что React является прямым конкурентом ведущих JavaScript-фреймворков, таких как AngularJS и VueJS

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

React более тесно связан с такими фреймворками, как Angular/Vue, чем с другими библиотеками языка, такими как jQuery

Каковы преимущества использования ReactJS?

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

• Он позволяет создавать интерфейс, используя так называемые ‘повторно используемые компоненты’, которые имеют состояние и данные.
• Он использует расширение синтаксиса JavaScript (JSX), которое позволяет пользователю писать динамический HTML.
• Она использует виртуальную объектную модель документа (VDOM), которая позволяет разработчику обновлять определенные разделы веб-страницы без необходимости перезагрузки страницы.

 

Что такое компоненты ReactJS?

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

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

Похожие: Введение в веб-компоненты и компонентно-ориентированную архитектуру

В своей простейшей форме компонент – это класс или функция JavaScript. Они принимают входные значения, которые называются ‘props’, и возвращают определенные аспекты пользовательского интерфейса в виде элементов React. Для некоторых разработчиков определение компонента как функции проще, чем определение его как класса; однако использование любого из этих методов позволяет добиться одинакового результата в React

Пример создания компонента с помощью функции

functionCustomer

   return

       <div>

           <h3>Paul Wilson</h3>

           <ul>

               <li>Phone:222-222-2222</li>

               <li>Email: Wilsonp@email.com</li>

               <li>Balance: $0. 00</li>

           </ul>

       </div>

   );

exportdefaultCustomer;

Создание компонента на примере класса

importReactfrom'react'

classCustomerextendsReactComponent

   render() {.

       return

           <div>

           <h3>Paul Wilson</h3>

           <ul>

               <li>Phone:222-222-2222</li>

               <li>Email: Wilsonp@email.com</li>

               <li>Balance: $0. 00</li>

           </ul>

           </div>

       );

   }.

exportdefaultCustomer;

Как видно из приведенных примеров, при создании компонента с использованием класса происходит гораздо больше событий. Первое, что важно отметить, это то, что при создании компонента класса необходимо использовать функцию render()

Как вы, возможно, знаете, вы не можете возвращаться непосредственно из класса; поэтому функция render() помогает это сделать

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

Что такое расширение синтаксиса JavaScript?

Расширение синтаксиса JavaScript (JSX) – это элемент React, возвращаемый компонентом. Это описание того, как должен выглядеть конкретный раздел/компонент в пользовательском интерфейсе. По внешнему виду он похож на HTML, но на самом деле это JavaScript

Пример JSX

           <div>

           <h3>Paul Wilson</h3>

           <ul>

               <li>Phone:222-222-2222</li>

               <li>Email: Wilsonp@email.com</li>

               <li>Balance: $0. 00</li>

           </ul>

           </div>

Приведенный выше пример JSX был взят из компонента клиента. Код выглядит как HTML, но это JSX. Хотя различия между ними не очень очевидны из приведенного примера, есть несколько явных отличий. Например, в HTML вы используете свойство class для группировки похожих элементов, но в JSX вы используете свойство className

Что такое виртуальная DOM?

Виртуальный модуль объектов документа (VDOM) – это копия реального DOM. Как правило, при обновлении реального DOM пользовательский интерфейс, который изменяется, необходимо обновить, чтобы отобразить изменения. Однако при использовании виртуального DOM изменения в пользовательском интерфейсе происходят мгновенно. Состояние виртуального DOM затем используется для обновления реального DOM в процессе, известном как ‘согласование’

Изучение файлов проекта React

При создании нового проекта React автоматически создается несколько различных файлов и папок. Одна из этих папок помечена как public. В папке public содержится единственный HTML-файл React boilerplate, который называется index.html

В файле index.html есть тег <div> с корневым идентификатором, который важен, поскольку именно здесь происходит рендеринг основного компонента React (так называется процесс преобразования ваших компонентов react в узлы DOM, которые могут быть отображены в браузере)

Однако процесс рендеринга происходит в другом файле — index.js — где корневой файл React Application, который является файлом App.js , рендерится, а затем передается в файл index.html

Из файла index.html вы можете изменить заголовок вашего веб-приложения; однако все остальные изменения в React-приложении (включая создание нового компонента) производятся из другой папки — папки src. Папка src содержит файлы index.js и App.js

Файл App.js является корневым компонентом react и отвечает за то, что изначально отображается в вашем веб-браузере при первом запуске приложения React. Файл App.js содержит функцию App , которая возвращает JSX. Узнать больше о React boilerplate и о том, как установить приложение react, можно здесь

Создание компонента

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

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

Пример создания нового компонента

functionCustomer

   return

       <div>

           <h3>Paul Wilson</h3>

           <ul>

               <li>Phone:222-222-2222</li>

               <li>Email: Wilsonp@email.com</li>

               <li>Balance: $0. 00</li>

           </ul>

       </div>

   );

exportdefaultCustomer;

Приведенный выше код создает новый компонент customer и экспортирует функцию, чтобы компонент customer мог быть импортирован компонентом App

Использование примера компонента App

importCustomerfrom'./components/Customer'

functionApp

 return

   <div>

     <h1>Customer Manager</h1>

     <Customer/>

   </div>

 );

exportdefaultApp;

Как видно из примера выше, компонент app импортирует компонент customer и располагает его в том порядке, в котором он должен появиться в пользовательском интерфейсе (в данном случае после ярлыка менеджера customer). Затем компонент App экспортируется и импортируется в файл index.js , где он рендерится и отображается в DOM

Важно помнить, что у компонента App может быть только один родительский элемент (в приведенном примере это тег <div> ). Поэтому любой элемент вне этого родительского элемента не будет отображаться в пользовательском интерфейсе

Рендеринг примера компонента приложения

importReactfrom'react'

importReactDOMfrom'react-dom'

importAppfrom'./App'

ReactDOM.render(.

 <React.StrictMode>

   <App />

 </React.StrictMode>,

 document.getElementById('root'

);

Код выше отображает содержимое файла index.js , который использует функцию render для рендеринга компонента App в DOM с помощью метода document.getElementById(‘root’) в коде выше. Это становится возможным благодаря идентификатору root, используемому файлом index.html для представления в браузере следующего вывода:

Теперь вы можете создавать компоненты в ReactJS

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

Теперь вы можете создавать профессиональные пользовательские интерфейсы с помощью библиотеки React. Но нет необходимости останавливаться на React. Существует целый ряд других инструментов, которые можно использовать для дополнения процесса разработки фронтенда