Ваш первый компонент¶

Компоненты — это одна из основных концепций React. Они являются фундаментом, на котором вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего путешествия по React!

Компоненты: UI строительные блоки¶

В Интернете HTML позволяет нам создавать богатые структурированные документы с помощью встроенного набора тегов, таких как <h1> и <li>:

1
2
3
4
5
6
7
8

<article>
    <h1>My First Component</h1>
    <ol>
        <li>Components: UI Building Blocks</li>
        <li>Defining a Component</li>
        <li>Using a Component</li>
    </ol>
</article>

Эта разметка представляет статью <article>, ее заголовок <h1> и (сокращенное) оглавление в виде упорядоченного списка <ol>. Подобная разметка в сочетании с CSS для стиля и JavaScript для интерактивности лежит в основе каждой боковой панели, аватара, модала, выпадающего окна — всех элементов пользовательского интерфейса, которые вы видите в Интернете.

React позволяет объединять разметку, CSS и JavaScript в пользовательские "компоненты", повторно используемые элементы пользовательского интерфейса для вашего приложения. Код оглавления, который вы видели выше, можно превратить в компонент <TableOfContents />, который можно отображать на каждой странице. Под капотом он по-прежнему использует те же HTML-теги, такие как <article>, <h1> и т. д.

Как и в случае с HTML-тегами, вы можете компоновать, упорядочивать и вкладывать компоненты для создания целых страниц. Например, страница документации, которую вы читаете, состоит из компонентов React:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<PageLayout>
    <NavigationHeader>
        <SearchBar />
        <Link to="/docs">Docs</Link>
    </NavigationHeader>
    <Sidebar />
    <PageContent>
        <TableOfContents />
        <DocumentationText />
    </PageContent>
</PageLayout>

По мере роста вашего проекта вы заметите, что многие из ваших конструкций могут быть составлены путем повторного использования уже написанных компонентов, что ускорит вашу разработку. Наше оглавление выше может быть добавлено на любой экран с помощью <TableOfContents />! Вы даже можете начать свой проект с тысяч компонентов, которыми поделилось сообщество разработчиков React, например, Chakra UI и Material UI.

Определение компонента¶

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

1
2
3
4
5
6
7
8

export default function Profile() {
    return (
        <img
            src="https://i.imgur.com/MK3eW3Am.jpg"
            alt="Katherine Johnson"
        />
    );
}

А вот как создать компонент:

Шаг 1: Экспорт компонента¶

Префикс export default — это стандартный синтаксис JavaScript (не специфичный для React). Он позволяет отметить главную функцию в файле, чтобы впоследствии ее можно было импортировать из других файлов. Подробнее об импорте в импорт и экспорт компонент!

Шаг 2: Определить функцию¶

С помощью function Profile() { } вы определяете функцию JavaScript с именем Profile.

Шаг 3: Добавить разметку¶

Компонент возвращает тег <img /> с атрибутами src и alt. <img /> написан как HTML, но на самом деле это JavaScript под капотом! Этот синтаксис называется JSX, и он позволяет встраивать разметку внутрь JavaScript.

Выражения return могут быть написаны на одной строке. Но если ваша разметка не находится на одной строке с ключевым словом return, вы должны заключить его в пару круглых скобок:

1
2
3
4
5
6
7
8

return (
    <div>
        <img
            src="https://i.imgur.com/MK3eW3As.jpg"
            alt="Katherine Johnson"
        />
    </div>
);

Использование компонента¶

Теперь, когда вы определили свой компонент Profile, вы можете вложить его в другие компоненты. Например, вы можете экспортировать компонент Gallery, который использует несколько компонентов Profile:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function Profile() {
    return (
        <img
            src="https://i.imgur.com/MK3eW3As.jpg"
            alt="Katherine Johnson"
        />
    );
}

export default function Gallery() {
    return (
        <section>
            <h1>Amazing scientists</h1>
            <Profile />
            <Profile />
            <Profile />
        </section>
    );
}

Что видит браузер¶

Обратите внимание на разницу в корпусе:

• <section> строчная, поэтому React знает, что мы ссылаемся на HTML-тег.
• <Profile /> начинается с заглавной буквы P, поэтому React знает, что мы хотим использовать наш компонент под названием Profile.

А Profile содержит еще больше HTML: <img />. В итоге, вот что видит браузер:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<section>
    <h1>Amazing scientists</h1>
    <img
        src="https://i.imgur.com/MK3eW3As.jpg"
        alt="Katherine Johnson"
    />
    <img
        src="https://i.imgur.com/MK3eW3As.jpg"
        alt="Katherine Johnson"
    />
    <img
        src="https://i.imgur.com/MK3eW3As.jpg"
        alt="Katherine Johnson"
    />
</section>

Вложение и организация компонентов¶

Компоненты — это обычные функции JavaScript, поэтому вы можете хранить несколько компонентов в одном файле. Это удобно, когда компоненты относительно небольшие или тесно связаны друг с другом. Если этот файл станет тесноват, вы всегда можете переместить Profile в отдельный файл. Как это сделать, вы узнаете в ближайшее время на странице об импорте.

Поскольку компоненты Profile отображаются внутри Gallery — даже несколько раз! — мы можем сказать, что Gallery является родительским компонентом, отображающим каждый Profile в качестве "ребенка". Это часть магии React: вы можете определить компонент один раз, а затем использовать его во многих местах и столько раз, сколько захотите.

1
2
3
4
5
6
7

export default function Gallery() {
    // 🔴 Never define a component inside another component!
    function Profile() {
        // ...
    }
    // ...
}

1
2
3
4
5
6
7
8

export default function Gallery() {
    // ...
}

// ✅ Declare components at the top level
function Profile() {
    // ...
}

Вы только что впервые попробовали React! Давайте вспомним некоторые ключевые моменты.

Задачи¶

1. Экспорт компонента¶

Этот код не работает, потому что корневой компонент не экспортируется:

1
2
3
4
5
6
7
8

function Profile() {
    return (
        <img
            src="https://i.imgur.com/lICfvbD.jpg"
            alt="Aklilu Lemma"
        />
    );
}

Попробуйте исправить это сами, прежде чем смотреть на решение!

1
2
3
4
5
6
7
8

export default function Profile() {
    return (
        <img
            src="https://i.imgur.com/lICfvbD.jpg"
            alt="Aklilu Lemma"
        />
    );
}

2. Исправьте оператор возврата¶

Что-то не так в этом выражении return. Можете ли вы исправить это?

1
2
3
4

export default function Profile() {
  return
    <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}

1
2
3

export default function Profile() {
    return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}

1
2
3
4
5
6
7
8

export default function Profile() {
    return (
        <img
            src="https://i.imgur.com/jA8hHMpm.jpg"
            alt="Katsuko Saruhashi"
        />
    );
}

3. Заметить ошибку¶

Что-то не так в том, как объявлен и используется компонент Profile. Можете ли вы найти ошибку? Постарайтесь вспомнить, как React отличает компоненты от обычных HTML-тегов!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function profile() {
    return (
        <img
            src="https://i.imgur.com/QIrZWGIs.jpg"
            alt="Alan L. Hart"
        />
    );
}

export default function Gallery() {
    return (
        <section>
            <h1>Amazing scientists</h1>
            <profile />
            <profile />
            <profile />
        </section>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function Profile() {
    return (
        <img
            src="https://i.imgur.com/QIrZWGIs.jpg"
            alt="Alan L. Hart"
        />
    );
}

export default function Gallery() {
    return (
        <section>
            <h1>Amazing scientists</h1>
            <Profile />
            <Profile />
            <Profile />
        </section>
    );
}

4. Ваш собственный компонент¶

Напишите компонент с нуля. Вы можете дать ему любое допустимое имя и вернуть любую разметку. Если у вас нет идей, вы можете написать компонент Congratulations, который показывает <h1>Хорошая работа!</h1>. Не забудьте экспортировать это!

1

// Write your component below!

1
2
3

export default function Congratulations() {
    return <h1>Хорошая работа!</h1>;
}

Источник — https://react.dev/learn/your-first-component

Комментарии