Mark

Можно через transform для псевдоэлементов. Для достижения нужного наклона просто поиграться со значением skew.



Просто нужно держать в голове, что ширина псевдоэлементов должна быть равна углу наклона, а марджин половине этого значения (например,

width: 30%; transform: skewX(30deg); margin-left: -15%;

).

Если для нормальных браузеров, то так и через один псевдоэлемент:


Если для браузеров а-ля IE11 (+ всех нормальных), то так и через два псевдоэлемента:

Слухай 'Front-end програмист' что надо адаптировать ?

Вроде того

let cls = localStorage.getItem('body-class');

if (cls) {
  $("body").addClass(cls);
}

$(".btn").click(function(){
    $("body").addClass("active");
    localStorage.setItem('body-class', 'active');
});

Ну и при повторном клике убирать класс, если нужно

Делается всего три или четыре брейкпоинта, зависит от проекта. Зачем каждые 100 пикселей дергать?

Еще можно хранить состояние чекбоксов в локалсторадже.

Ваш вопрос к самому React прямого отношения не имеет. Вопрос скорей о типах модулей и способах их использования. По ссылке вы подключаете UMD модуль, и React будет доступен как глобальный объект React или window.React. Работать с таким модулем можно хоть из тега script в html файле:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script>
  function Greetings(props) {
    return React.createElement('div', null, 'Hello, World!');
  }
</script>

Когда же вы устанавливаете React как npm пакет. В папку node_modules устанавливается 5 версий модуля React:
2 версии CommonJS модулей: production и development и 3 версии UMD: production, development и prоfiling.
Сам пакет по-умолчанию экспортирует CommonJS модуль. Версия экспортируется в зависимости от переменной окружения process.env.NODE_ENV:

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

Вы используете именно CommonJS модуль, когда пишите в коде импорт из корня пакета:
import React from 'react';
Как правило, современной frontend разработке используется модульная система ES6, экспериментальный синтаксис и такой код требует трансляции в кроссбраузерный код и сборки. Стандартом на этом поприще сейчас являются babel и webpack.

Советую почитать эту статью от Yandex об эволюции модульных систем JavaScript.

overflow-y

а еще чтобы ловить ошибки это надо заворачивать в try catch, если не хочется писать fetch().then().catch()

try {
  const api_url = await fetch(`api.openweathermap.org/data/2.5/weather?q=Kiev,ua&appid=${API_KEY}&units=metric`);
  const data = await api_url.json();
} catch (err) {
  console.log('какая-то ошибка', err)
}

ну и да, наверняка https://api.openweather....

ps / не забывай, что в таком случае твой api key увидят все прямо в браузере, надо делать запрос на "закрытые апи" на стороне сервера, а из реакта делать запрос на свой сервер типа fetch('/api/getweather')

Может, стоит добавить что-то вроде https:// в начало url'а, на который вы пытаетесь сделать запрос?