В предыдущей статье мы вкратце рассмотрели созданное нами приложение React. Теперь давайте более подробно рассмотрим приложение и настроим структуру проекта для приложения React, которое мы будем создавать на протяжении всей этой серии.
Мы рассмотрели public/index.html в предыдущей статье, но почему именно этот файл получает приложение React? Это файл, который ваш сервер будет отправлять пользователю, когда он / она посещает ваш сайт. Имя index — это имя файла по умолчанию, которое большинство серверов будет искать в общем каталоге. Если вы запустите свое приложение React с помощью npm start и проверите код в своем браузере, вы заметите, что в нижней части страницы есть несколько скриптов.
Именно эти скрипты загружают приложение React в ваш ‹div id="root"›.
Мы уже рассмотрели текущий процесс, но давайте кратко его повторим.
- Точка входа React — src/index.js.
- src/index.js импортирует React, ReactDOM и компонент App.
- React и ReactDOM — это пакеты. Компонент App импортируется из src/App.js.
- Компонент App — это функциональный компонент, который возвращает элемент JSX. В этом случае он возвращает ‹div›Blank Page‹/div›.
- Компонент App экспортируется из App.js и импортируется в index.js.
- После импорта он визуализируется с использованием метода ReactDOM.render(). Метод render() помещает содержимое компонента App в элемент HTML, содержащий атрибут id="root".
Что, если мы хотим создать другую страницу? При создании традиционного веб-сайта со статической HTML-страницей вам потребуется создать public/about.html. Приложения React называются одностраничными приложениями, поэтому единственная точка входа в приложение — через public/index.html: ‹div id="root"›.
Компоненты
Компонент — это всего лишь одна часть пользовательского интерфейса. Однажды созданный, его можно использовать снова и снова. Давайте взглянем на ту же диаграмму, которую мы рассматривали в статье «Введение/Установка».
У нас есть множество различных компонентов: заголовок, навигация, нижний колонтитул и т. д. Компоненты статьи сгруппированы внутри разделкомпонент, что означает, что компоненты могут содержать другие компоненты. Все вышеперечисленные компоненты расположены внутри основного компонента, который для нас будет компонентом App.
Существуют разные компоненты, которые мы можем создать, но они подпадают под две категории: компоненты с сохранением состояния и компоненты без состояния. Некоторые компоненты имеют состояние, а другие нет. Мы рассмотрим состояние в следующей статье, но, по сути, состояние — это объект, который хранит данные и доступен для компонента.
Существуют также функциональные компоненты и компоненты на основе классов. Вы видели пример функционального компонента, когда смотрели src/App.js. Функциональный компонент — это просто функция JavaScript, которая возвращает элемент JSX.
В приведенном выше примере src/App.js содержит функцию с именем App (функциональный компонент), которая возвращает элемент JSX div.
Возможно, вы не знакомы с компонентами на основе классов. Компонент на основе класса — это класс, который расширяет React.Component и содержит метод render(), который возвращает элемент JSX. Мы можем довольно легко преобразовать функциональный компонент App выше в компонент класса.
Никаких других изменений в вашем коде не требуется. React знает, что нужно вызвать метод render(), который вернет элемент JSX.
Зачем использовать компоненты на основе классов, а не функциональные компоненты? До введения хуков только компоненты класса могли использовать состояние. Это уже не так. У меня опыт ООП, основанный на классах, поэтому я предпочитаю классы хукам. Тем не менее, хуки, похоже, были подтолкнуты React, поэтому я думаю, что сейчас безопаснее использовать хуки, чем классы. Я тайно наслаждаюсь тем, как все другие разработчики ООП высказывают свое мнение в Интернете, заявляя, что им нравятся компоненты класса, а не функциональные компоненты. Тем не менее, мы здесь, чтобы изучить React, поэтому мы подробно рассмотрим оба.
Настройка структуры проекта
Мы собираемся использовать файл App.js в качестве точки входа. Любой новый компонент, который мы создадим, будет импортирован в App.js и будет отображаться там. Мы создадим каталог Components в нашем каталоге src и поместим туда все наши компоненты.
Давайте создадим быстрый компонент, чтобы продемонстрировать это. Щелкните каталог правой кнопкой мыши и создайте новый файл: Test.js.
Каждый компонент React должен начинаться с оператора импорта реакции. Мы создадим функциональный компонент, который возвращает элемент JSX, и экспортируем этот компонент.
Компонент создан, но сейчас он ничего для нас не делает. Поскольку мы будем использовать наш компонент App для визуализации всех других наших компонентов, нам потребуется импортировать компонент Test в наше App. компонент и визуализировать его там.
Глядя на src/App.js выше, мы импортируем компонент Test из файла src/Components/Test.js. В «./» указано: начните с текущего каталога (где находится этот файл), а затем перейдите в каталог Components. После импорта компонент Test отображается в строке 9 с использованием синтаксиса ‹ComponentName /›. Если элемент JSX не имеет закрывающего тега, вы должны предоставить ему самозакрывающийся тег: ‹ComponentName› недействителен.
Я надеюсь, что вы начинаете понимать, как логика работает в приложении React. Мы рассмотрим каждую из этих концепций по отдельности в следующих нескольких статьях и повторим, как код проходит через приложение.
