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

Функциональным компонентом без состояния является любая функция, которую вы пишете, которая принимает свойства (props) и возвращает JSX. С другой стороны, компонент без состояния представляет собой класс, который расширяет React.Component, но не использует внутреннее состояние (рассматривается в следующей задаче). Наконец, компонент с состоянием - это любой компонент, который поддерживает собственное внутреннее состояние. Вы можете видеть компоненты с состоянием, называемые просто компонентами или компонентами React. Общим примером является попытка свести к минимуму состояние работоспособности и, когда это возможно, создавать функциональные компоненты без состояния. Это помогает управлять состоянием в определенной области вашего приложения. В свою очередь, это улучшает разработку и обслуживание вашего приложения, упрощая отслеживание того, как изменения состояния влияют на его поведение.

Редактор кода имеет компонент CampSite который отображает компонент Camper как дочерний. Определите компонент Camper и назначьте ему свойства по умолчанию { name: 'CamperBot' } . Внутри компонента Camper визуализируйте любой код, который вы хотите, но убедитесь, что у него есть один элемент p который включает только значение свойства name, которое передается в качестве props. Наконец, определите propTypes на компоненте Camper чтобы потребовать, чтобы name было предоставлено в качестве свойства и убедитесь, что оно имеет тип string.