node.js - Importing React using Webpack and JSX isn't recognised -

i'm little baffled because class has assigned 3 separate guides react , things differently. has not been made clear me elements of doing webpack, es6, , node, forgive me if describe things terribly.

i have following package.json, skipping unnecessary fields:

{     "dependencies": {         "react": "^0.14.7",         "react-dom": "^0.14.7",         "webpack": "^1.12.13"     },     "devdependencies": {         "babel-core": "^6.4.5",         "babel-loader": "^6.2.2",         "babel-preset-es2015": "^6.3.13",         "jshint": "^2.9.1",         "jshint-loader": "^0.8.3",         "node-libs-browser": "^1.0.0"     } } 

i run npm install.

now have webpack config:

"use strict"; let webpack = require('webpack');  module.exports = {     entry: ["./main.es6"],     output: {         filename: "compiled.js"     },     module: {         loaders: [             {                 test: /\.es6$/g,                 exclude: /node_modules/,                 loader: 'babel-loader'             }         ]     },     resolve: {         extensions: ['', '.js', '.es6']     },     watch: true }; 

which understand runs main.es6 , files requires/references/imports through babel loader. have .babelrc file set , can confirm work (transpiles things arrow functions, classes, etc es5).

now here's tricky part. page table of lottery drawings; react component row gets passed array of 6 numbers , appends existing table.

import react 'react'; import reactdom 'react-dom';  const drawing = props => (  <tr>      {props.numbers.map(n => <td>{n}</td>)}  </tr> );  reactdom.render(<drawing />, document.getelementsbytagname("table")[0]); 

this gets me syntaxerror exception @ moment <tr> written. kind of throws me, because in mind if react import succeeds (which apparently does) jsx should understood. 'arrow function of props' style apparently bit unusual, (a) class drawing extends react.component form has same issue , (b) it's being drilled me stateless/functional style nicer work now, , can see upsides of that.

i apologise making long post full of code samples, don't know what's important here , what's not. can't work out how correctly google issue , can't follow logic in head because stuck on "well, react imports, so... why jsx not work?"

add following line .babelrc file:

{   "presets": ["react"] } 

it'is needed transforming jsx syntax native javascript. , if haven't installed babel react preset yet, run npm install babel-preset-react.

react import succeeds (which apparently does) jsx should understood.

react not used transforming jsx syntax, done entirely babel syntax jsx plugin. , react don't use jsx in it's library files, import successful.