React渲染出错

Question

我从Wes Bos' tutorial学习React / Redux。我试图渲染一些HTML，每次构建它都会出错：

    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)

这是我的reduxstagram.js文件：

import React from 'react';

import { render } from 'react-dom';

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

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

有没有人遇到过类似的问题，或者知道我做错了什么？

Answer 1

我用这个configuratoin块解决了javascript文件：

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

Answer 2

您没有使用适当的加载程序设置webpack来编译jsx，因此Unexpected token。如果您是webpack和javascript转换器/编译器的新手，请开始使用类似jsbin的东西并从Javascript切换到ES6 / Babel模式：

在您习惯了React和jsx语法后，尝试学习如何使用babel设置webpack。