Как локально импортировать компонент React из другого проекта create-Reaction-app?

Question

Я создал 2 приложения React с именами client и admin-client, оба из которых используют create-react-app.

В admin-client я хотел бы повторно использовать некоторые компоненты, которые уже существуют в client во избежание дублирования кода.

Например, у меня есть Header.jsx файл внутри client/src/components/ каталога, который я хочу использовать в admin-client, который выглядит следующим образом:

import React from 'react';

function Header() {
    return (
        <header>
            <h2>Hello World!!</h2>
        </header>
    );
}

export default Header;

Вот что я попробовал (и не смог):

Я создал файл .env внутри admin-client каталога проекта следующим образом:

NODE_PATH='./../'

(admin и admin-client находятся в одном родительском каталоге)

Затем внутри admin-client/src/App.jsx я пытаюсь импортировать Header.jsx следующим образом:

import React from 'react';
import {Header} from 'client/src/components/Header.jsx';

function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

export default App;

Но я получаю следующую ошибку:

../client/src/components/Header.jsx 5:8
Module parse failed: Unexpected token (5:8)
You may need an appropriate loader to handle this file type.
| function Header() {
|     return (
>         <header>
|             <h2>Hello World!!</h2>

Я предпочитаю найти решение, не связанное непосредственно с Babel и / или Webpack, потому что именно поэтому я использую create-react-app в первую очередь.

Answer 1

Это не простая задача, если вы делаете это вручную, вы, вероятно, в конечном итоге внесете множество изменений в репозиторий, чтобы синхронизировать его с другими приложениями.Я предлагаю вам установить пакет с именем Bit, который позволит вам совместно использовать и синхронизировать компоненты пользовательского интерфейса между вашими проектами.Вы можете прочитать больше об этом здесь: https://docs.bit.dev/docs/installation.html

NPM

Установить бит используя NPM:

npm установить бит-бин --global

При установке Бита в Windows добавьте флаг --no-option: npm install bit-bin --global --no-option

Answer 2

Если вы хотите повторно использовать компонент, просто скопируйте и вставьте его *.jsx файл в src/components. Это то, что вам нужно сделать, чтобы повторно использовать компонент.

admin и admin-client находятся в одном родительском каталоге

Это не имеет значения. Это два разных приложения.