Я новичок в React. Хотите разработать приложение, используя небольшие компоненты в отдельных файлах и импортировать их в App.js
Я попытался, но не смог понять, что я делаю неправильно.
Вот мой html:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<script type="text/babel" src="js/App.js"></script>
</body>
</html>
Это мой App.js: (из каталога js/)
import MyComp from 'components/MyComp';
class App extends React.Component {
render() {
return (
<MyComp />
)
}
}
ReactDOM.render(
<App />,
document.body
);
И это мой MyComp.js (из каталога js/components/)
class MyComp extends React.Component{
render() {
return (
<div>
Hello World!
</div>
)
}
}
export default MyComp;
Если я попробую таким образом, я ничего не вижу. Если я создаю класс MyComp
в App.js, он работает как шарм.
Любое предложение, что я делаю неправильно?