Учебный курс по React, часть 2: функциональные компоненты

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

Занятие 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. Практикум. Функциональные компоненты

→ Оригинал

▍Задание

1. Подготовьте базовый React-проект.
2. Создайте функциональный компонент MyInfo, формирующий следующие HTML-элементы:
3. Выведите экземпляр компонента 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-проектов.

Уважаемые читатели! Если вы проходите этот курс — просим рассказать о том, в какой среде вы выполняете упражнения.

Автор: ru_vds

Источник