Экспорт и импорт классов в React без ES6

Question

Я работаю над реактивным проектом, но не хочу использовать ES6, потому что я не очень понимаю, как он работает. Я хочу экспортировать свой класс ShoppingList, указанный ниже:

class ShoppingList extends React.Component {
    render() {
        return (
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
            </div>
        );
    }
}

Я хочу импортировать это в свой индекс. js:

const rootElement = document.getElementById('root')
const ShoppingList = require('./Components/ShoppingList')

function App() {
    return (
        <div>
            <ShoppingList name="Abhinav" />
        </div>
    )
}

ReactDOM.render(<App />, rootElement)

Но функция require() не не работает Если кто-нибудь может сказать мне, как легко импортировать функцию или как я могу добавить ES6 к этому. Изображение каталога приведено ниже:

Answer 1

не хочу использовать ES6, потому что я не очень понимаю, как он работает.

Для этого вам нужно взглянуть на стандарты, определенные для языка. Вы можете начать здесь . Большинство браузеров сегодня поддерживают функции ES6 +, такие как класс, синтаксис жирной стрелки, let, const et c.

Для полной поддержки вы должны настроить любой транспортер, который используется для преобразования последнего стандартного кода в работающий поддерживаемый код. Это означает, что он будет транслировать код в поддерживаемый код для браузеров, которые не понимают последний синтаксис.

Для этого вы можете использовать несколько инструментов, таких как:

• Webpack
• Babel
• Машинопись

et c. Typescript - это язык, который является надмножеством javascript. Он имеет все последние функции javascript, которые еще не выпущены или не поддерживаются.

Если кто-нибудь может сказать мне, как легко импортировать функцию или как я могу добавить ES6 к этому.

Смотрите, если вы хотите импортировать какую-либо функцию или класс, тогда должен быть экспортирован первым. Итак, если мы возьмем ваш пример кода, вы должны экспортировать его следующим образом:

export class ShoppingList extends React.Component {
     // class code
}

или

class ShoppingList extends React.Component {}
export { ShoppingList }; // normal export
export default ShoppingList; // default export don't need {}

В приведенном выше коде вы можете видеть два типа экспорта, первый из которых встроенный экспорт, и вы можете экспортировать его по умолчанию тоже как export default class ShoppingList ....

Во втором примере вы можете увидеть два типа экспорта:

• Обычный экспорт будет экспортирован в {} и импортирован в {}.
• Экспорт по умолчанию будет экспортирован без скобок и импортирован без скобок тоже.

Теперь вы можете импортировать его как:

import { ShoppingList } from './path/of/file'; // normal import
import ShoppingList from './path/of/file'; // default exported import    
import SList from './path/of/file'; // name it anything but works only for default exports