mosikus

Студентам в начале курса говорила, кто хорошо в детстве играл в лайнс, тетрис и подобное, тот будет хорошо верстать.
Верстка это обычная геометрия средней школы записанная с помощью тегов и раскрашеная/подвинутая стилями. Всё.
Всякие JS и т.д. это просто следующий этап.

План действий может быть таким:
1. Берете/получаете макет
2. Внимательно рассматриваете его, мысленно разбивая на блоки. Думаете что куда может/должно растягиваться или уменьшаться при изменениях экрана и увеличении/уменьшении контента.
3. Если п.2. сразу не осилился, идете гулять или спать.
4. Возвращаетесь к п.2.
5. Верстаете понятные большие блоки, затем их заполняете. Разбивайте задачи более простые.

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

А совсем без проблем не выйдет, потому что экранов много, браузеров много, хотелок у заказчиков еще больше. Хорошо, когда эти хотелки интересные :)

Есть *иконка* черного цвета,

Было бы лучше, если бы вы приложили код файла этой иконки, чтобы на Вашем примере можно было показать решение.

но что делать, если мне нужна она белого цвета

Открыть svg-файл с помощью графического редактора или редактора кода и изменить цвет

Можно как то изменить цвет ?

Можно. В основном, цвет SVG-элементов задаётся через атрибут/свойство "fill", иногда через атрибут/свойство "stroke". В зависимости от типа фигуры.

Повторюсь, что если приложите код файла иконки, смогу показать решение на Вашем примере.

Update
Вот Вам код svg-файла с белым цветом значка

<svg height="34" viewBox="0 0 24 24" width="34" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" fill="#fff"/></svg>

А вот он же, но закодированный в Base64 (в котором Вы предоставили пример)

data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=

Можете попробывать следующее:

removeLast = () => {
    this.setState({ value: this.state.value.substring(0, this.state.value.length - 1)})
  };

и передать в последнюю кнопку <button onClick={this.removeLast}>remove</button>

Добавить в css

* {
  box-sizing: border-box;
}

{thematics.map((thematic, i, a) => (
  <div>
    <div style={style1} key={thematic.id}>
      {thematic.id}
    </div>

    {i < a.length - 1 ? <div style={style2} /> : null}
  </div>
))}

https://www.npmjs.com/package/react-detect-offline

попробуй это

https://codesandbox.io/s/heuristic-thunder-qfhn7

Я догадался только до *такого*

{this.thematics.map(thematic => (
            <div style={style} key={thematic.id}>
              {thematic.id}
            </div>
          ))}

зачем ты рендеришь оригинальный массив, надо рендерить подгружаемый массив из стейта

Дошёл до определенной точки/объекта - запрос к базе данных про новые данные, данные в стейт, рендер новых данных на страницу

infinite scroll
https://www.npmjs.com/package/react-infinite-scrol...
https://upmostly.com/tutorials/build-an-infinite-s...

constructor(props){
  super(props)
  this.state={
  isLoading: true;
}

async componentDidMount(){
  //invoke api 
  this.setState({isLoading:false})
}

}
render(){
        const {isLoading} = this.state;

        if (isLoading) {
            return (
                <div className={`spinner${isLoading ? "" : " d-none"}`}>
                    <Spinner fontSize={84} type="loading-3-quarters" />
                </div>
            );
        }

        return (
            <React.Fragment>
                ...................
            </React.Fragment>
}

setTimeout

https://jsfiddle.net/qe1rfsdm/

Переносите value из Home в родительский компонент, передаёте value и setValue в Home в качестве props. И во второй компонент тоже value передаёте. Ну и всё.

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

*стили*

@media all and (max-width: 411px) and (max-height: 731px) {
   *стили*
}

@media all and (max-width: 360px) and (max-height: 640px) {
   *стили*
}

.
При mobilefirst наоборот

const Example = () => {
  const [isLoading, setLoading] = useState(true);

  const handleOnLoad = () => {
    setLoading(false);
  };

  return (
    <>
      {isLoading && <Preloader />}
      <iframe 
        title="iframe"
        src="..."
        onLoad={handleOnLoad}
      />
    </>
  );
};

{value >= 345 && value <= 500 ? <div>ничего нет</div> : null}

будет ещё больше таких промежутков

Ну тогда делаете массив объектов, которые будут содержать два свойства - массив промежутков (и отдельных значений, если надо) и текст, который надо вывести. И фильтруете его при рендеринге. Как-то так:

const messages = [
  {
    values: [ 1, 2, 4, 8, 16, 32, 64, 128, 256, 512 ],
    message: 'hello, world!!',
  },
  {
    values: [ [ 5, 15 ], [ 100, 200 ], 333, 444, 555 ],
    message: 'fuck the world',
  },
  {
    values: [ [ 50, 150 ], [ 250, 350 ], [ 666, 999 ] ],
    message: 'fuck everything',
  }
];

...

<div>
  {messages
    .filter(n => n.values.some(v => (
      (v instanceof Array && v[0] <= value && value <= v[1]) ||
      v === value
    )))
    .map(n => <div>{n.message}</div>)
  }
</div>

На такие случаи делай управляемый компонент, подробнее здесь Документация
Ну и компонент в песочнице клик

https://codesandbox.io/embed/sweet-albattani-r6xj2...

const addNumber = number => {
    return () => {
      setValue(prevValue => {
        const newValue = prevValue + number;
        if(newValue.length > 3) return prevValue;
        return newValue;
      });
    };
  };