質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

1589閲覧

React 構文エラーの改善

yuya1919

総合スコア8

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/07/09 00:54

実現したい事

・エラーの除去、抹殺

前提条件

・参考教材
→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

もしかしてバージョン変更による構文エラー??と考えています。。。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jun68ykt

2018/07/09 01:46 編集

ご質問のソースコードは、教材のものをそのまま書き写したものでしょうか?ご質問に挙げている ①src/components/app.jsx の中で、render() { return ( <div> の後の、onMouseOver と onMouseOut は どのコンポーネントのイベントハンドラにもなっていないので、教材のコードを間違いなくお手元のエディタに写せているか、今一度ご確認されたほうがよいかもしれません。
guest

回答1

0

<div> onMouseOver=

<div onMouseOver=
<div props>

<div>

とりあえずこれで直るのではないでしょうか?

投稿2018/07/09 11:14

HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問