title: Which is the appropriate loader to handle React JSX?
body: <p>I am trying to make webpack4 to produce the output folder with the main.js, but keeps returning "may need an appropriate loader to handle this file type" error and point to the jsx lines. How can I make webpack transform the jsx, or what kind of loader do I need? </p>
  
  <p>I thought that the problem might be that the @babel/preset-env and @babel/preset-react are outdated or I need to use a more recent version but it looks like this isn't the case.</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>module.exports = {
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: { loader: 'babel-loader' }
              }
          ]
      }
  };
  </code></pre>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
      "presets": [ "@babel/preset-env", "@babel/preset-react" ]
  }
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "github_battle",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "dev": "webpack --mode development",
      "build": "webpack --mode production"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@babel/core": "^7.2.2",
      "@babel/preset-env": "^7.2.3",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.5",
      "react": "^16.7.0",
      "react-dom": "^16.7.0",
      "webpack": "^4.28.3",
      "webpack-cli": "^3.2.0"
    }
  } 
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class App extends React.Component {
      render (
          &lt;p&gt;React in here&lt;/p&gt;
      );
  };
  
  export default App;
  
  ReactDOM.render(
      &lt;App /&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import App from './App';
  </code></pre>
  
  <p>I expect the react code to be properly transformed and bundled into dist/main.js.</p>
  
  <p><strong>The actual result:</strong></p>
  
  <pre><code>&gt; github_battle@1.0.0 dev D:\WORK\github_battle
  &gt; webpack --mode development
  
  Hash: a88a6be7f290c6ab30a1
  Version: webpack 4.28.3
  Time: 186ms
  Built at: 01/04/2019 9:06:55 AM
      Asset      Size  Chunks             Chunk Names
  main.js  4.58 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [./src/App.js] 238 bytes {main} [built] [failed] [1 error]
  [./src/index.js] 28 bytes {main} [built]
  
  ERROR in ./src/App.js 7:8
  Module parse failed: Unexpected token (7:8)
  You may need an appropriate loader to handle this file type.
  | class App extends React.Component {
  |     render (
  &gt;         &lt;p&gt;React in here&lt;/p&gt;
  |     );
  | };
   @ ./src/index.js 2:0-24
  npm ERR! code ELIFECYCLE
  npm ERR! errno 2
  npm ERR! github_battle@1.0.0 dev: `webpack --mode development`
  npm ERR! Exit status 2
  npm ERR!
  npm ERR! Failed at the github_battle@1.0.0 dev script.
  npm ERR! This is probably not a problem with npm. There is likely 
  additional logging output above.
  </code></pre>