Реакт компоненты (components)

> Прочее > Разное > Реакт компоненты (components)

Windows

Необходимо создать папку с компонентами в папке src
1
mkdir src/components
В этой папке создадим компонент Hello.tsx
1
ni src/components/Hello.tsx
Добавим в файл Hello.tsx следующий код
1
2
3
4
5
const Hello = () => { return <h1>Hello world</h1>; }; export default Hello;

Далее подключаем наш компонент в нужном файле.

Для подключение компонента будем использовать автоимпорт. Для этого достаточно начать вводить имя компонента и выбрать его в выпадающем списке. Сверху добавится импорт этого компонента.

Для примера подключим в главном файле нашего приложения APP.tsx наш компонент Hello.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useState } from 'react'
import './App.css'
import Hello from './components/Hello'

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

  return (
    <div className="App">
      <Hello/>
    </div>
  )
}

export default App