I am new with reactjs. I read similar error post, Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled
but can't solve my problem

Whe I run npm run dev

I have an error

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 (

> 40 |       <ul>

     |       ^

  41 |         {this.state.data.map(contact => {

  42 |           return (

  43 |             <li key={contact.id}>



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.

I read this text Add @babel/preset-react but I don't understand what should i do

webpack.config.js

module.exports = {

  module: {

    rules: [

      {

        test: /.js$/,

        exclude: /node_modules/,

        use: {

          loader: "babel-loader"

        }

      }

    ]

  }

};

index.js

import React, { Component } from 'react';

import { render } from "react-dom";



class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      data: [],

      loaded: false,

      placeholder: "Loading"

    };

  }



  componentDidMount() {

    fetch("api/lead")

      .then(response => {

        if (response.status > 400) {

          return this.setState(() => {

            return { placeholder: "Something went wrong!" };

          });

        }

        return response.json();

      })

     ...