Создание первого компонента

Завершено

Разработка React основана на компонентах. Эти автономные единицы предназначены для повторного использования и модульности. Проекты React обычно содержат множество компонентов.

Компонент может быть функцией или классом. Большинство разработчиков React предпочитают создавать компоненты с помощью функций, поэтому мы сосредоточимся на этом стиле.

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

Создание компонента

1. Откройте Visual Studio Code.

2. Создайте новый файл в src. Назовите его App.jsx.

3. Добавьте следующий код:

   import React from 'react';
   
   function App() {
       return (
           <article>
               <h1>Recipe Manager</h1>
           </article>
       )
   }
   
   export default App;
   

Изучение кода

Мы начинаем файл App.jsx с импорта React, чтобы использовать синтаксис JSX. Затем мы создадим функцию с именем App, как мы создадим любую другую функцию в JavaScript. Наконец, мы экспортируем функцию с помощью стандартного синтаксиса JavaScript. Ядро нашего компонента содержится в инструкции return.

Обратите внимание, что мы используем HTML (технически XML), внедренный в JavaScript. Эта функция показывает возможности JSX. Логику и мощность JavaScript можно использовать для создания автономных единиц работы (компонентов).

Html, возвращаемый функцией (или компонентом), отображается на странице. Заголовок содержит текст диспетчер рецептов.

Заметка

Элемент h1 вложен в элемент HTML 5 article. Так как JSX использует XML, у нас должен быть один корневой элемент. Элемент article является корнем для этого компонента. Эта структура позволяет добавлять HTML и другие компоненты React по мере роста приложения.

Обновление приложения для использования основного компонента

Давайте обновим наше приложение, чтобы использовать новый компонент.

1. Откройте index.jsx.

2. После строки import ReactDOM from 'react-dom'; (она должна быть третьей), добавьте следующий код:

   import App from './App';
   

3. Найдите код, содержащий <h1>Hello, world!</h1>. Замените это исходное сообщение вызовом компонента App:

   <App />
   

Изучение кода

Вот теперь полное содержимое index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

Наша инструкция import импортирует наш компонент с помощью того же синтаксиса, который мы будем использовать для любого другого модуля. Теперь можно использовать компонент, как если бы он был HTML.

Заметка

Так как JSX использует синтаксис XML, необходимо закрыть тег App. Это можно сделать, используя синтаксис длинной формы <App></App> или самозакрывающийся короткий синтаксис <App />. Оба варианта работают одинаково, но большинство разработчиков используют сокращенный вариант.

Просмотр результатов

Сохраните все файлы. Браузер автоматически обновляется с результатами!