Переменные (Состояния и пропсы)

Переменные (состояния)

В React переменные называются состояния (англ. state).

Состояния создаются через хук useState().

import { useState } from 'react';

export default function App() {
  // создание состояний name, age и size
  const [name, setName] = useState("React"); // "React" значение по умолчанию
  const [age, setAge] = useState("20");
  const [size, setSize] = useState("10");

  return (
    <>
      <p>Приложение: {name}</p>
    </>
  );
}

Пример кода на Playcode

При изменении значения состояния, они автоматически изменятся в самом DOM.

В результате будет сгенерирован HTML:

<p>Приложение: React</p>

Состояния доступны в пределах текущего компонента.

Хук useState() появился в версии React 16.8.

React экранирует переменные (например, <h1> преобразуется в <h1>). Это сделано для предотвращения атак XSS.

Параметры (пропсы)

При создании React-приложения можно передавать параметры, например <App param="value">.

import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App title="React" />);

И код в компоненте:

// App.js
export default function App({title="Значение по умолчанию"}) {
  return (
      <p>Приложение: {title}</p>
  );
}

Пример кода на Playcode

Также есть альтернативный вариант через параметр props. в котором находятся все переданные атрибуты.

// App.js
export default function App(props) {
  return (
      <p>Приложение: {props.title}</p>
  );
}

Для каждого компонента можно передавать свой параметр:

<Item title="React" />
<Item title="JavaScript" />
<Item title="jQuery" />

// Приложение: React
// Приложение: JavaScript
// Приложение: jQuery