Учитесь React With Me - Компоненты и Реквизит

Это будет краткое введение в компоненты и свойства React. Мы продолжим более подробно в одной из следующих статей.

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

Если вы не читали мои статьи о JSX и React Elements, я рекомендую вам начать сначала.

Самый простой способ определить компонент - написать функцию JavaScript.

function Welcome(props) {
  return <h1>Hello, {props.firstName}</h1>;
}

Поскольку эта функция принимает один объект prop с данными и возвращает элемент React, это действительный компонент React. Они называются функциональными компонентами, потому что они в буквальном смысле являются функциями!

Возможно, вы также видели что-то вроде этого:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

В приведенном выше примере для определения компонента используется класс ES6. На данный момент мы придерживаемся функциональных компонентов и обсудим компоненты класса в следующей статье.

Чтобы отрендерить компонент, мы должны сделать что-то вроде этого:

function Welcome(props) {
  return <h1>Hello, {props.firstName}</h1>;
}

const element = <Welcome firstName="Courtney" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Мы вызываем ReactDOM.render() с элементом <Welcome />. React вызывает компонент Welcome с {firstName: 'Courtney'} в качестве реквизита. Затем наш компонент Welcome возвращает «Привет, Кортни» в элементе h1. Супер просто! Попробуйте создать компонент и отрендерить его в DOM!

Всегда начинайте имена компонентов с заглавной буквы! Поскольку они отличаются от тегов HTML, мы не хотим, чтобы модель DOM запуталась!

Поскольку все, что мы делаем с этим компонентом, - это передача реквизитов для отображения имени, вы можете использовать его снова и снова на своей странице и отображать разные имена!

function Welcome(props) {
  return <h1>Hello, {props.firstName}</h1>;
}
function App() {
  return (
    <div>
      <Welcome firstName="Courtney" />
      <Welcome firstName="Katie" />
      <Welcome firstName="Max" />
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Тогда вы можете рендерить App!

Лучше всего, чтобы ваши компоненты React были небольшими и красивыми. Если вам кажется, что ваш компонент становится слишком большим! Сделайте его отдельным компонентом.

Например, если у вас есть это:

function Home(props) {
  return (
    <div className="container">
      <div className="wrapper">
        <img className="userImage"
          src={props.author.iconUrl}
          alt={props.author.name}
        />
        <div className="userInfo">
          {props.author.name}
        </div>
      </div>
      <div className="text">
        {props.text}
      </div>
    </div>
  );
}

Затем вы можете, например, разбить изображение на отдельный компонент!

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.iconUrl}
      alt={props.user.name}
    />
  );
}

Затем вы можете использовать компонент Avatar внутри компонента Home!

function Home(props) {
  return (
    <div className="container">
      <div className="wrapper">
        <Avatar user={props.user} />
        <div className="userInfo">
          {props.author.name}
        </div>
      </div>
      <div className="text">
        {props.text}
      </div>
    </div>
  );
}

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

В следующем уроке мы поговорим о состоянии! Это позволяет компонентам React со временем изменять свой вывод.

Учитесь React With Me - Компоненты и Реквизит

Вопросы по теме