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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Bash on Ubuntu on Windows

Bash on Ubuntu on Windowsは、Windows Subsystem for Linux(WSL)の非推奨の名称。Windows10およびWindows Server上でLinuxのバイナリ実行ファイルをネイティブ実行するための互換レイヤーです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

1004閲覧

【React】シンタックスエラーを解消したい

Noboru_Ryu

総合スコア4

Bash on Ubuntu on Windows

Bash on Ubuntu on Windowsは、Windows Subsystem for Linux(WSL)の非推奨の名称。Windows10およびWindows Server上でLinuxのバイナリ実行ファイルをネイティブ実行するための互換レイヤーです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2020/10/27 14:13

編集2020/10/27 15:08

##問題詳細

UseState関数を勉強しています。以下のコードでローカルサーバーを立てようとした所、シンタックスエラーが発生しました。エラー文にはindex.jsの内容も表示されていますが、index.jsは変更していません。
作成したファイルはBlog.jsxとArticle.jsxの二つです。
よろしければ、問題と解決方法を教えてください。

##PC環境
・Windows10
・WSL
・Linux
・Ubuntu
・bash
・curl v7.68
・nodebrew v8.94
・Node v14.04
・create-react-app
・VisualStuidoCode v1.501

##エラー内容

React

1Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): 2SyntaxError: /home/tatsumip/tatsumiproject/myapp/src/Blog.jsx: 'return' outside of function (34:8)

##該当するコード
#####Blog.jsx

React

1import React from 'react'; 2import Article from './Article'; 3 4const Blog = () => { 5 return ( 6 <> 7 <Article 8 title={"Reactの使い方"} 9 /> 10 </> 11 ) 12}; 13 14export default Blog;

#####Article.jsx

React

1import React, {useState} from 'react'; 2 3const Article = (props) => { 4 const[isPublished, togglePublished] = useState(false); 5 6 return ( 7 <div> 8 <h2>{props.title}</h2> 9 <label htmlFor="check">公開状態</label> 10 <input type="checkbox" checked={isPublished} id="check" onClick={() => togglePublished(!isPublished)} /> 11 </div> 12 ) 13}; 14 15export default Article;

#####App.js

React

1import logo from './logo.svg'; 2import './App.css'; 3 4function App() { 5 return ( 6 <div className="App"> 7 <header className="App-header"> 8 <img src={logo} className="App-logo" alt="logo" /> 9 <p> 10 Edit <code>src/App.js</code> and save to reload. 11 </p> 12 <a 13 className="App-link" 14 href="https://reactjs.org" 15 target="_blank" 16 rel="noopener noreferrer" 17 > 18 Learn React 19 </a> 20 </header> 21 </div> 22 ); 23} 24 25export default App;

##関連事項
ターミナルにWarningが記されていたので、該当するファイルIndex.jsも追記します。
#####Warning内容
src/index.js
Line 4:8: 'App' is defined but never used no-unused-vars

#####Index.js

React

1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import './index.css'; 4import App from './App'; 5import reportWebVitals from './reportWebVitals'; 6import Blog from './Blog'; 7 8ReactDOM.render( 9 <React.StrictMode> 10 <Blog /> 11 </React.StrictMode>, 12 document.getElementById('root') 13); 14 15reportWebVitals(); 16

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

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

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

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

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

yuxki

2020/10/27 14:50

renderメソッドを定義しているソースがあれば追記して下さい。 create-react-appを利用したのであれば、renderメソッドを定義しているApp.jsがあるかもしれません。
Noboru_Ryu

2020/10/27 15:00

お返事ありがとうございます! create-react-appを利用しました。 srcディレクトリ内にApp.jsがあったので追記しました!
guest

回答1

0

自己解決

PCを再起動したらバグが直りました。
再起動する前に各jsxファイルは更新していましたが、その時はバグは解消されませんでした。

投稿2020/10/28 02:33

Noboru_Ryu

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問