##問題詳細
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
回答1件
あなたの回答
tips
プレビュー