実現したい事
・エラーの除去、抹殺
前提条件
・参考教材
→UdemyのReact教材
https://www.udemy.com/react-redux-from-beginning/learn/v4/content
・使用言語
→React
・使用パッケージ
→Atom
・細かいバージョン一覧
{ "name": "udemy_react", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "start": "webpack-dev-server --mode development --open" }, "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.11", "import-glob-loader": "^1.1.0", "node-sass": "^4.9.0", "prop-types": "^15.6.2", "react": "^16.4.1", "react-dom": "^16.4.1", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "webpack": "^4.14.0", "webpack-dev-server": "^3.1.4" }, "devDependencies": { "extract-text-webpack-plugin": "^4.0.0-beta.0", "webpack-cli": "^3.0.8" } }
エラー箇所
①src/components/app.jsx
29行目
②src/components/greeting.jsx
7行目
①
import React, { Component } from 'react'; import Greeting from './greeting'; class App extends Component { constructor(props) { super(props); this.state = { name: 'Bob', }; } handleMouseover() { this.setState({ name: 'Bob' }); } handleMouseOut() { this.setState({ name: 'Mike' }); } render() { return ( <div> onMouseOver= {() => this.handleMouseover()} onMouseOut= {() => this.handleMouseOut()} エラー→ <Greeting name={this.state.name} /> </div> ); } } export default App;
②
import
1 2function Greeting(props) { 3 return ( 4 <div props> 5Hi 6 エラー→ {props.name} 7 </div> 8 ); 9} 10 11Greeting.propTypes = { 12 name: PropTypes.string.isRequired, 13}; 14 15export default Greeting; 16
出てくるエラーメッセージ
どちらも Must use destructuring ○○○ assignment
もしかしてバージョン変更による構文エラー??と考えています。。。。
ご質問のソースコードは、教材のものをそのまま書き写したものでしょうか?ご質問に挙げている ①src/components/app.jsx の中で、render() { return ( <div> の後の、onMouseOver と onMouseOut は どのコンポーネントのイベントハンドラにもなっていないので、教材のコードを間違いなくお手元のエディタに写せているか、今一度ご確認されたほうがよいかもしれません。