React渲染错误

Question

I'm learning React/Redux from Wes Bos' tutorial . I'm trying to render some html, and there's an error building it every time:

    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)

This is my reduxstagram.js file:

import React from 'react';

import { render } from 'react-dom';

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

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

Has anyone run into a similar problem, or know what I'm doing incorrectly?

Answer 1

I resolved with this configuratoin chunk for the javascript files:

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

Answer 2

You didn't setup webpack with the proper loaders to compile jsx, hence the Unexpected token . If you're new to webpack and javascript transpilers/compilers, start using something like jsbin and switch from Javascript to ES6 / Babel mode:

After you've got used to React and the jsx syntax, try learning how to setup webpack with babel.