Создание первого приложения

Для начала работы с Inferno необходимо подготовить окружение. Основной способ — использовать пакетный менеджер npm. Создание проекта начинается с инициализации npm и установки базовых зависимостей:

npm init -y
npm install inferno inferno-create-element inferno-component

inferno — ядро фреймворка, обеспечивающее высокую производительность и виртуальный DOM. inferno-create-element — утилита для создания элементов JSX/JS-структуры. inferno-component — позволяет создавать классовые компоненты, если требуется использование состояния и методов жизненного цикла.

Для разработки также рекомендуется установить Babel для транспиляции современного JavaScript и JSX:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server

Настройка Webpack позволяет собрать проект в один файл и использовать современные возможности JS, включая поддержку JSX.

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

Inferno поддерживает функциональные и классовые компоненты. Классический подход для первого приложения — создание функционального компонента:

import { render } from 'inferno';
import { createElement } from 'inferno-create-element';

const App = () => {
  return createElement('div', { className: 'app-container' }, 'Привет, Inferno!');
};

render(
  createElement(App, null, null),
  document.getElementById('root')
);
  • createElement — аналог JSX, создаёт виртуальный DOM-узел.
  • render — отрисовывает виртуальный DOM в реальный.
  • document.getElementById('root') — корневой элемент страницы, куда будет монтироваться приложение.

При использовании JSX вместо createElement код упрощается:

/** @jsx createElement */
import { render } from 'inferno';
import { createElement } from 'inferno-create-element';

const App = () => (
  <div className="app-container">
    Привет, Inferno!
  </div>
);

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

Классовые компоненты и состояние

Классовые компоненты необходимы, если требуется управление состоянием или использование методов жизненного цикла:

import { Component } from 'inferno-component';
import { render } from 'inferno';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Счётчик: {this.state.count}</h1>
        <button onCl ick={this.increment}>Увеличить</button>
      </div>
    );
  }
}

render(<Counter />, document.getElementById('root'));
  • this.state — объект состояния компонента.
  • this.setState — метод обновления состояния, после которого Inferno автоматически обновляет виртуальный и реальный DOM.
  • Методы жизненного цикла (например, componentDidMount) можно использовать для выполнения логики после монтирования компонента.

Обработка событий

Inferno поддерживает стандартные DOM-события через атрибуты компонента:

const Button = () => {
  const handleClick = () => {
    console.log('Кнопка нажата');
  };

  return <button onCl ick={handleClick}>Нажми меня</button>;
};

События могут быть динамическими и зависят от состояния:

class Toggle extends Component {
  constructor() {
    super();
    this.state = { isOn: true };
  }

  toggle = () => {
    this.setState({ isOn: !this.state.isOn });
  }

  render() {
    return (
      <button onCl ick={this.toggle}>
        {this.state.isOn ? 'Включено' : 'Выключено'}
      </button>
    );
  }
}

Работа с списками и ключами

Для рендеринга массивов данных используется метод map и уникальный key для каждого элемента:

const ItemList = ({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

const data = [
  { id: 1, name: 'Элемент 1' },
  { id: 2, name: 'Элемент 2' },
  { id: 3, name: 'Элемент 3' },
];

render(<ItemList items={data} />, document.getElementById('root'));
  • key помогает Inferno эффективно обновлять список при изменении данных.
  • Использование уникального идентификатора предотвращает перерисовку всех элементов при обновлении одного из них.

Стилизация компонентов

Стили можно добавлять несколькими способами:

  1. Классы CSS:
<div className="highlight">Текст с классом</div>
  1. Inline-стили:
<div style={{ color: 'red', fontWeight: 'bold' }}>Красный текст</div>
  1. CSS-модули или препроцессоры — для масштабируемых проектов рекомендуется использовать модульную или компонентную стилизацию.

Использование вложенных компонентов

Компоненты можно комбинировать для построения сложных интерфейсов:

const Header = () => <h1>Заголовок приложения</h1>;
const Footer = () => <footer>© 2025 Inferno</footer>;

const App = () => (
  <div>
    <Header />
    <p>Основной контент приложения</p>
    <Footer />
  </div>
);

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

Реактивность и обновление интерфейса

Inferno обновляет только изменённые части DOM благодаря виртуальному DOM. Любое изменение состояния через setState или пропсы приводит к минимальной перерисовке. Это обеспечивает высокую производительность и экономию ресурсов браузера, особенно при работе с динамическими списками и сложными интерфейсами.

Эти основы позволяют создать полноценное первое приложение на Inferno с компонентами, состоянием, событиями и динамическими списками, используя как функциональный, так и классовый подход.

Оглавление