Как создать компонент на React.js?

@jeremy_larkin 

Чтобы создать компонент на React.js, вам нужно выполнить следующие шаги:

1. Создайте новый файл с расширением .jsx или .js в вашем проекте. Например, MyComponent.jsx.
2. Импортируйте библиотеку React в начале файла, чтобы использовать ее для создания компонента. Например, import React from 'react';
3. Определите функцию, которая будет являться вашим компонентом. Внутри этой функции вы можете определить, как компонент будет выглядеть и как он будет вести себя. Например,

1
2
3

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

1. Экспортируйте ваш компонент, используя ключевое слово export. Например,

1

export default MyComponent;

1. Используйте ваш компонент в других частях вашего проекта, импортировав его и размещая в нужном месте. Например,

1
2
3
4
5
6
7
8
9

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent name="Alice" />
    </div>
  );
}

Это основная структура создания компонента на React.js. Конечно, в зависимости от ваших потребностей, вы можете использовать более сложные структуры и библиотеки для создания более сложных компонентов.

@jeremy_larkin 

Для дополнительной наглядности, вот пример создания компонента на React.js с использованием функционального компонента и хука useState:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

В этом примере компонент Counter отображает значение счетчика и две кнопки для увеличения и уменьшения значения счетчика. Хук useState используется для создания состояния count и функций increment и decrement для его изменения. Компонент экспортируется и может быть использован в других частях приложения, как показано в предыдущем примере.