title: Reactjs: Unexpected Token
body: <p>I'm trying to follow the tutorial here: <a href="https://facebook.github.io/react/docs/getting-started.html" rel="nofollow noreferrer">https://facebook.github.io/react/docs/getting-started.html</a></p>
  
  <p>Simply trying to build the following, either within Sublime Text 3, or webpack:</p>
  
  <pre><code>// ReactTest.js
  var React = require('react');
  var ReactDOM = require('react-dom');
  
  console.log("Hello");
  
  ReactDOM.render(
    &lt;h1&gt;Hello, world!&lt;/h1&gt;,
    document.getElementById('example')
  );
  </code></pre>
  
  <p>I've installed Sublime Text 3, as well as the following packages via Package Control, Install:</p>
  
  <ul>
  <li>Babel for syntax highlighting</li>
  <li>Sublime Linter (3) for error checking</li>
  <li>Sublime Linter-contrib-eslint (an interface for eslint)</li>
  </ul>
  
  <p>I have already installed node via homebrew: </p>
  
  <pre><code>brew install node
  </code></pre>
  
  <p>Used NPM to install the following:</p>
  
  <pre><code>npm install webpack -g
  npm install --save react react-dom babel-preset-react babel-preset-es2015
  npp install jsxhint -g
  npm install -g jshint
  </code></pre>
  
  <p>From what I understand, this should be everything I need to run <em>either of the two</em> options:</p>
  
  <hr>
  
  <ol>
  <li><p>Use Sublime Text 3's build:  I added a new 'build system' for Sublime Text by <em>Tools -> Build System -> New Build System</em> and created the file:</p>
  
  <p>{ "cmd" : ["/usr/local/bin/node", "$file"], "selector":"source.js" }</p></li>
  </ol>
  
  <p>which is saved to <em>me/Library/ApplicationSupport/SublimeText3/Packages/user/node.sublime.build</em> on my osx.</p>
  
  <p>I run <em>Tools -> Build</em> to build which results in:</p>
  
  <pre><code>/Users/me/Desktop/Test/ReactTest.js:8
    &lt;h1&gt;Hello, world!&lt;/h1&gt;,
    ^
  SyntaxError: Unexpected token &lt;
      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]
  </code></pre>
  
  <hr>
  
  <ol start="2">
  <li><p>Also tried to do the same thing using webpack with the following command:</p>
  
  <p>webpack ReactTest.js Bundle.js</p></li>
  </ol>
  
  <p>Which results in:</p>
  
  <pre><code>ERROR in ./ReactTest.js
  Module parse failed: /Users/me/Desktop/Test/ReactTest.js Line 8: Unexpected token &lt;
  You may need an appropriate loader to handle this file type.
  | 
  | ReactDOM.render(
  |   &lt;h1&gt;Hello, world!&lt;/h1&gt;,
  |   document.getElementById('example')
  | );
  </code></pre>
  
  <p>Can anyone tell me what I'm doing wrong?</p>
  
  <p>EDIT: Completely new to all of these technologies.  Here's a screenshot of my project in Sublime Text.</p>
  
  <p><a href="https://i.stack.imgur.com/5UGR5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5UGR5.png" alt="enter image description here"></a></p>
  
  <p>EDIT 2:  The .babelrc file, which I've copied from the web:</p>
  
  <pre><code>{
    "plugins": ["transform-react-jsx"],
    "ignore": [
      "foo.js",
      "bar/**/*.js"
    ]
  }
  </code></pre>