Я пытаюсь создать доказательство концепции, используя Lerna и React.
Вот репозиторий:
https://github.com/SeanPlusPlus/lerna-react
Пока все вышеперечисленное работает, если вы запустите это:
git clone [email protected]:SeanPlusPlus/lerna-react.git
cd lerna-react
lerna bootstrap
cd packages/app
yarn start
В packages/app/src/App.js
я импортирую и визуализирую компонент Headline
(обратите внимание, я использовал create-react-app
для создания этого каталога):
import React, { Component } from 'react';
import logo from './logo.svg';
import Headline from 'headline';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
{ Headline }
</div>
);
}
}
export default App;
Компонент Headline
в packages/headline/index.jsx
использует функцию React.createElement
:
import React from 'react';
// const Headline = () => (
// <h1>Hello Lerna + React</h1>
// )
const Headline = React.createElement('div', null,
React.createElement('h1', null, 'Hello Lerna')
)
export default Headline
И, как видите, функция, возвращающая JSX, закомментирована.
... Теперь ... Если я обновлю этот файл, чтобы вместо него возвращался JSX:
import React from 'react';
const Headline = () => (
<h1>Hello Lerna + React</h1>
)
export default Headline
Мое приложение возвращает эту ошибку:
Failed to compile.
../headline/index.jsx
Module parse failed: Unexpected token (4:2)
You may need an appropriate loader to handle this file type.
|
| const Headline = () => (
| <h1>Hello Lerna + React</h1>
| )
Как мне экспортировать JSX из моего Headline
компонента?