1
私はreactjsでの練習のアプリケーションに取り組んでいると私は、私もSOを通じて熟読して把握することができませんでした。このエラーを取得しています：この反応構文エラーを修正するにはどうすればよいですか？
webpack.config：
ERROR in ./App.js
Module build failed: SyntaxError: Unexpected token, expected , (6:13)
4 | render(){
5 | return (
> 6 | <li>{{this.props.name}}</li>
| ^
7 | )
8 | }
9 | }
@ ./main.js 11:11-27
これらのファイルは、 .js：
module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
package.json：
{
"name": "react-test",
"version": "1.0.0",
"description": "react test application",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "Daniel Cortes",
"license": "ISC",
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
}
}
のindex.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
<style type='text/css'>
body, input {
font-size: 24px !important;
}
</style>
</head>
<body>
<div id="app" class="container-fluid"></div>
<script src='index.js'></script>
</body>
</html>
App.js：
import React from 'react';
import ReactDOM from 'react-dom';
class Channel extends React.Component {
render(){
return (
<li>{{this.props.name}}</li>
)
}
}
export default Channel
main.js：App.jsで
import React from 'react';
import ReactDOM from 'react-dom';
import Channel from './App';
ReactDOM.render(<Channel name='Hardware Support' />, document.getElementById('app'));
これは '
となっていますが、反応はあなたが_object_のように '{this.props.name} 'のように作成しようとしていると思われます。これは明らかに無効な構文です – Hamms
これはあるプロジェクトから別のプロジェクトへのコンテキスト切り替えが過度に行われていて、その長い日が過ぎると、どうなるでしょう。 Hammsさん、ありがとうございました。私はそれを正しい答えとして確認できるような方法で投稿できますか？ – Daniel