САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

React Компоненты



Компоненты подобны функциям, которые возвращают элементы HTML.


Реагирующие компоненты

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

Компоненты бывают двух типов: компоненты класса и компоненты функции, в этом уроке мы сосредоточимся на компонентах класса.


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

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

Этот компонент должен включать в себя оператор extends React.Component, этот оператор создает наследование для React.Component., и дает доступ к функциям React.Component.

Этот компонент также требует наличия метода render(), этот метод возвращает HTML код.

Пример

Создать класс компонента, который называется Car

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Теперь в вашем приложении React есть компонент Car, который возвращает элемент <h2>.

Чтобы использовать этот компонент в своем приложении, используйте тот же синтаксис, что и обычный HTML: <Car />

Пример

Отображение компонента Car в элементе "root":

ReactDOM.render(<Car />, document.getElementById('root'));

Выполнить пример »


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

Вот тот же пример, что и выше, но созданный с использованием функционального компонента вместо этого.

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

Пример

Создайте функциональный компонент с именем Car

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

В очередной раз ваше React приложение имеет авто компонент.

Обратитесь к компоненту Car как обычный HTML (за исключением React, компоненты must начинаться с заглавной буквы):

Пример

Отображение компонента Car в элементе "root":

ReactDOM.render(<Car />, document.getElementById('root'));

Выполнить пример »


Конструктор компонентов

Если есть функция constructor() в вашем компоненте, эта функция будет вызвана при инициализации компонента.

Функция конструктора - это место, где вы инициируете свойства компонента.

В React свойства компонентов должны храниться в объекте с именем state.

Вы узнаете больше о state позже в этом уроке.

Функция конструктора также является местом, где вы соблюдаете наследование родительского компонента, включая оператор super(), который выполняет функцию конструктора родительского компонента, и ваш компонент имеет доступ ко всем функциям родительского компонента (React.Component).

Пример

Создать функцию конструктор компонента Car, и добавить свойство "color":

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

Используйте свойство "color" в функции render():

Пример

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

Выполнить пример »


Реквизит

Еще один способ обработки свойств компонентов - это использование props.

Реквизиты подобны аргументам функции, и вы отправляете их в компонент в качестве атрибутов.

Вы узнаете больше о props в следующей главе.

Пример

Используйте атрибут для передачи цвета компоненту Car и используйте его в функции render():

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Выполнить пример »


Компоненты в компонентах

Мы можем ссылаться на компоненты внутри других компонентов:

Пример

Используйте компонент автомобиля внутри компонента гаража:

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Выполнить пример »


Компоненты в файлах

React - это все о повторном использовании кода, и это может быть разумно, чтобы вставить некоторые из ваших компонентов в отдельные файлы.

Для этого создайте новый файл с расширение файла .js и поместите в него код:

Обратите внимание, что файл должен начинаться с импорта React (как и раньше), а заканчиваться он должен инструкцией export default Car;.

Пример

Это новый файл, мы его назвали "App.js":

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;

Чтобы иметь возможность использовать компонент Car, вы должны импортировать файл в свое приложение.

Пример

Теперь мы импортируем файл "App.js" в приложении, и мы можем использовать компонент автомобиля, как если бы он был создан здесь.

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

ReactDOM.render(<Car />, document.getElementById('root'));

Выполнить пример »