React学習中のプログラミング初心者です。
下記の動画を参考にReactでアプリをつくろうとしております。
(https://www.youtube.com/watch?v=vppVZsR6uoo&t=384s)
Appという文字の出力を期待したところ、コンソール上で図1のようなエラーが出ました。
エラー原因のご指導をお願いいたします。
(App.js) import React from 'react' function App() { return ( <div> App </div> ) } export default App
(index.jsx) import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter } from 'react-router-dom'; import App from '../components/App' document.addEventListener('DOMContentLoaded', () => { ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.querySelector('#root'), ); });
index.jsxが下記のような場合は、「Hello React!」とエラーなくメッセージが出力されていました。
(index.jsx) // Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file, // like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom // of the page. import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' const Hello = props => ( <div>Hello {props.name}!</div> ) Hello.defaultProps = { name: 'David' } Hello.propTypes = { name: PropTypes.string } document.addEventListener('DOMContentLoaded', () => { ReactDOM.render( <Hello name="React" />, document.body.appendChild(document.createElement('div')), ) })
あなたの回答
tips
プレビュー