title: How to solve error: 'jsx' isn't currently enabled
body: <p>I am new with reactjs. I read similar error post, <a href="https://stackoverflow.com/questions/65176364/syntax-error-support-for-the-experimental-syntax-jsx-isnt-currently-enabled">Syntax Error: Support for the experimental syntax &#39;jsx&#39; isn&#39;t currently enabled</a>
  but can't solve my problem</p>
  <p>Whe I run <code>npm run dev</code></p>
  <p>I have an error</p>
  <pre><code>ERROR in ./src/index.js
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  SyntaxError: -..../frontend/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:7):
  
    38 |   render() {
    39 |     return (
  &gt; 40 |       &lt;ul&gt;
       |       ^
    41 |         {this.state.data.map(contact =&gt; {
    42 |           return (
    43 |             &lt;li key={contact.id}&gt;
  
  Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
  If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
  </code></pre>
  <p>I read this text <strong>Add @babel/preset-react</strong> but I don't understand what should i do</p>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: &quot;babel-loader&quot;
          }
        }
      ]
    }
  };
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre><code>import React, { Component } from 'react';
  import { render } from &quot;react-dom&quot;;
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [],
        loaded: false,
        placeholder: &quot;Loading&quot;
      };
    }
  
    componentDidMount() {
      fetch(&quot;api/lead&quot;)
        .then(response =&gt; {
          if (response.status &gt; 400) {
            return this.setState(() =&gt; {
              return { placeholder: &quot;Something went wrong!&quot; };
            });
          }
          return response.json();
        })
       ...
  </code></pre>