Это первая из серии статей, посвященных вводным концепциям React.

Прежде чем мы начнем, я хотел бы, чтобы мы все прочитали эту статью Брэда Фроста https://the-pastry-box-project.net/brad-frost/2014-january-28. Я пишу эти сообщения с предположением, что объясняю React более ранней версии себя, в то время, когда я не знал того, что знаю сейчас. Поэтому я постараюсь предоставить как можно больше контекста.

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

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

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

Мы запишем код в автономном файле с именем index.html, который будет загружен прямо в наш браузер. Это сделано для того, чтобы не отвлекаться и сосредоточиться на изучении React.

Мы начнем с простого приложения «Hello World», написанного на обычном JavaScript.

Во фрагменте кода:

  1. Мы создаем div с идентификатором root.
  2. Мы добавляем тег script с нашим кодом JavaScript. ПРИМЕЧАНИЕ. В HTML5 атрибут type="text/javascript" не является обязательным. Мы выбираем div из DOM и сохраняем его в переменной с именем rootElement.
  3. Затем мы создаем элемент h1 DOM, используя createElement, и сохраняем его в переменной с именем element.
  4. Мы устанавливаем textContent h1 на «Hello World» и присваиваем ему class «контейнер» (это свойства).
  5. Мы добавляем элемент h1 к нашему корневому элементу div.

Если мы сохраним этот файл и откроем его в нашем браузере, мы должны увидеть текст «Hello World», отображаемый на странице.

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

React Elements

Элементы React - это самые маленькие строительные блоки приложений React, которые используются для описания того, что вы хотите видеть на экране. Однако в отличие от элементов DOM браузера, элементы React представляют собой простые объекты JavaScript.

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

Мы обновим наш код следующим образом:

Сначала мы включаем сценарии React и ReactDOM в тег head. Мы ссылаемся на сценарии CDN (Content Delivery Network) для React версии 16. Мы также можем загрузить сценарии и сохранить их локально, чтобы получить к ним доступ без подключения к Интернету.

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

БОКОВОЕ ПРИМЕЧАНИЕ: Обратите внимание, что мы используем две отдельные библиотеки, React и ReactDOM. Пакет React предоставляет API-интерфейсы для определения элементов React, тогда как библиотека ReactDOM - это то, что называется «средством визуализации», и именно там живет большая часть реализации React. React поставляется с несколькими модулями рендеринга, включая react-dom, для рендеринга наших элементов React в браузере, react-dom/server, для рендеринга наших элементов React на сервере, react-native, для рендеринга наших элементов React на собственных мобильных устройствах в виде приложений Android или iOS и т. Д.

В этом фрагменте после выбора div из DOM и сохранения его в переменной rootElement мы затем используем метод createElement React для создания нового элемента. Этот метод принимает как минимум 3 аргумента:

  1. type создаваемого элемента. Здесь мы предоставляем строку имени тега h1.
  2. Объект, содержащий атрибуты / свойства, переданные элементу. Здесь мы предоставляем className. В React они обозначаются как props.
  3. Контент, отображаемый внутри тега. Здесь мы передаем текстовое содержимое «Hello World». В React это называется children, и они также относятся к категории props.

Метод render в ReactDOM используется для рендеринга element в DOM внутри предоставленного container. Здесь мы рендерим наш созданный element внутри rootElement div.

Что возвращает React.createElement?

Если мы выходим из системы значение element:

затем откройте консоль разработчика и разверните зарегистрированный объект, мы видим, что свойство props содержит className, а также текстовое содержимое с ключом children:

Поскольку текстовое содержимое, которое мы предоставили в качестве третьего элемента для React.createElement, объединено в объекте props, мы также можем предоставить его под ключом children во втором аргументе React.createElement, и мы получим тот же результат.

Если нам нужно отобразить несколько дочерних элементов, мы можем передать их в свойство children в виде массива, и каждый из них будет отображен в DOM:

Мы также можем передать другой элемент React как один из элементов массива children, что позволит нам строить вложенные деревья DOM.

В приведенном выше фрагменте показаны два отдельных элемента React: helloElement и worldElement. wrapperElement - это то, что мы визуализируем в DOM, и мы передаем helloElement и worldElement в качестве его дочерних элементов.

ПРИМЕЧАНИЕ. Мы передаем null в качестве второго аргумента React.createElement при создании helloElement. Мы делаем это, потому что не хотим передавать элементу какие-либо атрибуты props /.

Компоненты React

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

Компонент React - это функция или класс, который необязательно принимает входные данные (называемые «реквизитами») и возвращает элемент React.

Теперь мы можем создавать компоненты, превращая наши элементы React в функции.

ПРИМЕЧАНИЕ. Всегда начинайте имена компонентов с заглавной буквы, поскольку React рассматривает компоненты, начинающиеся со строчных букв, как теги DOM.

В этом фрагменте у нас теперь есть один компонент React: GreetingComponent. Этот компонент просто возвращает один из элементов React, которые у нас были ранее. Единственное отличие состоит в том, что содержимое, переданное в качестве третьего аргумента, не жестко закодировано, а вместо этого передается как ключ text параметра props.

Мы по-прежнему будем использовать метод React.createElement, чтобы получить возвращаемый элемент из этого компонента.

Помимо параметра type метода React.createElement, являющегося строкой имени тега, как мы видели в первом примере, он также может быть компонентом React (функцией или классом).

Поэтому мы передаем функцию GreetingComponent в качестве первого аргумента и «опору» text в качестве второго аргумента.

Представляем JSX

JSX - это расширение синтаксиса JavaScript, которое используется с React для описания того, как должен выглядеть пользовательский интерфейс. JSX предоставляет синтаксический сахар для функции React.createElement(component, props, ...children) (синтаксический сахар - это синтаксис в языке программирования, который разработан, чтобы упростить чтение или выражение. Это делает язык «слаще» »Для использования людьми: вещи могут быть выражены более ясно, лаконично или в альтернативном стиле, который некоторые могут предпочесть.). Мы можем использовать JSX для упрощения создания компонентов React, особенно при работе с глубоко вложенными деревьями DOM.

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

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

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

Чтобы использовать Babel, нам нужно включить автономную версию Babel в заголовок нашего HTML-кода. Мы будем использовать следующую ссылку CDN. Мы также можем загрузить его и использовать локально.

https://unpkg.com/[email protected]/babel.min.js

Также важно написать наш код JavaScript внутри сценария с type="text/babel".

Вот как теперь выглядит наш код с синтаксисом JSX:

Во фрагменте мы заменили возвращаемое значение компонента функции GreetingComponent React на <h2>{props.text}</h2>. h2 - это наш JSXElementName, а {props.text} - это JSXChild, который будет отображаться как содержимое h2. Поскольку этот элемент JSX начинается со строчной буквы, он будет отображать HTML-тег h2 в DOM.

Мы создали новый компонент функции React под названием App(), который возвращает тот же результат, что и предыдущий wrapperElement. App() возвращает единственный элемент JSX div, который отображает элемент HTML div в DOM (потому что он начинается со строчной буквы). div принимает атрибут id, используя тот же синтаксис, что и HTML. В React это называется «опора».

Подобно тегам HTML, мы можем вкладывать теги JSX. Тег div содержит два дочерних элемента: два тега <GreetingComponent> JSX. Поскольку имя тега GreetingComponent начинается с заглавной буквы, React требует, чтобы компонент GreetingComponent (функция или класс) находился в области видимости, поскольку он будет перенесен в React.createElement(GreetingComponent).

В первый раз React вызовет функцию GreetingComponent и передаст ей свойство text в виде строки «Hello». Тогда компонент GreetingComponent вернет в качестве результата элемент <h2>Hello</h2>.

Наконец, чтобы отобразить компонент App() в DOM, мы передаем тег <App /> JSX методу ReactDOM.render(). Запуск этого кода в браузере даст нам тот же результат, что и раньше.

Еще немного JSX

Мы видели немного синтаксиса JSX, но это еще не все.

Мы можем встроить любое выражение JavaScript в JSX, заключив его в фигурные скобки.

Мы можем использовать JSX внутри if операторов и for циклов, назначать его переменным, принимать в качестве аргументов и возвращать из функций:

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

Например, class становится className в JSX.

Мы также можем использовать фигурные скобки для встраивания выражения JavaScript в атрибут:

Узнайте больше о JSX из официальной документации React, перейдя по этой ссылке https://reactjs.org/docs/jsx-in-depth.html

Это первая часть серии статей, посвященных вводным концепциям React.