Fehler mit React render

Question

Ich lerne React/Redux von Wes Bos' tutorial. Ich versuche, einige html zu machen, und es gibt einen Fehler, der es jedes Mal, Gebäude:

ERROR in ./client/reduxstagram.js 
Module build failed: SyntaxError: /var/www/learn-redux/client/reduxstagram.js: Unexpected token (8:7) 
    6 | import css from './styles/style.styl'; 
    7 | 
> 8 | render(<p>hi</p>, document.getElementById('root')); 
    |  ^
    at Parser.pp.raise (/var/www/learn-redux/node_modules/babylon/lib/parser/location.js:22:13) 
    at Parser.pp.unexpected (/var/www/learn-redux/node_modules/babylon/lib/parser/util.js:89:8) 
    at Parser.pp.parseExprAtom (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:517:12) 
    at Parser.pp.parseExprSubscripts (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:272:19) 
    at Parser.pp.parseMaybeUnary (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:252:19) 
    at Parser.pp.parseExprOps (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:183:19) 
    at Parser.pp.parseMaybeConditional (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:165:19) 
    at Parser.pp.parseMaybeAssign (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:128:19) 
    at Parser.pp.parseExprListItem (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:1032:16) 
    at Parser.pp.parseCallExpressionArguments (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:348:20) 

Das ist meine reduxstagram.js Datei:

import React from 'react'; 

import { render } from 'react-dom'; 

// Import css 
import css from './styles/style.styl'; 

render(<p>hi</p>, document.getElementById('root')); 

Hat jemand in ein ähnliches Problem auftreten, oder weiß was mache ich falsch?

Answer 1

Sie haben das Webpack nicht mit den richtigen Loadern eingerichtet, um jsx zu kompilieren, daher die Unexpected token. Wenn Sie webpack neu sind und Javascript transpilers/Compiler, starten Sie so etwas wie jsbin und Switch von Javascript zu ES6/Babel-Modus:

Nachdem Sie haben verwendet zu reagieren und die jsx Syntax, versuche zu lernen wie man webpack mit babel einrichtet.

Answer 2

ich mit diesem configuratoin Brocken für die Javascript-Dateien behoben:

// js 
{ 
    test: /\.js$/, 
    loader: 'babel', 
    query: { 
    presets: ['es2015', 'react'] 
    }, 
    include: path.join(__dirname, 'client') 
}