Это первая из серии статей, посвященных вводным концепциям 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.
Во фрагменте кода:
- Мы создаем
div
с идентификаторомroot
. - Мы добавляем тег
script
с нашим кодом JavaScript. ПРИМЕЧАНИЕ. В HTML5 атрибутtype="text/javascript"
не является обязательным. Мы выбираемdiv
из DOM и сохраняем его в переменной с именемrootElement
. - Затем мы создаем элемент
h1
DOM, используяcreateElement
, и сохраняем его в переменной с именемelement
. - Мы устанавливаем
textContent
h1
на «Hello World» и присваиваем емуclass
«контейнер» (это свойства). - Мы добавляем элемент
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 аргумента:
type
создаваемого элемента. Здесь мы предоставляем строку имени тегаh1
.- Объект, содержащий атрибуты / свойства, переданные элементу. Здесь мы предоставляем
className
. В React они обозначаются какprops
. - Контент, отображаемый внутри тега. Здесь мы передаем текстовое содержимое «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.
- Часть 1: Основы
- Часть 2: Состояние и жизненный цикл
- Часть 3: Обработка событий
- Часть 4: Работа с формами
- Часть 5: Работа с удаленными данными
- Часть 6: Среда разработки
- Часть 7: Вавилон и Webpack
- Часть 8: За пределами JavaScript
- Часть 9: Создать приложение React