AntonVirovets

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.myjson.com/bins/ftb79");
xhr.send();
console.log(JSON.parse(xhr.responseText));

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      isLoading: false,
    }
  }
  componentDidMount() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:3000/data.json', true); // замените адрес
    xhr.send();
    this.setState({ isLoading: true })

    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4) {
        return false
      }

      if (xhr.status !== 200) {
        console.log(xhr.status + ': ' + xhr.statusText)
      } else {
        this.setState({
          data: JSON.parse(xhr.responseText),
          isLoading: false,
        })
      }
    }
  }
  renderProducts() {
    const { data, isLoading } = this.state
    if (isLoading) {
      return <img src='/i/preloader.gif' alt='загружаю...' /> // рисуем прелоадер
    } else {
      return data.map(item => {
        // я здесь отрисываю все через другой компонент, вы же можете просто рисовать сразу верстку для начала
        return <ProductCard key={item.id} name={item.name} price={item.price} quantity={item.quantity} />
      })
    }
  }
  render() {
    return (
      <div className='App'>
        <div className='product-list'>
          {this.renderProducts()}
        </div>
      </div>
    )
  }
}

if (window.pageYOffset < headerBottom) {
        header.classList.remove('sticky');
        flag = true;
    } else if (window.pageYOffset > headerBottom && flag) {
        header.classList.add('sticky');
        fade(header, 2000, 50);
        flag = false;
    }

if (window.pageYOffset < headerBottom) {
        header.classList.remove('sticky');
        flag = true; // это 
    } else if (window.pageYOffset > headerBottom && flag) { // и здесь еще && flag
        header.classList.add('sticky');
        fade(header, 2000, 50);
        flag = false;
    }