Reactjs: Unexpected Token - node.js

Question

I'm trying to follow the tutorial here: https://facebook.github.io/react/docs/getting-started.html
Simply trying to build the following, either within Sublime Text 3, or webpack:
// ReactTest.js
var React = require('react');
var ReactDOM = require('react-dom');
console.log("Hello");
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
I've installed Sublime Text 3, as well as the following packages via Package Control, Install:
Babel for syntax highlighting
Sublime Linter (3) for error checking
Sublime Linter-contrib-eslint (an interface for eslint)
I have already installed node via homebrew:
brew install node
Used NPM to install the following:
npm install webpack -g
npm install --save react react-dom babel-preset-react babel-preset-es2015
npp install jsxhint -g
npm install -g jshint
From what I understand, this should be everything I need to run either of the two options:
Use Sublime Text 3's build: I added a new 'build system' for Sublime Text by Tools -> Build System -> New Build System and created the file:
{ "cmd" : ["/usr/local/bin/node", "$file"], "selector":"source.js" }
which is saved to me/Library/ApplicationSupport/SublimeText3/Packages/user/node.sublime.build on my osx.
I run Tools -> Build to build which results in:
/Users/me/Desktop/Test/ReactTest.js:8
<h1>Hello, world!</h1>,
^
SyntaxError: Unexpected token <
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
[Finished in 0.1s with exit code 1]
[cmd: ['/usr/local/bin/node', '/Users/me/Desktop/Test/ReactTest.js']]
[dir: /Users/me/Desktop/Test]
[path: /usr/bin:/bin:/usr/sbin:/sbin]
Also tried to do the same thing using webpack with the following command:
webpack ReactTest.js Bundle.js
Which results in:
ERROR in ./ReactTest.js
Module parse failed: /Users/me/Desktop/Test/ReactTest.js Line 8: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <h1>Hello, world!</h1>,
| document.getElementById('example')
| );
Can anyone tell me what I'm doing wrong?
EDIT: Completely new to all of these technologies. Here's a screenshot of my project in Sublime Text.
EDIT 2: The .babelrc file, which I've copied from the web:
{
"plugins": ["transform-react-jsx"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}

Answer 1

If you are using JSX in your code, you have to transpile to js using loaders in webpack.
module.exports = {
entry: 'ReactTest.js',
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
exclude : /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
Make sure you configured .babelrc in root path if you are using ES2015 syntax
copy and use the below webpack config in your webpack.config.js
run webpack in root folder
include bundle.js in your index.html.
Let me know if you face any difficulties