В React существует несколько подходов для создания нескольких обособленных компонентов. Рассмотрим два наиболее распространенных способа.
1. Создание отдельных файлов для каждого компонента:
- Сначала создайте папку components внутри вашего проекта.
- Затем создайте отдельный файл для каждого компонента в этой папке, например ComponentA.js и ComponentB.js.
- В каждом файле компонента определите его функциональную или классовую структуру.
- Используйте ключевое слово export для каждого компонента, чтобы сделать его доступным извне.
- В другом файле, например App.js, импортируйте необходимые компоненты с помощью ключевого слова import.
Пример:
// components/ComponentA.js
import React from 'react';
function ComponentA() {
return <h1>Component A</h1>;
}
export default ComponentA;
// components/ComponentB.js
import React from 'react';
function ComponentB() {
return <h1>Component B</h1>;
}
export default ComponentB;
// App.js
import React from 'react';
import ComponentA from './components/ComponentA.js';
import ComponentB from './components/ComponentB.js';
function App() {
return (
<>
<ComponentA />
<ComponentB />
</>
);
}
export default App;
2. Использование компонентов внутри других компонентов:
- Создайте один файл для каждого компонента или создайте все компоненты в одном файле.
- Определите каждый компонент как функциональный или классовый.
- Внутри компонентов, используйте другие компоненты, как если бы они были просто функциями или классами.
Пример:
// App.js
import React from 'react';
function ComponentA() {
return <h1>Component A</h1>;
}
function ComponentB() {
return <h1>Component B</h1>;
}
function App() {
return (
<>
<ComponentA />
<ComponentB />
</>
);
}
export default App;
В обоих случаях компоненты являются отдельными, обособленными единицами, которые можно использовать где угодно в приложении. Важно помнить, что при использовании компонентов, определенных в отдельных файлах, необходимо обратить внимание на правильное именование и пути импорта.