В одном из наших предыдущих материалов мы задавали вам вопрос о том, целесообразно ли сделать на базе этого курса по React серию традиционных публикаций. Вы нашу идею поддержали. Поэтому сегодня мы представляем вашему внимание продолжение курса. Здесь мы поговорим о функциональных компонентах.
![image](https://habrastorage.org/r/w1560/webt/kv/3m/yg/kv3mygzwigixivdzbagb80fvlvi.png)
→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект
→ Оригинал
На предыдущем практическом занятии мы говорили о том, что необязательно размещать весь JSX-код, формирующий HTML-элементы, в аргументе метода
Представьте себе, что надо вывести, пользуясь таким же подходом, целую веб-страницу, на которой имеются сотни элементов. Если это сделать, то нормально поддерживать такой код будет практически невозможно. Когда мы говорили о причинах популярности React, одной из них была поддержка этой библиотекой компонентов, подходящих для повторного использования. Сейчас мы поговорим о том, как создавать функциональные компоненты React.
Эти компоненты называются «функциональными» из-за того, что создают их, конструируя особые функции.
Создадим новую функцию и дадим ей имя
Имя функции сделано именно таки по той причине, что здесь используется схема именования функций-конструкторов. Их имена (фактически — имена компонентов) записываются в верблюжьем стиле — первые буквы слов, из которых они состоят, делаются заглавными, в том числе — первая буква первого слова. Вам следует строго придерживаться этого соглашения об именовании подобных функций.
Функциональные компоненты устроены довольно просто. А именно, в теле функции должна быть команда, возвращающая JSX-код, который и представляет соответствующий компонент.
В нашем примере достаточно взять код маркированного списка и организовать возврат этого кода из функционального компонента. Вот как это может выглядеть:
И хотя в данном случае всё будет работать так, как ожидается, то есть, команда
При таком подходе возвращаемая из компонента разметка оказывается очень похожей на обычный HTML-код.
Теперь, в методе
Можно заметить, что тут использован самозакрывающийся тег. В некоторых случаях, когда нужно создавать компоненты, имеющие более сложную структуру, подобные конструкции строятся иначе, но пока мы будем пользоваться именно такими самозакрывающимися тегами.
Если обновить страницу, сформированную средствами вышеприведённого кода, то её внешний вид будет таким же, каким он был до выноса разметки маркированного списка в функциональный компонент.
Разметка, которую возвращают функциональные компоненты, подчиняется тем же правилам, которые мы рассматривали в применении к первому параметру метода
Возможно, вы уже начали ощущать то, какие мощные возможности даёт нам использование функциональных компонентов. В частности, речь идёт о создании собственных компонентов, которые содержат фрагменты JSX-кода, представляющие собой описание HTML-разметки, которая окажется на веб-странице. Такие компоненты можно компоновать друг с другом.
В нашем примере имеется компонент, выводящий простой HTML-список, но, по мере того, как мы будем создавать всё более сложные приложения, мы будем разрабатывать компоненты, выводящие другие созданные нами компоненты. В итоге всё это будет превращаться в обычные HTML-элементы, но иногда для формирования этих элементов понадобятся, возможно, десятки собственных компонентов.
В итоге, когда мы будем создавать всё больше компонентов, мы будем размещать их в отдельных файлах, но пока вам важно освоить то, что мы только что обсудили, привыкнуть к функциональным компонентам. В процессе прохождения курса вы будете создавать всё более и более сложные файловые структуры.
На этом занятии мы разобрали основы функциональных компонентов, а на следующем применим полученные знания на практике.
→ Оригинал
Стилизуйте элементы страницы, самостоятельно узнав о том, как это сделать (поищите в Google). Надо отметить, что о стилизации компонентов мы в этом курсе ещё поговорим.
Примечание: сворачиваемый блок
Тут нас устроит такая же HTML-страница, которой мы пользовались ранее. Файл с React-кодом тоже будет выглядеть вполне стандартно. А именно, импортируем в него библиотеки, создадим каркас функционального компонента
Теперь нужно вернуть из
Обратите внимание на то, что конструкция, возвращаемая из
В этом материале мы познакомились с функциональными компонентами React. В следующий раз поговорим о файлах компонентов и о структуре React-проектов.
Уважаемые читатели! Если вы проходите этот курс — просим рассказать о том, в какой среде вы выполняете упражнения.
![](https://habrastorage.org/r/w780q1/webt/n0/ry/op/n0ryop7wfykgkeicz3mtuwghrcu.jpeg)
![image](https://habrastorage.org/webt/kv/3m/yg/kv3mygzwigixivdzbagb80fvlvi.png)
→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект
Занятие 6. Функциональные компоненты
→ Оригинал
На предыдущем практическом занятии мы говорили о том, что необязательно размещать весь JSX-код, формирующий HTML-элементы, в аргументе метода
ReactDOM.render()
. В нашем случае речь идёт о маркированном списке, таком, описание которого представлено ниже.import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>,
document.getElementById("root")
)
Представьте себе, что надо вывести, пользуясь таким же подходом, целую веб-страницу, на которой имеются сотни элементов. Если это сделать, то нормально поддерживать такой код будет практически невозможно. Когда мы говорили о причинах популярности React, одной из них была поддержка этой библиотекой компонентов, подходящих для повторного использования. Сейчас мы поговорим о том, как создавать функциональные компоненты React.
Эти компоненты называются «функциональными» из-за того, что создают их, конструируя особые функции.
Создадим новую функцию и дадим ей имя
MyApp
:import React from "react"
import ReactDOM from "react-dom"
function MyApp() {
}
ReactDOM.render(
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>,
document.getElementById("root")
)
Имя функции сделано именно таки по той причине, что здесь используется схема именования функций-конструкторов. Их имена (фактически — имена компонентов) записываются в верблюжьем стиле — первые буквы слов, из которых они состоят, делаются заглавными, в том числе — первая буква первого слова. Вам следует строго придерживаться этого соглашения об именовании подобных функций.
Функциональные компоненты устроены довольно просто. А именно, в теле функции должна быть команда, возвращающая JSX-код, который и представляет соответствующий компонент.
В нашем примере достаточно взять код маркированного списка и организовать возврат этого кода из функционального компонента. Вот как это может выглядеть:
function MyApp() {
return <ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
}
И хотя в данном случае всё будет работать так, как ожидается, то есть, команда
return
вернёт весь этот код, рекомендуется заключать подобные конструкции в круглые скобки и применять ещё одно соглашение, принятое в React при форматировании кода программ. Оно заключается в том, что отдельные элементы помещают на отдельных строках и соответствующим образом выравнивают. В результате применения вышеописанных идей код нашего функционального компонента будет выглядеть так:function MyApp() {
return (
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
)
}
При таком подходе возвращаемая из компонента разметка оказывается очень похожей на обычный HTML-код.
Теперь, в методе
ReactDOM.render()
, можно создать экземпляр нашего функционального компонента, передав его этому методу в качестве первого аргумента и заключив его в JSX-тег.import React from "react"
import ReactDOM from "react-dom"
function MyApp() {
return (
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
)
}
ReactDOM.render(
<MyApp />,
document.getElementById("root")
)
Можно заметить, что тут использован самозакрывающийся тег. В некоторых случаях, когда нужно создавать компоненты, имеющие более сложную структуру, подобные конструкции строятся иначе, но пока мы будем пользоваться именно такими самозакрывающимися тегами.
Если обновить страницу, сформированную средствами вышеприведённого кода, то её внешний вид будет таким же, каким он был до выноса разметки маркированного списка в функциональный компонент.
Разметка, которую возвращают функциональные компоненты, подчиняется тем же правилам, которые мы рассматривали в применении к первому параметру метода
ReactDOM.render()
. То есть — нельзя, чтобы в ней присутствовали JSX-элементы, следующие друг за другом. Попытка поместить в предыдущем примере после элемента <ul>
любой другой элемент, скажем — <ol>
, приведёт к ошибке. Избежать этой проблемы можно, например, просто обернув всё, что возвращает функциональный компонент, в элемент <div>
.Возможно, вы уже начали ощущать то, какие мощные возможности даёт нам использование функциональных компонентов. В частности, речь идёт о создании собственных компонентов, которые содержат фрагменты JSX-кода, представляющие собой описание HTML-разметки, которая окажется на веб-странице. Такие компоненты можно компоновать друг с другом.
В нашем примере имеется компонент, выводящий простой HTML-список, но, по мере того, как мы будем создавать всё более сложные приложения, мы будем разрабатывать компоненты, выводящие другие созданные нами компоненты. В итоге всё это будет превращаться в обычные HTML-элементы, но иногда для формирования этих элементов понадобятся, возможно, десятки собственных компонентов.
В итоге, когда мы будем создавать всё больше компонентов, мы будем размещать их в отдельных файлах, но пока вам важно освоить то, что мы только что обсудили, привыкнуть к функциональным компонентам. В процессе прохождения курса вы будете создавать всё более и более сложные файловые структуры.
На этом занятии мы разобрали основы функциональных компонентов, а на следующем применим полученные знания на практике.
Занятие 7. Практикум. Функциональные компоненты
→ Оригинал
▍Задание
- Подготовьте базовый React-проект.
- Создайте функциональный компонент
MyInfo
, формирующий следующие HTML-элементы:
- Элемент
<h1>
с вашим именем. - Текстовый абзац (элемент
<p>
), содержащий ваш краткий рассказ о себе. - Список, маркированный (
<ul>
) или нумерованный (<ol>
), с перечнем трёх мест, которые вам хотелось бы посетить.
- Элемент
- Выведите экземпляр компонента
MyInfo
на веб-страницу.
▍Дополнительное задание
Стилизуйте элементы страницы, самостоятельно узнав о том, как это сделать (поищите в Google). Надо отметить, что о стилизации компонентов мы в этом курсе ещё поговорим.
Примечание: сворачиваемый блок
▍Решение
Тут нас устроит такая же HTML-страница, которой мы пользовались ранее. Файл с React-кодом тоже будет выглядеть вполне стандартно. А именно, импортируем в него библиотеки, создадим каркас функционального компонента
MyInfo
и вызовем метод render()
объекта ReactDOM
, передав ему компонент, который надо вывести на страницу, и ссылку на элемент страницы, в котором должен быть выведен этот компонент. На данном этапе работы код будет выглядеть так:import React from "react"
import ReactDOM from "react-dom"
function MyInfo() {
}
ReactDOM.render(<MyInfo />, document.getElementById("root"))
Теперь нужно вернуть из
MyInfo
JSX-код, формирующий HTML-разметку в соответствии с заданием. Вот полный код решения.import React from "react"
import ReactDOM from "react-dom"
function MyInfo() {
return (
<div>
<h1>Bob Ziroll</h1>
<p>This is a paragraph about me...</p>
<ul>
<li>Thailand</li>
<li>Japan</li>
<li>Nordic Countries</li>
</ul>
</div>
)
}
ReactDOM.render(
<MyInfo />,
document.getElementById("root")
)
Обратите внимание на то, что конструкция, возвращаемая из
MyInfo
, заключена в круглые скобки, и на то, что элементы, которые нужно вывести, находятся внутри вспомогательного элемента <div>
.Итоги
В этом материале мы познакомились с функциональными компонентами React. В следующий раз поговорим о файлах компонентов и о структуре React-проектов.
Уважаемые читатели! Если вы проходите этот курс — просим рассказать о том, в какой среде вы выполняете упражнения.
![](https://habrastorage.org/webt/n0/ry/op/n0ryop7wfykgkeicz3mtuwghrcu.jpeg)