10297

Syntax error in ReactJS

I'm starting to learn ReactJS and I'm following instructions in a book on getting started. My directory structure looks like this:

app/App.js node_modules index.html package.json webpack.config.js

I think that the culprit of the problem is this error message from CLI:

ERROR in ./app/App.js Module build failed: SyntaxError: c:/code/pro-react/my-app/app/App.js: Unexpected token (6:6) 4 | render() { 5 | return ( > 6 | <h1>Hello World</h1> | ^ 7 | ); 8 | } 9 | }

The contents of App.js are:

import React from 'react'; class Hello extends React.Component { render() { return ( <h1>Hello World</h1> ); } } React.render(<Hello />, document.getElementById('root'));

Here is the contents of package.json:

{ "name": "my-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node_modules/.bin/webpack-dev-server --progress", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.4.5", "babel-loader": "^6.2.1", "webpack": "^1.12.11", "webpack-dev-server": "^1.14.1" }, "dependencies": { "react": "^0.14.6" } }

And the contents of webpack.config.js are:

module.exports = { entry: __dirname + "/app/App.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [{ test: /\.jsx?$/, loader: 'babel' }] } };

I launch the application from CLI with the command:

npm start

And when I go to http://localhost:8080 in Dev Tools there is an error message:

GET http://localhost:8080/bundle.js 404 (Not Found)

But as I said, I think that the culprit is that it doesn't like the syntax so it doesn't make the bundle.js file. Please let me know what I'm doing wrong.

Answer1:

I think it happens because you are using babel-6 without babel presets, in this case you need babel-preset-es2015 and babel-preset-react.,

# For ES6/ES2015 support npm install babel-preset-es2015 --save-dev # Fot JSX support npm install babel-preset-react --save-dev

then change webpack config

{ test: /\.jsx?$/, loader: 'babel', query: { presets: ['es2015', 'react'], } }

or instead of using query you can create .babelrc file with content

{ "presets": ["es2015", "react"] }

also you need install react-dom and use ReactDOM.render instaed or React.render

Recommend

  • Mongo Db search by indexed field
  • Renaming file extension in batch
  • for loop in batch file [duplicate]
  • Batch rename file using for loop
  • Webpack-dev-server and isomorphic react-node application
  • Print: Entry, “:CFBundleIdentifier”, Does Not Exist have tried most solutions
  • WP7 difficulties binding data to listbox itemssource - won't refresh
  • what is the purpose of “export as namespace foo”?
  • Making Google Visualization - Annotation Chart to work in GWT
  • Ruby 1.8.6 Array#uniq not removing duplicate hashes
  • How can we prepend rows to a react native list-view?
  • Configure Spring's MappingJacksonHttpMessageConverter
  • Update Google Maps traffic layer without page reloading
  • AppleScript : find open tab in safari by name and open it
  • Button click event not firing in jQuery
  • how to avoid repetitive constructor in children
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Typescript - Unable to get 'import' statement to function
  • Highlight and Bold text in JTextPane
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • how to do an event when i swipe from fragment to the other
  • Updating server-side rendering client-side
  • Change an a tag attribute in JavaScript based on screen width
  • Why winpcap requires both .lib and .dll to run?
  • Akka Routing: Reply's send to router ends up as dead letters
  • Return words with double consecutive letters
  • Python: how to group similar lists together in a list of lists?
  • Java static initializers and reflection
  • unknown Exception android
  • Django query for large number of relationships
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app
  • How to push additional view controllers onto NavigationController but keep the TabBar?