Нужно ли устанавливать babel, чтобы иметь возможность писать код ES6 в моем приложении Reaction?

Question

Я создал приложение реагирования и начал пытаться подключить его к серверу, подготовленному с помощью MongoDB. Всякий раз, когда я проверяю свой локальный хост, чтобы увидеть приложение реагировать, ошибка «ожидаемое выражение» продолжает появляться, хотя мой код кажется правильным.

Я создал файл с именем http-service. js с кодом, представленным ниже.

import 'whatwg-fetch';

class HttpService {
    getProducts = () = > {
        fetch('http://localhost:3000/product')
        .then(response => {
            console.log(response.json());
    })
    }
}

export default HttpService;

Затем я импортировал его в файл приложения. js, который можно увидеть ниже.

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import HttpService from "../services/http-service";

const http = new HttpService();

function App() {
  constructor(props){
      super(props);
      http.getProducts();
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Welcome to The Swag Shop
        </a>
      </header>
    </div>
  );
}

export default App;

Это изображение показывает проблемы, отображаемые в консоли.

Как мне исправить эту ошибку?

Answer 1

В вашей функции стрелки у вас есть пробел между = и >. Поэтому, пожалуйста, исправьте это.

Кроме того, если вы используете приложение create-реакции-приложение, babel уже установлен для вас из коробки.

Как это

import 'whatwg-fetch';

class HttpService {
    getProducts = () => { // remove space between = and >
        fetch('http://localhost:3000/product')
        .then(response => {
            console.log(response.json());
    })
    }
}

export default HttpService;

Answer 2

У вас есть две ошибки:

1- В вашем файле HttpService есть синтаксическая ошибка в вашей функции стрелки, пробел между = и >, должен выглядеть так:

class HttpService {
    getProducts = () => {
        fetch('http://localhost:3000/product')
        .then(response => {
            console.log(response.json());
    })
    }
}

export default HttpService;

2- в App.js вы определили конструктор в обычной функции, которая недопустима в javascript, вам нужно либо переключить App.js из функции в класс или вы можете использовать ловушки (useEffect) в вашей обычной функции, что-то вроде этого:

 React.useEffect(() => {
    http.getProducts();
  }, [])

Наконец, с create-реагировать-app вы, babel уже , поэтому вы можете использовать ES6 в своем коде.