Правильно ли я делаю импорт компоненты в React?

Question

[Евгений Иванов]

Изучаю React.

Рабочий код.

Пример компоненты, которую я буду импортировать.
MyComponent.jsx

import React from 'react';
const MyComponent = () =>
{
return (

<div className="MyComponent">
Содержимое компоненты, JSX код и т. д.
</div>

);
}

export default MyComponent;

Импортирую компоненту в главный файл.
App.jsx

import React from 'react';
import Header from './components/MyComponent';

const App = () => {

return (
<div className="App">
<div className="wrapper">
<MyComponent />
</div>
</div>
);

export default App;

Правильно ли я всё делаю? А именно:
1) import React from 'react'; в каждом файле с компонентой. А может, достаточно делать импорт только в одном?
В App.jsx, например? А так получается мы повторно вставляем лишний код.
В php для этого есть include_once - вставить содержимое только 1 раз.

2) Файл компоненты принято сохранять с расширением jsx? (MyComponent.jsx)
3) При подключении файла компоненты его принято писать без расширения?
(import Header from './components/MyComponent';)

Comments

[WbICHA]

Изучаю React.

Я так понимаю документацию мы игнорим? Иначе откуда взяться таким вопросам?

[Steppp]

В новых версиях реакта можно не писать import React from 'react'; И если на то пошло, то babel все собирает в 1 фаил, и там вообще импортов нет) Наверно))) но бабель все переделывает, импорты для бабелья и нужны

import Header from './components/MyComponent'; - а потом думай что за Header, уж лучше писать import MyComponent from './components/MyComponent'; - имя файла и компонета одинаковы также и при импорте

jsx можешь и js ) jsx реактовский фаил можно и без расширения писать, а можешь и с ним) Если в импорте нет расширения файла, по умолчанию будет искать фаил с jsx

[Макс]

Steppp, бабель не занимается сборкой.

Answer 1

[Vertexis]

1) Недостаточно. Сам компонент требует самодостаточности по использованию в нем другим компонентов.
2) Можно и в js просто. Но в этом случае шаблоны придется строить через громоздкие функции. jsx это расширение позволяющее выстраивать шаблон компонента почти также как писать обычный html
3) Да

Comments

[Евгений Иванов]

1) Недостаточно. Сам компонент требует самодостаточности по использованию в нем другим компонентов.

Как это работает? Какой код импортируется в App.jsx? Весь код из файла MyComponent.jsx или только функция const MyComponent ?

Если весь код, то с ним импортируется и import React from 'react'; Итого в файле App.jsx будет 2 таких строки. Но это не точно т.к. я не знаю как там что работает и может React следит за всем этим и автоматом исключит лишнее.