Карта сайта

Урок 4: Ваши первые функциональные компоненты в React

/Уроки по React/Урок 4: Ваши первые функциональные компоненты в React
Урок 4: Ваши первые функциональные компоненты в React
Автор: написал в рубрике Уроки по React. 0 Комментариев.

Мы подошли к одному из самых фундаментальных уроков во всём нашем курсе. Если JSX из прошлого урока, это «как мы пишем», то функциональные компоненты, это «что мы пишем». Готовься заложить прочный фундамент, на котором мы будем строить все последующие знания. В этом уроке мы с тобой оживим наш первый собственный кусочек интерфейса.

Что такое функциональные компоненты?

Представь, что ты строишь дом из Lego. У тебя есть коробка с кучей разных деталей, кирпичики разных размеров, окна, двери, колеса. Ты не создаешь каждый раз дом с нуля, смешивая все эти детали в кучу. Вместо этого ты сначала собираешь из мелких деталей более крупные модули: стену с окном, башню, крышу. А затем из этих готовых модулей ты быстро и легко собираешь целый замок.

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

Раньше в React были популярны и классовые компоненты (основанные на классах JavaScript), но с появлением так называемых «хуков» (о которых мы будем много говорить позже) функциональные компоненты стали стандартом де-факто. Они проще в написании, понимании и тестировании. Они позволяют нам писать более чистый и предсказуемый код. Именно поэтому весь наш курс мы будем строить исключительно на функциональных компонентах. Мы учимся на самом современном и актуальном подходе.

И самое главное, компоненты позволяют нам повторно использовать код. Один раз написал компонент кнопки, используй его в десятках мест по всему приложению. Нужно изменить стиль всех кнопок? Ты правишь код всего в одном месте и изменение применяется везде. Это невероятно мощно и эффективно. Это кардинально меняет подход к разработке интерфейсов, делая его модульным, управляемым и масштабируемым.

Создание нашего первого функционального компонента

Хватит теории, давай закатаем рукава и напишем наш первый компонент. Вспомни, как объявляется обычная функция в JavaScript:

javascript
function myFunction() {
  // тело функции
}

С функциональным компонентом всё почти точно так же. Есть лишь два ключевых отличия:

  1. Имя компонента должно начинаться с заглавной буквы. Это правило React. Так он понимает, что <Button /> это наш собственный компонент, а <button /> это встроенный HTML-тег.

  2. Компонент должен возвращать JSX-разметку. Обычно с помощью оператора return.

Давай создадим компонент, который будет приветствовать пользователя. Это наш «Hello, World!» в мире React-компонентов.

jsx
// 1. Создаем функциональный компонент с именем Greeting
function Greeting() {
  // 2. Тело функции. Здесь мы можем писать любой JS-код, который нам нужен.
  // Пока что нам ничего не нужно, кроме возврата JSX.

  // 3. Возвращаем JSX. Обрати внимание на круглые скобки 
  // они помогают красиво форматировать многострочный JSX.
  return (
    <div>
      <h1>Привет, дорогой студент!</h1>
      <p>Добро пожаловать в мир React. Ты только что создал свой первый компонент!</p>
    </div>
  );
}

// Не забудем экспортировать наш компонент, чтобы использовать его в других файлах!
export default Greeting;

Вот и всё! Компонент Greeting готов. Он похож на кирпичик с надписью «Приветствие». Но пока этот кирпичик просто лежит в коробке. Чтобы увидеть его на странице, нам нужно его использовать, то есть отрендерить.

Как отобразить компонент на странице?

Теперь самый важный момент, использование нашего компонента. Мы создали функцию и теперь нам нужно её «вызвать», но в мире JSX это делается особым синтаксисом, похожим на HTML-теги.

Допустим, у нас есть главный компонент приложения App, который находится в файле App.js. Именно он является корневым, именно его React изначально отрисовывает на странице. Давай воспользуемся нашим Greeting внутри App.

jsx
// App.js

// Импортируем наш компонент Greeting из его файла
import Greeting from './Greeting';

function App() {
  return (
    <div className="App">
      {/* Вот он, момент истины! Мы используем наш компонент как тег. */}
      <Greeting />
      
      {/* Мы можем использовать его много раз! */}
      <Greeting />
      <Greeting />
    </div>
  );
}

export default App;

Что здесь произошло? Мы импортировали компонент Greeting так же, как импортировали бы любую другую JavaScript-сущность. Затем внутри JSX компонента App мы использовали тег <Greeting />. Когда React видит такой тег, он понимает: «Ага, тут нужен компонент Greeting!». Он находит функцию Greeting, вызывает её и подставляет результат её работы (тот самый JSX с приветствием) на место тега <Greeting />.

В итоге в браузере мы увидим три одинаковых приветственных сообщения, одно за другим. Это и есть мощь повторного использования! Мы создали логический блок один раз, а использовали его трижды без дублирования кода.

Практическое задание 1: Создай свой первый компонент

Пришло время для твоей самостоятельной работы. Это простой, но невероятно важный шаг. Мы сделаем его вместе, шаг за шагом.

  1. Создай новый файл в папке src твоего React-проекта. Назови его MyFirstComponent.js.

  2. Внутри файла напиши код компонента. Пусть он возвращает заголовок <h2> с твоим именем и абзац <p> с коротким рассказом о том, почему ты решил изучать React.

  3. Не забудь про экспорт. В конце файла добавь export default MyFirstComponent.

  4. Импортируй и используй его в App.js. Зайди в App.js, импортируй свой новый компонент и добавь тег <MyFirstComponent /> внутрь JSX компонента App.

  5. Сохрани файлы и посмотри в браузер. Ты должен увидеть своё сообщение на странице!

Вот пример того, как может выглядеть твой код:

jsx
// MyFirstComponent.js
function MyFirstComponent() {
  return (
    <div>
      <h2>Меня зовут Максим!</h2>
      <p>Я изучаю React, потому что хочу создавать современные и интерактивные веб-приложения, которые будут полезны миллионам пользователей.</p>
    </div>
  );
}

export default MyFirstComponent;
jsx
// App.js
import MyFirstComponent from './MyFirstComponent';

function App() {
  return (
    <div className="App">
      <MyFirstComponent />
    </div>
  );
}

export default App;

Поздравляю! Ты только что совершил ключевой ритуал посвящения в React-разработчики, создал и отобразил свой собственный компонент. Сохрани этот проект, этот момент. С него всё начинается.

Структура компонента: Разбираем всё по полочкам

Давай ещё раз внимательно посмотрим на строение нашего компонента, чтобы убедиться, что мы всё поняли идеально.

  1. Объявление функции: function MyFirstComponent() { ... }

    • function ключевое слово JavaScript для объявления функции.

    • MyFirstComponent имя нашего компонента. Обязательно с большой буквы!

    • () пока что пустые скобки. Сюда позже мы будем передавать входные данные (пропсы).

  2. Тело функции: Всё, что находится между фигурными скобками { }. Это «мозг» компонента. Пока что здесь у нас только оператор return, но сюда мы можем поместить всё, что угодно: переменные, условные операторы if, циклы, вызовы других функций. Любую JavaScript-логику, которая нужна для подготовки нашего JSX к отображению. Вычисления, обработка данных, всё здесь.

  3. Оператор return: return ( ... );

    • Этот оператор сообщает: «Функция завершена, вот что ты должен вернуть наружу».

    • Если твой JSX занимает несколько строк (а так почти всегда и бывает), его нужно обернуть в круглые скобки (). Это правило JavaScript для красивого форматирования.

  4. JSX: Разметка внутри return. Это то, что в итоге увидит пользователь. Помни все правила JSX из прошлого урока: используй className вместо class, все теги должны быть закрыты и т.д.

  5. Экспорт: export default MyFirstComponent;

    • export ключевое слово JavaScript, которое делает нашу функцию доступной для импорта в других файлах.

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

Эта структура наш каркас, наш шаблон. 95% твоих будущих компонентов будут начинаться именно так.

Практическое задание 2: Компонент-список дел (статический)

Давай создадим что-то более полезное. Почти каждое приложение так или иначе выводит списки. Давай создадим компонент для списка дел. Пока что он будет статическим, то есть мы «врукопашную» напишем в нём все пункты. В следующих уроках мы научимся делать его динамическим.

Создай новый компонент TodoList.

jsx
// TodoList.js
function TodoList() {
  return (
    <div className="todo-list">
      <h2>Мой список дел на сегодня:</h2>
      {/* Неупорядоченный список <ul> */}
      <ul>
        {/* Каждый пункт списка - это тег <li> */}
        <li>Закончить 4-ый урок по React</li>
        <li>Сделать практические задания</li>
        <li>Позвонить другу</li>
        <li>Полить цветы</li>
      </ul>
    </div>
  );
}

export default TodoList;

Теперь импортируй и используй его в App.js рядом с предыдущим компонентом.

jsx
// App.js
import MyFirstComponent from './MyFirstComponent';
import TodoList from './TodoList'; // Не забудь импорт!

function App() {
  return (
    <div className="App">
      <MyFirstComponent />
      <hr /> {/* Горизонтальная линия для визуального разделения */}
      <TodoList />
    </div>
  );
}

export default App;

Посмотри на результат в браузере. Ты видишь, как наша страница собирается из независимых, логически завершённых блоков? App -> MyFirstComponent + TodoList. Это и есть композиция компонентов, основа архитектуры React-приложений.

Важные правила и лучшие практики

Когда ты только начинаешь, очень важно с самого начала приучать себя к хорошим привычкам. Это сэкономит тебе кучу времени и нервов в будущем.

  1. Один компонент, это один файл. Каждый компонент должен находиться в своём собственном файле. Имя файла обычно должно совпадать с именем компонента. Для нашего Greeting файл Greeting.js. Это стандарт, которого придерживается всё сообщество.

  2. Имя компонента, всегда с Большой Буквы. React различает встроенные HTML-теги (div, span, h1) и пользовательские компоненты (Greeting, TodoList) именно по регистру первой буквы. Если ты назовёшь компонент greeting, React попытается найти HTML-тег <greeting>, которого не существует и ничего не сработает.

  3. Компонент должен возвращать один корневой элемент. Помни это правило из урока по JSX? Твой JSX, который возвращает компонент, должен иметь один родительский элемент-контейнер на самом верхнем уровне. Чаще всего это <div>. Если ты не хочешь добавлять лишний <div> в разметку, ты можешь использовать специальный компонент-фрагмент <> ... </>.

    Плохо:

    jsx
    function BadComponent() {
  return (
    <h1>Заголовок</h1>
    <p>Абзац</p> // Ошибка! Два элемента на верхнем уровне.
  );
}

    Хорошо (с div):

    jsx
    function GoodComponent() {
  return (
    <div>
      <h1>Заголовок</h1>
      <p>Абзац</p>
    </div>
  );
}

    Отлично (с Фрагментом):

    jsx
    function GreatComponent() {
  return (
    <> {/* Это Фрагмент, он не создает лишнего div в DOM-дереве */}
      <h1>Заголовок</h1>
      <p>Абзац</p>
    </>
  );
}

  4. Думай о компонентах как о чистых функциях. Старайся, чтобы твой компонент всегда был «чистым». Что это значит? При одних и тех же входных данных (пропсах, о которых речь впереди) он должен всегда возвращать один и тот же JSX. Он не должен изменять внешние переменные или иметь «побочные эффекты» (например, напрямую менять DOM) во время рендера. Это делает компоненты предсказуемыми и простыми для отладки.

Практическое задание 3: Создай свой профиль

Давай закрепим всё, что мы прошли, создав компонент UserProfile. Он должен отображать информацию о пользователе.

Требования:

  1. Создай файл UserProfile.js.

  2. Компонент должен возвращать разметку, включающую:

    • Заголовок <h1> с именем пользователя.

    • Картинку (<img>) с аватаром (можешь использовать любое изображение из интернета, не забудь указать полный URL в src).

    • Абзац <p> с краткой биографией.

    • Список <ul> из 3-х хобби.

  3. Используй Фрагмент (<> ... </>) в качестве корневого элемента, чтобы не добавлять лишний div.

  4. Импортируй и используй компонент в App.js.

Примерный код-подсказка:

jsx
// UserProfile.js
function UserProfile() {
  return (
    <> {/* Фрагмент */}
      <h1>Екатерина Иванова</h1>
      <img 
        src="https://example.com/avatar.jpg" 
        alt="Аватар Екатерины" 
        width="150" 
      />
      <p>Люблю программирование, горные походы и читать научную фантастику. Изучаю React, чтобы сменить профессию и стать фронтенд-разработчиком.</p>
      <h2>Мои хобби:</h2>
      <ul>
        <li>Фотография</li>
        <li>Велопрогулки</li>
        <li>Игра на гитаре</li>
      </ul>
    </>
  );
}

export default UserProfile;

Итоги и подготовка к следующему шагу

Сегодня ты сделал огромный скачок. Ты перешёл от теории к настоящей React-разработке. Ты узнал, что функциональные компоненты это функции, возвращающие JSX. Ты научился их создавать, экспортировать, импортировать и использовать, собирая из них интерфейс как из кубиков Lego.

Мы разобрали структуру компонента до мельчайших деталей и усвоили ключевые правила: именование с большой буквы, один корневой элемент, принцип «один файл, это один компонент».

Ты создал целых три своих компонента! Это отличный старт. Полученные сегодня знания, это абсолютный фундамент. Всё, что мы будем изучать дальше: состояние, обработка событий, работа с формами, жизненный цикл. Всё это будет «наслаиваться» на умение создавать функциональные компоненты.

Но у наших текущих компонентов есть большой недостаток, они статичны. Они как напечатанные листовки, всегда показывают одно и то же. Настоящие приложения динамичны. Они реагируют на действия пользователя, показывают разные данные, они живые. Чтобы «вдохнуть жизнь» в наши компоненты, нам нужно познакомиться с двумя ключевыми концепциями: Пропсы (Props) и Состояние (State).

Увидимся на следующем уроке!

Хочешь освоить React на практике и создать своё первое настоящее приложение? Изучи полный курс по React для начинающих, где мы шаг за шагом, от основ до продвинутых тем, разберём всю мощь этой библиотеки! Вас ждут не только теория, но и десятки практических заданий, реальные проекты и поддержка от меня и комьюнити.

Поделиться статьей:
Поддержать автора блога

Поддержка автора осуществляется с помощью специальной формы ниже, предоставленной сервисом «ЮMoney». Все платёжные операции выполняются на защищённой странице сервиса, что обеспечивает их корректность и полную безопасность.

Персональные рекомендации
Оставить комментарий